Skip to content

Commit 6066d19

Browse files
silverwindsilverwind
committed
Rework repo buttons
- Replace "New PR" and "Go to File" button with Icon Button - Move all "Add File" actions into a dropdown button - Remove most custom styling of clone buttons Buttons are now all equal height, mobile layout wraps gracefully. Fixes: go-gitea#13671 Replaces: go-gitea#20375
1 parent 90b2657 commit 6066d19

File tree

12 files changed

+102
-139
lines changed

12 files changed

+102
-139
lines changed

‎options/locale/locale_en-US.ini

+1
Original file line numberDiff line numberDiff line change
@@ -1063,6 +1063,7 @@ normal_view = Normal View
10631063
line = line
10641064
lines = lines
10651065

1066+
editor.add_file = Add File
10661067
editor.new_file = New File
10671068
editor.upload_file = Upload File
10681069
editor.edit_file = Edit File

‎templates/repo/branch_dropdown.tmpl

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,27 @@
11
{{$release := .release}}
22
{{$defaultBranch := $.root.BranchName}}{{if and .root.IsViewTag (not .noTag)}}{{$defaultBranch = .root.TagName}}{{end}}{{if eq $defaultBranch ""}}{{$defaultBranch = $.root.Repository.DefaultBranch}}{{end}}
3+
{{$type := ""}}{{if and .root.IsViewTag (not .noTag)}}{{$type = "tag"}}{{else if .root.IsViewBranch}}{{$type = "branch"}}{{else}}{{$type = "tree"}}{{end}}
34
{{$showBranchesInDropdown := not .root.HideBranchesInDropdown}}
45
<div class="fitted item choose reference{{if not $release}} mr-1{{end}}">
56
<div class="ui floating filter dropdown custom"
67
data-branch-form="{{if $.branchForm}}{{$.branchForm}}{{end}}"
78
data-can-create-branch="{{if .canCreateBranch}}{{.canCreateBranch}}{{else}}{{.root.CanCreateBranch}}{{end}}"
89
data-no-results="{{.root.locale.Tr "repo.pulls.no_results"}}"
910
data-set-action="{{.setAction}}" data-submit-form="{{.submitForm}}"
10-
data-view-type="{{if and .root.IsViewTag (not .noTag)}}tag{{else if .root.IsViewBranch}}branch{{else}}tree{{end}}"
11+
data-view-type="{{$type}}"
1112
data-ref-name="{{if and .root.IsViewTag (not .noTag)}}{{.root.TagName}}{{else if .root.IsViewBranch}}{{.root.BranchName}}{{else}}{{ShortSha .root.CommitID}}{{end}}"
1213
data-branch-url-prefix="{{if .branchURLPrefix}}{{.branchURLPrefix}}{{else}}{{$.root.RepoLink}}/{{if $.root.PageIsCommits}}commits{{else}}src{{end}}/branch/{{end}}"
1314
data-branch-url-suffix="{{if .branchURLSuffix}}{{.branchURLSuffix}}{{else}}{{if $.root.TreePath}}/{{PathEscapeSegments $.root.TreePath}}{{end}}{{end}}"
1415
data-tag-url-prefix="{{if .tagURLPrefix}}{{.tagURLPrefix}}{{else if $release}}{{$.root.RepoLink}}/compare/{{else}}{{$.root.RepoLink}}/{{if $.root.PageIsCommits}}commits{{else}}src{{end}}/tag/{{end}}"
1516
data-tag-url-suffix="{{if .tagURLSuffix}}{{.tagURLSuffix}}{{else if $release}}...{{if $release.IsDraft}}{{PathEscapeSegments $release.Target}}{{else}}{{if $release.TagName}}{{PathEscapeSegments $release.TagName}}{{else}}{{PathEscapeSegments $release.Sha1}}{{end}}{{end}}{{else}}{{if $.root.TreePath}}/{{PathEscapeSegments $.root.TreePath}}{{end}}{{end}}">
16-
<div class="ui basic small compact button" @click="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible">
17+
<div class="branch-dropdown-button ellipsis ui basic small compact button" @click="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible">
1718
<span class="text">
1819
{{if $release}}
1920
{{.root.locale.Tr "repo.release.compare"}}
2021
{{else}}
21-
<span :class="{visible: isViewTag}" v-if="isViewTag" v-cloak>{{svg "octicon-tag"}} {{.root.locale.Tr "repo.tag"}}:</span>
22-
<span :class="{visible: isViewBranch}" v-if="isViewBranch" v-cloak>{{svg "octicon-git-branch"}} {{.root.locale.Tr "repo.branch"}}:</span>
23-
<span :class="{visible: isViewTree}" v-if="isViewTree" v-cloak>{{svg "octicon-git-branch"}} {{.root.locale.Tr "repo.tree"}}:</span>
22+
<span :class="{visible: isViewTag}" v-if="isViewTag" {{if not (eq $type "tag")}}v-cloak{{end}}>{{svg "octicon-tag"}} {{.root.locale.Tr "repo.tag"}}:</span>
23+
<span :class="{visible: isViewBranch}" v-if="isViewBranch" {{if not (eq $type "branch")}}v-cloak{{end}}>{{svg "octicon-git-branch"}} {{.root.locale.Tr "repo.branch"}}:</span>
24+
<span :class="{visible: isViewTree}" v-if="isViewTree" {{if not (eq $type "tree")}}v-cloak{{end}}>{{svg "octicon-git-branch"}} {{.root.locale.Tr "repo.tree"}}:</span>
2425
<strong ref="dropdownRefName">{{if and .root.IsViewTag (not .noTag)}}{{.root.TagName}}{{else if .root.IsViewBranch}}{{.root.BranchName}}{{else}}{{ShortSha .root.CommitID}}{{end}}</strong>
2526
{{end}}
2627
</span>

