third_party
/
gitea
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[UI] Sortable Tables Header By Click (#7980)

Browse Source 
* [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>
tokarchuk/v1.17
6543 4 years ago committed by GitHub
parent ae20de7771
commit c86478ec47
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 106 additions and 18 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 31
      modules/templates/helper.go
  2. 10
      templates/admin/emails/list.tmpl
  3. 12
      templates/admin/org/list.tmpl
  4. 22
      templates/admin/repo/list.tmpl
  5. 12
      templates/admin/user/list.tmpl
  6. 20
      web_src/js/features/tablesort.js
  7. 2
      web_src/js/index.js
  8. 2
      web_src/less/_admin.less
  9. 11
      web_src/less/_base.less
  10. 2
      web_src/less/themes/theme-arc-green.less

31
modules/templates/helper.go
Unescape View File

@ -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)

10
templates/admin/emails/list.tmpl
Unescape View File

@ -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>

12
templates/admin/org/list.tmpl
Unescape View File

@ -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>

22
templates/admin/repo/list.tmpl
Unescape View File

@ -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>

12
templates/admin/user/list.tmpl
Unescape View File

@ -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>

20
web_src/js/features/tablesort.js
Unescape View 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);
}

2
web_src/js/index.js
Unescape View File

@ -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();

2
web_src/less/_admin.less
Unescape View File

@ -6,8 +6,6 @@
font-size: 13px;
&:not(.striped) {
padding-top: 5px;
thead {
th:last-child {
padding-right: 5px !important;

11
web_src/less/_base.less
Unescape View File

@ -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) {

2
web_src/less/themes/theme-arc-green.less
Unescape View File

@ -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;
}

Write Preview
Loading…
Cancel
Save