aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorwxiaoguang <wxiaoguang@gmail.com>2025-07-04 23:41:19 +0800
committerGitHub <noreply@github.com>2025-07-04 15:41:19 +0000
commit70685a948979469a8086b2e8d1784a8f27c40f33 (patch)
tree04850cd278a29da62ffb901d014d984c5a195484
parent41678e1a5794f7353e973f198761635c9d5f41b9 (diff)
downloadgitea-main.tar.gz
gitea-main.zip
Fix git graph page (#34948)HEADmain
fix #34946
-rw-r--r--routers/web/repo/commit.go7
-rw-r--r--services/context/pagination.go8
-rw-r--r--templates/repo/commits_list.tmpl2
-rw-r--r--templates/repo/graph.tmpl39
-rw-r--r--templates/repo/graph/commits.tmpl9
-rw-r--r--templates/repo/graph/div.tmpl10
-rw-r--r--templates/repo/tag/name.tmpl2
-rw-r--r--web_src/css/features/gitgraph.css71
-rw-r--r--web_src/css/modules/label.css5
-rw-r--r--web_src/js/features/repo-graph.ts143
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');
- }
- });
}