‎templates/repo/clone_buttons.tmpl

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<!-- there is always at least one button (by context/repo.go) -->
22
{{if $.CloneButtonShowHTTPS}}
3-
<button class="ui basic clone button no-transition" id="repo-clone-https" data-link="{{$.CloneButtonOriginLink.HTTPS}}">
3+
<button class="ui basic small compact clone button no-transition" id="repo-clone-https" data-link="{{$.CloneButtonOriginLink.HTTPS}}">
44
{{if UseHTTPS}}HTTPS{{else}}HTTP{{end}}
55
</button>
66
{{end}}
77
{{if $.CloneButtonShowSSH}}
8-
<button class="ui basic clone button no-transition" id="repo-clone-ssh" data-link="{{$.CloneButtonOriginLink.SSH}}">
8+
<button class="ui basic small compact clone button no-transition" id="repo-clone-ssh" data-link="{{$.CloneButtonOriginLink.SSH}}">
99
SSH
1010
</button>
1111
{{end}}
12-
<input id="repo-clone-url" class="js-clone-url" value="{{$.CloneButtonOriginLink.HTTPS}}" size="1" readonly>
13-
<button class="ui basic icon button tooltip" id="clipboard-btn" data-content="{{.locale.Tr "copy_url"}}" data-clipboard-target="#repo-clone-url" aria-label="{{.locale.Tr "copy_url"}}">
14-
{{svg "octicon-paste"}}
12+
<input id="repo-clone-url" size="20" class="js-clone-url br-0" value="{{$.CloneButtonOriginLink.HTTPS}}" readonly>
13+
<button class="ui basic small compact icon button tooltip" id="clipboard-btn" data-content="{{.locale.Tr "copy_url"}}" data-clipboard-target="#repo-clone-url" aria-label="{{.locale.Tr "copy_url"}}">
14+
{{svg "octicon-copy" 14}}
1515
</button>

