Fix git graph page (#34948)

wxiaoguang · web-flow · commit 70685a948979 · 2025-07-04T15:41:19.000Z
fix #34946
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,42 +23,27 @@
   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;
   line-height: 24px;
   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
@@ -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

Original file line number	Diff line number	Diff line change
`@@ -33,8 +33,8 @@ func (p Pagination) WithCurRows(n int) Pagination {`
`33`	`33`	`return p`
`34`	`34`	`}`
`35`	`35`
`36`		`-func (p Pagination) AddParamFromRequest(req http.Request) {`
`37`		`- for key, values := range req.URL.Query() {`
	`36`	`+func (p *Pagination) AddParamFromQuery(q url.Values) {`
	`37`	`+ for key, values := range q {`
`38`	`38`	`if key == "page" \|\| len(values) == 0 \|\| (len(values) == 1 && values[0] == "") {`
`39`	`39`	`continue`
`40`	`40`	`}`
`@@ -45,6 +45,10 @@ func (p Pagination) AddParamFromRequest(req http.Request) {`
`45`	`45`	`}`
`46`	`46`	`}`
`47`	`47`
	`48`	`+func (p Pagination) AddParamFromRequest(req http.Request) {`
	`49`	`+ p.AddParamFromQuery(req.URL.Query())`
	`50`	`+}`
	`51`	`+`
`48`	`52`	`// GetParams returns the configured URL params`
`49`	`53`	`func (p *Pagination) GetParams() template.URL {`
`50`	`54`	`return template.URL(strings.Join(p.urlParams, "&"))`