Rework repo buttons (#20602, #20718) (#20719)

* 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: https://github.com/go-gitea/gitea/issues/13671
Replaces: https://github.com/go-gitea/gitea/pull/20375

* Restore history button and hide add button when unable to add (#20718)

Fix two regressions from #20602:

- Restore the 'History' button that was previously unable to render
  because it's show condition was never hit
- Hide the 'Add File' button when there would be no items in the
  dropdown.

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
silverwind 2022-08-20 16:49:16 +02:00 committed by GitHub
parent b88a4b4854
commit c61ed6fad4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 122 additions and 141 deletions

View File

@ -1061,6 +1061,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

View File

@ -1,5 +1,6 @@
{{$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"
@ -7,20 +8,20 @@
data-can-create-branch="{{if .canCreateBranch}}{{.canCreateBranch}}{{else}}{{.root.CanCreateBranch}}{{end}}"
data-no-results="{{.root.i18n.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.i18n.Tr "repo.release.compare"}}
{{else}}
<span :class="{visible: isViewTag}" v-if="isViewTag" v-cloak>{{svg "octicon-tag"}} {{.root.i18n.Tr "repo.tag"}}:</span>
<span :class="{visible: isViewBranch}" v-if="isViewBranch" v-cloak>{{svg "octicon-git-branch"}} {{.root.i18n.Tr "repo.branch"}}:</span>
<span :class="{visible: isViewTree}" v-if="isViewTree" v-cloak>{{svg "octicon-git-branch"}} {{.root.i18n.Tr "repo.tree"}}:</span>
<span :class="{visible: isViewTag}" v-if="isViewTag" {{if not (eq $type "tag")}}v-cloak{{end}}>{{svg "octicon-tag"}} {{.root.i18n.Tr "repo.tag"}}:</span>
<span :class="{visible: isViewBranch}" v-if="isViewBranch" {{if not (eq $type "branch")}}v-cloak{{end}}>{{svg "octicon-git-branch"}} {{.root.i18n.Tr "repo.branch"}}:</span>
<span :class="{visible: isViewTree}" v-if="isViewTree" {{if not (eq $type "tree")}}v-cloak{{end}}>{{svg "octicon-git-branch"}} {{.root.i18n.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>

View File

@ -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="{{.i18n.Tr "copy_url"}}" data-clipboard-target="#repo-clone-url" aria-label="{{.i18n.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="{{.i18n.Tr "copy_url"}}" data-clipboard-target="#repo-clone-url" aria-label="{{.i18n.Tr "copy_url"}}">
{{svg "octicon-copy" 14}}
</button>

View File

@ -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"}}

View File

@ -60,55 +60,49 @@
</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}}{{.i18n.Tr "repo.pulls.compare_changes"}}{{else}}{{.i18n.Tr "action.compare_branch"}}{{end}}</button>
<button id="new-pull-request" class="ui compact basic button tooltip" data-content="{{if .PullRequestCtx.Allowed}}{{.i18n.Tr "repo.pulls.compare_changes"}}{{else}}{{.i18n.Tr "action.compare_branch"}}{{end}}"><span class="text">{{svg "octicon-git-pull-request"}}</span></button>
</a>
</div>
{{end}}
<a href="{{.Repository.Link}}/find/{{.BranchNameSubURL}}" class="ui compact basic button tooltip" data-content="{{.i18n.Tr "repo.find_file.go_to_file"}}">{{svg "octicon-file-moved" 15}}</a>
{{if or .CanAddFile .CanUploadFile}}
<button class="ui basic small compact dropdown jump icon button mr-2">
<span class="text">{{.i18n.Tr "repo.editor.add_file"}}</span>
<div class="menu">
{{if .Repository.CanEnableEditor}}
{{if .CanAddFile}}
<a class="item" href="{{.RepoLink}}/_new/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">
{{.i18n.Tr "repo.editor.new_file"}}
</a>
{{end}}
{{if .CanUploadFile}}
<a class="item" href="{{.RepoLink}}/_upload/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">
{{.i18n.Tr "repo.editor.upload_file"}}
</a>
{{end}}
{{if .CanAddFile}}
<a class="item" href="{{.RepoLink}}/_diffpatch/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">
{{.i18n.Tr "repo.editor.patch"}}
</a>
{{end}}
{{end}}
</div>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
</button>
{{end}}
{{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 class="fitted item mx-0">
<a href="{{.Repository.Link}}/find/{{.BranchNameSubURL}}" class="ui compact basic button">
{{.i18n.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">
{{.i18n.Tr "repo.editor.new_file"}}
</a>
{{end}}
{{if .CanUploadFile}}
<a href="{{.RepoLink}}/_upload/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}" class="ui button">
{{.i18n.Tr "repo.editor.upload_file"}}
</a>
{{end}}
{{if .CanAddFile}}
<a href="{{.RepoLink}}/_diffpatch/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}" class="ui button">
{{.i18n.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">
{{.i18n.Tr "repo.file_history"}}
</a>
{{end}}
</div>
</div>
<div class="fitted item">
<div class="df ac">
{{if eq $n 0}}
{{if .Repository.IsTemplate}}
<div class="ui tiny primary buttons">
@ -118,14 +112,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" .}}
<button id="download-btn" class="ui basic jump dropdown icon button tooltip" data-content="{{.i18n.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="{{.i18n.Tr "repo.download_archive"}}" data-position="top right">
{{svg "octicon-download"}}
<div class="menu">
{{if not $.DisableDownloadSourceArchives}}
@ -136,8 +129,14 @@
<a class="item" href="vscode://vscode.git/clone?url={{$.RepoCloneLink.HTTPS}}">{{svg "gitea-vscode" 16 "mr-3"}}{{.i18n.Tr "repo.clone_in_vsc"}}</a>
</div>
</button>
{{end}}
</div>
{{end}}
{{if and (ne $n 0) (not .IsViewFile) (not .IsBlame) }}
<a class="ui button" href="{{.RepoLink}}/commits/{{.BranchNameSubURL}}/{{.TreePath | PathEscapeSegments}}">
{{svg "octicon-history" 16 "mr-3"}}{{.i18n.Tr "repo.file_history"}}
</a>
{{end}}
</div>
</div>
{{if .IsViewFile}}

View File

@ -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)}}

View File

@ -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}}>

View File

@ -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="{{.i18n.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" .}}

View File

@ -67,7 +67,7 @@ export function initRepoCloneLink() {
window.updateCloneStates();
});
$inputLink.on('click', () => {
$inputLink.on('focus', () => {
$inputLink.select();
});
}

View File

@ -67,22 +67,6 @@
min-width: 40% !important;
}
#file-buttons {
/* The reason for the !important is that Semantic itself has
margin-left: 0 !important on right items on mobile, which is mostly
to make sure elements which on menus would otherwise be on the right
align correctly with other elements when stacked.
Unfortunately, this brings some weird alignment on this particular
element, so we need to override it. */
margin-left: auto !important;
font-weight: normal;
.ui.button {
padding: 8px 10px;
font-weight: normal;
}
}
.unicode-escaped .escaped-code-point {
&[data-escaped]::before {
visibility: visible;
@ -223,22 +207,15 @@
}
#clone-panel {
width: 350px;
#repo-clone-url {
width: 320px;
@media @mediaSm {
width: 100%;
}
input {
border-radius: 0;
padding: 5px 10px;
width: 50%;
line-height: 1.4;
}
.clone.button {
font-size: 13px;
padding: 7.5px 5px;
@media @mediaMd {
width: 200px;
}
@media @mediaSm {
width: 200px;
}
}
#repo-clone-https,
@ -258,10 +235,6 @@
border-radius: 0 var(--border-radius) var(--border-radius) 0 !important;
}
.icon.button {
padding: 0 10px;
}
.dropdown .menu {
right: 0 !important;
left: auto !important;
@ -293,25 +266,6 @@
}
}
#file-buttons {
font-weight: normal;
.ui.button {
padding: 8px 10px;
font-weight: normal;
}
.ui.tiny.primary.buttons {
@media @mediaSm {
width: 100%;
}
}
.button + .button {
border-left: none;
}
}
#repo-files-table {
thead {
th {
@ -2108,10 +2062,6 @@
}
&.view {
.choose.page {
margin-top: -5px;
}
> .markup {
padding: 15px 30px;
@ -2138,6 +2088,12 @@
margin-bottom: 2px;
}
}
@media @mediaSm {
#clone-panel #repo-clone-url {
width: 160px;
}
}
}
&.settings {
@ -2828,6 +2784,31 @@
line-height: 1.3em; // there is a `font-size: 1.25em` for inside emoji, so here the line-height needs to be larger slightly
}
.repo-button-row {
margin-bottom: 10px;
}
.repo-button-row > * {
margin-top: 10px;
}
.wiki .repo-button-row {
margin-bottom: 0;
}
.wiki .repo-button-row > * {
margin-top: 0;
}
.repo-button-row .button {
padding: 6px 10px !important;
height: 30px;
}
.repo-button-row input {
height: 30px;
}
tbody.commit-list {
vertical-align: baseline;
}
@ -2905,20 +2886,6 @@ tbody.commit-list {
text-align: left;
}
@media @mediaSm {
.ui.stackable.menu {
&.mobile--margin-between-items > .item {
margin-top: 5px;
margin-bottom: 5px;
}
&.mobile--no-negative-margins {
margin-left: 0;
margin-right: 0;
}
}
}
#topic_edit {
margin-top: 5px;
}
@ -3442,3 +3409,15 @@ td.blob-excerpt {
}
}
}
.branch-dropdown-button {
max-width: 340px;
vertical-align: bottom !important;
@media @mediaMd {
max-width: 185px;
}
@media @mediaSm {
max-width: 165px;
}
}

View File

@ -17,6 +17,7 @@
.vm { vertical-align: middle !important; }
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.br-0 { border-radius: 0 !important; }
.mono {
font-family: var(--fonts-monospace) !important;