Skip to content

Commit dd6e8ab

Browse files
wxiaoguangwxiaoguang
authored
Improve "language stats" UI (#26968)
Before: * The layout is quite complex * The UI flickers when switch the stats (https://try.gitea.io/) After: * Simplify the code * The UI doesn't flicker
1 parent a20e0af commit dd6e8ab

File tree

5 files changed

+62
-144
lines changed

5 files changed

+62
-144
lines changed

‎templates/repo/sub_menu.tmpl‎

Lines changed: 32 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,44 @@
11
{{if and (not .HideRepoInfo) (not .IsBlame)}}
2-
<div class="ui segments repository-summary{{if and (.Permission.CanRead $.UnitTypeCode) (not .IsEmptyRepo) .LanguageStats}} repository-summary-language-stats{{end}} gt-mt-2 gt-mb-0">
2+
<div class="ui segments repository-summary gt-mt-2 gt-mb-0">
33
<div class="ui segment sub-menu repository-menu">
4-
<div class="ui two horizontal center list">
5-
{{if and (.Permission.CanRead $.UnitTypeCode) (not .IsEmptyRepo)}}
6-
<div class="item{{if .PageIsCommits}} active{{end}}">
7-
<a class="flex-text-inline" href="{{.RepoLink}}/commits/{{.BranchNameSubURL}}">{{svg "octicon-history"}} <b>{{.locale.PrettyNumber .CommitsCount}}</b> {{.locale.TrN .CommitsCount "repo.commit" "repo.commits"}}</a>
8-
</div>
9-
<div class="item{{if .PageIsBranches}} active{{end}}">
10-
<a class="flex-text-inline" href="{{.RepoLink}}/branches">{{svg "octicon-git-branch"}} <b>{{.locale.PrettyNumber .BranchesCount}}</b> {{.locale.TrN .BranchesCount "repo.branch" "repo.branches"}}</a>
11-
</div>
12-
{{if $.Permission.CanRead $.UnitTypeCode}}
13-
<div class="item{{if .PageIsTagList}} active{{end}}">
14-
<a class="flex-text-inline" href="{{.RepoLink}}/tags">{{svg "octicon-tag"}} <b>{{.locale.PrettyNumber .NumTags}}</b> {{.locale.TrN .NumTags "repo.tag" "repo.tags"}}</a>
15-
</div>
16-
{{end}}
17-
<div class="item" {{if not (eq .Repository.Size 0)}}data-tooltip-content="{{.Repository.SizeDetailsString}}"{{end}}>
18-
{{$fileSizeFormatted := FileSize .Repository.Size}}{{/* the formatted string is always "{val} {unit}" */}}
19-
{{$fileSizeFields := StringUtils.Split $fileSizeFormatted " "}}
20-
<span class="flex-text-inline">{{svg "octicon-database"}} <b>{{.locale.PrettyNumber (index $fileSizeFields 0)}}</b> {{index $fileSizeFields 1}}</span>
21-
</div>
4+
{{if and (.Permission.CanRead $.UnitTypeCode) (not .IsEmptyRepo)}}
5+
<a class="item muted {{if .PageIsCommits}}active{{end}}" href="{{.RepoLink}}/commits/{{.BranchNameSubURL}}">
6+
{{svg "octicon-history"}} <b>{{.locale.PrettyNumber .CommitsCount}}</b> {{.locale.TrN .CommitsCount "repo.commit" "repo.commits"}}
7+
</a>
8+
<a class="item muted {{if .PageIsBranches}}active{{end}}" href="{{.RepoLink}}/branches">
9+
{{svg "octicon-git-branch"}} <b>{{.locale.PrettyNumber .BranchesCount}}</b> {{.locale.TrN .BranchesCount "repo.branch" "repo.branches"}}
10+
</a>
11+
{{if $.Permission.CanRead $.UnitTypeCode}}
12+
<a class="item muted {{if .PageIsTagList}}active{{end}}" href="{{.RepoLink}}/tags">
13+
{{svg "octicon-tag"}} <b>{{.locale.PrettyNumber .NumTags}}</b> {{.locale.TrN .NumTags "repo.tag" "repo.tags"}}
14+
</a>
2215
{{end}}
23-
</div>
16+
<span class="item not-mobile" {{if not (eq .Repository.Size 0)}}data-tooltip-content="{{.Repository.SizeDetailsString}}"{{end}}>
17+
{{$fileSizeFormatted := FileSize .Repository.Size}}{{/* the formatted string is always "{val} {unit}" */}}
18+
{{$fileSizeFields := StringUtils.Split $fileSizeFormatted " "}}
19+
{{svg "octicon-database"}} <b>{{.locale.PrettyNumber (index $fileSizeFields 0)}}</b> {{index $fileSizeFields 1}}
20+
</span>
21+
{{end}}
2422
</div>
2523
{{if and (.Permission.CanRead $.UnitTypeCode) (not .IsEmptyRepo) .LanguageStats}}
2624
<div class="ui segment sub-menu language-stats-details gt-hidden">
27-
<div class="ui horizontal center list">
28-
{{range .LanguageStats}}
29-
<div class="item gt-df gt-ac gt-jc">
30-
<i class="color-icon gt-mr-3" style="background-color: {{.Color}}"></i>
31-
<span class="gt-font-semibold gt-mr-3">
32-
{{if eq .Language "other"}}
33-
{{$.locale.Tr "repo.language_other"}}
34-
{{else}}
35-
{{.Language}}
36-
{{end}}
37-
</span>
38-
{{.Percentage}}%
39-
</div>
40-
{{end}}
25+
{{range .LanguageStats}}
26+
<div class="item">
27+
<i class="color-icon" style="background-color: {{.Color}}"></i>
28+
<span class="gt-font-semibold">
29+
{{if eq .Language "other"}}
30+
{{$.locale.Tr "repo.language_other"}}
31+
{{else}}
32+
{{.Language}}
33+
{{end}}
34+
</span>
35+
{{.Percentage}}%
4136
</div>
37+
{{end}}
4238
</div>
43-
<a class="ui segment language-stats">
39+
<a class="ui segment language-stats show-panel toggle" data-panel=".repository-summary > .sub-menu">
4440
{{range .LanguageStats}}
45-
<div class="bar" style="width: {{.Percentage}}%; background-color: {{.Color}}" data-tooltip-placement="top" data-tooltip-content={{.Language}}>&nbsp;</div>
41+
<div class="bar" style="width: {{.Percentage}}%; background-color: {{.Color}}" data-tooltip-placement="top" data-tooltip-content={{.Language}}></div>
4642
{{end}}
4743
</a>
4844
{{end}}

‎web_src/css/repo.css‎

Lines changed: 24 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
.repository .data-table .line-num,
22
.repository .diff-file-box .file-body.file-code .lines-num,
3-
.repository .diff-file-box .code-diff tbody tr .lines-type-marker,
4-
.repository .repository-summary .segment.language-stats {
5-
-webkit-touch-callout: none;
6-
-webkit-user-select: none;
3+
.repository .diff-file-box .code-diff tbody tr .lines-type-marker {
74
user-select: none;
85
}
96

@@ -1943,47 +1940,6 @@
19431940
border-bottom: 1px solid var(--color-warning-border);
19441941
}
19451942

1946-
.repository .ui.segment.sub-menu {
1947-
padding: 7px;
1948-
line-height: 0;
1949-
}
1950-
1951-
.repository .ui.segment.sub-menu .list {
1952-
width: 100%;
1953-
display: flex;
1954-
align-items: stretch;
1955-
}
1956-
1957-
.repository .ui.segment.sub-menu .list .item {
1958-
width: 100%;
1959-
color: var(--color-text);
1960-
display: flex;
1961-
align-items: center;
1962-
justify-content: center;
1963-
}
1964-
1965-
.repository .ui.segment.sub-menu .list .item:first-of-type {
1966-
border-radius: var(--border-radius) 0 0 var(--border-radius);
1967-
padding-left: 0.25rem;
1968-
}
1969-
1970-
.repository .ui.segment.sub-menu .list .item:last-of-type {
1971-
border-radius: 0 var(--border-radius) var(--border-radius) 0;
1972-
padding-right: 0.25rem;
1973-
}
1974-
1975-
.repository .ui.segment.sub-menu .list .item a {
1976-
color: var(--color-text);
1977-
}
1978-
1979-
.repository .ui.segment.sub-menu .list .item a:hover {
1980-
color: var(--color-primary-light-2);
1981-
}
1982-
1983-
.repository .ui.segment.sub-menu .list .item.active {
1984-
background: var(--color-secondary);
1985-
}
1986-
19871943
.repository .segment.reactions.dropdown .menu,
19881944
.repository .select-reaction.dropdown .menu {
19891945
right: 0 !important;
@@ -2081,49 +2037,39 @@
20812037
}
20822038

20832039
.repository .repository-summary {
2084-
box-shadow: none !important;
2085-
}
2086-
2087-
.repository .repository-summary .segment.language-stats-details,
2088-
.repository .repository-summary .segment.repository-summary {
2089-
border-top: none;
2090-
background: none;
2040+
box-shadow: none;
20912041
}
20922042

2093-
.repository .repository-summary .segment.language-stats-details .item {
2094-
white-space: nowrap;
2043+
.repository .repository-summary .segment.sub-menu {
2044+
border: none;
2045+
display: flex;
2046+
align-items: center;
2047+
padding: 0 0.5em; /* make the UI look better for narrow (mobile) view */
2048+
overflow: hidden;
20952049
}
20962050

2097-
.repository .repository-summary .segment.language-stats {
2098-
padding: 0;
2099-
height: 11px;
2051+
.repository .repository-summary .sub-menu .item {
2052+
flex: 1;
2053+
height: 30px;
2054+
line-height: var(--line-height-default);
21002055
display: flex;
2101-
white-space: nowrap;
2102-
width: 100%;
2103-
border-radius: 0;
2056+
align-items: center;
2057+
justify-content: center;
2058+
gap: 0.25em;
2059+
padding: 0 0.25em;
21042060
}
21052061

2106-
@media (max-width: 767.98px) {
2107-
.repository .repository-summary .segment.language-stats {
2108-
display: none;
2109-
}
2062+
.repository .repository-summary .sub-menu .item.active {
2063+
background: var(--color-secondary);
21102064
}
21112065

2112-
.repository .repository-summary .segment.language-stats .bar {
2113-
white-space: nowrap;
2114-
border: 0;
2066+
.repository .repository-summary .segment.language-stats {
2067+
display: flex;
21152068
padding: 0;
2116-
margin: 0;
2117-
height: 100%;
2118-
}
2119-
2120-
.repository .repository-menu {
2121-
padding: 0 !important;
2122-
}
2123-
2124-
.repository .repository-menu .item {
2125-
padding-top: 9px !important;
2126-
padding-bottom: 9px !important;
2069+
height: 10px;
2070+
white-space: nowrap;
2071+
border-radius: 0 0 3px 3px !important;
2072+
overflow: hidden;
21272073
}
21282074

21292075
#cite-repo-modal #citation-panel {
@@ -2924,18 +2870,6 @@ tbody.commit-list {
29242870
height: 100%;
29252871
}
29262872

2927-
/* prevent page shaking on language bar click */
2928-
.repository-summary-language-stats {
2929-
height: 48px;
2930-
overflow: hidden;
2931-
}
2932-
2933-
@media (max-width: 767.98px) {
2934-
.repository-summary-language-stats {
2935-
height: auto;
2936-
}
2937-
}
2938-
29392873
.ui.form .right .ui.button {
29402874
margin-left: 0.25em;
29412875
margin-right: 0;

‎web_src/js/features/common-global.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -388,9 +388,9 @@ export function initGlobalButtons() {
388388
e.preventDefault();
389389
});
390390

391-
$('.show-panel.button').on('click', function (e) {
392-
// a '.show-panel.button' can show a panel, by `data-panel="selector"`
393-
// if the button is a "toggle" button, it toggles the panel
391+
$('.show-panel').on('click', function (e) {
392+
// a '.show-panel' element can show a panel, by `data-panel="selector"`
393+
// if it has "toggle" class, it toggles the panel
394394
e.preventDefault();
395395
const sel = $(this).attr('data-panel');
396396
if (this.classList.contains('toggle')) {
@@ -400,8 +400,8 @@ export function initGlobalButtons() {
400400
}
401401
});
402402

403-
$('.hide-panel.button').on('click', function (e) {
404-
// a `.hide-panel.button` can hide a panel, by `data-panel="selector"` or `data-panel-closest="selector"`
403+
$('.hide-panel').on('click', function (e) {
404+
// a `.hide-panel` element can hide a panel, by `data-panel="selector"` or `data-panel-closest="selector"`
405405
e.preventDefault();
406406
let sel = $(this).attr('data-panel');
407407
if (sel) {

‎web_src/js/features/repo-common.js‎

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import $ from 'jquery';
2-
import {hideElem, showElem, toggleElem} from '../utils/dom.js';
2+
import {hideElem, showElem} from '../utils/dom.js';
33

44
const {csrfToken} = window.config;
55

@@ -91,13 +91,3 @@ export function initRepoCommonFilterSearchDropdown(selector) {
9191
message: {noResults: $dropdown.attr('data-no-results')},
9292
});
9393
}
94-
95-
export function initRepoCommonLanguageStats() {
96-
// Language stats
97-
if ($('.language-stats').length > 0) {
98-
$('.language-stats').on('click', (e) => {
99-
e.preventDefault();
100-
toggleElem($('.language-stats-details, .repository-menu'));
101-
});
102-
}
103-
}

‎web_src/js/features/repo-legacy.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import {htmlEscape} from 'escape-goat';
1111
import {initRepoBranchTagSelector} from '../components/RepoBranchTagSelector.vue';
1212
import {
1313
initRepoCloneLink, initRepoCommonBranchOrTagDropdown, initRepoCommonFilterSearchDropdown,
14-
initRepoCommonLanguageStats,
1514
} from './repo-common.js';
1615
import {initCitationFileCopyContent} from './citation.js';
1716
import {initCompLabelEdit} from './comp/LabelEdit.js';
@@ -525,7 +524,6 @@ export function initRepository() {
525524

526525
initRepoCloneLink();
527526
initCitationFileCopyContent();
528-
initRepoCommonLanguageStats();
529527
initRepoSettingBranches();
530528

531529
// Issues

0 commit comments

Comments
 (0)