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(`<svg class="svg %s" width="%d" height="%d" aria-hidden="true"><use xlink:href="#%s" /></svg>`, 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(`<svg class="svg %s" width="%d" height="%d" aria-hidden="true"><use xlink:href="#%s" /></svg>`, 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 @@
<table class="ui very basic striped table">
<thead>
<tr>
- <th>{{.i18n.Tr "admin.users.name"}}</th>
+ <th data-sortt-asc="username" data-sortt-desc="reverseusername">
+ {{.i18n.Tr "admin.users.name"}}
+ {{SortArrow "username" "reverseusername" $.SortType false}}
+ </th>
<th>{{.i18n.Tr "admin.users.full_name"}}</th>
- <th>{{.i18n.Tr "email"}}</th>
+ <th data-sortt-asc="email" data-sortt-desc="reverseemail" data-sortt-default="true">
+ {{.i18n.Tr "email"}}
+ {{SortArrow "email" "reverseemail" $.SortType true}}
+ </th>
<th>{{.i18n.Tr "admin.emails.primary"}}</th>
<th>{{.i18n.Tr "admin.emails.activated"}}</th>
</tr>
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 @@
<table class="ui very basic striped table">
<thead>
<tr>
- <th>ID</th>
- <th>{{.i18n.Tr "admin.orgs.name"}}</th>
+ <th data-sortt-asc="oldest" data-sortt-desc="newest">ID{{SortArrow "oldest" "newest" $.SortType false}}</th>
+ <th data-sortt-asc="alphabetically" data-sortt-desc="reversealphabetically" data-sortt-default="true">
+ {{.i18n.Tr "admin.orgs.name"}}
+ {{SortArrow "alphabetically" "reversealphabetically" $.SortType true}}
+ </th>
<th>{{.i18n.Tr "admin.orgs.teams"}}</th>
<th>{{.i18n.Tr "admin.orgs.members"}}</th>
<th>{{.i18n.Tr "admin.users.repos"}}</th>
- <th>{{.i18n.Tr "admin.users.created"}}</th>
+ <th data-sortt-asc="recentupdate" data-sortt-desc="leastupdate">
+ {{.i18n.Tr "admin.users.created"}}
+ {{SortArrow "recentupdate" "leastupdate" $.SortType false}}
+ </th>
<th>{{.i18n.Tr "admin.users.edit"}}</th>
</tr>
</thead>
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 @@
<table class="ui very basic striped table">
<thead>
<tr>
- <th>ID</th>
+ <th data-sortt-asc="oldest" data-sortt-desc="newest">ID{{SortArrow "oldest" "newest" $.SortType false}}</th>
<th>{{.i18n.Tr "admin.repos.owner"}}</th>
- <th>{{.i18n.Tr "admin.repos.name"}}</th>
+ <th data-sortt-asc="alphabetically" data-sortt-desc="reversealphabetically">
+ {{.i18n.Tr "admin.repos.name"}}
+ {{SortArrow "alphabetically" "reversealphabetically" $.SortType false}}
+ </th>
<th>{{.i18n.Tr "admin.repos.private"}}</th>
<th>{{.i18n.Tr "admin.repos.watches"}}</th>
- <th>{{.i18n.Tr "admin.repos.stars"}}</th>
- <th>{{.i18n.Tr "admin.repos.forks"}}</th>
+ <th data-sortt-asc="moststars" data-sortt-desc="feweststars">
+ {{.i18n.Tr "admin.repos.stars"}}
+ {{SortArrow "moststars" "feweststars" $.SortType false}}
+ </th>
+ <th data-sortt-asc="mostforks" data-sortt-desc="fewestforks">
+ {{.i18n.Tr "admin.repos.forks"}}
+ {{SortArrow "mostforks" "fewestforks" $.SortType false}}
+ </th>
<th>{{.i18n.Tr "admin.repos.issues"}}</th>
- <th>{{.i18n.Tr "admin.repos.size"}}</th>
+ <th data-sortt-asc="size" data-sortt-desc="reversesize">
+ {{.i18n.Tr "admin.repos.size"}}
+ {{SortArrow "size" "reversesize" $.SortType false}}
+ </th>
<th>{{.i18n.Tr "admin.users.created"}}</th>
<th>{{.i18n.Tr "admin.notices.op"}}</th>
</tr>
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 @@
<table class="ui very basic striped table">
<thead>
<tr>
- <th>ID</th>
- <th>{{.i18n.Tr "admin.users.name"}}</th>
+ <th data-sortt-asc="oldest" data-sortt-desc="newest">ID{{SortArrow "oldest" "newest" .SortType false}}</th>
+ <th data-sortt-asc="alphabetically" data-sortt-desc="reversealphabetically" data-sortt-default="true">
+ {{.i18n.Tr "admin.users.name"}}
+ {{SortArrow "alphabetically" "reversealphabetically" $.SortType true}}
+ </th>
<th>{{.i18n.Tr "email"}}</th>
<th>{{.i18n.Tr "admin.users.activated"}}</th>
<th>{{.i18n.Tr "admin.users.admin"}}</th>
<th>{{.i18n.Tr "admin.users.restricted"}}</th>
<th>{{.i18n.Tr "admin.users.repos"}}</th>
<th>{{.i18n.Tr "admin.users.created"}}</th>
- <th>{{.i18n.Tr "admin.users.last_login"}}</th>
+ <th data-sortt-asc="recentupdate" data-sortt-desc="leastupdate">
+ {{.i18n.Tr "admin.users.last_login"}}
+ {{SortArrow "recentupdate" "leastupdate" $.SortType false}}
+ </th>
<th>{{.i18n.Tr "admin.users.edit"}}</th>
</tr>
</thead>
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;
}