Skip to content

Commit 623b3b5

Browse files
silverwindwxiaoguangGiteaBot
authored
Button and color enhancements (#24989)
- Various corrections to button styles, especially secondary - Remove focus highlight, it's annoying when it stays on button after press - Clearly define ghost and link buttons with demos in devtest - Remove black, grey and tertiary buttons, they should not be used - Make `arc-green` slightly darker <img width="1226" alt="image" src="https://github.com/go-gitea/gitea/assets/115237/8d89786a-01ab-40f8-ae5a-e17f40e35084"> <img width="1249" alt="image" src="https://github.com/go-gitea/gitea/assets/115237/83651e6d-3c27-46ff-b8bd-ff344d70e949"> --------- Co-authored-by: wxiaoguang <[email protected]> Co-authored-by: Giteabot <[email protected]>
1 parent 3c6aa8d commit 623b3b5

31 files changed

+358
-371
lines changed

‎templates/base/modal_actions_confirm.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ The ".ok.button" and ".cancel.button" selectors are also used by Fomantic Modal
3232
{{else if eq .ModalButtonColors "yellow"}}
3333
{{$stylePositive = "yellow"}}
3434
{{end}}
35-
<button class="ui secondary basic cancel button">{{svg "octicon-x"}} {{$textNegitive}}</button>
35+
<button class="ui basic cancel button">{{svg "octicon-x"}} {{$textNegitive}}</button>
3636
<button class="ui {{$stylePositive}} ok button">{{svg "octicon-check"}} {{$textPositive}}</button>
3737
{{end}}
3838
</div>

‎templates/devtest/gitea-ui.tmpl

Lines changed: 66 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -14,24 +14,73 @@
1414
<label><input type="checkbox" name="button-state-disabled" value="disabled">disabled</label>
1515
</div>
1616
<div id="devtest-button-samples">
17-
<div>
18-
<button class="ui primary button">Primary</button>
19-
<button class="ui secondary button">Secondary</button>
20-
<button class="ui basic secondary button">Basic Secondary</button>
21-
<button class="ui red button">Red</button>
22-
<button class="ui basic red button">Basic Red</button>
23-
</div>
24-
<div>This is a <button class="ui button button-ghost">Ghost</button> button</div>
25-
</div>
26-
<script type="module">
27-
const $buttons = $('#devtest-button-samples').find('button');
17+
<style>
18+
.button-sample-groups { margin: 0; padding: 0; }
19+
.button-sample-groups .sample-group { list-style: none; margin: 0; padding: 0; }
20+
.button-sample-groups .sample-group .ui.button { margin-bottom: 5px; }
21+
</style>
22+
<ul class="button-sample-groups">
23+
<li class="sample-group">
24+
<h2>General purpose:</h2>
25+
<button class="ui button">Unclassed</button>
26+
<button class="ui basic button">Basic Unclassed</button>
27+
<button class="ui primary button">Primary</button>
28+
<button class="ui basic primary button">Basic Primary</button>
29+
<button class="ui negative button">Negative</button>
30+
<button class="ui basic negative button">Basic Negative</button>
31+
<button class="ui positive button">Positive</button>
32+
<button class="ui basic positive button">Basic Positive</button>
33+
</li>
34+
<li class="sample-group">
35+
<h2>Recommended colors:</h2>
36+
<button class="ui red button">Red</button>
37+
<button class="ui basic red button">Basic Red</button>
38+
<button class="ui green button">Green</button>
39+
<button class="ui basic green button">Basic Green</button>
40+
<button class="ui blue button">Blue</button>
41+
<button class="ui basic blue button">Basic Blue</button>
42+
<button class="ui orange button">Orange</button>
43+
<button class="ui basic orange button">Basic Orange</button>
44+
<button class="ui yellow button">Yellow</button>
45+
<button class="ui basic yellow button">Basic Yellow</button>
46+
</li>
47+
<li class="sample-group">
48+
<h2>Supported but not recommended:</h2>
49+
<p>Do not use if there is no strong requirement. Do not use grey/black buttons, they don't work well with dark theme.</p>
50+
<button class="ui secondary button">Secondary</button>
51+
<button class="ui basic secondary button">Basic Secondary</button>
52+
<button class="ui olive button">Olive</button>
53+
<button class="ui basic olive button">Basic Olive</button>
54+
<button class="ui teal button">Teal</button>
55+
<button class="ui basic teal button">Basic Teal</button>
56+
<button class="ui violet button">Violet</button>
57+
<button class="ui basic violet button">Basic Violet</button>
58+
<button class="ui purple button">Purple</button>
59+
<button class="ui basic purple button">Basic Purple</button>
60+
<button class="ui pink button">Pink</button>
61+
<button class="ui basic pink button">Basic Pink</button>
62+
<button class="ui brown button">Brown</button>
63+
<button class="ui basic brown button">Basic Brown</button>
64+
</li>
65+
<li class="sample-group">
66+
<h2>Inline / Plain:</h2>
67+
<div class="gt-my-2">
68+
<button class="btn gt-p-3">Plain button</button>
69+
<button class="btn interact-fg gt-p-3">Plain button with interact fg</button>
70+
<button class="btn interact-bg gt-p-3">Plain button with interact bg</button>
71+
</div>
72+
</li>
73+
</ul>
74+
<script type="module">
75+
const $buttons = $('#devtest-button-samples').find('button.ui');
2876

29-
const $buttonStyles = $('input[name*="button-style"]');
30-
$buttonStyles.on('click', () => $buttonStyles.map((_ ,el) => $buttons.toggleClass(el.value, el.checked)));
77+
const $buttonStyles = $('input[name*="button-style"]');
78+
$buttonStyles.on('click', () => $buttonStyles.map((_ ,el) => $buttons.toggleClass(el.value, el.checked)));
3179

32-
const $buttonStates = $('input[name*="button-state"]');
33-
$buttonStates.on('click', () => $buttonStates.map((_ ,el) => $buttons.prop(el.value, el.checked)));
34-
</script>
80+
const $buttonStates = $('input[name*="button-state"]');
81+
$buttonStates.on('click', () => $buttonStates.map((_ ,el) => $buttons.prop(el.value, el.checked)));
82+
</script>
83+
</div>
3584
</div>
3685

3786
<div>
@@ -75,7 +124,7 @@
75124
</div>
76125

77126
<style>
78-
h1 {
127+
h1, h2 {
79128
margin: 0;
80129
padding: 10px 0;
81130
}

‎templates/devtest/list.tmpl

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
<style>
2+
@media (prefers-color-scheme: dark) {
3+
:root {
4+
color-scheme: dark;
5+
}
6+
}
7+
</style>
18
<ul>
29
{{range .SubNames}}
310
<li><a href="{{AppSubUrl}}/devtest/{{.}}">{{.}}</a></li>

‎templates/org/settings/labels.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
</div>
77
<div class="right floated three wide column">
88
<div class="ui right">
9-
<button class="ui green new-label button">{{.locale.Tr "repo.issues.new_label"}}</button>
9+
<button class="ui small green new-label button">{{.locale.Tr "repo.issues.new_label"}}</button>
1010
</div>
1111
</div>
1212
</div>

‎templates/repo/blame.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
{{if $.EscapeStatus.Escaped}}
5353
<td class="lines-escape">
5454
{{if $row.EscapeStatus.Escaped}}
55-
<button class="toggle-escape-button button button-ghost" title="{{template "repo/diff/escape_title" dict "diff" $row "locale" $.locale}}"></button>
55+
<button class="toggle-escape-button btn interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $row "locale" $.locale}}"></button>
5656
{{end}}
5757
</td>
5858
{{end}}

‎templates/repo/branch/list.tmpl

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
</td>
2828
<td class="right aligned overflow-visible">
2929
{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted)}}
30-
<button class="ui button button-ghost show-create-branch-modal gt-p-3"
30+
<button class="btn interact-bg show-create-branch-modal gt-p-3"
3131
data-modal="#create-branch-modal"
3232
data-branch-from="{{$.DefaultBranch}}"
3333
data-branch-from-urlcomponent="{{PathEscapeSegments $.DefaultBranch}}"
@@ -37,12 +37,10 @@
3737
</button>
3838
{{end}}
3939
{{if .EnableFeed}}
40-
<a role="button" class="ui button button-ghost gt-p-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .DefaultBranch}}">
41-
{{svg "octicon-rss"}}
42-
</a>
40+
<a role="button" class="btn interact-bg gt-p-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .DefaultBranch}}">{{svg "octicon-rss"}}</a>
4341
{{end}}
4442
{{if not $.DisableDownloadSourceArchives}}
45-
<div class="ui dropdown button button-ghost gt-p-3" data-tooltip-content="{{$.locale.Tr "repo.branch.download" ($.DefaultBranch)}}">
43+
<div class="ui dropdown btn interact-bg gt-p-3" data-tooltip-content="{{$.locale.Tr "repo.branch.download" ($.DefaultBranch)}}">
4644
{{svg "octicon-download"}}
4745
<div class="menu">
4846
<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.DefaultBranch}}.zip" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;ZIP</a>
@@ -51,7 +49,7 @@
5149
</div>
5250
{{end}}
5351
{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted) (not $.IsMirror)}}
54-
<button class="ui button button-ghost gt-p-3 show-modal show-rename-branch-modal"
52+
<button class="btn interact-bg gt-p-3 show-modal show-rename-branch-modal"
5553
data-is-default-branch="true"
5654
data-modal="#rename-branch-modal"
5755
data-old-branch-name="{{$.DefaultBranch}}"
@@ -134,7 +132,7 @@
134132
</td>
135133
<td class="three wide right aligned overflow-visible">
136134
{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted)}}
137-
<button class="ui button button-ghost gt-p-3 show-modal show-create-branch-modal"
135+
<button class="btn interact-bg gt-p-3 show-modal show-create-branch-modal"
138136
data-branch-from="{{.Name}}"
139137
data-branch-from-urlcomponent="{{PathEscapeSegments .Name}}"
140138
data-tooltip-content="{{$.locale.Tr "repo.branch.new_branch_from" .Name}}"
@@ -144,12 +142,10 @@
144142
</button>
145143
{{end}}
146144
{{if $.EnableFeed}}
147-
<a role="button" class="ui button button-ghost gt-p-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .Name}}">
148-
{{svg "octicon-rss"}}
149-
</a>
145+
<a role="button" class="btn interact-bg gt-p-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .Name}}">{{svg "octicon-rss"}}</a>
150146
{{end}}
151147
{{if and (not .IsDeleted) (not $.DisableDownloadSourceArchives)}}
152-
<div class="ui dropdown button button-ghost gt-p-3" data-tooltip-content="{{$.locale.Tr "repo.branch.download" (.Name)}}">
148+
<div class="ui dropdown btn interact-bg gt-p-3" data-tooltip-content="{{$.locale.Tr "repo.branch.download" (.Name)}}">
153149
{{svg "octicon-download"}}
154150
<div class="menu">
155151
<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments .Name}}.zip" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;ZIP</a>
@@ -158,7 +154,7 @@
158154
</div>
159155
{{end}}
160156
{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted) (not $.IsMirror)}}
161-
<button class="ui button button-ghost gt-p-3 show-modal show-rename-branch-modal"
157+
<button class="btn interact-bg gt-p-3 show-modal show-rename-branch-modal"
162158
data-is-default-branch="false"
163159
data-old-branch-name="{{.Name}}"
164160
data-modal="#rename-branch-modal"
@@ -169,13 +165,13 @@
169165
{{end}}
170166
{{if and $.IsWriter (not $.IsMirror) (not $.Repository.IsArchived) (not .IsProtected)}}
171167
{{if .IsDeleted}}
172-
<button class="ui button button-ghost gt-p-3 undo-button" data-url="{{$.Link}}/restore?branch_id={{.DeletedBranch.ID}}&name={{.DeletedBranch.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{$.locale.Tr "repo.branch.restore" (.Name)}}">
168+
<button class="btn interact-bg gt-p-3 undo-button" data-url="{{$.Link}}/restore?branch_id={{.DeletedBranch.ID}}&name={{.DeletedBranch.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{$.locale.Tr "repo.branch.restore" (.Name)}}">
173169
<span class="text blue">
174170
{{svg "octicon-reply"}}
175171
</span>
176172
</button>
177173
{{else}}
178-
<button class="ui button button-ghost gt-p-3 delete-button delete-branch-button" data-url="{{$.Link}}/delete?name={{.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{$.locale.Tr "repo.branch.delete" (.Name)}}" data-name="{{.Name}}">
174+
<button class="btn interact-bg gt-p-3 delete-button delete-branch-button" data-url="{{$.Link}}/delete?name={{.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{$.locale.Tr "repo.branch.delete" (.Name)}}" data-name="{{.Name}}">
179175
{{svg "octicon-trash"}}
180176
</button>
181177
{{end}}

