forgejo/templates/repo/graph.tmpl
silverwind 1f1178ce9b
Fix various loading states, remove .loading class (#29920)
Various code was using fomantic `loading` class which I think got broken
a while ago and rendered only a full circle. Fix those to use
`is-loading`.

Before:
<img width="295" alt="Screenshot 2024-03-19 at 22 56 26"
src="https://github.com/go-gitea/gitea/assets/115237/dbe83395-5db4-4868-90bc-3613866a35f0">

After:
<img width="60" alt="Screenshot 2024-03-19 at 22 54 35"
src="https://github.com/go-gitea/gitea/assets/115237/8ac19b7e-035a-4c6d-850b-53a234ef69c2">
<img width="294" alt="Screenshot 2024-03-19 at 22 54 56"
src="https://github.com/go-gitea/gitea/assets/115237/34e819d7-25f7-43a1-9d48-4a68dcd2b6ad">
<img width="320" alt="Screenshot 2024-03-19 at 22 55 16"
src="https://github.com/go-gitea/gitea/assets/115237/05127544-47ff-4e18-9fd8-c84e44c374f8">
<img width="153" alt="Screenshot 2024-03-19 at 23 01 43"
src="https://github.com/go-gitea/gitea/assets/115237/a33248c6-b11d-40ff-82d8-f5a3d85b55aa">
<img width="1300" alt="Screenshot 2024-03-19 at 23 56 25"
src="https://github.com/go-gitea/gitea/assets/115237/562ca876-b5d5-4295-961e-9d2cdab31ab0">
<img width="136" alt="Screenshot 2024-03-20 at 00 00 38"
src="https://github.com/go-gitea/gitea/assets/115237/44838ac4-67f3-4fec-a8e3-978cc5dbdb72">

(cherry picked from commit d6fed9ab88b13e124c5e59ceac5b21a3af52ad24)
2024-03-26 19:04:26 +01:00

63 lines
2.9 KiB
Go HTML Template

{{template "base/head" .}}
<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}}">
<h2 class="ui header dividing">
{{ctx.Locale.Tr "repo.commit_graph"}}
<div class="ui icon buttons tiny color-buttons">
<div class="ui multiple selection search dropdown" id="flow-select-refs-dropdown">
<input type="hidden" name="flow">
<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 "gt-mr-2"}}<span title="{{ctx.Locale.Tr "repo.commit_graph.hide_pr_refs"}}">{{ctx.Locale.Tr "repo.commit_graph.hide_pr_refs"}}</span>
</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 "gt-mr-2"}}<span title="{{.ShortName}}">#{{.ShortName}}</span>
</span>
</div>
{{else if eq $refGroup "tags"}}
<div class="item" data-value="{{.Name}}">
<span class="truncate">
{{svg "octicon-tag" 16 "gt-mr-2"}}<span title="{{.ShortName}}">{{.ShortName}}</span>
</span>
</div>
{{else if eq $refGroup "remotes"}}
<div class="item" data-value="{{.Name}}">
<span class="truncate">
{{svg "octicon-cross-reference" 16 "gt-mr-2"}}<span title="{{.ShortName}}">{{.ShortName}}</span>
</span>
</div>
{{else if eq $refGroup "heads"}}
<div class="item" data-value="{{.Name}}">
<span class="truncate">
{{svg "octicon-git-branch" 16 "gt-mr-2"}}<span title="{{.ShortName}}">{{.ShortName}}</span>
</span>
</div>
{{end}}
{{end}}
</div>
</div>
<button id="flow-color-monochrome" class="ui labelled icon button{{if eq .Mode "monochrome"}} active{{end}}" title="{{ctx.Locale.Tr "repo.commit_graph.monochrome"}}">{{svg "material-invert-colors" 16 "gt-mr-2"}}{{ctx.Locale.Tr "repo.commit_graph.monochrome"}}</button>
<button id="flow-color-colored" class="ui labelled icon button{{if ne .Mode "monochrome"}} active{{end}}" title="{{ctx.Locale.Tr "repo.commit_graph.color"}}">{{svg "material-palette" 16 "gt-mr-2"}}{{ctx.Locale.Tr "repo.commit_graph.color"}}</button>
</div>
</h2>
<div class="ui dividing"></div>
<div class="is-loading tw-py-32 gt-hidden" id="loading-indicator"></div>
{{template "repo/graph/svgcontainer" .}}
{{template "repo/graph/commits" .}}
</div>
</div>
</div>
<div id="pagination">
{{template "base/paginate" .}}
</div>
{{template "base/footer" .}}