* 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>tags/v1.18.0-rc0
@@ -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"> | |||
{{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"}} |
@@ -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> |
@@ -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%; | |||
} | |||
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 { | |||
@@ -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; |