‎templates/repo/commits.tmpl

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
{{template "repo/header" .}}
44
<div class="ui container">
55
{{template "repo/sub_menu" .}}
6-
<div class="ui secondary stackable menu mobile--margin-between-items">
7-
{{template "repo/branch_dropdown" dict "root" .}}
8-
<div class="fitted item">
6+
<div class="flex-button-row df ac sb fw mb-4 mt-3">
7+
<div class="df ac mt-2">
8+
{{template "repo/branch_dropdown" dict "root" .}}
99
<a href="{{.RepoLink}}/graph" class="ui basic small compact button">
1010
<span class="text">
1111
{{svg "octicon-git-branch"}}

‎templates/repo/home.tmpl

+47-52
Original file line numberDiff line numberDiff line change
@@ -60,55 +60,52 @@
6060
</div>
6161
{{end}}
6262
{{template "repo/sub_menu" .}}
63-
<div class="ui stackable secondary menu mobile--margin-between-items mobile--no-negative-margins no-vertical-tabs">
64-
{{template "repo/branch_dropdown" dict "root" .}}
65-
{{ $n := len .TreeNames}}
66-
{{ $l := Subtract $n 1}}
67-
<!-- If home page, show new PR. If not, show breadcrumb -->
68-
{{if eq $n 0}}
69-
{{if and .CanCompareOrPull .IsViewBranch (not .Repository.IsArchived)}}
70-
<div class="fitted item mx-0">
63+
<div class="flex-button-row df ac sb fw">
64+
<div class="df ac mt-3">
65+
{{template "repo/branch_dropdown" dict "root" .}}
66+
{{ $n := len .TreeNames}}
67+
{{ $l := Subtract $n 1}}
68+
<!-- If home page, show new PR. If not, show breadcrumb -->
69+
{{if eq $n 0}}
70+
{{if and .CanCompareOrPull .IsViewBranch (not .Repository.IsArchived)}}
7171
<a href="{{.BaseRepo.Link}}/compare/{{PathEscapeSegments .BaseRepo.DefaultBranch}}...{{if ne .Repository.Owner.Name .BaseRepo.Owner.Name}}{{PathEscape .Repository.Owner.Name}}{{if .BaseRepo.IsFork}}/{{PathEscape .Repository.Name}}{{end}}:{{end}}{{PathEscapeSegments .BranchName}}">
72-
<button id="new-pull-request" class="ui compact basic button">{{if .PullRequestCtx.Allowed}}{{.locale.Tr "repo.pulls.compare_changes"}}{{else}}{{.locale.Tr "action.compare_branch"}}{{end}}</button>
73-
</a>
74-
</div>
75-
{{end}}
76-
<div class="fitted item mx-0">
77-
<a href="{{.Repository.Link}}/find/{{.BranchNameSubURL}}" class="ui compact basic button">
78-
{{.locale.Tr "repo.find_file.go_to_file"}}
79-
</a>
80-
</div>
81-
{{else}}
82-
<div class="fitted item"><span class="ui breadcrumb repo-path"><a class="section" href="{{.RepoLink}}/src/{{.BranchNameSubURL}}" title="{{.Repository.Name}}">{{EllipsisString .Repository.Name 30}}</a>{{range $i, $v := .TreeNames}}<span class="divider">/</span>{{if eq $i $l}}<span class="active section" title="{{$v}}">{{EllipsisString $v 30}}</span>{{else}}{{ $p := index $.Paths $i}}<span class="section"><a href="{{$.BranchLink}}/{{PathEscapeSegments $p}}" title="{{$v}}">{{EllipsisString $v 30}}</a></span>{{end}}{{end}}</span></div>
83-
{{end}}
84-
<div class="right fitted item mr-0" id="file-buttons">
85-
<div class="ui tiny primary buttons">
86-
{{if .Repository.CanEnableEditor}}
87-
{{if .CanAddFile}}
88-
<a href="{{.RepoLink}}/_new/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}" class="ui button">
89-
{{.locale.Tr "repo.editor.new_file"}}
90-
</a>
91-
{{end}}
92-
{{if .CanUploadFile}}
93-
<a href="{{.RepoLink}}/_upload/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}" class="ui button">
94-
{{.locale.Tr "repo.editor.upload_file"}}
95-
</a>
96-
{{end}}
97-
{{if .CanAddFile}}
98-
<a href="{{.RepoLink}}/_diffpatch/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}" class="ui button">
99-
{{.locale.Tr "repo.editor.patch"}}
100-
</a>
101-
{{end}}
102-
{{end}}
103-
{{if and (ne $n 0) (not .IsViewFile) (not .IsBlame) }}
104-
<a href="{{.RepoLink}}/commits/{{.BranchNameSubURL}}/{{.TreePath | PathEscapeSegments}}" class="ui button">
105-
{{.locale.Tr "repo.file_history"}}
72+
<button id="new-pull-request" class="ui compact basic button tooltip" data-content="{{if .PullRequestCtx.Allowed}}{{.locale.Tr "repo.pulls.compare_changes"}}{{else}}{{.locale.Tr "action.compare_branch"}}{{end}}"><span class="text">{{svg "octicon-git-pull-request"}}</span></button>
10673
</a>
10774
{{end}}
108-
</div>
109-
75+
<a href="{{.Repository.Link}}/find/{{.BranchNameSubURL}}" class="ui compact basic button tooltip" data-content="{{.locale.Tr "repo.find_file.go_to_file"}}">{{svg "octicon-file-moved" 15}}</a>
76+
<button class="ui basic small compact dropdown jump icon button mr-2">
77+
<span class="text">{{.locale.Tr "repo.editor.add_file"}}</span>
78+
<div class="menu">
79+
{{if .Repository.CanEnableEditor}}
80+
{{if .CanAddFile}}
81+
<a class="item" href="{{.RepoLink}}/_new/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">
82+
{{.locale.Tr "repo.editor.new_file"}}
83+
</a>
84+
{{end}}
85+
{{if .CanUploadFile}}
86+
<a class="item" href="{{.RepoLink}}/_upload/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">
87+
{{.locale.Tr "repo.editor.upload_file"}}
88+
</a>
89+
{{end}}
90+
{{if .CanAddFile}}
91+
<a class="item" href="{{.RepoLink}}/_diffpatch/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">
92+
{{.locale.Tr "repo.editor.patch"}}
93+
</a>
94+
{{end}}
95+
{{end}}
96+
{{if and (ne $n 0) (not .IsViewFile) (not .IsBlame) }}
97+
<a class="item"href="{{.RepoLink}}/commits/{{.BranchNameSubURL}}/{{.TreePath | PathEscapeSegments}}">
98+
{{.locale.Tr "repo.file_history"}}
99+
</a>
100+
{{end}}
101+
</div>
102+
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
103+
</button>
104+
{{else}}
105+
<span class="ui breadcrumb repo-path"><a class="section" href="{{.RepoLink}}/src/{{.BranchNameSubURL}}" title="{{.Repository.Name}}">{{EllipsisString .Repository.Name 30}}</a>{{range $i, $v := .TreeNames}}<span class="divider">/</span>{{if eq $i $l}}<span class="active section" title="{{$v}}">{{EllipsisString $v 30}}</span>{{else}}{{ $p := index $.Paths $i}}<span class="section"><a href="{{$.BranchLink}}/{{PathEscapeSegments $p}}" title="{{$v}}">{{EllipsisString $v 30}}</a></span>{{end}}{{end}}</span>
106+
{{end}}
110107
</div>
111-
<div class="fitted item">
108+
<div class="df ac mt-3">
112109
{{if eq $n 0}}
113110
{{if .Repository.IsTemplate}}
114111
<div class="ui tiny primary buttons">
@@ -118,15 +115,13 @@
118115
</div>
119116
{{end}}
120117
{{end}}
121-
</div>
122-
<div class="fitted item">
123118
<!-- Only show clone panel in repository home page -->
124119
{{if eq $n 0}}
125120
<div class="ui action tiny input" id="clone-panel">
126-
{{template "repo/clone_buttons" .}}
127-
{{template "repo/clone_script" .}}
128-
{{if not .DisableDownloadSourceArchives}}
129-
<button id="download-btn" class="ui basic jump dropdown icon button tooltip" data-content="{{.locale.Tr "repo.download_archive"}}" data-position="top right">
121+
{{template "repo/clone_buttons" .}}
122+
{{template "repo/clone_script" .}}
123+
{{if not .DisableDownloadSourceArchives}}
124+
<button id="download-btn" class="ui basic small compact jump dropdown icon button tooltip" data-content="{{.locale.Tr "repo.download_archive"}}" data-position="top right">
130125
{{svg "octicon-download"}}
131126
<div class="menu">
132127
<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.BranchName}}.zip" rel="nofollow">{{svg "octicon-file-zip" 16 "mr-3"}}{{.locale.Tr "repo.download_zip"}}</a>
@@ -135,7 +130,7 @@
135130
<a class="item" href="vscode://vscode.git/clone?url={{$.RepoCloneLink.HTTPS}}">{{svg "gitea-vscode" 16 "mr-3"}}{{.locale.Tr "repo.clone_in_vsc"}}</a>
136131
</div>
137132
</button>
138-
{{end}}
133+
{{end}}
139134
</div>
140135
{{end}}
141136
</div>

