Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve button-ghost, remove tertiary button #24692

Merged
merged 6 commits into from
May 13, 2023
Merged

Improve button-ghost, remove tertiary button #24692

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8f70d01
fix
wxiaoguang May 13, 2023
31be8e1
Merge branch 'main' into fix-ghost-button
GiteaBot May 13, 2023
e84cc18
Merge branch 'main' into fix-ghost-button
silverwind May 13, 2023
6b2dc6e
remove ui
silverwind May 13, 2023
85cd650
Merge branch 'main' into fix-ghost-button
GiteaBot May 13, 2023
541decf
Merge branch 'main' into fix-ghost-button
GiteaBot May 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions templates/devtest/gitea-ui.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
20 changes: 10 additions & 10 deletions templates/repo/branch/list.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}"
Expand All @@ -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"}}&nbsp;ZIP</a>
Expand All @@ -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}}"
Expand Down Expand Up @@ -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}}"
Expand All @@ -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"}}&nbsp;ZIP</a>
Expand All @@ -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"
Expand All @@ -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}}
Expand Down
2 changes: 1 addition & 1 deletion templates/repo/home.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)}}
Expand Down
2 changes: 1 addition & 1 deletion templates/user/settings/applications_oauth2_edit_form.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
20 changes: 5 additions & 15 deletions web_src/css/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Expand Down Expand Up @@ -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 {
Expand Down
4 changes: 0 additions & 4 deletions web_src/css/user.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,10 +121,6 @@
object-fit: contain;
}

.user.notification table button {
padding: 3px 3px 3px 5px;
}

#notification_div .tab.segment {
overflow-x: auto;
}
Expand Down