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

Fine tune "dropdown button" icon #25442

Merged
merged 3 commits into from
Jun 25, 2023
Merged

Fine tune "dropdown button" icon #25442

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0f58477
fix
wxiaoguang Jun 22, 2023
c597f6b
use svg size 14
wxiaoguang Jun 22, 2023
f6e7cda
Merge branch 'main' into fix-dropdown-button
GiteaBot Jun 25, 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
46 changes: 30 additions & 16 deletions templates/devtest/gitea-ui.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,13 +165,6 @@
<div class="item">item</div>
</div>
</div>
<div class="ui button dropdown">
<span class="text">button dropdown</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu">
<div class="item">item</div>
</div>
</div>
<div class="ui search selection dropdown">
<span class="text">search ...</span>
<input name="value" class="search">
Expand Down Expand Up @@ -212,18 +205,39 @@

<div>
<div class="ui dropdown mini button">
<span class="text">small dropdown</span>
{{svg "octicon-triangle-down" 12 "dropdown icon"}}
<div class="menu">
<div class="item">item</div>
</div>
<span class="text">mini dropdown</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
</div>
<div class="ui dropdown tiny button">
<span class="text">tiny dropdown</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
</div>
<div class="ui button dropdown">
<span class="text">button dropdown</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
</div>
<div class="ui dropdown large button">
<span class="text">large dropdown</span>
{{svg "octicon-triangle-down" 18 "dropdown icon"}}
<div class="menu">
<div class="item">item</div>
</div>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
</div>
</div>

<div>
<div class="ui dropdown mini compact button">
<span class="text">mini compact</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
</div>
<div class="ui dropdown tiny compact button">
<span class="text">tiny compact</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
</div>
<div class="ui button compact dropdown">
<span class="text">button compact</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
</div>
<div class="ui dropdown large compact button">
<span class="text">large compact</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
</div>
</div>
</div>
Expand Down
3 changes: 2 additions & 1 deletion templates/repo/commit_page.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,8 @@
{{.locale.Tr "repo.diff.browse_source"}}
</a>
{{if and ($.Permission.CanWrite $.UnitTypeCode) (not $.Repository.IsArchived) (not .IsDeleted)}}{{- /* */ -}}
<div class="ui primary tiny floating dropdown icon button">{{.locale.Tr "repo.commit.operations"}}
<div class="ui dropdown primary tiny button">
{{.locale.Tr "repo.commit.operations"}}
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu">
<div class="ui header">{{.locale.Tr "repo.commit.operations"}}</div>
Expand Down
11 changes: 11 additions & 0 deletions web_src/css/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2192,6 +2192,17 @@ table th[data-sortt-desc] .svg {
- "> .ui.label > .delete.icon": the "x" icon for removing a label item in multiple selection dropdown
*/

.ui.dropdown.mini.button,
.ui.dropdown.tiny.button {
padding-right: 20px;
}
.ui.dropdown.button {
padding-right: 22px;
}
.ui.dropdown.large.button {
padding-right: 24px;
}

/* Gitea uses SVG images instead of Fomantic builtin "<i>" font icons, so we need to reset the icon styles */
.ui.ui.dropdown > .icon.icon {
position: initial; /* plain dropdown and button dropdown use flex layout for icons */
Expand Down