Skip to content

Commit 8a8b753

Browse files
wxiaoguangGiteaBotsilverwind
authored
Improve button-ghost, remove tertiary button (#24692)
<img width="474" alt="image" src="https://github.com/go-gitea/gitea/assets/2114189/7fd231f9-71c3-4769-ba96-37a5b77cf224"> <img width="557" alt="image" src="https://github.com/go-gitea/gitea/assets/2114189/c9945f61-39b4-4711-aea8-c34ef1d714c5"> <img width="641" alt="image" src="https://github.com/go-gitea/gitea/assets/2114189/691be76e-74fd-420d-9b9e-ba1f3b08e0b4"> And a page to test buttons: <details> <img width="451" alt="image" src="https://github.com/go-gitea/gitea/assets/2114189/5f61da24-2f36-40ad-a9bb-2205da5f5f04"> </details> --------- Co-authored-by: Giteabot <[email protected]> Co-authored-by: silverwind <[email protected]>
1 parent 3075b99 commit 8a8b753

File tree

6 files changed

+50
-31
lines changed

6 files changed

+50
-31
lines changed

‎templates/devtest/gitea-ui.tmpl

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,38 @@
11
{{template "base/head" .}}
22
<div class="page-content devtest ui container">
3+
<div>
4+
<h1>Button</h1>
5+
<div>
6+
Style:
7+
<label><input type="checkbox" name="button-style-compact" value="compact">compact</label>
8+
<label><input type="radio" name="button-style-size" value="">(normal)</label>
9+
<label><input type="radio" name="button-style-size" value="tiny">tiny</label>
10+
<label><input type="radio" name="button-style-size" value="mini">mini</label>
11+
</div>
12+
<div>
13+
State:
14+
<label><input type="checkbox" name="button-state-disabled" value="disabled">disabled</label>
15+
</div>
16+
<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');
28+
29+
const $buttonStyles = $('input[name*="button-style"]');
30+
$buttonStyles.on('click', () => $buttonStyles.map((_ ,el) => $buttons.toggleClass(el.value, el.checked)));
31+
32+
const $buttonStates = $('input[name*="button-state"]');
33+
$buttonStates.on('click', () => $buttonStates.map((_ ,el) => $buttons.prop(el.value, el.checked)));
34+
</script>
35+
</div>
336

437
<div>
538
<h1>Tooltip</h1>

‎templates/repo/branch/list.tmpl

Lines changed: 10 additions & 10 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 tertiary button show-create-branch-modal gt-mx-3"
30+
<button class="ui button button-ghost show-create-branch-modal gt-mx-3"
3131
data-modal="#create-branch-modal"
3232
data-branch-from="{{$.DefaultBranch}}"
3333
data-branch-from-urlcomponent="{{PathEscapeSegments $.DefaultBranch}}"
@@ -37,12 +37,12 @@
3737
</button>
3838
{{end}}
3939
{{if .EnableFeed}}
40-
<a role="button" class="ui tertiary button gt-mx-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .DefaultBranch}}">
40+
<a role="button" class="ui button button-ghost gt-mx-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .DefaultBranch}}">
4141
{{svg "octicon-rss"}}
4242
</a>
4343
{{end}}
4444
{{if not $.DisableDownloadSourceArchives}}
45-
<div class="ui dropdown tertiary button gt-mx-3" data-tooltip-content="{{$.locale.Tr "repo.branch.download" ($.DefaultBranch)}}">
45+
<div class="ui dropdown button button-ghost gt-mx-3" data-tooltip-content="{{$.locale.Tr "repo.branch.download" ($.DefaultBranch)}}">
4646
{{svg "octicon-download"}}
4747
<div class="menu">
4848
<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.DefaultBranch}}.zip" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;ZIP</a>
@@ -51,7 +51,7 @@
5151
</div>
5252
{{end}}
5353
{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted) (not $.IsMirror)}}
54-
<button class="ui tertiary button show-modal show-rename-branch-modal gt-mx-3"
54+
<button class="ui button button-ghost show-modal show-rename-branch-modal gt-mx-3"
5555
data-is-default-branch="true"
5656
data-modal="#rename-branch-modal"
5757
data-old-branch-name="{{$.DefaultBranch}}"
@@ -134,7 +134,7 @@
134134
</td>
135135
<td class="three wide right aligned overflow-visible">
136136
{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted)}}
137-
<button class="ui tertiary button show-modal show-create-branch-modal gt-mx-3"
137+
<button class="ui button button-ghost show-modal show-create-branch-modal gt-mx-3"
138138
data-branch-from="{{.Name}}"
139139
data-branch-from-urlcomponent="{{PathEscapeSegments .Name}}"
140140
data-tooltip-content="{{$.locale.Tr "repo.branch.new_branch_from" .Name}}"
@@ -144,12 +144,12 @@
144144
</button>
145145
{{end}}
146146
{{if $.EnableFeed}}
147-
<a role="button" class="ui tertiary button gt-mx-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .Name}}">
147+
<a role="button" class="ui button button-ghost gt-mx-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .Name}}">
148148
{{svg "octicon-rss"}}
149149
</a>
150150
{{end}}
151151
{{if and (not .IsDeleted) (not $.DisableDownloadSourceArchives)}}
152-
<div class="ui dropdown tertiary button gt-mx-3" data-tooltip-content="{{$.locale.Tr "repo.branch.download" (.Name)}}">
152+
<div class="ui dropdown button button-ghost gt-mx-3" data-tooltip-content="{{$.locale.Tr "repo.branch.download" (.Name)}}">
153153
{{svg "octicon-download"}}
154154
<div class="menu">
155155
<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments .Name}}.zip" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;ZIP</a>
@@ -158,7 +158,7 @@
158158
</div>
159159
{{end}}
160160
{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted) (not $.IsMirror)}}
161-
<button class="ui tertiary button show-modal show-rename-branch-modal gt-mx-3"
161+
<button class="ui button button-ghost show-modal show-rename-branch-modal gt-mx-3"
162162
data-is-default-branch="false"
163163
data-old-branch-name="{{.Name}}"
164164
data-modal="#rename-branch-modal"
@@ -169,13 +169,13 @@
169169
{{end}}
170170
{{if and $.IsWriter (not $.IsMirror) (not $.Repository.IsArchived) (not .IsProtected)}}
171171
{{if .IsDeleted}}
172-
<button class="ui tertiary button undo-button gt-mx-3" data-url="{{$.Link}}/restore?branch_id={{.DeletedBranch.ID}}&name={{.DeletedBranch.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{$.locale.Tr "repo.branch.restore" (.Name)}}">
172+
<button class="ui button button-ghost undo-button gt-mx-3" data-url="{{$.Link}}/restore?branch_id={{.DeletedBranch.ID}}&name={{.DeletedBranch.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{$.locale.Tr "repo.branch.restore" (.Name)}}">
173173
<span class="text blue">
174174
{{svg "octicon-reply"}}
175175
</span>
176176
</button>
177177
{{else}}
178-
<button class="ui tertiary button delete-button delete-branch-button gt-mx-3" data-url="{{$.Link}}/delete?name={{.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{$.locale.Tr "repo.branch.delete" (.Name)}}" data-name="{{.Name}}">
178+
<button class="ui button button-ghost delete-button delete-branch-button gt-mx-3" data-url="{{$.Link}}/delete?name={{.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{$.locale.Tr "repo.branch.delete" (.Name)}}" data-name="{{.Name}}">
179179
{{svg "octicon-trash"}}
180180
</button>
181181
{{end}}