‎templates/repo/cite/cite_modal.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
</div>
1616
</div>
1717
<div class="actions">
18-
<button class="ui black cancel button">
18+
<button class="ui cancel button">
1919
{{.locale.Tr "cancel"}}
2020
</button>
2121
</div>

‎templates/repo/commit_statuses.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{{if .Statuses}}
22
{{if and (eq (len .Statuses) 1) .Status.TargetURL}}
3-
<a class="gt-vm gt-tdn" data-tippy="commit-statuses" href="{{.Status.TargetURL}}">
3+
<a class="gt-vm gt-no-underline" data-tippy="commit-statuses" href="{{.Status.TargetURL}}">
44
{{template "repo/commit_status" .Status}}
55
</a>
66
{{else}}

‎templates/repo/diff/blob_excerpt.tmpl

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,15 +26,15 @@
2626
{{else}}
2727
{{$inlineDiff := $.section.GetComputedInlineDiffFor $line $.locale}}
2828
<td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}"><span rel="{{if $line.LeftIdx}}diff-{{$.FileNameHash}}L{{$line.LeftIdx}}{{end}}"></span></td>
29-
<td class="blob-excerpt lines-escape lines-escape-old">{{if and $line.LeftIdx $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-ghost" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></button>{{end}}</td>
29+
<td class="blob-excerpt lines-escape lines-escape-old">{{if and $line.LeftIdx $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button btn interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></button>{{end}}</td>
3030
<td class="blob-excerpt lines-type-marker lines-type-marker-old">{{if $line.LeftIdx}}<span class="gt-mono" data-type-marker=""></span>{{end}}</td>
3131
<td class="blob-excerpt lines-code lines-code-old">{{/*
3232
*/}}{{if $line.LeftIdx}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.locale}}{{else}}{{/*
3333
*/}}<code class="code-inner"></code>{{/*
3434
*/}}{{end}}{{/*
3535
*/}}</td>
3636
<td class="lines-num lines-num-new" data-line-num="{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}"><span rel="{{if $line.RightIdx}}diff-{{$.FileNameHash}}R{{$line.RightIdx}}{{end}}"></span></td>
37-
<td class="blob-excerpt lines-escape lines-escape-new">{{if and $line.RightIdx $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-ghost" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></button>{{end}}</td>
37+
<td class="blob-excerpt lines-escape lines-escape-new">{{if and $line.RightIdx $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button btn interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></button>{{end}}</td>
3838
<td class="blob-excerpt lines-type-marker lines-type-marker-new">{{if $line.RightIdx}}<span class="gt-mono" data-type-marker=""></span>{{end}}</td>
3939
<td class="blob-excerpt lines-code lines-code-new">{{/*
4040
*/}}{{if $line.RightIdx}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.locale}}{{else}}{{/*
@@ -72,7 +72,7 @@
7272
<td class="lines-num lines-num-new" data-line-num="{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}"><span rel="{{if $line.RightIdx}}diff-{{$.FileNameHash}}R{{$line.RightIdx}}{{end}}"></span></td>
7373
{{end}}
7474
{{$inlineDiff := $.section.GetComputedInlineDiffFor $line $.locale}}
75-
<td class="blob-excerpt lines-escape">{{if $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-ghost" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></button>{{end}}</td>
75+
<td class="blob-excerpt lines-escape">{{if $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button btn interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></button>{{end}}</td>
7676
<td class="blob-excerpt lines-type-marker"><span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></td>
7777
<td class="blob-excerpt lines-code{{if (not $line.RightIdx)}} lines-code-old{{end}}"><code {{if $inlineDiff.EscapeStatus.Escaped}}class="code-inner has-escaped" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"{{else}}class="code-inner"{{end}}>{{$inlineDiff.Content}}</code></td>
7878
</tr>

‎templates/repo/diff/box.tmpl

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@
9090
<div class="diff-file-box diff-box file-content {{TabSizeClass $.Editorconfig $file.Name}} gt-mt-3" id="diff-{{$file.NameHash}}" data-old-filename="{{$file.OldName}}" data-new-filename="{{$file.Name}}" {{if or ($file.ShouldBeHidden) (not $isExpandable)}}data-folded="true"{{end}}>
9191
<h4 class="diff-file-header sticky-2nd-row ui top attached normal header gt-df gt-ac gt-sb gt-fw">
9292
<div class="diff-file-name gt-df gt-ac gt-gap-2 gt-fw">
93-
<button class="fold-file ui button button-ghost gt-p-0 gt-mr-3{{if not $isExpandable}} gt-invisible{{end}}">
93+
<button class="fold-file btn interact-bg gt-p-2{{if not $isExpandable}} gt-invisible{{end}}">
9494
{{if $file.ShouldBeHidden}}
9595
{{svg "octicon-chevron-right" 18}}
9696
{{else}}
@@ -107,7 +107,7 @@
107107
{{end}}
108108
</div>
109109
<span class="file gt-mono"><a class="muted file-link" title="{{if $file.IsRenamed}}{{$file.OldName}} &rarr; {{end}}{{$file.Name}}" href="#diff-{{$file.NameHash}}">{{if $file.IsRenamed}}{{$file.OldName}} &rarr; {{end}}{{$file.Name}}</a>{{if .IsLFSFile}} ({{$.locale.Tr "repo.stored_lfs"}}){{end}}</span>
110-
<button class="ui button button-link gt-p-3" data-clipboard-text="{{$file.Name}}">{{svg "octicon-copy" 14}}</button>
110+
<button class="btn interact-fg gt-p-3" data-clipboard-text="{{$file.Name}}">{{svg "octicon-copy" 14}}</button>
111111
{{if $file.IsGenerated}}
112112
<span class="ui label">{{$.locale.Tr "repo.diff.generated"}}</span>
113113
{{end}}

0 commit comments

Comments
 (0)