mirror of
https://github.com/go-gitea/gitea.git
synced 2024-09-06 23:44:20 -04:00
[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 <me@silverwind.io> * Update web_src/js/features/tablesort.js Co-authored-by: silverwind <me@silverwind.io> * Update web_src/js/features/tablesort.js Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: silverwind <me@silverwind.io>
This commit is contained in:
parent
ae20de7771
commit
c86478ec47
@ -298,8 +298,30 @@ func NewFuncMap() []template.FuncMap {
|
|||||||
}
|
}
|
||||||
return false
|
return false
|
||||||
},
|
},
|
||||||
"svg": func(icon string, size int) template.HTML {
|
"svg": SVG,
|
||||||
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))
|
"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
|
// Safe render raw as HTML
|
||||||
func Safe(raw string) template.HTML {
|
func Safe(raw string) template.HTML {
|
||||||
return template.HTML(raw)
|
return template.HTML(raw)
|
||||||
|
@ -33,9 +33,15 @@
|
|||||||
<table class="ui very basic striped table">
|
<table class="ui very basic striped table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<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 "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.primary"}}</th>
|
||||||
<th>{{.i18n.Tr "admin.emails.activated"}}</th>
|
<th>{{.i18n.Tr "admin.emails.activated"}}</th>
|
||||||
</tr>
|
</tr>
|
||||||
|
@ -16,12 +16,18 @@
|
|||||||
<table class="ui very basic striped table">
|
<table class="ui very basic striped table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>ID</th>
|
<th data-sortt-asc="oldest" data-sortt-desc="newest">ID{{SortArrow "oldest" "newest" $.SortType false}}</th>
|
||||||
<th>{{.i18n.Tr "admin.orgs.name"}}</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.teams"}}</th>
|
||||||
<th>{{.i18n.Tr "admin.orgs.members"}}</th>
|
<th>{{.i18n.Tr "admin.orgs.members"}}</th>
|
||||||
<th>{{.i18n.Tr "admin.users.repos"}}</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>
|
<th>{{.i18n.Tr "admin.users.edit"}}</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
|
@ -13,15 +13,27 @@
|
|||||||
<table class="ui very basic striped table">
|
<table class="ui very basic striped table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<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.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.private"}}</th>
|
||||||
<th>{{.i18n.Tr "admin.repos.watches"}}</th>
|
<th>{{.i18n.Tr "admin.repos.watches"}}</th>
|
||||||
<th>{{.i18n.Tr "admin.repos.stars"}}</th>
|
<th data-sortt-asc="moststars" data-sortt-desc="feweststars">
|
||||||
<th>{{.i18n.Tr "admin.repos.forks"}}</th>
|
{{.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.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.users.created"}}</th>
|
||||||
<th>{{.i18n.Tr "admin.notices.op"}}</th>
|
<th>{{.i18n.Tr "admin.notices.op"}}</th>
|
||||||
</tr>
|
</tr>
|
||||||
|
@ -16,15 +16,21 @@
|
|||||||
<table class="ui very basic striped table">
|
<table class="ui very basic striped table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>ID</th>
|
<th data-sortt-asc="oldest" data-sortt-desc="newest">ID{{SortArrow "oldest" "newest" .SortType false}}</th>
|
||||||
<th>{{.i18n.Tr "admin.users.name"}}</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 "email"}}</th>
|
||||||
<th>{{.i18n.Tr "admin.users.activated"}}</th>
|
<th>{{.i18n.Tr "admin.users.activated"}}</th>
|
||||||
<th>{{.i18n.Tr "admin.users.admin"}}</th>
|
<th>{{.i18n.Tr "admin.users.admin"}}</th>
|
||||||
<th>{{.i18n.Tr "admin.users.restricted"}}</th>
|
<th>{{.i18n.Tr "admin.users.restricted"}}</th>
|
||||||
<th>{{.i18n.Tr "admin.users.repos"}}</th>
|
<th>{{.i18n.Tr "admin.users.repos"}}</th>
|
||||||
<th>{{.i18n.Tr "admin.users.created"}}</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>
|
<th>{{.i18n.Tr "admin.users.edit"}}</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
|
20
web_src/js/features/tablesort.js
Normal file
20
web_src/js/features/tablesort.js
Normal file
@ -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);
|
||||||
|
}
|
@ -15,6 +15,7 @@ import initUserHeatmap from './features/userheatmap.js';
|
|||||||
import initServiceWorker from './features/serviceworker.js';
|
import initServiceWorker from './features/serviceworker.js';
|
||||||
import attachTribute from './features/tribute.js';
|
import attachTribute from './features/tribute.js';
|
||||||
import createDropzone from './features/dropzone.js';
|
import createDropzone from './features/dropzone.js';
|
||||||
|
import initTableSort from './features/tablesort.js';
|
||||||
import highlight from './features/highlight.js';
|
import highlight from './features/highlight.js';
|
||||||
import ActivityTopAuthors from './components/ActivityTopAuthors.vue';
|
import ActivityTopAuthors from './components/ActivityTopAuthors.vue';
|
||||||
import {initNotificationsTable, initNotificationCount} from './features/notification.js';
|
import {initNotificationsTable, initNotificationCount} from './features/notification.js';
|
||||||
@ -2450,6 +2451,7 @@ $(document).ready(async () => {
|
|||||||
initRepoStatusChecker();
|
initRepoStatusChecker();
|
||||||
initTemplateSearch();
|
initTemplateSearch();
|
||||||
initContextPopups();
|
initContextPopups();
|
||||||
|
initTableSort();
|
||||||
initNotificationsTable();
|
initNotificationsTable();
|
||||||
initNotificationCount();
|
initNotificationCount();
|
||||||
|
|
||||||
|
@ -6,8 +6,6 @@
|
|||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
|
|
||||||
&:not(.striped) {
|
&:not(.striped) {
|
||||||
padding-top: 5px;
|
|
||||||
|
|
||||||
thead {
|
thead {
|
||||||
th:last-child {
|
th:last-child {
|
||||||
padding-right: 5px !important;
|
padding-right: 5px !important;
|
||||||
|
@ -1223,6 +1223,17 @@ i.icon.centerlock {
|
|||||||
margin-top: 1rem;
|
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 */
|
/* limit width of all direct dropdown menu children */
|
||||||
/* https://github.com/go-gitea/gitea/pull/10835 */
|
/* https://github.com/go-gitea/gitea/pull/10835 */
|
||||||
.dropdown:not(.selection) > .menu:not(.review-box) > *:not(.header) {
|
.dropdown:not(.selection) > .menu:not(.review-box) > *:not(.header) {
|
||||||
|
@ -479,7 +479,7 @@ a.ui.basic.green.label:hover {
|
|||||||
|
|
||||||
.ui.table thead th,
|
.ui.table thead th,
|
||||||
.ui.table > thead > tr > th {
|
.ui.table > thead > tr > th {
|
||||||
background: #404552 !important;
|
background: #404552;
|
||||||
color: #dbdbdb !important;
|
color: #dbdbdb !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user