Rework repo buttons (#20602)

* 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 - Margin and wiki tweaks Buttons are now all equal height, mobile layout wraps gracefully. Fixes: #13671 Replaces: #20375 Co-authored-by: Lauris BH <lauris@nix.lv> Co-authored-by: zeripath <art27@cantab.net> Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
go-gitea · Aug 7, 2022 · abdebd2 · abdebd2
1 parent be82489
commit abdebd2
Show file tree

Hide file tree

Showing 11 changed files with 120 additions and 143 deletions.
diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
@@ -1063,6 +1063,7 @@ normal_view = Normal View
 line = line
 lines = lines
 
+editor.add_file = Add File
 editor.new_file = New File
 editor.upload_file = Upload File
 editor.edit_file = Edit File

diff --git a/templates/repo/branch_dropdown.tmpl b/templates/repo/branch_dropdown.tmpl
@@ -1,26 +1,27 @@
 {{$release := .release}}
 {{$defaultBranch := $.root.BranchName}}{{if and .root.IsViewTag (not .noTag)}}{{$defaultBranch = .root.TagName}}{{end}}{{if eq $defaultBranch ""}}{{$defaultBranch = $.root.Repository.DefaultBranch}}{{end}}
+{{$type := ""}}{{if and .root.IsViewTag (not .noTag)}}{{$type = "tag"}}{{else if .root.IsViewBranch}}{{$type = "branch"}}{{else}}{{$type = "tree"}}{{end}}
 {{$showBranchesInDropdown := not .root.HideBranchesInDropdown}}
 <div class="fitted item choose reference{{if not $release}} mr-1{{end}}">
 	<div class="ui floating filter dropdown custom"
 		data-branch-form="{{if $.branchForm}}{{$.branchForm}}{{end}}"
 		data-can-create-branch="{{if .canCreateBranch}}{{.canCreateBranch}}{{else}}{{.root.CanCreateBranch}}{{end}}"
 		data-no-results="{{.root.locale.Tr "repo.pulls.no_results"}}"
 		data-set-action="{{.setAction}}" data-submit-form="{{.submitForm}}"
-		data-view-type="{{if and .root.IsViewTag (not .noTag)}}tag{{else if .root.IsViewBranch}}branch{{else}}tree{{end}}"
+		data-view-type="{{$type}}"
 		data-ref-name="{{if and .root.IsViewTag (not .noTag)}}{{.root.TagName}}{{else if .root.IsViewBranch}}{{.root.BranchName}}{{else}}{{ShortSha .root.CommitID}}{{end}}"
 		data-branch-url-prefix="{{if .branchURLPrefix}}{{.branchURLPrefix}}{{else}}{{$.root.RepoLink}}/{{if $.root.PageIsCommits}}commits{{else}}src{{end}}/branch/{{end}}"
 		data-branch-url-suffix="{{if .branchURLSuffix}}{{.branchURLSuffix}}{{else}}{{if $.root.TreePath}}/{{PathEscapeSegments $.root.TreePath}}{{end}}{{end}}"
 		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}}"
 		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}}">
-		<div class="ui basic small compact button" @click="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible">
+		<div class="branch-dropdown-button ellipsis ui basic small compact button" @click="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible">
 			<span class="text">
 				{{if $release}}
 					{{.root.locale.Tr "repo.release.compare"}}
 				{{else}}
-					<span :class="{visible: isViewTag}" v-if="isViewTag" v-cloak>{{svg "octicon-tag"}} {{.root.locale.Tr "repo.tag"}}:</span>
-					<span :class="{visible: isViewBranch}" v-if="isViewBranch" v-cloak>{{svg "octicon-git-branch"}} {{.root.locale.Tr "repo.branch"}}:</span>
-					<span :class="{visible: isViewTree}" v-if="isViewTree" v-cloak>{{svg "octicon-git-branch"}} {{.root.locale.Tr "repo.tree"}}:</span>
+					<span :class="{visible: isViewTag}" v-if="isViewTag" {{if not (eq $type "tag")}}v-cloak{{end}}>{{svg "octicon-tag"}} {{.root.locale.Tr "repo.tag"}}:</span>
+					<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>
+					<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>
 					<strong ref="dropdownRefName">{{if and .root.IsViewTag (not .noTag)}}{{.root.TagName}}{{else if .root.IsViewBranch}}{{.root.BranchName}}{{else}}{{ShortSha .root.CommitID}}{{end}}</strong>
 				{{end}}
 			</span>

diff --git a/templates/repo/clone_buttons.tmpl b/templates/repo/clone_buttons.tmpl
@@ -1,15 +1,15 @@
 <!-- there is always at least one button (by context/repo.go) -->
 {{if $.CloneButtonShowHTTPS}}
