From 6066d191dcc3b9081de8749a4f13b51f3a887e65 Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 1 Aug 2022 21:38:44 +0200 Subject: [PATCH 1/3] 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 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 --- 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/_base.less | 13 ++++ web_src/less/_repository.less | 88 ++++++------------------- web_src/less/helpers.less | 1 + 12 files changed, 102 insertions(+), 139 deletions(-) diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini index b6f00727ea755..74bfb54a45c37 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 afdaae0f05f40..9d1ec10d3cec4 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 0d0fe73014739..7fb435e3c7827 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 7e068a370c9fa..6b3fadd399403 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 0734076eff490..b58f496bf811d 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}} -
- - {{.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}} -
- + {{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,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 bd8fcc40ebe80..48a22b366944e 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 43441b56c128b..bd26fac24c4d2 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 21affddc623e2..b625a2dc21af7 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/_base.less b/web_src/less/_base.less index 0bf46497e3a9a..2dc58dffbcb25 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -2216,3 +2216,16 @@ table th[data-sortt-desc] { .color-text-light-2 { color: var(--color-text-light-2); } + +.flex-button-row { + margin-bottom: 10px; +} + +.flex-button-row .button { + padding: 6px 10px !important; + height: 30px; +} + +.flex-button-row input { + height: 30px; +} diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 5aed4dcf72358..985ef25627918 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; - - @media @mediaSm { - width: 100%; - } - - input { - border-radius: 0; - padding: 5px 10px; - width: 50%; - line-height: 1.4; - } + #repo-clone-url { + width: 320px; - .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 { @@ -2906,20 +2860,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 +3371,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; From 19c3b2e0d2e6c3f4a8482876e77054f76fdbf89d Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 2 Aug 2022 20:25:50 +0200 Subject: [PATCH 2/3] margin and wiki tweaks --- templates/repo/commits.tmpl | 4 ++-- templates/repo/home.tmpl | 6 +++--- templates/repo/sub_menu.tmpl | 2 +- templates/repo/wiki/view.tmpl | 6 +++--- web_src/less/_base.less | 13 ------------- web_src/less/_repository.less | 35 +++++++++++++++++++++++++++++++---- 6 files changed, 40 insertions(+), 26 deletions(-) diff --git a/templates/repo/commits.tmpl b/templates/repo/commits.tmpl index 6b3fadd399403..9282e1d387ef2 100644 --- a/templates/repo/commits.tmpl +++ b/templates/repo/commits.tmpl @@ -3,8 +3,8 @@ {{template "repo/header" .}}
{{template "repo/sub_menu" .}} -
-
+
+
{{template "repo/branch_dropdown" dict "root" .}} diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl index b58f496bf811d..74eaa6ab32232 100644 --- a/templates/repo/home.tmpl +++ b/templates/repo/home.tmpl @@ -60,8 +60,8 @@
{{end}} {{template "repo/sub_menu" .}} -
-
+
+
{{template "repo/branch_dropdown" dict "root" .}} {{ $n := len .TreeNames}} {{ $l := Subtract $n 1}} @@ -105,7 +105,7 @@ {{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}}
diff --git a/templates/repo/sub_menu.tmpl b/templates/repo/sub_menu.tmpl index 48a22b366944e..276bf05a4f795 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/wiki/view.tmpl b/templates/repo/wiki/view.tmpl index b625a2dc21af7..d641c25cf0481 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/less/_base.less b/web_src/less/_base.less index 2dc58dffbcb25..0bf46497e3a9a 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -2216,16 +2216,3 @@ table th[data-sortt-desc] { .color-text-light-2 { color: var(--color-text-light-2); } - -.flex-button-row { - margin-bottom: 10px; -} - -.flex-button-row .button { - padding: 6px 10px !important; - height: 30px; -} - -.flex-button-row input { - height: 30px; -} diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 985ef25627918..edd7b37bc7e3a 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -2063,10 +2063,6 @@ } &.view { - .choose.page { - margin-top: -5px; - } - > .markup { padding: 15px 30px; @@ -2093,6 +2089,12 @@ margin-bottom: 2px; } } + + @media @mediaSm { + #clone-panel #repo-clone-url { + width: 160px; + } + } } &.settings { @@ -2783,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; } From f40b74a50086811efc9c037649871e68bb9ce9ea Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 2 Aug 2022 22:14:10 +0200 Subject: [PATCH 3/3] fix lint --- web_src/less/_repository.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index edd7b37bc7e3a..fa634479f6d3f 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -2793,7 +2793,7 @@ margin-top: 10px; } -.wiki .repo-button-row { +.wiki .repo-button-row { margin-bottom: 0; }