From dd6e8ab57bedf94cacec176b28420d5cb25fc0e9 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Sun, 10 Sep 2023 18:27:23 +0800 Subject: [PATCH] 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 --- templates/repo/sub_menu.tmpl | 68 ++++++++-------- web_src/css/repo.css | 114 ++++++--------------------- web_src/js/features/common-global.js | 10 +-- web_src/js/features/repo-common.js | 12 +-- web_src/js/features/repo-legacy.js | 2 - 5 files changed, 62 insertions(+), 144 deletions(-) diff --git a/templates/repo/sub_menu.tmpl b/templates/repo/sub_menu.tmpl index da5f37fa05..3a1400575c 100644 --- a/templates/repo/sub_menu.tmpl +++ b/templates/repo/sub_menu.tmpl @@ -1,48 +1,44 @@ {{if and (not .HideRepoInfo) (not .IsBlame)}} -
+
-
- {{if and (.Permission.CanRead $.UnitTypeCode) (not .IsEmptyRepo)}} -
- {{svg "octicon-history"}} {{.locale.PrettyNumber .CommitsCount}} {{.locale.TrN .CommitsCount "repo.commit" "repo.commits"}} -
-
- {{svg "octicon-git-branch"}} {{.locale.PrettyNumber .BranchesCount}} {{.locale.TrN .BranchesCount "repo.branch" "repo.branches"}} -
- {{if $.Permission.CanRead $.UnitTypeCode}} -
- {{svg "octicon-tag"}} {{.locale.PrettyNumber .NumTags}} {{.locale.TrN .NumTags "repo.tag" "repo.tags"}} -
- {{end}} -
- {{$fileSizeFormatted := FileSize .Repository.Size}}{{/* the formatted string is always "{val} {unit}" */}} - {{$fileSizeFields := StringUtils.Split $fileSizeFormatted " "}} - {{svg "octicon-database"}} {{.locale.PrettyNumber (index $fileSizeFields 0)}} {{index $fileSizeFields 1}} -
+ {{if and (.Permission.CanRead $.UnitTypeCode) (not .IsEmptyRepo)}} + + {{svg "octicon-history"}} {{.locale.PrettyNumber .CommitsCount}} {{.locale.TrN .CommitsCount "repo.commit" "repo.commits"}} + + + {{svg "octicon-git-branch"}} {{.locale.PrettyNumber .BranchesCount}} {{.locale.TrN .BranchesCount "repo.branch" "repo.branches"}} + + {{if $.Permission.CanRead $.UnitTypeCode}} + + {{svg "octicon-tag"}} {{.locale.PrettyNumber .NumTags}} {{.locale.TrN .NumTags "repo.tag" "repo.tags"}} + {{end}} -
+ + {{$fileSizeFormatted := FileSize .Repository.Size}}{{/* the formatted string is always "{val} {unit}" */}} + {{$fileSizeFields := StringUtils.Split $fileSizeFormatted " "}} + {{svg "octicon-database"}} {{.locale.PrettyNumber (index $fileSizeFields 0)}} {{index $fileSizeFields 1}} + + {{end}}
{{if and (.Permission.CanRead $.UnitTypeCode) (not .IsEmptyRepo) .LanguageStats}}
-
- {{range .LanguageStats}} -
- - - {{if eq .Language "other"}} - {{$.locale.Tr "repo.language_other"}} - {{else}} - {{.Language}} - {{end}} - - {{.Percentage}}% -
- {{end}} + {{range .LanguageStats}} +
+ + + {{if eq .Language "other"}} + {{$.locale.Tr "repo.language_other"}} + {{else}} + {{.Language}} + {{end}} + + {{.Percentage}}%
+ {{end}}
- + {{range .LanguageStats}} -
 
