bjoernager/forgejo
bjoernager/forgejo
1
Fork 0
Code Issues Pull requests Activity

fix(ui): use gap in switch items (#7581)

Browse source 
Followup to PRs where the old switches were converted to this one.

The main change here is to the switch with counter. It was missing a gap.

Additionally, it removes tailwind helpers the other switches retained from before switch refactors, because they are now using gap.

Preview:
https://codeberg.org/attachments/6191f55e-0b61-49fa-ba8f-cd9c93ca7bd4
https://codeberg.org/attachments/a03fb681-45b7-40f5-929e-55154abeb20d
No visual change to the ones with icons.

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7581
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
This commit is contained in:
0ko 2025-04-21 04:25:08 +00:00
parent acf6c13fd9
commit 507280b073
6 changed files with 14 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

4
templates/projects/list.tmpl
View file

@ -2,11 +2,11 @@
<div class="tw-flex tw-justify-between tw-mb-4"> <div class="tw-flex tw-justify-between tw-mb-4">
<div class="switch list-header-toggle"> <div class="switch list-header-toggle">
<a class="item{{if not .IsShowClosed}} active{{end}}" href="?state=open&q={{$.Keyword}}"> <a class="item{{if not .IsShowClosed}} active{{end}}" href="?state=open&q={{$.Keyword}}">
{{svg "octicon-project-symlink" 16 "tw-mr-2"}} {{svg "octicon-project-symlink" 16}}
{{ctx.Locale.PrettyNumber .OpenCount}}&nbsp;{{ctx.Locale.Tr "repo.issues.open_title"}} {{ctx.Locale.PrettyNumber .OpenCount}}&nbsp;{{ctx.Locale.Tr "repo.issues.open_title"}}
</a> </a>
<a class="item{{if .IsShowClosed}} active{{end}}" href="?state=closed&q={{$.Keyword}}"> <a class="item{{if .IsShowClosed}} active{{end}}" href="?state=closed&q={{$.Keyword}}">
{{svg "octicon-check" 16 "tw-mr-2"}} {{svg "octicon-check" 16}}
{{ctx.Locale.PrettyNumber .ClosedCount}}&nbsp;{{ctx.Locale.Tr "repo.issues.closed_title"}} {{ctx.Locale.PrettyNumber .ClosedCount}}&nbsp;{{ctx.Locale.Tr "repo.issues.closed_title"}}
</a> </a>
</div> </div>

4
templates/repo/graph.tmpl
View file

@ -48,11 +48,11 @@
</div> </div>
<div class="switch"> <div class="switch">
<button id="flow-color-monochrome" class="{{if eq .Mode "monochrome"}}active {{end}}item" title="{{ctx.Locale.Tr "repo.commit_graph.monochrome"}}"> <button id="flow-color-monochrome" class="{{if eq .Mode "monochrome"}}active {{end}}item" title="{{ctx.Locale.Tr "repo.commit_graph.monochrome"}}">
{{svg "material-invert-colors" 16 "tw-mr-1"}} {{svg "material-invert-colors" 16}}
{{ctx.Locale.Tr "repo.commit_graph.monochrome"}} {{ctx.Locale.Tr "repo.commit_graph.monochrome"}}
</button> </button>
<button id="flow-color-colored" class="{{if ne .Mode "monochrome"}}active {{end}}item" title="{{ctx.Locale.Tr "repo.commit_graph.color"}}"> <button id="flow-color-colored" class="{{if ne .Mode "monochrome"}}active {{end}}item" title="{{ctx.Locale.Tr "repo.commit_graph.color"}}">
{{svg "material-palette" 16 "tw-mr-1"}} {{svg "material-palette" 16}}
{{ctx.Locale.Tr "repo.commit_graph.color"}} {{ctx.Locale.Tr "repo.commit_graph.color"}}
</button> </button>
</div> </div>

10
templates/repo/issue/openclose.tmpl
View file

@ -1,21 +1,21 @@
<div class="switch"> <div class="switch">
<a class="{{if eq .State "open"}}active {{end}}item" href="{{.OpenLink}}" data-test-name="open-issue-count"> <a class="{{if eq .State "open"}}active {{end}}item" href="{{.OpenLink}}" data-test-name="open-issue-count">
{{if .PageIsMilestones}} {{if .PageIsMilestones}}
{{svg "octicon-milestone" 16 "tw-mr-2"}} {{svg "octicon-milestone" 16}}
{{else if .PageIsPullList}} {{else if .PageIsPullList}}
{{svg "octicon-git-pull-request" 16 "tw-mr-2"}} {{svg "octicon-git-pull-request" 16}}
{{else}} {{else}}
{{svg "octicon-issue-opened" 16 "tw-mr-2"}} {{svg "octicon-issue-opened" 16}}
{{end}} {{end}}
{{ctx.Locale.PrettyNumber .OpenCount}}&nbsp;{{ctx.Locale.Tr "repo.issues.open_title"}} {{ctx.Locale.PrettyNumber .OpenCount}}&nbsp;{{ctx.Locale.Tr "repo.issues.open_title"}}
</a> </a>
<a class="{{if eq .State "closed"}}active {{end}}item" href="{{.ClosedLink}}" data-test-name="closed-issue-count"> <a class="{{if eq .State "closed"}}active {{end}}item" href="{{.ClosedLink}}" data-test-name="closed-issue-count">
{{svg "octicon-issue-closed" 16 "tw-mr-2"}} {{svg "octicon-issue-closed" 16}}
{{ctx.Locale.PrettyNumber .ClosedCount}}&nbsp;{{ctx.Locale.Tr "repo.issues.closed_title"}} {{ctx.Locale.PrettyNumber .ClosedCount}}&nbsp;{{ctx.Locale.Tr "repo.issues.closed_title"}}
</a> </a>
{{if not .PageIsMilestones}} {{if not .PageIsMilestones}}
<a class="{{if eq .State "all"}}active {{end}}item" href="{{.AllStatesLink}}" data-test-name="all-issue-count"> <a class="{{if eq .State "all"}}active {{end}}item" href="{{.AllStatesLink}}" data-test-name="all-issue-count">
{{svg "octicon-eye" 16 "tw-mr-2"}} {{svg "octicon-eye" 16}}
{{ctx.Locale.PrettyNumber (.AllCount)}}&nbsp;{{ctx.Locale.Tr "repo.issues.all_title"}} {{ctx.Locale.PrettyNumber (.AllCount)}}&nbsp;{{ctx.Locale.Tr "repo.issues.all_title"}}
</a> </a>
{{end}} {{end}}

4
templates/user/dashboard/issues.tmpl
View file

@ -6,11 +6,11 @@
<div class="list-header"> <div class="list-header">
<div class="switch list-header-toggle"> <div class="switch list-header-toggle">
<a class="item{{if not .IsShowClosed}} active{{end}}" href="?type={{$.ViewType}}&sort={{$.SortType}}&state=open&labels={{.SelectLabels}}&q={{$.Keyword}}"> <a class="item{{if not .IsShowClosed}} active{{end}}" href="?type={{$.ViewType}}&sort={{$.SortType}}&state=open&labels={{.SelectLabels}}&q={{$.Keyword}}">
{{svg "octicon-issue-opened" 16 "tw-mr-2"}} {{svg "octicon-issue-opened" 16}}
{{ctx.Locale.PrettyNumber .IssueStats.OpenCount}}&nbsp;{{ctx.Locale.Tr "repo.issues.open_title"}} {{ctx.Locale.PrettyNumber .IssueStats.OpenCount}}&nbsp;{{ctx.Locale.Tr "repo.issues.open_title"}}
</a> </a>
<a class="item{{if .IsShowClosed}} active{{end}}" href="?type={{$.ViewType}}&sort={{$.SortType}}&state=closed&labels={{.SelectLabels}}&q={{$.Keyword}}"> <a class="item{{if .IsShowClosed}} active{{end}}" href="?type={{$.ViewType}}&sort={{$.SortType}}&state=closed&labels={{.SelectLabels}}&q={{$.Keyword}}">
{{svg "octicon-issue-closed" 16 "tw-mr-2"}} {{svg "octicon-issue-closed" 16}}
{{ctx.Locale.PrettyNumber .IssueStats.ClosedCount}}&nbsp;{{ctx.Locale.Tr "repo.issues.closed_title"}} {{ctx.Locale.PrettyNumber .IssueStats.ClosedCount}}&nbsp;{{ctx.Locale.Tr "repo.issues.closed_title"}}
</a> </a>
</div> </div>

4
templates/user/dashboard/milestones.tmpl
View file

@ -37,11 +37,11 @@
<div class="list-header"> <div class="list-header">
<div class="switch list-header-toggle"> <div class="switch list-header-toggle">
<a class="item{{if not .IsShowClosed}} active{{end}}" href="?repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=open&q={{$.Keyword}}"> <a class="item{{if not .IsShowClosed}} active{{end}}" href="?repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=open&q={{$.Keyword}}">
{{svg "octicon-milestone" 16 "tw-mr-2"}} {{svg "octicon-milestone" 16}}
{{ctx.Locale.PrettyNumber .MilestoneStats.OpenCount}}&nbsp;{{ctx.Locale.Tr "repo.issues.open_title"}} {{ctx.Locale.PrettyNumber .MilestoneStats.OpenCount}}&nbsp;{{ctx.Locale.Tr "repo.issues.open_title"}}
</a> </a>
<a class="item{{if .IsShowClosed}} active{{end}}" href="?repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=closed&q={{$.Keyword}}"> <a class="item{{if .IsShowClosed}} active{{end}}" href="?repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=closed&q={{$.Keyword}}">
{{svg "octicon-check" 16 "tw-mr-2"}} {{svg "octicon-check" 16}}
{{ctx.Locale.PrettyNumber .MilestoneStats.ClosedCount}}&nbsp;{{ctx.Locale.Tr "repo.issues.closed_title"}} {{ctx.Locale.PrettyNumber .MilestoneStats.ClosedCount}}&nbsp;{{ctx.Locale.Tr "repo.issues.closed_title"}}
</a> </a>
</div> </div>

1
web_src/css/modules/switch.css
View file

@ -11,6 +11,7 @@
.switch .item { .switch .item {
display: flex; display: flex;
gap: 0.5rem;
align-items: center; align-items: center;
padding: .5em 1.125em; padding: .5em 1.125em;
color: var(--color-text); color: var(--color-text);