thepaperpilot/forgejo
1
0
Fork 0
Code Issues Pull requests Releases Activity Actions

Improve button-ghost, remove tertiary button (#24692)

Browse source 
<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 <teabot@gitea.io>
Co-authored-by: silverwind <me@silverwind.io>
This commit is contained in:
wxiaoguang 2023-05-14 04:38:22 +08:00 committed by GitHub
parent 3075b99610
commit 8a8b753647
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 50 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
templates/devtest/gitea-ui.tmpl
View file

@ -1,5 +1,38 @@
{{template "base/head" .}} {{template "base/head" .}}
<div class="page-content devtest ui container"> <div class="page-content devtest ui container">
<div>
<h1>Button</h1>
<div>
Style:
<label><input type="checkbox" name="button-style-compact" value="compact">compact</label>
<label><input type="radio" name="button-style-size" value="">(normal)</label>
<label><input type="radio" name="button-style-size" value="tiny">tiny</label>
<label><input type="radio" name="button-style-size" value="mini">mini</label>
</div>
<div>
State:
<label><input type="checkbox" name="button-state-disabled" value="disabled">disabled</label>
</div>
<div id="devtest-button-samples">
<div>
<button class="ui primary button">Primary</button>
<button class="ui secondary button">Secondary</button>
<button class="ui basic secondary button">Basic Secondary</button>
<button class="ui red button">Red</button>
<button class="ui basic red button">Basic Red</button>
</div>
<div>This is a <button class="ui button button-ghost">Ghost</button> button</div>
</div>
<script type="module">
const $buttons = $('#devtest-button-samples').find('button');
const $buttonStyles = $('input[name*="button-style"]');
$buttonStyles.on('click', () => $buttonStyles.map((_ ,el) => $buttons.toggleClass(el.value, el.checked)));
const $buttonStates = $('input[name*="button-state"]');
$buttonStates.on('click', () => $buttonStates.map((_ ,el) => $buttons.prop(el.value, el.checked)));
</script>
</div>
<div> <div>
<h1>Tooltip</h1> <h1>Tooltip</h1>

20
templates/repo/branch/list.tmpl
View file

@ -27,7 +27,7 @@
</td> </td>
<td class="right aligned overflow-visible"> <td class="right aligned overflow-visible">
{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted)}} {{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted)}}
<button class="ui tertiary button show-create-branch-modal gt-mx-3" <button class="ui button button-ghost show-create-branch-modal gt-mx-3"
data-modal="#create-branch-modal" data-modal="#create-branch-modal"
data-branch-from="{{$.DefaultBranch}}" data-branch-from="{{$.DefaultBranch}}"
data-branch-from-urlcomponent="{{PathEscapeSegments $.DefaultBranch}}" data-branch-from-urlcomponent="{{PathEscapeSegments $.DefaultBranch}}"
@ -37,12 +37,12 @@
</button> </button>
{{end}} {{end}}
{{if .EnableFeed}} {{if .EnableFeed}}
<a role="button" class="ui tertiary button gt-mx-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .DefaultBranch}}"> <a role="button" class="ui button button-ghost gt-mx-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .DefaultBranch}}">
{{svg "octicon-rss"}} {{svg "octicon-rss"}}
</a> </a>
{{end}} {{end}}
{{if not $.DisableDownloadSourceArchives}} {{if not $.DisableDownloadSourceArchives}}
<div class="ui dropdown tertiary button gt-mx-3" data-tooltip-content="{{$.locale.Tr "repo.branch.download" ($.DefaultBranch)}}"> <div class="ui dropdown button button-ghost gt-mx-3" data-tooltip-content="{{$.locale.Tr "repo.branch.download" ($.DefaultBranch)}}">
{{svg "octicon-download"}} {{svg "octicon-download"}}
<div class="menu"> <div class="menu">
<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.DefaultBranch}}.zip" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;ZIP</a> <a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.DefaultBranch}}.zip" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;ZIP</a>
@ -51,7 +51,7 @@
</div> </div>
{{end}} {{end}}
{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted) (not $.IsMirror)}} {{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted) (not $.IsMirror)}}
<button class="ui tertiary button show-modal show-rename-branch-modal gt-mx-3" <button class="ui button button-ghost show-modal show-rename-branch-modal gt-mx-3"
data-is-default-branch="true" data-is-default-branch="true"
data-modal="#rename-branch-modal" data-modal="#rename-branch-modal"
data-old-branch-name="{{$.DefaultBranch}}" data-old-branch-name="{{$.DefaultBranch}}"
@ -134,7 +134,7 @@
</td> </td>
<td class="three wide right aligned overflow-visible"> <td class="three wide right aligned overflow-visible">
{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted)}} {{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted)}}
<button class="ui tertiary button show-modal show-create-branch-modal gt-mx-3" <button class="ui button button-ghost show-modal show-create-branch-modal gt-mx-3"
data-branch-from="{{.Name}}" data-branch-from="{{.Name}}"
data-branch-from-urlcomponent="{{PathEscapeSegments .Name}}" data-branch-from-urlcomponent="{{PathEscapeSegments .Name}}"
data-tooltip-content="{{$.locale.Tr "repo.branch.new_branch_from" .Name}}" data-tooltip-content="{{$.locale.Tr "repo.branch.new_branch_from" .Name}}"
@ -144,12 +144,12 @@
</button> </button>
{{end}} {{end}}
{{if $.EnableFeed}} {{if $.EnableFeed}}
<a role="button" class="ui tertiary button gt-mx-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .Name}}"> <a role="button" class="ui button button-ghost gt-mx-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .Name}}">
{{svg "octicon-rss"}} {{svg "octicon-rss"}}
</a> </a>
{{end}} {{end}}
{{if and (not .IsDeleted) (not $.DisableDownloadSourceArchives)}} {{if and (not .IsDeleted) (not $.DisableDownloadSourceArchives)}}
<div class="ui dropdown tertiary button gt-mx-3" data-tooltip-content="{{$.locale.Tr "repo.branch.download" (.Name)}}"> <div class="ui dropdown button button-ghost gt-mx-3" data-tooltip-content="{{$.locale.Tr "repo.branch.download" (.Name)}}">
{{svg "octicon-download"}} {{svg "octicon-download"}}
<div class="menu"> <div class="menu">
<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments .Name}}.zip" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;ZIP</a> <a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments .Name}}.zip" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;ZIP</a>
@ -158,7 +158,7 @@
</div> </div>
{{end}} {{end}}
{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted) (not $.IsMirror)}} {{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted) (not $.IsMirror)}}
<button class="ui tertiary button show-modal show-rename-branch-modal gt-mx-3" <button class="ui button button-ghost show-modal show-rename-branch-modal gt-mx-3"
data-is-default-branch="false" data-is-default-branch="false"
data-old-branch-name="{{.Name}}" data-old-branch-name="{{.Name}}"
data-modal="#rename-branch-modal" data-modal="#rename-branch-modal"
@ -169,13 +169,13 @@
{{end}} {{end}}
{{if and $.IsWriter (not $.IsMirror) (not $.Repository.IsArchived) (not .IsProtected)}} {{if and $.IsWriter (not $.IsMirror) (not $.Repository.IsArchived) (not .IsProtected)}}
{{if .IsDeleted}} {{if .IsDeleted}}
<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)}}"> <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)}}">
<span class="text blue"> <span class="text blue">
{{svg "octicon-reply"}} {{svg "octicon-reply"}}
</span> </span>
</button> </button>
{{else}} {{else}}
<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}}"> <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}}">
{{svg "octicon-trash"}} {{svg "octicon-trash"}}
</button> </button>
{{end}} {{end}}

