From dcb648ee71853073d54e8a6e107b764212ede58e Mon Sep 17 00:00:00 2001 From: yp05327 <576951401@qq.com> Date: Thu, 2 Nov 2023 23:49:02 +0900 Subject: [PATCH] Add `Hide/Show all checks` button to commit status check (#26284) Step one for a GitHub like commit status check ui: ![image](https://github.com/go-gitea/gitea/assets/18380374/22953b88-1f91-4d19-bc57-ad92d33fa11f) ![image](https://github.com/go-gitea/gitea/assets/18380374/78572a49-c9b0-472b-86a8-8293197e807b) ![image](https://github.com/go-gitea/gitea/assets/18380374/bc5c8d1c-2ab5-4b03-b8c6-20c34b86d856) Step two: ![image](https://github.com/go-gitea/gitea/assets/18380374/938b359e-8823-4192-b82d-55fa40b986fd) ![image](https://github.com/go-gitea/gitea/assets/18380374/2de5bb8f-40f5-462a-8d6d-bac13a32bc2a) The design now will list all commit status checks which takes too much space. This is a pre-improve for #26247 --------- Co-authored-by: delvh Co-authored-by: silverwind Co-authored-by: wxiaoguang --- options/locale/locale_en-US.ini | 2 + templates/repo/commit_page.tmpl | 2 +- templates/repo/commit_statuses.tmpl | 12 +--- templates/repo/commits_list.tmpl | 2 +- templates/repo/commits_list_small.tmpl | 2 +- templates/repo/issue/view_content/pull.tmpl | 9 ++- templates/repo/pulls/status.tmpl | 67 +++++++++++++-------- templates/repo/view_list.tmpl | 2 +- templates/shared/issuelist.tmpl | 2 +- web_src/css/modules/tippy.css | 65 ++++++++++++-------- web_src/css/repo.css | 42 +++++++------ web_src/js/features/repo-commit.js | 1 + web_src/js/features/repo-issue-pr-status.js | 12 ++++ web_src/js/features/repo-legacy.js | 2 + web_src/js/modules/tippy.js | 2 +- 15 files changed, 138 insertions(+), 86 deletions(-) create mode 100644 web_src/js/features/repo-issue-pr-status.js diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini index 8c40bbc01..a7a7a4f4c 100644 --- a/options/locale/locale_en-US.ini +++ b/options/locale/locale_en-US.ini @@ -1786,6 +1786,8 @@ pulls.status_checks_failure = Some checks failed pulls.status_checks_error = Some checks reported errors pulls.status_checks_requested = Required pulls.status_checks_details = Details +pulls.status_checks_hide_all = Hide all checks +pulls.status_checks_show_all = Show all checks pulls.update_branch = Update branch by merge pulls.update_branch_rebase = Update branch by rebase pulls.update_branch_success = Branch update was successful diff --git a/templates/repo/commit_page.tmpl b/templates/repo/commit_page.tmpl index c0dfc6e0a..efdbb23e0 100644 --- a/templates/repo/commit_page.tmpl +++ b/templates/repo/commit_page.tmpl @@ -19,7 +19,7 @@ {{end}}
-

{{RenderCommitMessage $.Context .Commit.Message $.RepoLink ($.Repository.ComposeMetas ctx)}}{{template "repo/commit_statuses" dict "Status" .CommitStatus "Statuses" .CommitStatuses "root" $}}

+

{{RenderCommitMessage $.Context .Commit.Message $.RepoLink ($.Repository.ComposeMetas ctx)}}{{template "repo/commit_statuses" dict "Status" .CommitStatus "Statuses" .CommitStatuses}}

{{if not $.PageIsWiki}}
diff --git a/templates/repo/commit_statuses.tmpl b/templates/repo/commit_statuses.tmpl index 0006dcb4a..ec2be6c38 100644 --- a/templates/repo/commit_statuses.tmpl +++ b/templates/repo/commit_statuses.tmpl @@ -8,15 +8,7 @@ {{template "repo/commit_status" .Status}} {{end}} -
- {{range .Statuses}} -
- {{template "repo/commit_status" .}} - {{.Context}} {{.Description}} - {{if .TargetURL}} - {{ctx.Locale.Tr "repo.pulls.status_checks_details"}} - {{end}} -
- {{end}} +
+ {{template "repo/pulls/status" (dict "CommitStatuses" .Statuses "CommitStatus" .Status)}}
{{end}} diff --git a/templates/repo/commits_list.tmpl b/templates/repo/commits_list.tmpl index cdb893f51..77f168424 100644 --- a/templates/repo/commits_list.tmpl +++ b/templates/repo/commits_list.tmpl @@ -66,7 +66,7 @@ {{if IsMultilineCommitMessage .Message}} {{end}} - {{template "repo/commit_statuses" dict "Status" .Status "Statuses" .Statuses "root" $}} + {{template "repo/commit_statuses" dict "Status" .Status "Statuses" .Statuses}} {{if IsMultilineCommitMessage .Message}} 
{{RenderCommitBody $.Context .Message $commitRepoLink ($.Repository.ComposeMetas ctx)}}
{{end}} diff --git a/templates/repo/commits_list_small.tmpl b/templates/repo/commits_list_small.tmpl index 5b715a71d..63eb5945b 100644 --- a/templates/repo/commits_list_small.tmpl +++ b/templates/repo/commits_list_small.tmpl @@ -14,7 +14,7 @@ {{$commitLink:= printf "%s/commit/%s" $.comment.Issue.PullRequest.BaseRepo.Link (PathEscape .ID.String)}} - {{template "repo/commit_statuses" dict "Status" .Status "Statuses" .Statuses "root" $.root}} + {{template "repo/commit_statuses" dict "Status" .Status "Statuses" .Statuses}} {{$class := "ui sha label"}} {{if .Signature}} {{$class = (print $class " isSigned")}} diff --git a/templates/repo/issue/view_content/pull.tmpl b/templates/repo/issue/view_content/pull.tmpl index e06404376..2b5776ea0 100644 --- a/templates/repo/issue/view_content/pull.tmpl +++ b/templates/repo/issue/view_content/pull.tmpl @@ -20,7 +20,14 @@ {{- else if .Issue.PullRequest.CanAutoMerge}}green {{- else}}red{{end}}">{{svg "octicon-git-merge" 40}}
- {{template "repo/pulls/status" .}} +
+ {{template "repo/pulls/status" (dict + "CommitStatus" .LatestCommitStatus + "CommitStatuses" .LatestCommitStatuses + "ShowHideChecks" true + "is_context_required" .is_context_required + )}} +
{{$showGeneralMergeForm := false}}
{{if .Issue.PullRequest.HasMerged}} diff --git a/templates/repo/pulls/status.tmpl b/templates/repo/pulls/status.tmpl index 476b89a42..ae508b8fa 100644 --- a/templates/repo/pulls/status.tmpl +++ b/templates/repo/pulls/status.tmpl @@ -1,27 +1,43 @@ -{{if $.LatestCommitStatus}} - {{if not $.Issue.PullRequest.HasMerged}} -
- {{if eq .LatestCommitStatus.State "pending"}} - {{ctx.Locale.Tr "repo.pulls.status_checking"}} - {{else if eq .LatestCommitStatus.State "success"}} - {{ctx.Locale.Tr "repo.pulls.status_checks_success"}} - {{else if eq .LatestCommitStatus.State "warning"}} - {{ctx.Locale.Tr "repo.pulls.status_checks_warning"}} - {{else if eq .LatestCommitStatus.State "failure"}} - {{ctx.Locale.Tr "repo.pulls.status_checks_failure"}} - {{else if eq .LatestCommitStatus.State "error"}} - {{ctx.Locale.Tr "repo.pulls.status_checks_error"}} - {{else}} - {{ctx.Locale.Tr "repo.pulls.status_checking"}} - {{end}} -
- {{end}} +{{/* +Template Attributes: +* CommitStatus: summary of all commit status state +* CommitStatuses: all commit status elements +* ShowHideChecks: whether use a button to show/hide the checks +* is_context_required: Used in pull request commit status check table +*/}} - {{range $.LatestCommitStatuses}} -
- {{template "repo/commit_status" .}} -
- {{.Context}} {{.Description}} +{{if .CommitStatus}} +
+
+ {{if eq .CommitStatus.State "pending"}} + {{ctx.Locale.Tr "repo.pulls.status_checking"}} + {{else if eq .CommitStatus.State "success"}} + {{ctx.Locale.Tr "repo.pulls.status_checks_success"}} + {{else if eq .CommitStatus.State "warning"}} + {{ctx.Locale.Tr "repo.pulls.status_checks_warning"}} + {{else if eq .CommitStatus.State "failure"}} + {{ctx.Locale.Tr "repo.pulls.status_checks_failure"}} + {{else if eq .CommitStatus.State "error"}} + {{ctx.Locale.Tr "repo.pulls.status_checks_error"}} + {{else}} + {{ctx.Locale.Tr "repo.pulls.status_checking"}} + {{end}} + + {{if .ShowHideChecks}} +
+ +
+ {{end}} +
+ +
+ {{range .CommitStatuses}} +
+ {{template "repo/commit_status" .}} +
{{.Context}} {{.Description}}
{{if $.is_context_required}} {{if (call $.is_context_required .Context)}}
{{ctx.Locale.Tr "repo.pulls.status_checks_requested"}}
{{end}} @@ -29,6 +45,7 @@ {{if .TargetURL}}{{ctx.Locale.Tr "repo.pulls.status_checks_details"}}{{end}}
-
- {{end}} + {{end}} +
+
{{end}} diff --git a/templates/repo/view_list.tmpl b/templates/repo/view_list.tmpl index 7e60f2729..836c633ce 100644 --- a/templates/repo/view_list.tmpl +++ b/templates/repo/view_list.tmpl @@ -24,7 +24,7 @@ {{template "repo/shabox_badge" dict "root" $ "verification" .LatestCommitVerification}} {{end}} - {{template "repo/commit_statuses" dict "Status" .LatestCommitStatus "Statuses" .LatestCommitStatuses "root" $}} + {{template "repo/commit_statuses" dict "Status" .LatestCommitStatus "Statuses" .LatestCommitStatuses}} {{$commitLink:= printf "%s/commit/%s" .RepoLink (PathEscape .LatestCommit.ID.String)}} {{RenderCommitMessageLinkSubject $.Context .LatestCommit.Message $.RepoLink $commitLink ($.Repository.ComposeMetas ctx)}} {{if IsMultilineCommitMessage .LatestCommit.Message}} diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl index 4214a03dc..e0d2e102e 100644 --- a/templates/shared/issuelist.tmpl +++ b/templates/shared/issuelist.tmpl @@ -16,7 +16,7 @@ {{RenderEmoji $.Context .Title | RenderCodeBlock}} {{if .IsPull}} {{if (index $.CommitStatuses .PullRequest.ID)}} - {{template "repo/commit_statuses" dict "Status" (index $.CommitLastStatus .PullRequest.ID) "Statuses" (index $.CommitStatuses .PullRequest.ID) "root" $}} + {{template "repo/commit_statuses" dict "Status" (index $.CommitLastStatus .PullRequest.ID) "Statuses" (index $.CommitStatuses .PullRequest.ID)}} {{end}} {{end}} diff --git a/web_src/css/modules/tippy.css b/web_src/css/modules/tippy.css index fe3259728..45feab757 100644 --- a/web_src/css/modules/tippy.css +++ b/web_src/css/modules/tippy.css @@ -6,7 +6,7 @@ } [data-tippy-root] { - max-width: calc(100vw - 10px); + max-width: calc(100vw - 32px); } .tippy-box { @@ -18,37 +18,59 @@ font-size: 1rem; } +.tippy-content { + position: relative; + padding: 1rem; /* if you need different padding, use different data-theme */ + z-index: 1; +} + +/* tooltip theme for text tooltips */ + .tippy-box[data-theme="tooltip"] { background-color: var(--color-tooltip-bg); color: var(--color-tooltip-text); border: none; } +.tippy-box[data-theme="tooltip"] .tippy-content { + padding: 0.5rem 1rem; +} + +.tippy-box[data-theme="tooltip"] .tippy-svg-arrow-inner, +.tippy-box[data-theme="tooltip"] .tippy-svg-arrow-outer { + fill: var(--color-tooltip-bg); +} + +/* menu theme for .ui.menu */ + .tippy-box[data-theme="menu"] { background-color: var(--color-menu); color: var(--color-text); } -.tippy-box[data-theme="form-fetch-error"] { - border-color: var(--color-error-border); - background-color: var(--color-error-bg); - color: var(--color-error-text); -} - -.tippy-content { - position: relative; - padding: 1rem; - z-index: 1; -} - -.tippy-box[data-theme="tooltip"] .tippy-content { - padding: 0.5rem 1rem; -} - .tippy-box[data-theme="menu"] .tippy-content { padding: 0; } +.tippy-box[data-theme="menu"] .tippy-svg-arrow-inner { + fill: var(--color-menu); +} + +/* box-with-header theme to look like .ui.attached.segment. can contain .ui.attached.header */ + +.tippy-box[data-theme="box-with-header"] .tippy-content { + background: var(--color-box-body); + padding: 0; +} + +.tippy-box[data-theme="box-with-header"][data-placement^="top"] .tippy-svg-arrow-inner { + fill: var(--color-box-body); +} + +.tippy-box[data-theme="box-with-header"][data-placement^="bottom"] .tippy-svg-arrow-inner { + fill: var(--color-box-header); +} + .tippy-box[data-placement^="top"] > .tippy-svg-arrow { bottom: 0; } @@ -107,12 +129,3 @@ .tippy-svg-arrow-inner { fill: var(--color-body); } - -.tippy-box[data-theme="tooltip"] .tippy-svg-arrow-inner, -.tippy-box[data-theme="tooltip"] .tippy-svg-arrow-outer { - fill: var(--color-tooltip-bg); -} - -.tippy-box[data-theme="menu"] .tippy-svg-arrow-inner { - fill: var(--color-menu); -} diff --git a/web_src/css/repo.css b/web_src/css/repo.css index b17917c24..e4995d422 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -3074,43 +3074,49 @@ tbody.commit-list { } } -.pr-status { - padding: 0 !important; /* To clear fomantic's padding on .ui.segment elements */ - display: flex; - align-items: center; +.commit-status-header { + border: none !important; /* reset the default ".ui.attached.header" styles, to use the outer border */ + margin: 0 !important; } -.pr-status .commit-status { - margin: 1em; +.commit-status-list { + max-height: 195px; /* fit exactly 4 items */ + overflow-x: hidden; + transition: max-height .2s; +} + +.commit-status-item { + padding: 14px 10px !important; + display: flex; + gap: 8px; + align-items: center; + border-top: 1px solid var(--color-secondary); +} + +.commit-status-item .commit-status { flex-shrink: 0; } -.pr-status .status-context { - display: flex; - justify-content: space-between; - width: 100%; +.commit-status-item .status-context { + color: var(--color-text); + flex: 1; } -.pr-status .status-context > span { - padding: 1em 0; -} - -.pr-status .status-details { +.commit-status-item .status-details { display: flex; - padding-right: 0.5em; align-items: center; justify-content: flex-end; } @media (max-width: 767.98px) { - .pr-status .status-details { + .commit-status-item .status-details { flex-direction: column; align-items: flex-end; justify-content: center; } } -.pr-status .status-details > span { +.commit-status-item .status-details > span { padding-right: 0.5em; /* To match the alignment with the "required" label */ } diff --git a/web_src/js/features/repo-commit.js b/web_src/js/features/repo-commit.js index 7240bf398..76b34d207 100644 --- a/web_src/js/features/repo-commit.js +++ b/web_src/js/features/repo-commit.js @@ -66,6 +66,7 @@ export function initCommitStatuses() { placement: top ? 'top-start' : 'bottom-start', interactive: true, role: 'dialog', + theme: 'box-with-header', }); }); } diff --git a/web_src/js/features/repo-issue-pr-status.js b/web_src/js/features/repo-issue-pr-status.js new file mode 100644 index 000000000..301061570 --- /dev/null +++ b/web_src/js/features/repo-issue-pr-status.js @@ -0,0 +1,12 @@ +export function initRepoPullRequestCommitStatus() { + for (const btn of document.querySelectorAll('.commit-status-hide-checks')) { + const panel = btn.closest('.commit-status-panel'); + const list = panel.querySelector('.commit-status-list'); + btn.addEventListener('click', () => { + list.style.maxHeight = list.style.maxHeight ? '' : '0px'; // toggle + list.style.overflow = 'hidden'; // hide scrollbar when hiding + btn.textContent = btn.getAttribute(list.style.maxHeight ? 'data-show-all' : 'data-hide-all'); + }); + list.addEventListener('animationend', () => list.style.overflow = ''); + } +} diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js index 0aacc6ee8..8b3b7b5c1 100644 --- a/web_src/js/features/repo-legacy.js +++ b/web_src/js/features/repo-legacy.js @@ -20,6 +20,7 @@ import {initCommentContent, initMarkupContent} from '../markup/content.js'; import {initCompReactionSelector} from './comp/ReactionSelector.js'; import {initRepoSettingBranches} from './repo-settings.js'; import {initRepoPullRequestMergeForm} from './repo-issue-pr-form.js'; +import {initRepoPullRequestCommitStatus} from './repo-issue-pr-status.js'; import {hideElem, showElem} from '../utils/dom.js'; import {getComboMarkdownEditor, initComboMarkdownEditor} from './comp/ComboMarkdownEditor.js'; import {attachRefIssueContextPopup} from './contextpopup.js'; @@ -546,6 +547,7 @@ export function initRepository() { initCompReactionSelector($(document)); initRepoPullRequestMergeForm(); + initRepoPullRequestCommitStatus(); } // Pull request diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js index ec7ee2141..d27908962 100644 --- a/web_src/js/modules/tippy.js +++ b/web_src/js/modules/tippy.js @@ -34,7 +34,7 @@ export function createTippy(target, opts = {}) { }, arrow: ``, role: 'menu', // HTML role attribute, only tooltips should use "tooltip" - theme: other.role || 'menu', // CSS theme, we support either "tooltip" or "menu" + theme: other.role || 'menu', // CSS theme, either "tooltip", "menu" or "box-with-header" plugins: [followCursor], ...other, });