+
{{end}} {{end}} diff --git a/web_src/css/repo.css b/web_src/css/repo.css index a03ec9f060..0693840c31 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -1,9 +1,6 @@ .repository .data-table .line-num, .repository .diff-file-box .file-body.file-code .lines-num, -.repository .diff-file-box .code-diff tbody tr .lines-type-marker, -.repository .repository-summary .segment.language-stats { - -webkit-touch-callout: none; - -webkit-user-select: none; +.repository .diff-file-box .code-diff tbody tr .lines-type-marker { user-select: none; } @@ -1943,47 +1940,6 @@ border-bottom: 1px solid var(--color-warning-border); } -.repository .ui.segment.sub-menu { - padding: 7px; - line-height: 0; -} - -.repository .ui.segment.sub-menu .list { - width: 100%; - display: flex; - align-items: stretch; -} - -.repository .ui.segment.sub-menu .list .item { - width: 100%; - color: var(--color-text); - display: flex; - align-items: center; - justify-content: center; -} - -.repository .ui.segment.sub-menu .list .item:first-of-type { - border-radius: var(--border-radius) 0 0 var(--border-radius); - padding-left: 0.25rem; -} - -.repository .ui.segment.sub-menu .list .item:last-of-type { - border-radius: 0 var(--border-radius) var(--border-radius) 0; - padding-right: 0.25rem; -} - -.repository .ui.segment.sub-menu .list .item a { - color: var(--color-text); -} - -.repository .ui.segment.sub-menu .list .item a:hover { - color: var(--color-primary-light-2); -} - -.repository .ui.segment.sub-menu .list .item.active { - background: var(--color-secondary); -} - .repository .segment.reactions.dropdown .menu, .repository .select-reaction.dropdown .menu { right: 0 !important; @@ -2081,49 +2037,39 @@ } .repository .repository-summary { - box-shadow: none !important; -} - -.repository .repository-summary .segment.language-stats-details, -.repository .repository-summary .segment.repository-summary { - border-top: none; - background: none; + box-shadow: none; } -.repository .repository-summary .segment.language-stats-details .item { - white-space: nowrap; +.repository .repository-summary .segment.sub-menu { + border: none; + display: flex; + align-items: center; + padding: 0 0.5em; /* make the UI look better for narrow (mobile) view */ + overflow: hidden; } -.repository .repository-summary .segment.language-stats { - padding: 0; - height: 11px; +.repository .repository-summary .sub-menu .item { + flex: 1; + height: 30px; + line-height: var(--line-height-default); display: flex; - white-space: nowrap; - width: 100%; - border-radius: 0; + align-items: center; + justify-content: center; + gap: 0.25em; + padding: 0 0.25em; } -@media (max-width: 767.98px) { - .repository .repository-summary .segment.language-stats { - display: none; - } +.repository .repository-summary .sub-menu .item.active { + background: var(--color-secondary); } -.repository .repository-summary .segment.language-stats .bar { - white-space: nowrap; - border: 0; +.repository .repository-summary .segment.language-stats { + display: flex; padding: 0; - margin: 0; - height: 100%; -} - -.repository .repository-menu { - padding: 0 !important; -} - -.repository .repository-menu .item { - padding-top: 9px !important; - padding-bottom: 9px !important; + height: 10px; + white-space: nowrap; + border-radius: 0 0 3px 3px !important; + overflow: hidden; } #cite-repo-modal #citation-panel { @@ -2924,18 +2870,6 @@ tbody.commit-list { height: 100%; } -/* prevent page shaking on language bar click */ -.repository-summary-language-stats { - height: 48px; - overflow: hidden; -} - -@media (max-width: 767.98px) { - .repository-summary-language-stats { - height: auto; - } -} - .ui.form .right .ui.button { margin-left: 0.25em; margin-right: 0; diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js index 03169e6815..b30e21d0c0 100644 --- a/web_src/js/features/common-global.js +++ b/web_src/js/features/common-global.js @@ -388,9 +388,9 @@ export function initGlobalButtons() { e.preventDefault(); }); - $('.show-panel.button').on('click', function (e) { - // a '.show-panel.button' can show a panel, by `data-panel="selector"` - // if the button is a "toggle" button, it toggles the panel + $('.show-panel').on('click', function (e) { + // a '.show-panel' element can show a panel, by `data-panel="selector"` + // if it has "toggle" class, it toggles the panel e.preventDefault(); const sel = $(this).attr('data-panel'); if (this.classList.contains('toggle')) { @@ -400,8 +400,8 @@ export function initGlobalButtons() { } }); - $('.hide-panel.button').on('click', function (e) { - // a `.hide-panel.button` can hide a panel, by `data-panel="selector"` or `data-panel-closest="selector"` + $('.hide-panel').on('click', function (e) { + // a `.hide-panel` element can hide a panel, by `data-panel="selector"` or `data-panel-closest="selector"` e.preventDefault(); let sel = $(this).attr('data-panel'); if (sel) { diff --git a/web_src/js/features/repo-common.js b/web_src/js/features/repo-common.js index 755f2a0653..3573e4d50b 100644 --- a/web_src/js/features/repo-common.js +++ b/web_src/js/features/repo-common.js @@ -1,5 +1,5 @@ import $ from 'jquery'; -import {hideElem, showElem, toggleElem} from '../utils/dom.js'; +import {hideElem, showElem} from '../utils/dom.js'; const {csrfToken} = window.config; @@ -91,13 +91,3 @@ export function initRepoCommonFilterSearchDropdown(selector) { message: {noResults: $dropdown.attr('data-no-results')}, }); } - -export function initRepoCommonLanguageStats() { - // Language stats - if ($('.language-stats').length > 0) { - $('.language-stats').on('click', (e) => { - e.preventDefault(); - toggleElem($('.language-stats-details, .repository-menu')); - }); - } -} diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js index 51edf0bd12..0aacc6ee85 100644 --- a/web_src/js/features/repo-legacy.js +++ b/web_src/js/features/repo-legacy.js @@ -11,7 +11,6 @@ import {htmlEscape} from 'escape-goat'; import {initRepoBranchTagSelector} from '../components/RepoBranchTagSelector.vue'; import { initRepoCloneLink, initRepoCommonBranchOrTagDropdown, initRepoCommonFilterSearchDropdown, - initRepoCommonLanguageStats, } from './repo-common.js'; import {initCitationFileCopyContent} from './citation.js'; import {initCompLabelEdit} from './comp/LabelEdit.js'; @@ -525,7 +524,6 @@ export function initRepository() { initRepoCloneLink(); initCitationFileCopyContent(); - initRepoCommonLanguageStats(); initRepoSettingBranches(); // Issues