2
templates/repo/home.tmpl
View file

@ -30,7 +30,7 @@
</div> </div>
<div class="gt-df gt-ac gt-fw gt-mt-3" id="repo-topics"> <div class="gt-df gt-ac gt-fw gt-mt-3" id="repo-topics">
{{range .Topics}}<a class="ui repo-topic large label topic" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}} {{range .Topics}}<a class="ui repo-topic large label topic" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
{{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}} {{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}}
</div> </div>
{{end}} {{end}}
{{if and .Permission.IsAdmin (not .Repository.IsArchived)}} {{if and .Permission.IsAdmin (not .Repository.IsArchived)}}

2
templates/user/settings/applications_oauth2_edit_form.tmpl
View file

@ -27,7 +27,7 @@
<form class="ui form ignore-dirty" action="{{.FormActionPath}}/regenerate_secret" method="post"> <form class="ui form ignore-dirty" action="{{.FormActionPath}}/regenerate_secret" method="post">
{{.CsrfTokenHtml}} {{.CsrfTokenHtml}}
{{.locale.Tr "settings.oauth2_regenerate_secret_hint"}} {{.locale.Tr "settings.oauth2_regenerate_secret_hint"}}
<button class="ui tertiary button" type="submit">{{.locale.Tr "settings.oauth2_regenerate_secret"}}</button> <button class="ui button button-ghost" type="submit">{{.locale.Tr "settings.oauth2_regenerate_secret"}}</button>
</form> </form>
</div> </div>
</div> </div>

20
web_src/css/base.css
View file

@ -2180,13 +2180,16 @@ a.ui.active.label:hover {
border-left: none; border-left: none;
} }
.ui.button.button-ghost { /* a ghost button can be used as inline text, it doesn't have obvious styles */
.button.button-ghost {
background: transparent; background: transparent;
border: none; border: none;
color: inherit; color: inherit;
margin: 0;
padding: 0;
} }
.ui.button.button-ghost:hover { .button.button-ghost:hover {
color: var(--color-primary); color: var(--color-primary);
} }
@ -2283,19 +2286,6 @@ a.ui.active.label:hover {
border-color: var(--color-secondary-dark-3) !important; border-color: var(--color-secondary-dark-3) !important;
} }
.ui.tertiary.button {
color: var(--color-text-light);
border: none;
}
.ui.tertiary.button:hover {
color: var(--color-text);
}
.ui.tertiary.button:focus {
color: var(--color-text-dark);
}
.ui.primary.label, .ui.primary.label,
.ui.primary.labels .label, .ui.primary.labels .label,
.ui.ui.ui.primary.label { .ui.ui.ui.primary.label {

4
web_src/css/user.css
View file

@ -121,10 +121,6 @@
object-fit: contain; object-fit: contain;
} }
.user.notification table button {
padding: 3px 3px 3px 5px;
}
#notification_div .tab.segment { #notification_div .tab.segment {
overflow-x: auto; overflow-x: auto;
} }