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

Co-authored-by: Lauris BH <lauris@nix.lv>
Co-authored-by: zeripath <art27@cantab.net>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
tokarchuk/v1.18
silverwind 2 years ago committed by GitHub
parent be824890e4
commit abdebd2641
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 1
      options/locale/locale_en-US.ini
  2. 11
      templates/repo/branch_dropdown.tmpl
  3. 10
      templates/repo/clone_buttons.tmpl
  4. 4
      templates/repo/commits.tmpl
  5. 41
      templates/repo/home.tmpl
  6. 2
      templates/repo/sub_menu.tmpl
  7. 2
      templates/repo/view_list.tmpl
  8. 6
      templates/repo/wiki/view.tmpl
  9. 2
      web_src/js/features/repo-common.js
  10. 119
      web_src/less/_repository.less
  11. 1
      web_src/less/helpers.less

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

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

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

@ -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">
<div class="repo-button-row df ac sb fw mb-4 mt-3">
<div class="df ac">
{{template "repo/branch_dropdown" dict "root" .}}
<div class="fitted item">
<a href="{{.RepoLink}}/graph" class="ui basic small compact button">
<span class="text">
{{svg "octicon-git-branch"}}

@ -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">
<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)}}
<div class="fitted item mx-0">
<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>
<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>
</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">
<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 href="{{.RepoLink}}/_new/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}" class="ui button">
<a class="item" href="{{.RepoLink}}/_new/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">
{{.locale.Tr "repo.editor.new_file"}}
</a>
{{end}}
{{if .CanUploadFile}}
<a href="{{.RepoLink}}/_upload/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}" class="ui button">
<a class="item" href="{{.RepoLink}}/_upload/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">
{{.locale.Tr "repo.editor.upload_file"}}
</a>
{{end}}
{{if .CanAddFile}}
<a href="{{.RepoLink}}/_diffpatch/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}" class="ui button">
<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 href="{{.RepoLink}}/commits/{{.BranchNameSubURL}}/{{.TreePath | PathEscapeSegments}}" class="ui button">
<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">
<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>

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

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

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

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

@ -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%;
@media @mediaMd {
width: 200px;
}
input {
border-radius: 0;
padding: 5px 10px;
width: 50%;
line-height: 1.4;
@media @mediaSm {
width: 200px;
}
.clone.button {
font-size: 13px;
padding: 7.5px 5px;
}
#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 {
@ -2109,10 +2063,6 @@
}
&.view {
.choose.page {
margin-top: -5px;
}
> .markup {
padding: 15px 30px;
@ -2139,6 +2089,12 @@
margin-bottom: 2px;
}
}
@media @mediaSm {
#clone-panel #repo-clone-url {
width: 160px;
}
}
}
&.settings {
@ -2829,6 +2785,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;
}
@ -2906,20 +2887,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;
}
@ -3431,3 +3398,15 @@ td.blob-excerpt {
}
}
}
.branch-dropdown-button {
max-width: 340px;
vertical-align: bottom !important;
@media @mediaMd {
max-width: 185px;
}
@media @mediaSm {
max-width: 165px;
}
}

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

Loading…
Cancel
Save