From c86478ec47366dfb7081cc2eb2790a0af1880eca Mon Sep 17 00:00:00 2001 From: 6543 <6543@obermui.de> Date: Thu, 25 Jun 2020 00:23:05 +0200 Subject: [PATCH] [UI] Sortable Tables Header By Click (#7980) * [UI] Sortable Tables Header By Click * get rid of padding above header * restart CI * fix lint * convert getArrow JS to SortArrow go func * addopt SortArrow funct * suggestions from @silverwind - tablesort.js Co-authored-by: silverwind * Update web_src/js/features/tablesort.js Co-authored-by: silverwind * Update web_src/js/features/tablesort.js Co-authored-by: silverwind Co-authored-by: silverwind --- modules/templates/helper.go | 31 ++++++++++++++++++++++-- templates/admin/emails/list.tmpl | 10 ++++++-- templates/admin/org/list.tmpl | 12 ++++++--- templates/admin/repo/list.tmpl | 22 +++++++++++++---- templates/admin/user/list.tmpl | 12 ++++++--- web_src/js/features/tablesort.js | 20 +++++++++++++++ web_src/js/index.js | 2 ++ web_src/less/_admin.less | 2 -- web_src/less/_base.less | 11 +++++++++ web_src/less/themes/theme-arc-green.less | 2 +- 10 files changed, 106 insertions(+), 18 deletions(-) create mode 100644 web_src/js/features/tablesort.js diff --git a/modules/templates/helper.go b/modules/templates/helper.go index 374f13af0f..ff974aba9f 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/templates/admin/emails/list.tmpl b/templates/admin/emails/list.tmpl index 64b7603e2e..39a200942d 100644 --- a/templates/admin/emails/list.tmpl +++ b/templates/admin/emails/list.tmpl @@ -33,9 +33,15 @@ - + - + diff --git a/templates/admin/org/list.tmpl b/templates/admin/org/list.tmpl index fc512f2ad9..4f6bc50342 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 f946b8a461..b9b8865382 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 72b7ccd191..3442d04195 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"}}
- - + + - + diff --git a/web_src/js/features/tablesort.js b/web_src/js/features/tablesort.js new file mode 100644 index 0000000000..17da2985a0 --- /dev/null +++ b/web_src/js/features/tablesort.js @@ -0,0 +1,20 @@ +export default function initTableSort() { + for (const header of document.querySelectorAll('th[data-sortt-asc]') || []) { + const {sorttAsc, sorttDesc, sorttDefault} = header.dataset; + header.addEventListener('click', () => { + tableSort(sorttAsc, sorttDesc, sorttDefault); + }); + } +} + +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 && isDefault) urlSort = normSort; + + url.searchParams.set('sort', urlSort !== normSort ? normSort : revSort); + window.location.replace(url.href); +} diff --git a/web_src/js/index.js b/web_src/js/index.js index 6b435edd0f..37cb2a3988 100644 --- a/web_src/js/index.js +++ b/web_src/js/index.js @@ -15,6 +15,7 @@ import initUserHeatmap from './features/userheatmap.js'; import initServiceWorker from './features/serviceworker.js'; import attachTribute from './features/tribute.js'; import createDropzone from './features/dropzone.js'; +import initTableSort from './features/tablesort.js'; import highlight from './features/highlight.js'; import ActivityTopAuthors from './components/ActivityTopAuthors.vue'; import {initNotificationsTable, initNotificationCount} from './features/notification.js'; @@ -2450,6 +2451,7 @@ $(document).ready(async () => { initRepoStatusChecker(); initTemplateSearch(); initContextPopups(); + initTableSort(); initNotificationsTable(); initNotificationCount(); diff --git a/web_src/less/_admin.less b/web_src/less/_admin.less index 9184ed76ef..5bca054d71 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; diff --git a/web_src/less/_base.less b/web_src/less/_base.less index a4a0cefcd0..0f4f8bcd6d 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -1223,6 +1223,17 @@ i.icon.centerlock { 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; + } +} + /* limit width of all direct dropdown menu children */ /* https://github.com/go-gitea/gitea/pull/10835 */ .dropdown:not(.selection) > .menu:not(.review-box) > *:not(.header) { diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less index 529ceeb6e8..885889c3ac 100644 --- a/web_src/less/themes/theme-arc-green.less +++ b/web_src/less/themes/theme-arc-green.less @@ -479,7 +479,7 @@ a.ui.basic.green.label:hover { .ui.table thead th, .ui.table > thead > tr > th { - background: #404552 !important; + background: #404552; color: #dbdbdb !important; }
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"}}