third_party
/
gitea
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Rework repo buttons (#20602)

Browse Source 
* 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
11 changed files with 120 additions and 143 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  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

1
options/locale/locale_en-US.ini
Unescape View File

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

11
templates/repo/branch_dropdown.tmpl
Unescape 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.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>

10
templates/repo/clone_buttons.tmpl
Unescape 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="{{.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>

4
templates/repo/commits.tmpl
Unescape 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">
<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"}}

41
templates/repo/home.tmpl
Unescape View File

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

2
templates/repo/sub_menu.tmpl
Unescape 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)}}

2
templates/repo/view_list.tmpl
Unescape 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}}>

6
templates/repo/wiki/view.tmpl
Unescape 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="{{.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" .}}

2
web_src/js/features/repo-common.js
Unescape View File

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

119
web_src/less/_repository.less
Unescape 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%;
@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;
}
}

1
web_src/less/helpers.less
Unescape 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;

Write Preview
Loading…
Cancel
Save