‎templates/repo/home.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
</div>
3131
<div class="gt-df gt-ac gt-fw gt-mt-3" id="repo-topics">
3232
{{range .Topics}}<a class="ui repo-topic large label topic" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
33-
{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<button id="manage_topic" class="ui button tiny tertiary gt-ml-2">{{.locale.Tr "repo.topic.manage_topics"}}</button>{{end}}
33+
{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<button id="manage_topic" class="ui tiny button button-ghost gt-ml-2">{{.locale.Tr "repo.topic.manage_topics"}}</button>{{end}}
3434
</div>
3535
{{end}}
3636
{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}

‎templates/user/settings/applications_oauth2_edit_form.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
<form class="ui form ignore-dirty" action="{{.FormActionPath}}/regenerate_secret" method="post">
2828
{{.CsrfTokenHtml}}
2929
{{.locale.Tr "settings.oauth2_regenerate_secret_hint"}}
30-
<button class="ui tertiary button" type="submit">{{.locale.Tr "settings.oauth2_regenerate_secret"}}</button>
30+
<button class="ui button button-ghost" type="submit">{{.locale.Tr "settings.oauth2_regenerate_secret"}}</button>
3131
</form>
3232
</div>
3333
</div>

‎web_src/css/base.css

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2180,13 +2180,16 @@ a.ui.active.label:hover {
21802180
border-left: none;
21812181
}
21822182

2183-
.ui.button.button-ghost {
2183+
/* a ghost button can be used as inline text, it doesn't have obvious styles */
2184+
.button.button-ghost {
21842185
background: transparent;
21852186
border: none;
21862187
color: inherit;
2188+
margin: 0;
2189+
padding: 0;
21872190
}
21882191

2189-
.ui.button.button-ghost:hover {
2192+
.button.button-ghost:hover {
21902193
color: var(--color-primary);
21912194
}
21922195

@@ -2283,19 +2286,6 @@ a.ui.active.label:hover {
22832286
border-color: var(--color-secondary-dark-3) !important;
22842287
}
22852288

2286-
.ui.tertiary.button {
2287-
color: var(--color-text-light);
2288-
border: none;
2289-
}
2290-
2291-
.ui.tertiary.button:hover {
2292-
color: var(--color-text);
2293-
}
2294-
2295-
.ui.tertiary.button:focus {
2296-
color: var(--color-text-dark);
2297-
}
2298-
22992289
.ui.primary.label,
23002290
.ui.primary.labels .label,
23012291
.ui.ui.ui.primary.label {

‎web_src/css/user.css

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -121,10 +121,6 @@
121121
object-fit: contain;
122122
}
123123

124-
.user.notification table button {
125-
padding: 3px 3px 3px 5px;
126-
}
127-
128124
#notification_div .tab.segment {
129125
overflow-x: auto;
130126
}

0 commit comments

Comments
 (0)