git724/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

ui: improve branch/tag dropdown selector consistency (#7187)

Browse source 
Improve consistency of these tag/branch selector menus between these areas: repo file/dir view, issue branch selection, compare page.

Improve the look slightly by aligning icons properly, adding consistent gap and ensuring consistent vertical gaps with no excessive space waste.

Preview:
https://codeberg.org/attachments/0740a811-d6bf-4c27-a16d-bdc7e2aa63eb

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7187
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
This commit is contained in:
0ko 2025-03-13 18:11:01 +00:00
parent d53dfcbccb
commit 3c014a8f0e
4 changed files with 36 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
templates/repo/diff/compare.tmpl
View file

@ -39,22 +39,14 @@
<i class="icon">{{svg "octicon-filter" 16}}</i>
<input name="search" placeholder="{{ctx.Locale.Tr "repo.filter_branch_and_tag"}}...">
</div>
<div class="header">
<div class="ui grid">
<div class="two column row">
<a class="reference column" href="#" data-target=".base-branch-list">
<span class="text black">
{{svg "octicon-git-branch" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.branches"}}
</span>
<div class="branch-tag-tab">
<a class="branch-tag-item muted" href="#" data-target=".base-branch-list">
{{svg "octicon-git-branch"}}{{ctx.Locale.Tr "repo.branches"}}
</a>
<a class="reference column" href="#" data-target=".base-tag-list">
<span class="text black">
{{svg "octicon-tag" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.tags"}}
</span>
<a class="branch-tag-item muted" href="#" data-target=".base-tag-list">
{{svg "octicon-tag"}}{{ctx.Locale.Tr "repo.tags"}}
</a>
</div>
</div>
</div>
<div class="scrolling menu reference-list-menu base-branch-list">
{{range .Branches}}
<div class="item {{if eq $.BaseBranch .}}selected{{end}}" data-url="{{$.RepoLink}}/compare/{{PathEscapeSegments .}}{{$.CompareSeparator}}{{if not $.PullRequestCtx.SameRepo}}{{PathEscape $.HeadUser.Name}}/{{PathEscape $.HeadRepo.Name}}:{{end}}{{PathEscapeSegments $.HeadBranch}}">{{$BaseCompareName}}:{{.}}</div>
@ -108,22 +100,14 @@
<i class="icon">{{svg "octicon-filter" 16}}</i>
<input name="search" placeholder="{{ctx.Locale.Tr "repo.filter_branch_and_tag"}}...">
</div>
<div class="header">
<div class="ui grid">
<div class="two column row">
<a class="reference column" href="#" data-target=".head-branch-list">
<span class="text black">
{{svg "octicon-git-branch" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.branches"}}
</span>
<div class="branch-tag-tab">
<a class="branch-tag-item muted" href="#" data-target=".head-branch-list">
{{svg "octicon-git-branch"}}{{ctx.Locale.Tr "repo.branches"}}
</a>
<a class="reference column" href="#" data-target=".head-tag-list">
<span class="text black">
{{svg "octicon-tag" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.tags"}}
</span>
<a class="branch-tag-item muted" href="#" data-target=".head-tag-list">
{{svg "octicon-tag"}}{{ctx.Locale.Tr "repo.tags"}}
</a>
</div>
</div>
</div>
<div class="scrolling menu reference-list-menu head-branch-list">
{{range .HeadBranches}}
<div class="{{if eq $.HeadBranch .}}selected{{end}} item" data-url="{{$.RepoLink}}/compare/{{PathEscapeSegments $.BaseBranch}}{{$.CompareSeparator}}{{if not $.PullRequestCtx.SameRepo}}{{PathEscape $.HeadUser.Name}}/{{PathEscape $.HeadRepo.Name}}:{{end}}{{PathEscapeSegments .}}">{{$HeadCompareName}}:{{.}}</div>

18
templates/repo/issue/view_content/sidebar/branch_selector_field.tmpl
View file

@ -15,22 +15,14 @@
<i class="icon">{{svg "octicon-filter" 16}}</i>
<input name="search" placeholder="{{ctx.Locale.Tr "repo.filter_branch_and_tag"}}...">
</div>
<div class="header">
<div class="ui grid">
<div class="two column row">
<a class="reference column muted" href="#" data-target="#branch-list">
<span class="text black">
{{svg "octicon-git-branch" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.branches"}}
</span>
<div class="branch-tag-tab">
<a class="branch-tag-item muted" href="#" data-target="#branch-list">
{{svg "octicon-git-branch"}}{{ctx.Locale.Tr "repo.branches"}}
</a>
<a class="reference column muted" href="#" data-target="#tag-list">
<span class="text">
{{svg "octicon-tag" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.tags"}}
</span>
<a class="branch-tag-item muted" href="#" data-target="#tag-list">
{{svg "octicon-tag"}}{{ctx.Locale.Tr "repo.tags"}}
</a>
</div>
</div>
</div>
<div class="branch-tag-divider"></div>
<div id="branch-list" class="scrolling menu reference-list-menu {{if not .Issue}}new-issue{{end}}">
{{if .Reference}}

13
web_src/css/repo.css
View file

@ -1153,6 +1153,19 @@ td .commit-summary {
text-align: center;
}
.branch-tag-tab {
padding: 0 10px 10px;
}
.branch-tag-item {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0 10px;
border: 1px solid transparent;
border-bottom: none;
}
.repository.compare.pull .comment.form .content::before,
.repository.compare.pull .comment.form .content::after {
right: 100%;

15
web_src/js/components/RepoBranchTagSelector.vue
View file

@ -265,10 +265,10 @@ export default sfc; // activate IDE's Vue plugin
</div>
<div v-if="showBranchesInDropdown" class="branch-tag-tab">
<a class="branch-tag-item muted" :class="{active: mode === 'branches'}" href="#" @click="handleTabSwitch('branches')">
<svg-icon name="octicon-git-branch" :size="16" class="tw-mr-1"/>{{ textBranches }}
<svg-icon name="octicon-git-branch" :size="16"/>{{ textBranches }}
</a>
<a v-if="!noTag" class="branch-tag-item muted" :class="{active: mode === 'tags'}" href="#" @click="handleTabSwitch('tags')">
<svg-icon name="octicon-tag" :size="16" class="tw-mr-1"/>{{ textTags }}
<svg-icon name="octicon-tag" :size="16"/>{{ textTags }}
</a>
</div>
<div class="branch-tag-divider"/>
@ -316,17 +316,6 @@ export default sfc; // activate IDE's Vue plugin
</div>
</template>
<style scoped>
.branch-tag-tab {
padding: 0 10px;
}
.branch-tag-item {
display: inline-block;
padding: 10px;
border: 1px solid transparent;
border-bottom: none;
}
.branch-tag-item.active {
border-color: var(--color-secondary);
background: var(--color-menu);