diff options
author | wxiaoguang <wxiaoguang@gmail.com> | 2025-07-04 23:41:19 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2025-07-04 15:41:19 +0000 |
commit | 70685a948979469a8086b2e8d1784a8f27c40f33 (patch) | |
tree | 04850cd278a29da62ffb901d014d984c5a195484 | |
parent | 41678e1a5794f7353e973f198761635c9d5f41b9 (diff) | |
download | gitea-main.tar.gz gitea-main.zip |
fix #34946
-rw-r--r-- | routers/web/repo/commit.go | 7 | ||||
-rw-r--r-- | services/context/pagination.go | 8 | ||||
-rw-r--r-- | templates/repo/commits_list.tmpl | 2 | ||||
-rw-r--r-- | templates/repo/graph.tmpl | 39 | ||||
-rw-r--r-- | templates/repo/graph/commits.tmpl | 9 | ||||
-rw-r--r-- | templates/repo/graph/div.tmpl | 10 | ||||
-rw-r--r-- | templates/repo/tag/name.tmpl | 2 | ||||
-rw-r--r-- | web_src/css/features/gitgraph.css | 71 | ||||
-rw-r--r-- | web_src/css/modules/label.css | 5 | ||||
-rw-r--r-- | web_src/js/features/repo-graph.ts | 143 |
10 files changed, 88 insertions, 208 deletions
diff --git a/routers/web/repo/commit.go b/routers/web/repo/commit.go index b3af138461..8f5c6a42e6 100644 --- a/routers/web/repo/commit.go +++ b/routers/web/repo/commit.go @@ -166,10 +166,13 @@ func Graph(ctx *context.Context) { ctx.Data["Username"] = ctx.Repo.Owner.Name ctx.Data["Reponame"] = ctx.Repo.Repository.Name + divOnly := ctx.FormBool("div-only") + queryParams := ctx.Req.URL.Query() + queryParams.Del("div-only") paginator := context.NewPagination(int(graphCommitsCount), setting.UI.GraphMaxCommitNum, page, 5) - paginator.AddParamFromRequest(ctx.Req) + paginator.AddParamFromQuery(queryParams) ctx.Data["Page"] = paginator - if ctx.FormBool("div-only") { + if divOnly { ctx.HTML(http.StatusOK, tplGraphDiv) return } diff --git a/services/context/pagination.go b/services/context/pagination.go index 25a9298e01..2a9805db05 100644 --- a/services/context/pagination.go +++ b/services/context/pagination.go @@ -33,8 +33,8 @@ func (p *Pagination) WithCurRows(n int) *Pagination { return p } -func (p *Pagination) AddParamFromRequest(req *http.Request) { - for key, values := range req.URL.Query() { +func (p *Pagination) AddParamFromQuery(q url.Values) { + for key, values := range q { if key == "page" || len(values) == 0 || (len(values) == 1 && values[0] == "") { continue } @@ -45,6 +45,10 @@ func (p *Pagination) AddParamFromRequest(req *http.Request) { } } +func (p *Pagination) AddParamFromRequest(req *http.Request) { + p.AddParamFromQuery(req.URL.Query()) +} + // GetParams returns the configured URL params func (p *Pagination) GetParams() template.URL { return template.URL(strings.Join(p.urlParams, "&")) diff --git a/templates/repo/commits_list.tmpl b/templates/repo/commits_list.tmpl index 8a268a5d14..959f2a9398 100644 --- a/templates/repo/commits_list.tmpl +++ b/templates/repo/commits_list.tmpl @@ -56,7 +56,7 @@ {{end}} {{if $.CommitsTagsMap}} {{range (index $.CommitsTagsMap .ID.String)}} - {{- template "repo/tag/name" dict "RepoLink" $.Repository.Link "TagName" .TagName "IsRelease" (not .IsTag) -}} + {{- template "repo/tag/name" dict "AdditionalClasses" "tw-py-0" "RepoLink" $.Repository.Link "TagName" .TagName "IsRelease" (not .IsTag) -}} {{end}} {{end}} </td> diff --git a/templates/repo/graph.tmpl b/templates/repo/graph.tmpl index 93cb5903cf..cd115f95dc 100644 --- a/templates/repo/graph.tmpl +++ b/templates/repo/graph.tmpl @@ -2,7 +2,7 @@ <div role="main" aria-label="{{.Title}}" class="page-content repository commits"> {{template "repo/header" .}} <div class="ui container"> - <div id="git-graph-container" class="ui segment{{if eq .Mode "monochrome"}} monochrome{{end}}"> + <div id="git-graph-container" class="ui segment {{if eq .Mode "monochrome"}}monochrome{{end}}"> <h2 class="ui header dividing"> {{ctx.Locale.Tr "repo.commit_graph"}} <div class="ui icon buttons tiny color-buttons"> @@ -11,35 +11,30 @@ <div class="default text">{{ctx.Locale.Tr "repo.commit_graph.select"}}</div> <div class="menu"> <div class="item" data-value="...flow-hide-pr-refs"> - <span class="truncate"> - {{svg "octicon-eye-closed" 16 "tw-mr-1"}}<span title="{{ctx.Locale.Tr "repo.commit_graph.hide_pr_refs"}}">{{ctx.Locale.Tr "repo.commit_graph.hide_pr_refs"}}</span> - </span> + {{svg "octicon-eye-closed"}} + <span class="gt-ellipsis" title="{{ctx.Locale.Tr "repo.commit_graph.hide_pr_refs"}}">{{ctx.Locale.Tr "repo.commit_graph.hide_pr_refs"}}</span> </div> {{range .AllRefs}} {{$refGroup := .RefGroup}} {{if eq $refGroup "pull"}} <div class="item" data-value="{{.Name}}"> - <span class="truncate"> - {{svg "octicon-git-pull-request" 16 "tw-mr-1"}}<span title="{{.ShortName}}">#{{.ShortName}}</span> - </span> + {{svg "octicon-git-pull-request"}} + <span class="gt-ellipsis" title="{{.ShortName}}">#{{.ShortName}}</span> </div> {{else if eq $refGroup "tags"}} <div class="item" data-value="{{.Name}}"> - <span class="truncate"> - {{svg "octicon-tag" 16 "tw-mr-1"}}<span title="{{.ShortName}}">{{.ShortName}}</span> - </span> + {{svg "octicon-tag"}} + <span class="gt-ellipsis" title="{{.ShortName}}">{{.ShortName}}</span> </div> {{else if eq $refGroup "remotes"}} <div class="item" data-value="{{.Name}}"> - <span class="truncate"> - {{svg "octicon-cross-reference" 16 "tw-mr-1"}}<span title="{{.ShortName}}">{{.ShortName}}</span> - </span> + {{svg "octicon-cross-reference"}} + <span class="gt-ellipsis" title="{{.ShortName}}">{{.ShortName}}</span> </div> {{else if eq $refGroup "heads"}} <div class="item" data-value="{{.Name}}"> - <span class="truncate"> - {{svg "octicon-git-branch" 16 "tw-mr-1"}}<span title="{{.ShortName}}">{{.ShortName}}</span> - </span> + {{svg "octicon-git-branch"}} + <span class="gt-ellipsis" title="{{.ShortName}}">{{.ShortName}}</span> </div> {{end}} {{end}} @@ -49,14 +44,12 @@ <button id="flow-color-colored" class="ui icon button{{if ne .Mode "monochrome"}} active{{end}}" title="{{ctx.Locale.Tr "repo.commit_graph.color"}}">{{svg "material-palette" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.commit_graph.color"}}</button> </div> </h2> - <div class="ui dividing"></div> - <div class="is-loading tw-py-32 tw-hidden" id="loading-indicator"></div> - {{template "repo/graph/svgcontainer" .}} - {{template "repo/graph/commits" .}} + <div id="git-graph-body"> + {{template "repo/graph/svgcontainer" .}} + {{template "repo/graph/commits" .}} + {{template "base/paginate" .}} + </div> </div> </div> </div> -<div id="pagination"> - {{template "base/paginate" .}} -</div> {{template "base/footer" .}} diff --git a/templates/repo/graph/commits.tmpl b/templates/repo/graph/commits.tmpl index 34167cadc0..07ec076697 100644 --- a/templates/repo/graph/commits.tmpl +++ b/templates/repo/graph/commits.tmpl @@ -5,10 +5,13 @@ {{if $commit.OnlyRelation}} <span></span> {{else}} - {{template "repo/commit_sign_badge" dict "Commit" $commit.Commit "CommitBaseLink" (print $.RepoLink "/commit") "CommitSignVerification" $commit.Verification}} + {{/* every field must be in a span to get correctly styled */}} + <span> + {{template "repo/commit_sign_badge" dict "Commit" $commit.Commit "CommitBaseLink" (print $.RepoLink "/commit") "CommitSignVerification" $commit.Verification}} + </span> <span class="message tw-inline-block gt-ellipsis"> - <span>{{ctx.RenderUtils.RenderCommitMessage $commit.Subject $.Repository}}</span> + {{ctx.RenderUtils.RenderCommitMessage $commit.Subject $.Repository}} </span> <span class="commit-refs flex-text-inline"> @@ -22,7 +25,7 @@ </a> {{end}} {{else if eq $refGroup "tags"}} - {{- template "repo/tag/name" dict "RepoLink" $.Repository.Link "TagName" .ShortName -}} + {{- template "repo/tag/name" dict "AdditionalClasses" "tag-label" "RepoLink" $.Repository.Link "TagName" .ShortName -}} {{else if eq $refGroup "remotes"}} <a class="ui basic tiny button" href="{{$.RepoLink}}/src/commit/{{$commit.Rev|PathEscape}}"> {{svg "octicon-cross-reference"}} {{.ShortName}} diff --git a/templates/repo/graph/div.tmpl b/templates/repo/graph/div.tmpl index c0bd4e269a..12c2869cd8 100644 --- a/templates/repo/graph/div.tmpl +++ b/templates/repo/graph/div.tmpl @@ -1,7 +1,3 @@ -<div> - {{template "repo/graph/svgcontainer" .}} - {{template "repo/graph/commits" .}} - <div id="pagination"> - {{template "base/paginate" .}} - </div> -</div> +{{template "repo/graph/svgcontainer" .}} +{{template "repo/graph/commits" .}} +{{template "base/paginate" .}} diff --git a/templates/repo/tag/name.tmpl b/templates/repo/tag/name.tmpl index b6692dfc53..24e7de046d 100644 --- a/templates/repo/tag/name.tmpl +++ b/templates/repo/tag/name.tmpl @@ -1,3 +1,3 @@ -<a class="ui basic label tw-p-1 {{if .IsRelease}}primary{{end}}" href="{{.RepoLink}}/src/tag/{{.TagName|PathEscape}}"> +<a class="ui basic label {{if .IsRelease}}primary{{end}} {{.AdditionalClasses}}" href="{{.RepoLink}}/src/tag/{{.TagName|PathEscape}}"> {{svg "octicon-tag"}} {{.TagName}} </a> diff --git a/web_src/css/features/gitgraph.css b/web_src/css/features/gitgraph.css index 865c82e003..8bdafc3c99 100644 --- a/web_src/css/features/gitgraph.css +++ b/web_src/css/features/gitgraph.css @@ -10,14 +10,6 @@ align-items: center; } -#git-graph-container .color-buttons { - margin-right: 0; -} - -#git-graph-container .ui.header.dividing { - padding-bottom: 10px; -} - #git-graph-container #flow-select-refs-dropdown { border-top-right-radius: 0; border-bottom-right-radius: 0; @@ -31,25 +23,6 @@ align-items: center; } -#git-graph-container #flow-select-refs-dropdown .ui.label .truncate { - display: inline-block; - max-width: 140px; - overflow: hidden; - text-overflow: ellipsis; - vertical-align: top; - white-space: nowrap; -} - -#git-graph-container #flow-select-refs-dropdown .default.text { - padding-top: 4px; - padding-bottom: 4px; -} - -#git-graph-container #flow-select-refs-dropdown input.search { - position: relative; - top: 1px; -} - #git-graph-container li { list-style-type: none; height: 24px; @@ -57,16 +30,20 @@ white-space: nowrap; display: flex; align-items: center; - gap: 0.25em; + gap: 0.5em; } -#git-graph-container li .ui.label.commit-id-short { - padding-top: 2px; - padding-bottom: 2px; +#git-graph-container li > span { + flex-shrink: 0; } -#git-graph-container li .node-relation { - font-family: var(--fonts-monospace); +#git-graph-container li > span.message { + flex-shrink: 1; +} + +#git-graph-container li .ui.label.commit-id-short { + padding: 2px 4px; + height: 20px; } #git-graph-container li .author { @@ -78,17 +55,6 @@ font-size: 80%; } -#git-graph-container li a:not(.ui):hover { - text-decoration: underline; -} - -#git-graph-container li a em { - color: var(--color-red); - border-bottom: 1px dotted var(--color-secondary); - text-decoration: none; - font-style: normal; -} - #git-graph-container #rel-container { max-width: 30%; overflow-x: auto; @@ -105,34 +71,23 @@ width: 100%; } -#git-graph-container #rev-list li.highlight.hover { - background-color: var(--color-secondary-alpha-30); -} - -#git-graph-container #rev-list .commit-refs .button { +#git-graph-container li .commit-refs .ui.button, +#git-graph-container li .commit-refs .ui.label.tag-label { padding: 2px 4px; margin-right: 0.25em; display: inline-block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; + line-height: var(--line-height-default); min-height: 0; } -#git-graph-container #graph-raw-list { - margin: 0; -} - #git-graph-container.monochrome #rel-container .flow-group { stroke: var(--color-secondary-dark-5); fill: var(--color-secondary-dark-5); } -#git-graph-container.monochrome #rel-container .flow-group.highlight { - stroke: var(--color-secondary-dark-12); - fill: var(--color-secondary-dark-12); -} - #git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-1 { stroke: #499a37; fill: #499a37; diff --git a/web_src/css/modules/label.css b/web_src/css/modules/label.css index bb6f1b512f..f5d0decdf6 100644 --- a/web_src/css/modules/label.css +++ b/web_src/css/modules/label.css @@ -4,6 +4,7 @@ .ui.label { display: inline-flex; align-items: center; + vertical-align: middle; gap: var(--gap-inline); min-width: 0; max-width: 100%; @@ -88,10 +89,6 @@ a.ui.label:hover { color: var(--color-label-text); } -.ui.label.visible:not(.dropdown) { - display: inline-block !important; -} - .ui.basic.label { background: var(--color-button); border: 1px solid var(--color-light-border); diff --git a/web_src/js/features/repo-graph.ts b/web_src/js/features/repo-graph.ts index 7579ee42c6..a1a88f1c0f 100644 --- a/web_src/js/features/repo-graph.ts +++ b/web_src/js/features/repo-graph.ts @@ -1,4 +1,4 @@ -import {hideElem, showElem, type DOMEvent} from '../utils/dom.ts'; +import {toggleClass} from '../utils/dom.ts'; import {GET} from '../modules/fetch.ts'; import {fomanticQuery} from '../modules/fomantic/base.ts'; @@ -6,87 +6,59 @@ export function initRepoGraphGit() { const graphContainer = document.querySelector<HTMLElement>('#git-graph-container'); if (!graphContainer) return; - document.querySelector('#flow-color-monochrome')?.addEventListener('click', () => { - document.querySelector('#flow-color-monochrome').classList.add('active'); - document.querySelector('#flow-color-colored')?.classList.remove('active'); - graphContainer.classList.remove('colored'); - graphContainer.classList.add('monochrome'); + const elColorMonochrome = document.querySelector<HTMLElement>('#flow-color-monochrome'); + const elColorColored = document.querySelector<HTMLElement>('#flow-color-colored'); + const toggleColorMode = (mode: 'monochrome' | 'colored') => { + toggleClass(graphContainer, 'monochrome', mode === 'monochrome'); + toggleClass(graphContainer, 'colored', mode === 'colored'); + + toggleClass(elColorMonochrome, 'active', mode === 'monochrome'); + toggleClass(elColorColored, 'active', mode === 'colored'); + const params = new URLSearchParams(window.location.search); - params.set('mode', 'monochrome'); - const queryString = params.toString(); - if (queryString) { - window.history.replaceState({}, '', `?${queryString}`); - } else { - window.history.replaceState({}, '', window.location.pathname); - } - for (const link of document.querySelectorAll('.pagination a')) { + params.set('mode', mode); + window.history.replaceState(null, '', `?${params.toString()}`); + for (const link of document.querySelectorAll('#pagination .pagination a')) { const href = link.getAttribute('href'); if (!href) continue; const url = new URL(href, window.location.href); const params = url.searchParams; - params.set('mode', 'monochrome'); + params.set('mode', mode); url.search = `?${params.toString()}`; link.setAttribute('href', url.href); } - }); + }; + elColorMonochrome.addEventListener('click', () => toggleColorMode('monochrome')); + elColorColored.addEventListener('click', () => toggleColorMode('colored')); - document.querySelector('#flow-color-colored')?.addEventListener('click', () => { - document.querySelector('#flow-color-colored').classList.add('active'); - document.querySelector('#flow-color-monochrome')?.classList.remove('active'); - graphContainer.classList.add('colored'); - graphContainer.classList.remove('monochrome'); - for (const link of document.querySelectorAll('.pagination a')) { - const href = link.getAttribute('href'); - if (!href) continue; - const url = new URL(href, window.location.href); - const params = url.searchParams; - params.delete('mode'); - url.search = `?${params.toString()}`; - link.setAttribute('href', url.href); - } - const params = new URLSearchParams(window.location.search); - params.delete('mode'); - const queryString = params.toString(); - if (queryString) { - window.history.replaceState({}, '', `?${queryString}`); - } else { - window.history.replaceState({}, '', window.location.pathname); - } - }); + const elGraphBody = document.querySelector<HTMLElement>('#git-graph-body'); const url = new URL(window.location.href); const params = url.searchParams; - const updateGraph = () => { + const loadGitGraph = async () => { const queryString = params.toString(); const ajaxUrl = new URL(url); ajaxUrl.searchParams.set('div-only', 'true'); - window.history.replaceState({}, '', queryString ? `?${queryString}` : window.location.pathname); - document.querySelector('#pagination').innerHTML = ''; - hideElem('#rel-container'); - hideElem('#rev-container'); - showElem('#loading-indicator'); - (async () => { - const response = await GET(String(ajaxUrl)); - const html = await response.text(); - const div = document.createElement('div'); - div.innerHTML = html; - document.querySelector('#pagination').innerHTML = div.querySelector('#pagination').innerHTML; - document.querySelector('#rel-container').innerHTML = div.querySelector('#rel-container').innerHTML; - document.querySelector('#rev-container').innerHTML = div.querySelector('#rev-container').innerHTML; - hideElem('#loading-indicator'); - showElem('#rel-container'); - showElem('#rev-container'); - })(); + window.history.replaceState(null, '', queryString ? `?${queryString}` : window.location.pathname); + + elGraphBody.classList.add('is-loading'); + try { + const resp = await GET(ajaxUrl.toString()); + elGraphBody.innerHTML = await resp.text(); + } finally { + elGraphBody.classList.remove('is-loading'); + } }; + const dropdownSelected = params.getAll('branch'); if (params.has('hide-pr-refs') && params.get('hide-pr-refs') === 'true') { dropdownSelected.splice(0, 0, '...flow-hide-pr-refs'); } - const flowSelectRefsDropdown = document.querySelector('#flow-select-refs-dropdown'); - const $dropdown = fomanticQuery(flowSelectRefsDropdown); - $dropdown.dropdown({ - clearable: true, - fullTextSeach: 'exact', + const $dropdown = fomanticQuery('#flow-select-refs-dropdown'); + $dropdown.dropdown({clearable: true}); + $dropdown.dropdown('set selected', dropdownSelected); + // must add the callback after setting the selected items, otherwise each "selected" item will trigger the callback + $dropdown.dropdown('setting', { onRemove(toRemove: string) { if (toRemove === '...flow-hide-pr-refs') { params.delete('hide-pr-refs'); @@ -99,7 +71,7 @@ export function initRepoGraphGit() { } } } - updateGraph(); + loadGitGraph(); }, onAdd(toAdd: string) { if (toAdd === '...flow-hide-pr-refs') { @@ -107,50 +79,7 @@ export function initRepoGraphGit() { } else { params.append('branch', toAdd); } - updateGraph(); + loadGitGraph(); }, }); - $dropdown.dropdown('set selected', dropdownSelected); - - graphContainer.addEventListener('mouseenter', (e: DOMEvent<MouseEvent>) => { - if (e.target.matches('#rev-list li')) { - const flow = e.target.getAttribute('data-flow'); - if (flow === '0') return; - document.querySelector(`#flow-${flow}`)?.classList.add('highlight'); - e.target.classList.add('hover'); - for (const item of document.querySelectorAll(`#rev-list li[data-flow='${flow}']`)) { - item.classList.add('highlight'); - } - } else if (e.target.matches('#rel-container .flow-group')) { - e.target.classList.add('highlight'); - const flow = e.target.getAttribute('data-flow'); - for (const item of document.querySelectorAll(`#rev-list li[data-flow='${flow}']`)) { - item.classList.add('highlight'); - } - } else if (e.target.matches('#rel-container .flow-commit')) { - const rev = e.target.getAttribute('data-rev'); - document.querySelector(`#rev-list li#commit-${rev}`)?.classList.add('hover'); - } - }); - - graphContainer.addEventListener('mouseleave', (e: DOMEvent<MouseEvent>) => { - if (e.target.matches('#rev-list li')) { - const flow = e.target.getAttribute('data-flow'); - if (flow === '0') return; - document.querySelector(`#flow-${flow}`)?.classList.remove('highlight'); - e.target.classList.remove('hover'); - for (const item of document.querySelectorAll(`#rev-list li[data-flow='${flow}']`)) { - item.classList.remove('highlight'); - } - } else if (e.target.matches('#rel-container .flow-group')) { - e.target.classList.remove('highlight'); - const flow = e.target.getAttribute('data-flow'); - for (const item of document.querySelectorAll(`#rev-list li[data-flow='${flow}']`)) { - item.classList.remove('highlight'); - } - } else if (e.target.matches('#rel-container .flow-commit')) { - const rev = e.target.getAttribute('data-rev'); - document.querySelector(`#rev-list li#commit-${rev}`)?.classList.remove('hover'); - } - }); } |