‎templates/repo/sub_menu.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="ui segments repository-summary{{if and (.Permission.CanRead $.UnitTypeCode) (not .IsEmptyRepo) .LanguageStats }} repository-summary-language-stats{{end}} mt-3">
1+
<div class="ui segments repository-summary{{if and (.Permission.CanRead $.UnitTypeCode) (not .IsEmptyRepo) .LanguageStats }} repository-summary-language-stats{{end}} my-2">
22
<div class="ui segment sub-menu repository-menu">
33
<div class="ui two horizontal center link list">
44
{{if and (.Permission.CanRead $.UnitTypeCode) (not .IsEmptyRepo)}}

‎templates/repo/view_list.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<table id="repo-files-table" class="ui single line table" data-last-commit-loader-url="{{.LastCommitLoaderURL}}">
1+
<table id="repo-files-table" class="ui single line table mt-0" data-last-commit-loader-url="{{.LastCommitLoaderURL}}">
22
<thead>
33
<tr class="commit-list">
44
<th colspan="2" {{if not .LatestCommit}}class="notready"{{end}}>

‎templates/repo/wiki/view.tmpl

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
{{template "repo/header" .}}
44
{{ $title := .title}}
55
<div class="ui container">
6-
<div class="ui stackable secondary menu mobile--margin-between-items mobile--no-negative-margins no-vertical-tabs">
7-
<div class="fitted item">
6+
<div class="flex-button-row df ac sb fw">
7+
<div class="df ac mt-2">
88
<div class="choose page">
99
<div class="ui floating filter dropdown" data-no-results="{{.locale.Tr "repo.pulls.no_results"}}">
1010
<div class="ui basic small button">
@@ -28,7 +28,7 @@
2828
</div>
2929
</div>
3030
</div>
31-
<div class="right fitted item">
31+
<div class="df ac mt-2">
3232
<div class="ui action small input" id="clone-panel">
3333
{{template "repo/clone_buttons" .}}
3434
{{template "repo/clone_script" .}}