-	<button class="ui basic clone button no-transition" id="repo-clone-https" data-link="{{$.CloneButtonOriginLink.HTTPS}}">
+	<button class="ui basic small compact clone button no-transition" id="repo-clone-https" data-link="{{$.CloneButtonOriginLink.HTTPS}}">
 		{{if UseHTTPS}}HTTPS{{else}}HTTP{{end}}
 	</button>
 {{end}}
 {{if $.CloneButtonShowSSH}}
-	<button class="ui basic clone button no-transition" id="repo-clone-ssh" data-link="{{$.CloneButtonOriginLink.SSH}}">
+	<button class="ui basic small compact clone button no-transition" id="repo-clone-ssh" data-link="{{$.CloneButtonOriginLink.SSH}}">
 		SSH
 	</button>
 {{end}}
-<input id="repo-clone-url" class="js-clone-url" value="{{$.CloneButtonOriginLink.HTTPS}}" size="1" readonly>
-<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"}}">
-	{{svg "octicon-paste"}}
+<input id="repo-clone-url" size="20" class="js-clone-url br-0" value="{{$.CloneButtonOriginLink.HTTPS}}" readonly>
+<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"}}">
+	{{svg "octicon-copy" 14}}
 </button>
diff --git a/templates/repo/commits.tmpl b/templates/repo/commits.tmpl
@@ -3,9 +3,9 @@
 	{{template "repo/header" .}}
 	<div class="ui container">
 		{{template "repo/sub_menu" .}}
-		<div class="ui secondary stackable menu mobile--margin-between-items">
-		{{template "repo/branch_dropdown" dict "root" .}}
-			<div class="fitted item">
+		<div class="repo-button-row df ac sb fw mb-4 mt-3">
+			<div class="df ac">
+				{{template "repo/branch_dropdown" dict "root" .}}
 				<a href="{{.RepoLink}}/graph" class="ui basic small compact button">
 					<span class="text">
 						{{svg "octicon-git-branch"}}

diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
@@ -60,55 +60,52 @@
 			</div>
 		{{end}}
 		{{template "repo/sub_menu" .}}
-		<div class="ui stackable secondary menu mobile--margin-between-items mobile--no-negative-margins no-vertical-tabs">
-			{{template "repo/branch_dropdown" dict "root" .}}
-			{{ $n := len .TreeNames}}
-			{{ $l := Subtract $n 1}}
-			<!-- If home page, show new PR. If not, show breadcrumb -->
-			{{if eq $n 0}}
-				{{if and .CanCompareOrPull .IsViewBranch (not .Repository.IsArchived)}}
-					<div class="fitted item mx-0">
+		<div class="repo-button-row df ac sb fw">
+			<div class="df ac">
+				{{template "repo/branch_dropdown" dict "root" .}}
+				{{ $n := len .TreeNames}}
+				{{ $l := Subtract $n 1}}
+				<!-- If home page, show new PR. If not, show breadcrumb -->
+				{{if eq $n 0}}
+					{{if and .CanCompareOrPull .IsViewBranch (not .Repository.IsArchived)}}
 						<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}}">
-							<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>
-						</a>
-					</div>
-				{{end}}
-				<div class="fitted item mx-0">
-					<a href="{{.Repository.Link}}/find/{{.BranchNameSubURL}}" class="ui compact basic button">
-						{{.locale.Tr "repo.find_file.go_to_file"}}
-					</a>
-				</div>
-			{{else}}
-				<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>
-			{{end}}
-			<div class="right fitted item mr-0" id="file-buttons">
-				<div class="ui tiny primary buttons">
-					{{if .Repository.CanEnableEditor}}
-						{{if .CanAddFile}}
-							<a href="{{.RepoLink}}/_new/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}" class="ui button">
-								{{.locale.Tr "repo.editor.new_file"}}
-							</a>
-						{{end}}
-						{{if .CanUploadFile}}
-							<a href="{{.RepoLink}}/_upload/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}" class="ui button">
-								{{.locale.Tr "repo.editor.upload_file"}}
-							</a>
-						{{end}}
-						{{if .CanAddFile}}
-							<a href="{{.RepoLink}}/_diffpatch/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}" class="ui button">
-								{{.locale.Tr "repo.editor.patch"}}
-							</a>
-						{{end}}
-					{{end}}
-					{{if and (ne $n 0) (not .IsViewFile) (not .IsBlame) }}
-						<a href="{{.RepoLink}}/commits/{{.BranchNameSubURL}}/{{.TreePath | PathEscapeSegments}}" class="ui button">
-							{{.locale.Tr "repo.file_history"}}
+							<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>
 						</a>
 					{{end}}
