Skip to content

Commit 97b4eef

Browse files
wxiaoguangwxiaoguang
committed
align all buttons
1 parent e3339ae commit 97b4eef

File tree

13 files changed

+80
-101
lines changed

13 files changed

+80
-101
lines changed

‎templates/repo/clone_panel.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<button class="ui primary button js-btn-clone-panel">
1+
<button class="ui compact primary button js-btn-clone-panel">
22
{{svg "octicon-code" 16}}
33
<span>{{ctx.Locale.Tr "repo.code"}}</span>
44
{{svg "octicon-triangle-down" 14 "dropdown icon"}}

‎templates/repo/diff/box.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
{{if .PageIsPullFiles}}
3838
<div id="diff-commit-select" data-issuelink="{{$.Issue.Link}}" data-queryparams="?style={{if $.IsSplitStyle}}split{{else}}unified{{end}}&whitespace={{$.WhitespaceBehavior}}&show-outdated={{$.ShowOutdatedComments}}" data-filter_changes_by_commit="{{ctx.Locale.Tr "repo.pulls.filter_changes_by_commit"}}">
3939
{{/* the following will be replaced by vue component, but this avoids any loading artifacts till the vue component is initialized */}}
40-
<div class="ui jump dropdown basic button custom">
40+
<div class="ui jump dropdown tiny basic button custom">
4141
{{svg "octicon-git-commit"}}
4242
</div>
4343
</div>

‎templates/repo/diff/conversation.tmpl

+8-8
Original file line numberDiff line numberDiff line change
@@ -36,21 +36,21 @@
3636
{{end}}
3737
<div id="code-comments-{{$comment.ID}}" class="field comment-code-cloud {{if $resolved}}tw-hidden{{end}}">
3838
<div class="comment-list">
39-
<ui class="ui comments">
39+
<div class="ui comments">
4040
{{template "repo/diff/comments" dict "root" $ "comments" .comments}}
41-
</ui>
41+
</div>
4242
</div>
43-
<div class="tw-flex tw-justify-end tw-items-center tw-gap-2 tw-mt-2 tw-flex-wrap">
43+
<div class="flex-text-block tw-mt-2 tw-flex-wrap tw-justify-end">
4444
<div class="ui buttons">
4545
<button class="ui icon tiny basic button previous-conversation">
46-
{{svg "octicon-arrow-up" 12 "icon"}} {{ctx.Locale.Tr "repo.issues.previous"}}
46+
{{svg "octicon-arrow-up" 12}} {{ctx.Locale.Tr "repo.issues.previous"}}
4747
</button>
4848
<button class="ui icon tiny basic button next-conversation">
49-
{{svg "octicon-arrow-down" 12 "icon"}} {{ctx.Locale.Tr "repo.issues.next"}}
49+
{{svg "octicon-arrow-down" 12}} {{ctx.Locale.Tr "repo.issues.next"}}
5050
</button>
5151
</div>
5252
{{if and $.CanMarkConversation $hasReview (not $isReviewPending)}}
53-
<button class="ui icon tiny basic button resolve-conversation tw-mr-0" data-origin="diff" data-action="{{if not $resolved}}Resolve{{else}}UnResolve{{end}}" data-comment-id="{{$comment.ID}}" data-update-url="{{$.RepoLink}}/issues/resolve_conversation">
53+
<button class="ui icon tiny basic button resolve-conversation" data-origin="diff" data-action="{{if not $resolved}}Resolve{{else}}UnResolve{{end}}" data-comment-id="{{$comment.ID}}" data-update-url="{{$.RepoLink}}/issues/resolve_conversation">
5454
{{if $resolved}}
5555
{{ctx.Locale.Tr "repo.issues.review.un_resolve_conversation"}}
5656
{{else}}
@@ -59,8 +59,8 @@
5959
</button>
6060
{{end}}
6161
{{if and $.SignedUserID (not $.Repository.IsArchived)}}
62-
<button class="comment-form-reply ui primary tiny labeled icon button tw-mr-0">
63-
{{svg "octicon-reply" 16 "reply icon tw-mr-1"}}{{ctx.Locale.Tr "repo.diff.comment.reply"}}
62+
<button class="comment-form-reply ui primary icon tiny button">
63+
{{svg "octicon-reply" 12}}{{ctx.Locale.Tr "repo.diff.comment.reply"}}
6464
</button>
6565
{{end}}
6666
</div>

