From 73ba43c2ecbf81ce0a807982de7974c8e414d68e Mon Sep 17 00:00:00 2001 From: 6543 <6543@obermui.de> Date: Wed, 11 Mar 2020 23:40:35 +0100 Subject: [PATCH 1/9] [UI] Sortable Tables Header By Click --- templates/admin/emails/list.tmpl | 4 +- templates/admin/org/list.tmpl | 6 +-- templates/admin/repo/list.tmpl | 10 ++-- templates/admin/user/list.tmpl | 6 +-- web_src/js/features/tablesort.js | 66 ++++++++++++++++++++++++ web_src/js/index.js | 2 + web_src/less/_base.less | 11 ++++ web_src/less/themes/theme-arc-green.less | 2 +- 8 files changed, 93 insertions(+), 14 deletions(-) create mode 100644 web_src/js/features/tablesort.js diff --git a/templates/admin/emails/list.tmpl b/templates/admin/emails/list.tmpl index e9bef3c3b8ce5..e62367b8635a2 100644 --- a/templates/admin/emails/list.tmpl +++ b/templates/admin/emails/list.tmpl @@ -33,9 +33,9 @@ - + - + diff --git a/templates/admin/org/list.tmpl b/templates/admin/org/list.tmpl index fc512f2ad92b1..8baadad9921ee 100644 --- a/templates/admin/org/list.tmpl +++ b/templates/admin/org/list.tmpl @@ -16,12 +16,12 @@
{{.i18n.Tr "admin.users.name"}}{{.i18n.Tr "admin.users.name"}} {{.i18n.Tr "admin.users.full_name"}}{{.i18n.Tr "email"}}{{.i18n.Tr "email"}} {{.i18n.Tr "admin.emails.primary"}} {{.i18n.Tr "admin.emails.activated"}}
- - + + - + diff --git a/templates/admin/repo/list.tmpl b/templates/admin/repo/list.tmpl index f946b8a461b94..1087bc91c3541 100644 --- a/templates/admin/repo/list.tmpl +++ b/templates/admin/repo/list.tmpl @@ -13,15 +13,15 @@
ID{{.i18n.Tr "admin.orgs.name"}}ID{{.i18n.Tr "admin.orgs.name"}} {{.i18n.Tr "admin.orgs.teams"}} {{.i18n.Tr "admin.orgs.members"}} {{.i18n.Tr "admin.users.repos"}}{{.i18n.Tr "admin.users.created"}}{{.i18n.Tr "admin.users.created"}} {{.i18n.Tr "admin.users.edit"}}
- + - + - - + + - + diff --git a/templates/admin/user/list.tmpl b/templates/admin/user/list.tmpl index 72b7ccd1917e5..0ca7bb25ab6d1 100644 --- a/templates/admin/user/list.tmpl +++ b/templates/admin/user/list.tmpl @@ -16,15 +16,15 @@
IDID {{.i18n.Tr "admin.repos.owner"}}{{.i18n.Tr "admin.repos.name"}}{{.i18n.Tr "admin.repos.name"}} {{.i18n.Tr "admin.repos.private"}} {{.i18n.Tr "admin.repos.watches"}}{{.i18n.Tr "admin.repos.stars"}}{{.i18n.Tr "admin.repos.forks"}}{{.i18n.Tr "admin.repos.stars"}}{{.i18n.Tr "admin.repos.forks"}} {{.i18n.Tr "admin.repos.issues"}}{{.i18n.Tr "admin.repos.size"}}{{.i18n.Tr "admin.repos.size"}} {{.i18n.Tr "admin.users.created"}} {{.i18n.Tr "admin.notices.op"}}
- - + + - + diff --git a/web_src/js/features/tablesort.js b/web_src/js/features/tablesort.js new file mode 100644 index 0000000000000..20b494dd234bd --- /dev/null +++ b/web_src/js/features/tablesort.js @@ -0,0 +1,66 @@ +import {svg} from '../utils.js'; + +export default function initTableSort() { + $('th[data-sortt-asc]').each(function () { + // get data + const {sorttAsc, sorttDesc, sorttDefault} = this.dataset; + + // add onclick event + $(this).on('click', () => { + tableSort(sorttAsc, sorttDesc, sorttDefault); + }); + + // add arrow to column + const arrow = getArrow(sorttAsc, sorttDesc, sorttDefault); + // if function got a match ... + if (arrow !== false) { + $(this).append(arrow); + } + }); +} + +function tableSort(normSort, revSort, isDefault) { + if (!normSort) return false; + if (!revSort) revSort = ''; + + const url = new URL(window.location); + let urlSort = url.searchParams.get('sort'); + if (urlSort === null && isDefault) urlSort = normSort; + + + if (urlSort !== normSort) { + url.searchParams.set('sort', normSort); + } else if (revSort !== '') { + url.searchParams.set('sort', revSort); + } + + window.location.replace(url.href); +} + +// create global function with main routine +function getArrow(normSort, revSort, isDefault) { + // normSort is needed + if (!normSort) return false; + + // default values of optional parameters + if (!revSort) revSort = ''; + + // get sort param from url + const urlSort = (new URL(window.location)).searchParams.get('sort'); + + if (urlSort === null && isDefault) { + // if sort is sorted as default add arrow tho this table header + if (isDefault) return svg('octicon-triangle-down', 16); + } else { + // if sort arg is in url test if it correlates with column header sort arguments + if (urlSort === normSort) { + // the table is sorted with this header normal + return svg('octicon-triangle-down', 16); + } if (urlSort === revSort) { + // the table is sorted with this header reverse + return svg('octicon-triangle-up', 16); + } + // the table is NOT sorted with this header + return false; + } +} diff --git a/web_src/js/index.js b/web_src/js/index.js index cd13372b428f1..d1e039610f83e 100644 --- a/web_src/js/index.js +++ b/web_src/js/index.js @@ -16,6 +16,7 @@ import initGitGraph from './features/gitgraph.js'; import initClipboard from './features/clipboard.js'; import initUserHeatmap from './features/userheatmap.js'; import createDropzone from './features/dropzone.js'; +import initTableSort from './features/tablesort.js'; import ActivityTopAuthors from './components/ActivityTopAuthors.vue'; const {AppSubUrl, StaticUrlPrefix, csrf} = window.config; @@ -2559,6 +2560,7 @@ $(document).ready(async () => { initRepoStatusChecker(); initTemplateSearch(); initContextPopups(); + initTableSort(); // Repo clone url. if ($('#repo-clone-url').length > 0) { diff --git a/web_src/less/_base.less b/web_src/less/_base.less index b9000b69169e4..4c6b942c3b4ea 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -1217,3 +1217,14 @@ i.icon.centerlock { .ui.attached.segment + .ui.attached.header { margin-top: 1rem; } + +table th[data-sortt-asc], +table th[data-sortt-desc] { + &:hover { + background: rgba(0, 0, 0, .1) !important; + cursor: pointer !important; + } + .svg { + margin-left: .25rem; + } +} diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less index fdae5ecdc1def..2584770a97cf6 100644 --- a/web_src/less/themes/theme-arc-green.less +++ b/web_src/less/themes/theme-arc-green.less @@ -495,7 +495,7 @@ a.ui.basic.green.label:hover { .ui.table thead th, .ui.table > thead > tr > th { - background: #404552 !important; + background: #404552; color: #dbdbdb !important; } From ce2f6abf74006ec9020482c307782c8dcdaf43e5 Mon Sep 17 00:00:00 2001 From: 6543 <6543@obermui.de> Date: Thu, 12 Mar 2020 00:21:21 +0100 Subject: [PATCH 2/9] get rid of padding above header --- web_src/less/_admin.less | 2 -- 1 file changed, 2 deletions(-) diff --git a/web_src/less/_admin.less b/web_src/less/_admin.less index 5fb0712368de0..fcb8c3b36afed 100644 --- a/web_src/less/_admin.less +++ b/web_src/less/_admin.less @@ -6,8 +6,6 @@ font-size: 13px; &:not(.striped) { - padding-top: 5px; - thead { th:last-child { padding-right: 5px !important; From 36ebfdbf99be358482ce874cb8feb741f6c30cb0 Mon Sep 17 00:00:00 2001 From: 6543 <6543@obermui.de> Date: Thu, 12 Mar 2020 01:48:23 +0100 Subject: [PATCH 3/9] restart CI From 271ba554bacca4400254d2cb1ab99b6aa1d27ee7 Mon Sep 17 00:00:00 2001 From: 6543 <6543@obermui.de> Date: Mon, 22 Jun 2020 09:28:57 +0200 Subject: [PATCH 4/9] fix lint --- web_src/js/features/tablesort.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/features/tablesort.js b/web_src/js/features/tablesort.js index 20b494dd234bd..8742dad9a1795 100644 --- a/web_src/js/features/tablesort.js +++ b/web_src/js/features/tablesort.js @@ -56,7 +56,7 @@ function getArrow(normSort, revSort, isDefault) { if (urlSort === normSort) { // the table is sorted with this header normal return svg('octicon-triangle-down', 16); - } if (urlSort === revSort) { + } else if (urlSort === revSort) { // the table is sorted with this header reverse return svg('octicon-triangle-up', 16); } From b963964a9ec2cb47d0adeb48577ae0c68e894e9f Mon Sep 17 00:00:00 2001 From: 6543 <6543@obermui.de> Date: Mon, 22 Jun 2020 10:12:15 +0200 Subject: [PATCH 5/9] convert getArrow JS to SortArrow go func --- modules/templates/helper.go | 31 ++++++++++++++++++++++++-- web_src/js/features/tablesort.js | 37 -------------------------------- 2 files changed, 29 insertions(+), 39 deletions(-) diff --git a/modules/templates/helper.go b/modules/templates/helper.go index 374f13af0f511..ff974aba9f651 100644 --- a/modules/templates/helper.go +++ b/modules/templates/helper.go @@ -298,8 +298,30 @@ func NewFuncMap() []template.FuncMap { } return false }, - "svg": func(icon string, size int) template.HTML { - return template.HTML(fmt.Sprintf(``, icon, size, size, icon)) + "svg": SVG, + "SortArrow": func(normSort, revSort, urlSort string, isDefault bool) template.HTML { + // if needed + if len(normSort) == 0 || len(urlSort) == 0 { + return "" + } + + if len(urlSort) == 0 && isDefault { + // if sort is sorted as default add arrow tho this table header + if isDefault { + return SVG("octicon-triangle-down", 16) + } + } else { + // if sort arg is in url test if it correlates with column header sort arguments + if urlSort == normSort { + // the table is sorted with this header normal + return SVG("octicon-triangle-down", 16) + } else if urlSort == revSort { + // the table is sorted with this header reverse + return SVG("octicon-triangle-up", 16) + } + } + // the table is NOT sorted with this header + return "" }, }} } @@ -410,6 +432,11 @@ func NewTextFuncMap() []texttmpl.FuncMap { }} } +// SVG render icons +func SVG(icon string, size int) template.HTML { + return template.HTML(fmt.Sprintf(``, icon, size, size, icon)) +} + // Safe render raw as HTML func Safe(raw string) template.HTML { return template.HTML(raw) diff --git a/web_src/js/features/tablesort.js b/web_src/js/features/tablesort.js index 8742dad9a1795..98116480ec9eb 100644 --- a/web_src/js/features/tablesort.js +++ b/web_src/js/features/tablesort.js @@ -1,5 +1,3 @@ -import {svg} from '../utils.js'; - export default function initTableSort() { $('th[data-sortt-asc]').each(function () { // get data @@ -9,13 +7,6 @@ export default function initTableSort() { $(this).on('click', () => { tableSort(sorttAsc, sorttDesc, sorttDefault); }); - - // add arrow to column - const arrow = getArrow(sorttAsc, sorttDesc, sorttDefault); - // if function got a match ... - if (arrow !== false) { - $(this).append(arrow); - } }); } @@ -36,31 +27,3 @@ function tableSort(normSort, revSort, isDefault) { window.location.replace(url.href); } - -// create global function with main routine -function getArrow(normSort, revSort, isDefault) { - // normSort is needed - if (!normSort) return false; - - // default values of optional parameters - if (!revSort) revSort = ''; - - // get sort param from url - const urlSort = (new URL(window.location)).searchParams.get('sort'); - - if (urlSort === null && isDefault) { - // if sort is sorted as default add arrow tho this table header - if (isDefault) return svg('octicon-triangle-down', 16); - } else { - // if sort arg is in url test if it correlates with column header sort arguments - if (urlSort === normSort) { - // the table is sorted with this header normal - return svg('octicon-triangle-down', 16); - } else if (urlSort === revSort) { - // the table is sorted with this header reverse - return svg('octicon-triangle-up', 16); - } - // the table is NOT sorted with this header - return false; - } -} From 15a5feecd63911e30ba17ad3955b2997895821e9 Mon Sep 17 00:00:00 2001 From: 6543 <6543@obermui.de> Date: Mon, 22 Jun 2020 10:30:58 +0200 Subject: [PATCH 6/9] addopt SortArrow funct --- templates/admin/emails/list.tmpl | 10 ++++++++-- templates/admin/org/list.tmpl | 12 +++++++++--- templates/admin/repo/list.tmpl | 22 +++++++++++++++++----- templates/admin/user/list.tmpl | 12 +++++++++--- 4 files changed, 43 insertions(+), 13 deletions(-) diff --git a/templates/admin/emails/list.tmpl b/templates/admin/emails/list.tmpl index e0c7061e68896..39a200942d512 100644 --- a/templates/admin/emails/list.tmpl +++ b/templates/admin/emails/list.tmpl @@ -33,9 +33,15 @@
ID{{.i18n.Tr "admin.users.name"}}ID{{.i18n.Tr "admin.users.name"}} {{.i18n.Tr "email"}} {{.i18n.Tr "admin.users.activated"}} {{.i18n.Tr "admin.users.admin"}} {{.i18n.Tr "admin.users.restricted"}} {{.i18n.Tr "admin.users.repos"}} {{.i18n.Tr "admin.users.created"}}{{.i18n.Tr "admin.users.last_login"}}{{.i18n.Tr "admin.users.last_login"}} {{.i18n.Tr "admin.users.edit"}}
- + - + diff --git a/templates/admin/org/list.tmpl b/templates/admin/org/list.tmpl index 8baadad9921ee..4f6bc50342ba9 100644 --- a/templates/admin/org/list.tmpl +++ b/templates/admin/org/list.tmpl @@ -16,12 +16,18 @@
{{.i18n.Tr "admin.users.name"}} + {{.i18n.Tr "admin.users.name"}} + {{SortArrow "username" "reverseusername" $.SortType false}} + {{.i18n.Tr "admin.users.full_name"}}{{.i18n.Tr "email"}} + {{.i18n.Tr "email"}} + {{SortArrow "email" "reverseemail" $.SortType true}} + {{.i18n.Tr "admin.emails.primary"}} {{.i18n.Tr "admin.emails.activated"}}
- - + + - + diff --git a/templates/admin/repo/list.tmpl b/templates/admin/repo/list.tmpl index 1087bc91c3541..b9b88653829cd 100644 --- a/templates/admin/repo/list.tmpl +++ b/templates/admin/repo/list.tmpl @@ -13,15 +13,27 @@
ID{{.i18n.Tr "admin.orgs.name"}}ID{{SortArrow "oldest" "newest" $.SortType false}} + {{.i18n.Tr "admin.orgs.name"}} + {{SortArrow "alphabetically" "reversealphabetically" $.SortType true}} + {{.i18n.Tr "admin.orgs.teams"}} {{.i18n.Tr "admin.orgs.members"}} {{.i18n.Tr "admin.users.repos"}}{{.i18n.Tr "admin.users.created"}} + {{.i18n.Tr "admin.users.created"}} + {{SortArrow "recentupdate" "leastupdate" $.SortType false}} + {{.i18n.Tr "admin.users.edit"}}
- + - + - - + + - + diff --git a/templates/admin/user/list.tmpl b/templates/admin/user/list.tmpl index 0ca7bb25ab6d1..3442d04195c4a 100644 --- a/templates/admin/user/list.tmpl +++ b/templates/admin/user/list.tmpl @@ -16,15 +16,21 @@
IDID{{SortArrow "oldest" "newest" $.SortType false}} {{.i18n.Tr "admin.repos.owner"}}{{.i18n.Tr "admin.repos.name"}} + {{.i18n.Tr "admin.repos.name"}} + {{SortArrow "alphabetically" "reversealphabetically" $.SortType false}} + {{.i18n.Tr "admin.repos.private"}} {{.i18n.Tr "admin.repos.watches"}}{{.i18n.Tr "admin.repos.stars"}}{{.i18n.Tr "admin.repos.forks"}} + {{.i18n.Tr "admin.repos.stars"}} + {{SortArrow "moststars" "feweststars" $.SortType false}} + + {{.i18n.Tr "admin.repos.forks"}} + {{SortArrow "mostforks" "fewestforks" $.SortType false}} + {{.i18n.Tr "admin.repos.issues"}}{{.i18n.Tr "admin.repos.size"}} + {{.i18n.Tr "admin.repos.size"}} + {{SortArrow "size" "reversesize" $.SortType false}} + {{.i18n.Tr "admin.users.created"}} {{.i18n.Tr "admin.notices.op"}}
- - + + - + From 092f1c6cbf50249e60ac7f3af0318dcae011fe07 Mon Sep 17 00:00:00 2001 From: 6543 <6543@obermui.de> Date: Tue, 23 Jun 2020 20:29:45 +0200 Subject: [PATCH 7/9] suggestions from @silverwind - tablesort.js Co-authored-by: silverwind --- web_src/js/features/tablesort.js | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/web_src/js/features/tablesort.js b/web_src/js/features/tablesort.js index 98116480ec9eb..e31ba09252c2e 100644 --- a/web_src/js/features/tablesort.js +++ b/web_src/js/features/tablesort.js @@ -1,13 +1,10 @@ export default function initTableSort() { - $('th[data-sortt-asc]').each(function () { - // get data - const {sorttAsc, sorttDesc, sorttDefault} = this.dataset; - - // add onclick event - $(this).on('click', () => { + for (const header of document.querySelectorAll('th[data-sortt-asc]') || []) { + const {sorttAsc, sorttDesc, sorttDefault} = header.dataset; + header.addEventListener('onclick', () => { tableSort(sorttAsc, sorttDesc, sorttDefault); }); - }); + } } function tableSort(normSort, revSort, isDefault) { @@ -16,13 +13,9 @@ function tableSort(normSort, revSort, isDefault) { const url = new URL(window.location); let urlSort = url.searchParams.get('sort'); - if (urlSort === null && isDefault) urlSort = normSort; - + if (!urlSort && isDefault) urlSort = normSort; - if (urlSort !== normSort) { - url.searchParams.set('sort', normSort); - } else if (revSort !== '') { - url.searchParams.set('sort', revSort); + url.searchParams.set('sort', urlSort !== normSort ? normSort : revSort); } window.location.replace(url.href); From 0a69d03e119c00019722bd3e62d07bfd1cc365d7 Mon Sep 17 00:00:00 2001 From: 6543 <6543@obermui.de> Date: Tue, 23 Jun 2020 20:32:44 +0200 Subject: [PATCH 8/9] Update web_src/js/features/tablesort.js Co-authored-by: silverwind --- web_src/js/features/tablesort.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/web_src/js/features/tablesort.js b/web_src/js/features/tablesort.js index e31ba09252c2e..0df476f11fb60 100644 --- a/web_src/js/features/tablesort.js +++ b/web_src/js/features/tablesort.js @@ -16,7 +16,5 @@ function tableSort(normSort, revSort, isDefault) { if (!urlSort && isDefault) urlSort = normSort; url.searchParams.set('sort', urlSort !== normSort ? normSort : revSort); - } - window.location.replace(url.href); } From ed644f7c5e9b4da91701dc5fd0230027f715cb6d Mon Sep 17 00:00:00 2001 From: 6543 <6543@obermui.de> Date: Tue, 23 Jun 2020 20:41:18 +0200 Subject: [PATCH 9/9] Update web_src/js/features/tablesort.js Co-authored-by: silverwind --- web_src/js/features/tablesort.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/features/tablesort.js b/web_src/js/features/tablesort.js index 0df476f11fb60..17da2985a0988 100644 --- a/web_src/js/features/tablesort.js +++ b/web_src/js/features/tablesort.js @@ -1,7 +1,7 @@ export default function initTableSort() { for (const header of document.querySelectorAll('th[data-sortt-asc]') || []) { const {sorttAsc, sorttDesc, sorttDefault} = header.dataset; - header.addEventListener('onclick', () => { + header.addEventListener('click', () => { tableSort(sorttAsc, sorttDesc, sorttDefault); }); }
ID{{.i18n.Tr "admin.users.name"}}ID{{SortArrow "oldest" "newest" .SortType false}} + {{.i18n.Tr "admin.users.name"}} + {{SortArrow "alphabetically" "reversealphabetically" $.SortType true}} + {{.i18n.Tr "email"}} {{.i18n.Tr "admin.users.activated"}} {{.i18n.Tr "admin.users.admin"}} {{.i18n.Tr "admin.users.restricted"}} {{.i18n.Tr "admin.users.repos"}} {{.i18n.Tr "admin.users.created"}}{{.i18n.Tr "admin.users.last_login"}} + {{.i18n.Tr "admin.users.last_login"}} + {{SortArrow "recentupdate" "leastupdate" $.SortType false}} + {{.i18n.Tr "admin.users.edit"}}