-				</div>
-
+					<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>
+					<button class="ui basic small compact dropdown jump icon button mr-2">
+						<span class="text">{{.locale.Tr "repo.editor.add_file"}}</span>
+						<div class="menu">
+							{{if .Repository.CanEnableEditor}}
+								{{if .CanAddFile}}
+									<a class="item" href="{{.RepoLink}}/_new/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">
+										{{.locale.Tr "repo.editor.new_file"}}
+									</a>
+								{{end}}
+								{{if .CanUploadFile}}
+									<a class="item" href="{{.RepoLink}}/_upload/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">
+										{{.locale.Tr "repo.editor.upload_file"}}
+									</a>
+								{{end}}
+								{{if .CanAddFile}}
+									<a class="item" href="{{.RepoLink}}/_diffpatch/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">
+										{{.locale.Tr "repo.editor.patch"}}
+									</a>
+								{{end}}
+							{{end}}
+							{{if and (ne $n 0) (not .IsViewFile) (not .IsBlame) }}
+								<a class="item"href="{{.RepoLink}}/commits/{{.BranchNameSubURL}}/{{.TreePath | PathEscapeSegments}}">
+									{{.locale.Tr "repo.file_history"}}
+								</a>
+							{{end}}
+						</div>
+						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+					</button>
+				{{else}}
+					<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>
+				{{end}}
 			</div>
-			<div class="fitted item">
+			<div class="df ac">
 				{{if eq $n 0}}
 					{{if .Repository.IsTemplate}}
 						<div class="ui tiny primary buttons">
@@ -118,15 +115,13 @@
 						</div>
 					{{end}}
 				{{end}}
-			</div>
-			<div class="fitted item">
 				<!-- Only show clone panel in repository home page -->
 				{{if eq $n 0}}
 					<div class="ui action tiny input" id="clone-panel">
-						{{template "repo/clone_buttons" .}}
-						{{template "repo/clone_script" .}}
-						{{if not .DisableDownloadSourceArchives}}
-						<button id="download-btn" class="ui basic jump dropdown icon button tooltip" data-content="{{.locale.Tr "repo.download_archive"}}" data-position="top right">
+					{{template "repo/clone_buttons" .}}
+					{{template "repo/clone_script" .}}
+					{{if not .DisableDownloadSourceArchives}}
+						<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">
 							{{svg "octicon-download"}}
 							<div class="menu">
 								<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 @@
 								<a class="item" href="vscode://vscode.git/clone?url={{$.RepoCloneLink.HTTPS}}">{{svg "gitea-vscode" 16 "mr-3"}}{{.locale.Tr "repo.clone_in_vsc"}}</a>
 							</div>
 						</button>
-						{{end}}
+					{{end}}
 					</div>
 				{{end}}
 			</div>

diff --git a/templates/repo/sub_menu.tmpl b/templates/repo/sub_menu.tmpl
@@ -1,4 +1,4 @@
-<div class="ui segments repository-summary{{if and (.Permission.CanRead $.UnitTypeCode) (not .IsEmptyRepo) .LanguageStats }} repository-summary-language-stats{{end}} mt-3">
+<div class="ui segments repository-summary{{if and (.Permission.CanRead $.UnitTypeCode) (not .IsEmptyRepo) .LanguageStats }} repository-summary-language-stats{{end}} mt-2 mb-0">
 	<div class="ui segment sub-menu repository-menu">
 		<div class="ui two horizontal center link list">
 			{{if and (.Permission.CanRead $.UnitTypeCode) (not .IsEmptyRepo)}}

diff --git a/templates/repo/view_list.tmpl b/templates/repo/view_list.tmpl
@@ -1,4 +1,4 @@
-<table id="repo-files-table" class="ui single line table" data-last-commit-loader-url="{{.LastCommitLoaderURL}}">
+<table id="repo-files-table" class="ui single line table mt-0" data-last-commit-loader-url="{{.LastCommitLoaderURL}}">
 	<thead>
 		<tr class="commit-list">
 			<th colspan="2" {{if not .LatestCommit}}class="notready"{{end}}>

diff --git a/templates/repo/wiki/view.tmpl b/templates/repo/wiki/view.tmpl
@@ -3,8 +3,8 @@
 	{{template "repo/header" .}}
 	{{ $title := .title}}
 	<div class="ui container">
-		<div class="ui stackable secondary menu mobile--margin-between-items mobile--no-negative-margins no-vertical-tabs">
-			<div class="fitted item">
+		<div class="repo-button-row df ac sb fw">
+			<div class="df ac">
 				<div class="choose page">
 					<div class="ui floating filter dropdown" data-no-results="{{.locale.Tr "repo.pulls.no_results"}}">
 						<div class="ui basic small button">
@@ -28,7 +28,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="right fitted item">
+			<div class="df ac">
 				<div class="ui action small input" id="clone-panel">
 					{{template "repo/clone_buttons" .}}
 					{{template "repo/clone_script" .}}

diff --git a/web_src/js/features/repo-common.js b/web_src/js/features/repo-common.js
@@ -67,7 +67,7 @@ export function initRepoCloneLink() {
     window.updateCloneStates();
   });
 
-  $inputLink.on('click', () => {
+  $inputLink.on('focus', () => {
     $inputLink.select();
   });
 }