From abdebd2641e162791144fbd57acf480b4640baa8 Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 8 Aug 2022 01:15:11 +0200 Subject: [PATCH] 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 Co-authored-by: zeripath Co-authored-by: Lunny Xiao --- options/locale/locale_en-US.ini | 1 + templates/repo/branch_dropdown.tmpl | 11 +-- templates/repo/clone_buttons.tmpl | 10 +-- templates/repo/commits.tmpl | 6 +- templates/repo/home.tmpl | 99 +++++++++++----------- templates/repo/sub_menu.tmpl | 2 +- templates/repo/view_list.tmpl | 2 +- templates/repo/wiki/view.tmpl | 6 +- web_src/js/features/repo-common.js | 2 +- web_src/less/_repository.less | 123 ++++++++++++---------------- web_src/less/helpers.less | 1 + 11 files changed, 120 insertions(+), 143 deletions(-) diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini index 56d6d41916..783783617b 100644 --- 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 index afdaae0f05..9d1ec10d3c 100644 --- a/templates/repo/branch_dropdown.tmpl +++ b/templates/repo/branch_dropdown.tmpl @@ -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}}
-
+
{{if $release}} {{.root.locale.Tr "repo.release.compare"}} {{else}} - {{svg "octicon-tag"}} {{.root.locale.Tr "repo.tag"}}: - {{svg "octicon-git-branch"}} {{.root.locale.Tr "repo.branch"}}: - {{svg "octicon-git-branch"}} {{.root.locale.Tr "repo.tree"}}: + {{svg "octicon-tag"}} {{.root.locale.Tr "repo.tag"}}: + {{svg "octicon-git-branch"}} {{.root.locale.Tr "repo.branch"}}: + {{svg "octicon-git-branch"}} {{.root.locale.Tr "repo.tree"}}: {{if and .root.IsViewTag (not .noTag)}}{{.root.TagName}}{{else if .root.IsViewBranch}}{{.root.BranchName}}{{else}}{{ShortSha .root.CommitID}}{{end}} {{end}} diff --git a/templates/repo/clone_buttons.tmpl b/templates/repo/clone_buttons.tmpl index 0d0fe73014..7fb435e3c7 100644 --- a/templates/repo/clone_buttons.tmpl +++ b/templates/repo/clone_buttons.tmpl @@ -1,15 +1,15 @@ {{if $.CloneButtonShowHTTPS}} - {{end}} {{if $.CloneButtonShowSSH}} - {{end}} - - diff --git a/templates/repo/commits.tmpl b/templates/repo/commits.tmpl index 7e068a370c..9282e1d387 100644 --- a/templates/repo/commits.tmpl +++ b/templates/repo/commits.tmpl @@ -3,9 +3,9 @@ {{template "repo/header" .}}
{{template "repo/sub_menu" .}} -
- {{template "repo/branch_dropdown" dict "root" .}} -
+
+
+ {{template "repo/branch_dropdown" dict "root" .}} {{svg "octicon-git-branch"}} diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl index 0734076eff..74eaa6ab32 100644 --- a/templates/repo/home.tmpl +++ b/templates/repo/home.tmpl @@ -60,55 +60,52 @@
{{end}} {{template "repo/sub_menu" .}} -
- {{template "repo/branch_dropdown" dict "root" .}} - {{ $n := len .TreeNames}} - {{ $l := Subtract $n 1}} - - {{if eq $n 0}} - {{if and .CanCompareOrPull .IsViewBranch (not .Repository.IsArchived)}} -
+
+
+ {{template "repo/branch_dropdown" dict "root" .}} + {{ $n := len .TreeNames}} + {{ $l := Subtract $n 1}} + + {{if eq $n 0}} + {{if and .CanCompareOrPull .IsViewBranch (not .Repository.IsArchived)}} - + -
+ {{end}} + {{svg "octicon-file-moved" 15}} + + {{else}} + {{EllipsisString .Repository.Name 30}}{{range $i, $v := .TreeNames}}/{{if eq $i $l}}{{EllipsisString $v 30}}{{else}}{{ $p := index $.Paths $i}}{{EllipsisString $v 30}}{{end}}{{end}} {{end}} -
- - {{.locale.Tr "repo.find_file.go_to_file"}} - -
- {{else}} -
{{EllipsisString .Repository.Name 30}}{{range $i, $v := .TreeNames}}/{{if eq $i $l}}{{EllipsisString $v 30}}{{else}}{{ $p := index $.Paths $i}}{{EllipsisString $v 30}}{{end}}{{end}}
- {{end}} -
-
- {{if .Repository.CanEnableEditor}} - {{if .CanAddFile}} - - {{.locale.Tr "repo.editor.new_file"}} - - {{end}} - {{if .CanUploadFile}} - - {{.locale.Tr "repo.editor.upload_file"}} - - {{end}} - {{if .CanAddFile}} - - {{.locale.Tr "repo.editor.patch"}} - - {{end}} - {{end}} - {{if and (ne $n 0) (not .IsViewFile) (not .IsBlame) }} - - {{.locale.Tr "repo.file_history"}} - - {{end}} -
-
-
+
{{if eq $n 0}} {{if .Repository.IsTemplate}}
@@ -118,15 +115,13 @@
{{end}} {{end}} -
-
{{if eq $n 0}}
- {{template "repo/clone_buttons" .}} - {{template "repo/clone_script" .}} - {{if not .DisableDownloadSourceArchives}} - - {{end}} + {{end}}
{{end}}
diff --git a/templates/repo/sub_menu.tmpl b/templates/repo/sub_menu.tmpl index bd8fcc40eb..276bf05a4f 100644 --- a/templates/repo/sub_menu.tmpl +++ b/templates/repo/sub_menu.tmpl @@ -1,4 +1,4 @@ -
+
{{if and (.Permission.CanRead $.UnitTypeCode) (not .IsEmptyRepo)}} diff --git a/templates/repo/view_list.tmpl b/templates/repo/view_list.tmpl index 43441b56c1..bd26fac24c 100644 --- a/templates/repo/view_list.tmpl +++ b/templates/repo/view_list.tmpl @@ -1,4 +1,4 @@ - +
diff --git a/templates/repo/wiki/view.tmpl b/templates/repo/wiki/view.tmpl index 21affddc62..d641c25cf0 100644 --- a/templates/repo/wiki/view.tmpl +++ b/templates/repo/wiki/view.tmpl @@ -3,8 +3,8 @@ {{template "repo/header" .}} {{ $title := .title}}
-
-
+
+
@@ -28,7 +28,7 @@
-
+
{{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 index 1cf67401be..ee0da03005 100644 --- 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(); }); } diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 5aed4dcf72..fa634479f6 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -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; + } +} diff --git a/web_src/less/helpers.less b/web_src/less/helpers.less index 0c4bf1753a..cacf7d9c8e 100644 --- a/web_src/less/helpers.less +++ b/web_src/less/helpers.less @@ -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;