From cb627f79b42a45c45cf694e1438318438a8a5918 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 | 97 +++++++++++----------- 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(+), 141 deletions(-) diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini index 9a8418201aeb6..f6d087ae33b45 100644 --- a/options/locale/locale_en-US.ini +++ b/options/locale/locale_en-US.ini @@ -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 diff --git a/templates/repo/branch_dropdown.tmpl b/templates/repo/branch_dropdown.tmpl index 487dce1531390..d6d2eb766d402 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.i18n.Tr "repo.release.compare"}} {{else}} - {{svg "octicon-tag"}} {{.root.i18n.Tr "repo.tag"}}: - {{svg "octicon-git-branch"}} {{.root.i18n.Tr "repo.branch"}}: - {{svg "octicon-git-branch"}} {{.root.i18n.Tr "repo.tree"}}: + {{svg "octicon-tag"}} {{.root.i18n.Tr "repo.tag"}}: + {{svg "octicon-git-branch"}} {{.root.i18n.Tr "repo.branch"}}: + {{svg "octicon-git-branch"}} {{.root.i18n.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 b3aac28db81dd..18d1de47b7e8c 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 1e2b0f7d90c1d..204789a491c3d 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 28cb9df6368f3..d0bf8a331bdb3 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}} -
- - {{.i18n.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}} - - {{.i18n.Tr "repo.editor.new_file"}} - - {{end}} - {{if .CanUploadFile}} - - {{.i18n.Tr "repo.editor.upload_file"}} - - {{end}} - {{if .CanAddFile}} - - {{.i18n.Tr "repo.editor.patch"}} - - {{end}} {{end}} - {{if and (ne $n 0) (not .IsViewFile) (not .IsBlame) }} - - {{.i18n.Tr "repo.file_history"}} - - {{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}}
-
+
{{if eq $n 0}} {{if .Repository.IsTemplate}}
@@ -118,14 +115,13 @@
{{end}} {{end}} -
-
{{if eq $n 0}}
- {{template "repo/clone_buttons" .}} - {{template "repo/clone_script" .}} - + {{end}}
{{end}}
diff --git a/templates/repo/sub_menu.tmpl b/templates/repo/sub_menu.tmpl index 57bef2e40f2b2..14e4236107a95 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 ef0ab866f53e8..4e0a885015d7b 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 e922b27da1166..94046566f5c36 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 1cf67401be371..ee0da03005969 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 0ad937f028cab..3e468d346655c 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 { @@ -2107,10 +2061,6 @@ } &.view { - .choose.page { - margin-top: -5px; - } - > .markup { padding: 15px 30px; @@ -2137,6 +2087,12 @@ margin-bottom: 2px; } } + + @media @mediaSm { + #clone-panel #repo-clone-url { + width: 160px; + } + } } &.settings { @@ -2827,6 +2783,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; } @@ -2904,20 +2885,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; } @@ -3429,3 +3396,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 0c4bf1753af32..cacf7d9c8ef95 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;