‎templates/repo/graph.tmpl

+2-2
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,8 @@
4545
{{end}}
4646
</div>
4747
</div>
48-
<button id="flow-color-monochrome" class="ui labelled icon button{{if eq .Mode "monochrome"}} active{{end}}" title="{{ctx.Locale.Tr "repo.commit_graph.monochrome"}}">{{svg "material-invert-colors" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.commit_graph.monochrome"}}</button>
49-
<button id="flow-color-colored" class="ui labelled icon button{{if ne .Mode "monochrome"}} active{{end}}" title="{{ctx.Locale.Tr "repo.commit_graph.color"}}">{{svg "material-palette" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.commit_graph.color"}}</button>
48+
<button id="flow-color-monochrome" class="ui icon button{{if eq .Mode "monochrome"}} active{{end}}" title="{{ctx.Locale.Tr "repo.commit_graph.monochrome"}}">{{svg "material-invert-colors" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.commit_graph.monochrome"}}</button>
49+
<button id="flow-color-colored" class="ui icon button{{if ne .Mode "monochrome"}} active{{end}}" title="{{ctx.Locale.Tr "repo.commit_graph.color"}}">{{svg "material-palette" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.commit_graph.color"}}</button>
5050
</div>
5151
</h2>
5252
<div class="ui dividing"></div>

‎templates/repo/graph/commits.tmpl

+3-3
Original file line numberDiff line numberDiff line change
@@ -17,18 +17,18 @@
1717
{{if eq $refGroup "pull"}}
1818
{{if or (not $.HidePRRefs) (SliceUtils.Contains $.SelectedBranches .Name)}}
1919
<!-- it's intended to use issues not pulls, if it's a pull you will get redirected -->
20-
<a class="ui labelled basic tiny button" href="{{$.RepoLink}}/{{if $.Repository.UnitEnabled ctx ctx.Consts.RepoUnitTypePullRequests}}pulls{{else}}issues{{end}}/{{.ShortName|PathEscape}}">
20+
<a class="ui basic tiny button" href="{{$.RepoLink}}/{{if $.Repository.UnitEnabled ctx ctx.Consts.RepoUnitTypePullRequests}}pulls{{else}}issues{{end}}/{{.ShortName|PathEscape}}">
2121
{{svg "octicon-git-pull-request"}} #{{.ShortName}}
2222
</a>
2323
{{end}}
2424
{{else if eq $refGroup "tags"}}
2525
{{- template "repo/tag/name" dict "RepoLink" $.Repository.Link "TagName" .ShortName -}}
2626
{{else if eq $refGroup "remotes"}}
27-
<a class="ui labelled basic tiny button" href="{{$.RepoLink}}/src/commit/{{$commit.Rev|PathEscape}}">
27+
<a class="ui basic tiny button" href="{{$.RepoLink}}/src/commit/{{$commit.Rev|PathEscape}}">
2828
{{svg "octicon-cross-reference"}} {{.ShortName}}
2929
</a>
3030
{{else if eq $refGroup "heads"}}
31-
<a class="ui labelled basic tiny button" href="{{$.RepoLink}}/src/branch/{{.ShortName|PathEscape}}">
31+
<a class="ui basic tiny button" href="{{$.RepoLink}}/src/branch/{{.ShortName|PathEscape}}">
3232
{{svg "octicon-git-branch"}} {{.ShortName}}
3333
</a>
3434
{{else}}

‎templates/repo/issue/view_content/conversation.tmpl

+4-4
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@
109109
</div>
110110
{{end}}
111111
</div>
112-
<div class="code-comment-buttons tw-flex tw-items-center tw-flex-wrap tw-mt-2 tw-mb-1 tw-mx-2">
112+
<div class="flex-text-block tw-flex-wrap tw-my-2">
113113
<div class="tw-flex-1">
114114
{{if $resolved}}
115115
<div class="ui grey text">
@@ -118,7 +118,7 @@
118118
</div>
119119
{{end}}
120120
</div>
121-
<div class="code-comment-buttons-buttons">
121+
<div class="flex-text-block">
122122
{{if and $.CanMarkConversation $hasReview (not $isReviewPending)}}
123123
<button class="ui tiny basic button resolve-conversation" data-origin="timeline" data-action="{{if not $resolved}}Resolve{{else}}UnResolve{{end}}" data-comment-id="{{$comment.ID}}" data-update-url="{{$.RepoLink}}/issues/resolve_conversation">
124124
{{if $resolved}}
@@ -129,8 +129,8 @@
129129
</button>
130130
{{end}}
131131
{{if and $.SignedUserID (not $.Repository.IsArchived)}}
132-
<button class="comment-form-reply ui primary tiny labeled icon button tw-ml-1 tw-mr-0">
133-
{{svg "octicon-reply" 16 "reply icon tw-mr-1"}}{{ctx.Locale.Tr "repo.diff.comment.reply"}}
132+
<button class="comment-form-reply ui primary icon tiny button">
133+
{{svg "octicon-reply" 12}}{{ctx.Locale.Tr "repo.diff.comment.reply"}}
134134
</button>
135135
{{end}}
136136
</div>

‎web_src/css/base.css

+7-6
Original file line numberDiff line numberDiff line change
@@ -1037,12 +1037,13 @@ table th[data-sortt-desc] .svg {
10371037
text-align: left;
10381038
}
10391039

1040-
.ellipsis-button {
1041-
padding: 0 5px 8px !important;
1042-
display: inline-block !important;
1043-
font-weight: var(--font-weight-semibold) !important;
1044-
line-height: 6px !important;
1045-
vertical-align: middle !important;
1040+
.ui.button.ellipsis-button {
1041+
padding: 0 5px 8px;
1042+
display: inline-block;
1043+
font-weight: var(--font-weight-semibold);
1044+
line-height: 8px;
1045+
vertical-align: middle;
1046+
min-height: 0;
10461047
}
10471048

10481049
.precolors {

‎web_src/css/features/gitgraph.css

+1
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,7 @@
116116
max-width: 200px;
117117
overflow: hidden;
118118
text-overflow: ellipsis;
119+
min-height: 0;
119120
}
120121

121122
#git-graph-container #graph-raw-list {

‎web_src/css/modules/button.css

+42-62
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,15 @@
1-
/* based on Fomantic UI checkbox module, with just the parts extracted that we use. If you find any
2-
unused rules here after refactoring, please remove them. */
3-
41
.ui.button {
52
cursor: pointer;
6-
display: inline-block;
7-
min-height: 1em;
3+
display: inline-flex;
84
outline: none;
9-
vertical-align: baseline;
105
font-family: var(--fonts-regular);
116
margin: 0 0.25em 0 0;
12-
padding: 0.78571429em 1.5em;
137
font-weight: var(--font-weight-normal);
8+
font-size: 1rem;
149
text-align: center;
1510
text-decoration: none;
1611
line-height: 1;
17-
border-radius: 0.28571429rem;
12+
border-radius: var(--border-radius);
1813
user-select: none;
1914
-webkit-tap-highlight-color: transparent;
2015
justify-content: center;
@@ -58,12 +53,13 @@
5853
pointer-events: none !important;
5954
}
6055

56+
/* there is no "ui labeled icon button" support" because it is not used */
6157
.ui.labeled.button:not(.icon) {
62-
display: inline-flex;
6358
flex-direction: row;
6459
background: none;
65-
padding: 0 !important;
60+
padding: 0;
6661
border: none;
62+
min-height: unset;
6763
}
6864
.ui.labeled.button > .button {
6965
margin: 0;
@@ -102,47 +98,61 @@
10298
margin: 0 -0.21428571em 0 0.42857143em;
10399
}
104100

101+
/* reference sizes (not exactly at the moment): normal: padding-x=21, height=38 ; compact: padding-x=15, height=32 */
102+
.ui.button { /* stylelint-disable-line no-duplicate-selectors */
103+
min-height: 38px;
104+
padding: 0.57em /* around 8px */ 1.43em /* around 20px */;
105+
}
105106
.ui.compact.buttons .button,
106107
.ui.compact.button {
107-
padding: 0.58928571em 1.125em;
108+
padding: 0.42em /* around 8px */ 1.07em /* around 15px */;
109+
min-height: 32px;
108110
}
109111
.ui.compact.icon.buttons .button,
110112
.ui.compact.icon.button {
111-
padding: 0.58928571em;
112-
}
113-
.ui.compact.labeled.icon.button {
114-
padding: 0.58928571em 3.69642857em;
115-
}
116-
.ui.compact.labeled.icon.button > .icon {
117-
padding: 0.58928571em 0;
113+
padding: 0.57em /* around 8px */;
118114
}
119115

120-
.ui.buttons .button,
121-
.ui.button {
122-
font-size: 1rem;
123-
}
116+
/* reference size: mini: padding-x=16, height=30 ; compact: padding-x=12, height=26 */
124117
.ui.mini.buttons .dropdown,
125118
.ui.mini.buttons .dropdown .menu > .item,
126119
.ui.mini.buttons .button,
127120
.ui.ui.ui.ui.mini.button {
128-
font-size: 0.78571429rem;
121+
font-size: 11px;
122+
min-height: 30px;
123+
}
124+
.ui.ui.ui.ui.mini.button.compact {
125+
min-height: 26px;
129126
}
127+
128+
/* reference size: tiny: padding-x=18, height=32 ; compact: padding-x=13, height=28 */
130129
.ui.tiny.buttons .dropdown,
131130
.ui.tiny.buttons .dropdown .menu > .item,
132131
.ui.tiny.buttons .button,
133132
.ui.ui.ui.ui.tiny.button {
134-
font-size: 0.85714286rem;
133+
font-size: 12px;
134+
min-height: 32px;
135+
}
136+
.ui.ui.ui.ui.tiny.button.compact {
137+
min-height: 28px;
135138
}
139+
140+
/* reference size: small: padding-x=19, height=34 ; compact: padding-x=14, height=30 */
136141
.ui.small.buttons .dropdown,
137142
.ui.small.buttons .dropdown .menu > .item,
138143
.ui.small.buttons .button,
139144
.ui.ui.ui.ui.small.button {
140-
font-size: 0.92857143rem;
145+
font-size: 13px;
146+
padding: 0.42em /* around 8px */ 1.07em /* around 15px */;
147+
min-height: 34px;
148+
}
149+
.ui.ui.ui.ui.small.button.compact {
150+
min-height: 30px;
141151
}
142152

143153
.ui.icon.buttons .button,
144154
.ui.icon.button:not(.compact) {
145-
padding: 0.78571429em;
155+
padding: 0.57em 1.07em 0.57em 0.57em;
146156
}
147157
.ui.icon.buttons .button > .icon,
148158
.ui.icon.button > .icon {
@@ -152,12 +162,12 @@
152162

153163
.ui.basic.buttons .button,
154164
.ui.basic.button {
155-
border-radius: 0.28571429rem;
165+
border-radius: var(--border-radius);
156166
background: none;
157167
}
158168
.ui.basic.buttons {
159169
border: 1px solid var(--color-secondary);
160-
border-radius: 0.28571429rem;
170+
border-radius: var(--border-radius);
161171
}
162172
.ui.basic.buttons .button {
163173
border-radius: 0;
@@ -188,29 +198,6 @@
188198
background: var(--color-active);
189199
}
190200

191-
.ui.labeled.icon.button {
192-
position: relative;
193-
padding-left: 4.07142857em !important;
194-
padding-right: 1.5em !important;
195-
}
196-
197-
.ui.labeled.icon.button > .icon {
198-
position: absolute;
199-
top: 0;
200-
left: 0;
201-
height: 100%;
202-
line-height: 1;
203-
border-radius: 0;
204-
border-top-left-radius: inherit;
205-
border-bottom-left-radius: inherit;
206-
text-align: center;
207-
animation: none;
208-
padding: 0.78571429em 0;
209-
margin: 0;
210-
width: 2.57142857em;
211-
background: var(--color-hover);
212-
}
213-
214201
.ui.button.toggle.active {
215202
background-color: var(--color-green);
216203
color: var(--color-white);
@@ -379,12 +366,12 @@ It needs some tricks to tweak the left/right borders with active state */
379366
.ui.buttons .button:first-child {
380367
border-left: none;
381368
margin-left: 0;
382-
border-top-left-radius: 0.28571429rem;
383-
border-bottom-left-radius: 0.28571429rem;
369+
border-top-left-radius: var(--border-radius);
370+
border-bottom-left-radius: var(--border-radius);
384371
}
385372
.ui.buttons .button:last-child {
386-
border-top-right-radius: 0.28571429rem;
387-
border-bottom-right-radius: 0.28571429rem;
373+
border-top-right-radius: var(--border-radius);
374+
border-bottom-right-radius: var(--border-radius);
388375
}
389376

390377
.ui.buttons .button:hover {
@@ -414,10 +401,3 @@ It needs some tricks to tweak the left/right borders with active state */
414401
.ui.buttons .button.active + .button {
415402
border-left: none;
416403
}
417-
418-
/* apply the vertical padding of .compact to non-compact buttons when they contain a svg as they
419-
would otherwise appear too large. Seen on "RSS Feed" button on repo releases tab. */
420-
.ui.small.button:not(.compact):has(.svg) {
421-
padding-top: 0.58928571em;
422-
padding-bottom: 0.58928571em;
423-
}

‎web_src/css/repo.css

+5-8
Original file line numberDiff line numberDiff line change
@@ -1629,21 +1629,17 @@ td .commit-summary {
16291629
display: flex;
16301630
align-items: center;
16311631
gap: 0.5rem;
1632+
flex-wrap: wrap;
16321633
}
16331634

16341635
.repo-button-row-left {
16351636
flex-grow: 1;
16361637
}
16371638

1638-
.repo-button-row .button {
1639-
padding: 6px 10px !important;
1640-
height: 30px;
1639+
.repo-button-row .ui.button {
16411640
flex-shrink: 0;
16421641
margin: 0;
1643-
}
1644-
1645-
.repo-button-row .button.dropdown:not(.icon) {
1646-
padding-right: 22px !important; /* normal buttons have !important paddings, so we need to override it for dropdown (Add File) icons */
1642+
min-height: 30px;
16471643
}
16481644

16491645
tbody.commit-list {
@@ -2221,10 +2217,11 @@ tbody.commit-list {
22212217
max-width: min(400px, 90vw);
22222218
}
22232219

2224-
.branch-selector-dropdown .branch-dropdown-button {
2220+
.branch-selector-dropdown .ui.button.branch-dropdown-button {
22252221
margin: 0;
22262222
max-width: 340px;
22272223
line-height: var(--line-height-default);
2224+
padding: 0 0.5em 0 0.75em;
22282225
}
22292226

22302227
/* FIXME: These media selectors are not ideal (just keep them from old code).

‎web_src/css/repo/list-header.css

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
.list-header {
22
display: flex;
3-
align-items: center;
3+
align-items: stretch;
44
flex-wrap: wrap;
55
gap: .5rem;
6+
justify-content: stretch;
67
}
78

89
.list-header-search {
910
display: flex;
1011
flex: 1;
11-
align-items: center;
12+
align-items: stretch;
1213
flex-wrap: wrap;
13-
justify-content: center;
1414
min-width: 200px; /* to enable flexbox wrapping on mobile */
1515
}
1616

0 commit comments

Comments
 (0)