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 <teabot@gitea.io> Co-authored-by: silverwind <me@silverwind.io>
This commit is contained in:
wxiaoguang
GitHub
parent
3075b99610
commit
8a8b753647
|
|
@ -1,5 +1,38 @@
|
|||
{{template "base/head" .}}
|
||||
<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>
|
||||
<h1>Tooltip</h1>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
</td>
|
||||
<td class="right aligned overflow-visible">
|
||||
{{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-branch-from="{{$.DefaultBranch}}"
|
||||
data-branch-from-urlcomponent="{{PathEscapeSegments $.DefaultBranch}}"
|
||||
|
|
@ -37,12 +37,12 @@
|
|||
</button>
|
||||
{{end}}
|
||||
{{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"}}
|
||||
</a>
|
||||
{{end}}
|
||||
{{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"}}
|
||||
<div class="menu">
|
||||
<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.DefaultBranch}}.zip" rel="nofollow">{{svg "octicon-file-zip"}} ZIP</a>
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
</div>
|
||||
{{end}}
|
||||
{{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-modal="#rename-branch-modal"
|
||||
data-old-branch-name="{{$.DefaultBranch}}"
|
||||
|
|
@ -134,7 +134,7 @@
|
|||
</td>
|
||||
<td class="three wide right aligned overflow-visible">
|
||||
{{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-urlcomponent="{{PathEscapeSegments .Name}}"
|
||||
data-tooltip-content="{{$.locale.Tr "repo.branch.new_branch_from" .Name}}"
|
||||
|
|
@ -144,12 +144,12 @@
|
|||
</button>
|
||||
{{end}}
|
||||
{{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"}}
|
||||
</a>
|
||||
{{end}}
|
||||
{{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"}}
|
||||
<div class="menu">
|
||||
<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments .Name}}.zip" rel="nofollow">{{svg "octicon-file-zip"}} ZIP</a>
|
||||
|
|
@ -158,7 +158,7 @@
|
|||
</div>
|
||||
{{end}}
|
||||
{{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-old-branch-name="{{.Name}}"
|
||||
data-modal="#rename-branch-modal"
|
||||
|
|
@ -169,13 +169,13 @@
|
|||
{{end}}
|
||||
{{if and $.IsWriter (not $.IsMirror) (not $.Repository.IsArchived) (not .IsProtected)}}
|
||||
{{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">
|
||||
{{svg "octicon-reply"}}
|
||||
</span>
|
||||
</button>
|
||||
{{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"}}
|
||||
</button>
|
||||
{{end}}
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
</div>
|
||||
<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}}
|
||||
{{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>
|
||||
{{end}}
|
||||
{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
<form class="ui form ignore-dirty" action="{{.FormActionPath}}/regenerate_secret" method="post">
|
||||
{{.CsrfTokenHtml}}
|
||||
{{.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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2180,13 +2180,16 @@ a.ui.active.label:hover {
|
|||
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;
|
||||
border: none;
|
||||
color: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ui.button.button-ghost:hover {
|
||||
.button.button-ghost:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
|
|
@ -2283,19 +2286,6 @@ a.ui.active.label:hover {
|
|||
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.labels .label,
|
||||
.ui.ui.ui.primary.label {
|
||||
|
|
|
|||
|
|
@ -121,10 +121,6 @@
|
|||
object-fit: contain;
|
||||
}
|
||||
|
||||
.user.notification table button {
|
||||
padding: 3px 3px 3px 5px;
|
||||
}
|
||||
|
||||
#notification_div .tab.segment {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue