From e9bcc17cf2bc195f9fc6c045556d34e9cd835e73 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Wed, 16 Apr 2025 11:31:17 +0800 Subject: [PATCH] align all buttons --- templates/repo/clone_panel.tmpl | 2 +- templates/repo/diff/box.tmpl | 2 +- templates/repo/diff/conversation.tmpl | 16 +-- templates/repo/graph.tmpl | 4 +- templates/repo/graph/commits.tmpl | 6 +- .../repo/issue/view_content/conversation.tmpl | 8 +- web_src/css/base.css | 13 ++- web_src/css/features/gitgraph.css | 1 + web_src/css/modules/button.css | 104 +++++++----------- web_src/css/repo.css | 13 +-- web_src/css/repo/list-header.css | 5 +- web_src/js/components/DiffCommitSelector.vue | 2 +- .../js/components/RepoBranchTagSelector.vue | 4 +- 13 files changed, 79 insertions(+), 101 deletions(-) diff --git a/templates/repo/clone_panel.tmpl b/templates/repo/clone_panel.tmpl index 0e3c13eaa2..e23bc8a19a 100644 --- a/templates/repo/clone_panel.tmpl +++ b/templates/repo/clone_panel.tmpl @@ -1,4 +1,4 @@ - {{if and $.CanMarkConversation $hasReview (not $isReviewPending)}} - {{end}} {{if and $.SignedUserID (not $.Repository.IsArchived)}} - {{end}} diff --git a/templates/repo/graph.tmpl b/templates/repo/graph.tmpl index 9eb4bd4ecb..93cb5903cf 100644 --- a/templates/repo/graph.tmpl +++ b/templates/repo/graph.tmpl @@ -45,8 +45,8 @@ {{end}} - - + +
diff --git a/templates/repo/graph/commits.tmpl b/templates/repo/graph/commits.tmpl index 55a91ac195..630c4579ea 100644 --- a/templates/repo/graph/commits.tmpl +++ b/templates/repo/graph/commits.tmpl @@ -17,18 +17,18 @@ {{if eq $refGroup "pull"}} {{if or (not $.HidePRRefs) (SliceUtils.Contains $.SelectedBranches .Name)}} - + {{svg "octicon-git-pull-request"}} #{{.ShortName}} {{end}} {{else if eq $refGroup "tags"}} {{- template "repo/tag/name" dict "RepoLink" $.Repository.Link "TagName" .ShortName -}} {{else if eq $refGroup "remotes"}} - + {{svg "octicon-cross-reference"}} {{.ShortName}} {{else if eq $refGroup "heads"}} - + {{svg "octicon-git-branch"}} {{.ShortName}} {{else}} diff --git a/templates/repo/issue/view_content/conversation.tmpl b/templates/repo/issue/view_content/conversation.tmpl index 32e9811335..6eb0e21953 100644 --- a/templates/repo/issue/view_content/conversation.tmpl +++ b/templates/repo/issue/view_content/conversation.tmpl @@ -109,7 +109,7 @@ {{end}} -
+
{{if $resolved}}
@@ -118,7 +118,7 @@
{{end}}
-
+
{{if and $.CanMarkConversation $hasReview (not $isReviewPending)}} {{end}} {{if and $.SignedUserID (not $.Repository.IsArchived)}} - {{end}}
diff --git a/web_src/css/base.css b/web_src/css/base.css index 353ae851ad..d90669ba39 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -1037,12 +1037,13 @@ table th[data-sortt-desc] .svg { text-align: left; } -.ellipsis-button { - padding: 0 5px 8px !important; - display: inline-block !important; - font-weight: var(--font-weight-semibold) !important; - line-height: 6px !important; - vertical-align: middle !important; +.ui.button.ellipsis-button { + padding: 0 5px 8px; + display: inline-block; + font-weight: var(--font-weight-semibold); + line-height: 8px; + vertical-align: middle; + min-height: 0; } .precolors { diff --git a/web_src/css/features/gitgraph.css b/web_src/css/features/gitgraph.css index 1ed541a695..865c82e003 100644 --- a/web_src/css/features/gitgraph.css +++ b/web_src/css/features/gitgraph.css @@ -116,6 +116,7 @@ max-width: 200px; overflow: hidden; text-overflow: ellipsis; + min-height: 0; } #git-graph-container #graph-raw-list { diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css index c4addd05f0..62bd714e80 100644 --- a/web_src/css/modules/button.css +++ b/web_src/css/modules/button.css @@ -1,20 +1,15 @@ -/* based on Fomantic UI checkbox module, with just the parts extracted that we use. If you find any - unused rules here after refactoring, please remove them. */ - .ui.button { cursor: pointer; - display: inline-block; - min-height: 1em; + display: inline-flex; outline: none; - vertical-align: baseline; font-family: var(--fonts-regular); margin: 0 0.25em 0 0; - padding: 0.78571429em 1.5em; font-weight: var(--font-weight-normal); + font-size: 1rem; text-align: center; text-decoration: none; line-height: 1; - border-radius: 0.28571429rem; + border-radius: var(--border-radius); user-select: none; -webkit-tap-highlight-color: transparent; justify-content: center; @@ -58,12 +53,13 @@ pointer-events: none !important; } +/* there is no "ui labeled icon button" support" because it is not used */ .ui.labeled.button:not(.icon) { - display: inline-flex; flex-direction: row; background: none; - padding: 0 !important; + padding: 0; border: none; + min-height: unset; } .ui.labeled.button > .button { margin: 0; @@ -102,47 +98,61 @@ margin: 0 -0.21428571em 0 0.42857143em; } +/* reference sizes (not exactly at the moment): normal: padding-x=21, height=38 ; compact: padding-x=15, height=32 */ +.ui.button { /* stylelint-disable-line no-duplicate-selectors */ + min-height: 38px; + padding: 0.57em /* around 8px */ 1.43em /* around 20px */; +} .ui.compact.buttons .button, .ui.compact.button { - padding: 0.58928571em 1.125em; + padding: 0.42em /* around 8px */ 1.07em /* around 15px */; + min-height: 32px; } .ui.compact.icon.buttons .button, .ui.compact.icon.button { - padding: 0.58928571em; -} -.ui.compact.labeled.icon.button { - padding: 0.58928571em 3.69642857em; -} -.ui.compact.labeled.icon.button > .icon { - padding: 0.58928571em 0; + padding: 0.57em /* around 8px */; } -.ui.buttons .button, -.ui.button { - font-size: 1rem; -} +/* reference size: mini: padding-x=16, height=30 ; compact: padding-x=12, height=26 */ .ui.mini.buttons .dropdown, .ui.mini.buttons .dropdown .menu > .item, .ui.mini.buttons .button, .ui.ui.ui.ui.mini.button { - font-size: 0.78571429rem; + font-size: 11px; + min-height: 30px; } +.ui.ui.ui.ui.mini.button.compact { + min-height: 26px; +} + +/* reference size: tiny: padding-x=18, height=32 ; compact: padding-x=13, height=28 */ .ui.tiny.buttons .dropdown, .ui.tiny.buttons .dropdown .menu > .item, .ui.tiny.buttons .button, .ui.ui.ui.ui.tiny.button { - font-size: 0.85714286rem; + font-size: 12px; + min-height: 32px; } +.ui.ui.ui.ui.tiny.button.compact { + min-height: 28px; +} + +/* reference size: small: padding-x=19, height=34 ; compact: padding-x=14, height=30 */ .ui.small.buttons .dropdown, .ui.small.buttons .dropdown .menu > .item, .ui.small.buttons .button, .ui.ui.ui.ui.small.button { - font-size: 0.92857143rem; + font-size: 13px; + padding: 0.42em /* around 8px */ 1.07em /* around 15px */; + min-height: 34px; +} +.ui.ui.ui.ui.small.button.compact { + min-height: 30px; } .ui.icon.buttons .button, .ui.icon.button:not(.compact) { - padding: 0.78571429em; + padding: 0.57em 1.07em 0.57em 0.57em; } .ui.icon.buttons .button > .icon, .ui.icon.button > .icon { @@ -152,12 +162,12 @@ .ui.basic.buttons .button, .ui.basic.button { - border-radius: 0.28571429rem; + border-radius: var(--border-radius); background: none; } .ui.basic.buttons { border: 1px solid var(--color-secondary); - border-radius: 0.28571429rem; + border-radius: var(--border-radius); } .ui.basic.buttons .button { border-radius: 0; @@ -188,29 +198,6 @@ background: var(--color-active); } -.ui.labeled.icon.button { - position: relative; - padding-left: 4.07142857em !important; - padding-right: 1.5em !important; -} - -.ui.labeled.icon.button > .icon { - position: absolute; - top: 0; - left: 0; - height: 100%; - line-height: 1; - border-radius: 0; - border-top-left-radius: inherit; - border-bottom-left-radius: inherit; - text-align: center; - animation: none; - padding: 0.78571429em 0; - margin: 0; - width: 2.57142857em; - background: var(--color-hover); -} - .ui.button.toggle.active { background-color: var(--color-green); color: var(--color-white); @@ -379,12 +366,12 @@ It needs some tricks to tweak the left/right borders with active state */ .ui.buttons .button:first-child { border-left: none; margin-left: 0; - border-top-left-radius: 0.28571429rem; - border-bottom-left-radius: 0.28571429rem; + border-top-left-radius: var(--border-radius); + border-bottom-left-radius: var(--border-radius); } .ui.buttons .button:last-child { - border-top-right-radius: 0.28571429rem; - border-bottom-right-radius: 0.28571429rem; + border-top-right-radius: var(--border-radius); + border-bottom-right-radius: var(--border-radius); } .ui.buttons .button:hover { @@ -414,10 +401,3 @@ It needs some tricks to tweak the left/right borders with active state */ .ui.buttons .button.active + .button { border-left: none; } - -/* apply the vertical padding of .compact to non-compact buttons when they contain a svg as they - would otherwise appear too large. Seen on "RSS Feed" button on repo releases tab. */ -.ui.small.button:not(.compact):has(.svg) { - padding-top: 0.58928571em; - padding-bottom: 0.58928571em; -} diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 91c1ee8607..b8e457a71b 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -1629,21 +1629,17 @@ td .commit-summary { display: flex; align-items: center; gap: 0.5rem; + flex-wrap: wrap; } .repo-button-row-left { flex-grow: 1; } -.repo-button-row .button { - padding: 6px 10px !important; - height: 30px; +.repo-button-row .ui.button { flex-shrink: 0; margin: 0; -} - -.repo-button-row .button.dropdown:not(.icon) { - padding-right: 22px !important; /* normal buttons have !important paddings, so we need to override it for dropdown (Add File) icons */ + min-height: 30px; } tbody.commit-list { @@ -2221,10 +2217,11 @@ tbody.commit-list { max-width: min(400px, 90vw); } -.branch-selector-dropdown .branch-dropdown-button { +.branch-selector-dropdown .ui.button.branch-dropdown-button { margin: 0; max-width: 340px; line-height: var(--line-height-default); + padding: 0 0.5em 0 0.75em; } /* FIXME: These media selectors are not ideal (just keep them from old code). diff --git a/web_src/css/repo/list-header.css b/web_src/css/repo/list-header.css index e666e046d3..9d0b13933a 100644 --- a/web_src/css/repo/list-header.css +++ b/web_src/css/repo/list-header.css @@ -1,6 +1,6 @@ .list-header { display: flex; - align-items: center; + align-items: stretch; flex-wrap: wrap; gap: .5rem; } @@ -8,9 +8,8 @@ .list-header-search { display: flex; flex: 1; - align-items: center; + align-items: stretch; flex-wrap: wrap; - justify-content: center; min-width: 200px; /* to enable flexbox wrapping on mobile */ } diff --git a/web_src/js/components/DiffCommitSelector.vue b/web_src/js/components/DiffCommitSelector.vue index 16760d1cb1..a375343979 100644 --- a/web_src/js/components/DiffCommitSelector.vue +++ b/web_src/js/components/DiffCommitSelector.vue @@ -212,7 +212,7 @@ export default defineComponent({