‎web_src/js/features/repo-common.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ export function initRepoCloneLink() {
6767
window.updateCloneStates();
6868
});
6969

70-
$inputLink.on('click', () => {
70+
$inputLink.on('focus', () => {
7171
$inputLink.select();
7272
});
7373
}

‎web_src/less/_base.less

+13
Original file line numberDiff line numberDiff line change
@@ -2216,3 +2216,16 @@ table th[data-sortt-desc] {
22162216
.color-text-light-2 {
22172217
color: var(--color-text-light-2);
22182218
}
2219+
2220+
.flex-button-row {
2221+
margin-bottom: 10px;
2222+
}
2223+
2224+
.flex-button-row .button {
2225+
padding: 6px 10px !important;
2226+
height: 30px;
2227+
}
2228+
2229+
.flex-button-row input {
2230+
height: 30px;
2231+
}

‎web_src/less/_repository.less

+20-68
Original file line numberDiff line numberDiff line change
@@ -67,22 +67,6 @@
6767
min-width: 40% !important;
6868
}
6969

70-
#file-buttons {
71-
/* The reason for the !important is that Semantic itself has
72-
margin-left: 0 !important on right items on mobile, which is mostly
73-
to make sure elements which on menus would otherwise be on the right
74-
align correctly with other elements when stacked.
75-
Unfortunately, this brings some weird alignment on this particular
76-
element, so we need to override it. */
77-
margin-left: auto !important;
78-
font-weight: normal;
79-
80-
.ui.button {
81-
padding: 8px 10px;
82-
font-weight: normal;
83-
}
84-
}
85-
8670
.unicode-escaped .escaped-code-point {
8771
&[data-escaped]::before {
8872
visibility: visible;
@@ -223,22 +207,15 @@
223207
}
224208

225209
#clone-panel {
226-
width: 350px;
227-
228-
@media @mediaSm {
229-
width: 100%;
230-
}
231-
232-
input {
233-
border-radius: 0;
234-
padding: 5px 10px;
235-
width: 50%;
236-
line-height: 1.4;
237-
}
210+
#repo-clone-url {
211+
width: 320px;
238212

239-
.clone.button {
240-
font-size: 13px;
241-
padding: 7.5px 5px;
213+
@media @mediaMd {
214+
width: 200px;
215+
}
216+
@media @mediaSm {
217+
width: 200px;
218+
}
242219
}
243220

244221
#repo-clone-https,
@@ -258,10 +235,6 @@
258235
border-radius: 0 var(--border-radius) var(--border-radius) 0 !important;
259236
}
260237

261-
.icon.button {
262-
padding: 0 10px;
263-
}
264-
265238
.dropdown .menu {
266239
right: 0 !important;
267240
left: auto !important;
@@ -293,25 +266,6 @@
293266
}
294267
}
295268

296-
#file-buttons {
297-
font-weight: normal;
298-
299-
.ui.button {
300-
padding: 8px 10px;
301-
font-weight: normal;
302-
}
303-
304-
.ui.tiny.primary.buttons {
305-
@media @mediaSm {
306-
width: 100%;
307-
}
308-
}
309-
310-
.button + .button {
311-
border-left: none;
312-
}
313-
}
314-
315269
#repo-files-table {
316270
thead {
317271
th {
@@ -2906,20 +2860,6 @@ tbody.commit-list {
29062860
text-align: left;
29072861
}
29082862

2909-
@media @mediaSm {
2910-
.ui.stackable.menu {
2911-
&.mobile--margin-between-items > .item {
2912-
margin-top: 5px;
2913-
margin-bottom: 5px;
2914-
}
2915-
2916-
&.mobile--no-negative-margins {
2917-
margin-left: 0;
2918-
margin-right: 0;
2919-
}
2920-
}
2921-
}
2922-
29232863
#topic_edit {
29242864
margin-top: 5px;
29252865
}
@@ -3431,3 +3371,15 @@ td.blob-excerpt {
34313371
}
34323372
}
34333373
}
3374+
3375+
.branch-dropdown-button {
3376+
max-width: 340px;
3377+
vertical-align: bottom !important;
3378+
3379+
@media @mediaMd {
3380+
max-width: 185px;
3381+
}
3382+
@media @mediaSm {
3383+
max-width: 165px;
3384+
}
3385+
}

‎web_src/less/helpers.less

+1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
.vm { vertical-align: middle !important; }
1818
.w-100 { width: 100% !important; }
1919
.h-100 { height: 100% !important; }
20+
.br-0 { border-radius: 0 !important; }
2021

2122
.mono {
2223
font-family: var(--fonts-monospace) !important;

0 commit comments

Comments
 (0)