Skip to content

Commit 5191ab6

Browse files
GiteaBotwxiaoguang
GiteaBot
and
wxiaoguang
authoredJun 14, 2023
Use flex to align SVG and text (#25163) (#25260)
Backport #25163 by @wxiaoguang The code can be as simple as: ```html <div class="flex-text-block">{{svg "octicon-alert"}} {{svg "octicon-x"}} text (block)</div> <div><div class="flex-text-inline">{{svg "octicon-alert"}} {{svg "octicon-x"}} text</div> (inline)</div> <div><button class="ui red button">{{svg "octicon-alert" 24}} {{svg "octicon-x" 24}} text</button></div> ``` ![image](https://github.com/go-gitea/gitea/assets/2114189/1d3c10f1-0bc7-4c26-b236-bad537d5c465) Co-authored-by: wxiaoguang <[email protected]>
·
v1.20.6v1.20.0-rc1
1 parent bfd3eb9 commit 5191ab6

17 files changed

+247
-131
lines changed
 

‎templates/devtest/gitea-ui.tmpl‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,106 @@
117117
<div>1y future: {{TimeSince .TimeFuture1y $.locale}}</div>
118118
</div>
119119

120+
<div>
121+
<h1>SVG alignment</h1>
122+
123+
<h2>Text with SVG</h2>
124+
<div class="flex-text-block">{{svg "octicon-alert"}} {{svg "octicon-x"}} text (block)</div>
125+
<div><div class="flex-text-inline">{{svg "octicon-alert"}} {{svg "octicon-x"}} text</div> (inline)</div>
126+
<div class="flex-items-block">
127+
<div class="item">{{svg "octicon-alert"}} flex every line</div>
128+
<div class="item">{{svg "octicon-alert"}} flex every item</div>
129+
</div>
130+
131+
<h2>Button with SVG</h2>
132+
<div>
133+
<button class="ui red button">{{svg "octicon-alert" 24}} {{svg "octicon-x" 24}} text</button>
134+
<div class="ui labeled button">
135+
<button class="ui basic button">labeled button</button>
136+
<a class="ui basic label">123</a>
137+
</div>
138+
</div>
139+
140+
<h2>Input with SVG</h2>
141+
<div>
142+
<div class="ui icon search input">
143+
<i class="icon">{{svg "octicon-search"}}</i>
144+
<input type="text" placeholder="place holder">
145+
</div>
146+
</div>
147+
148+
<h2>Dropdown with SVG</h2>
149+
<div>
150+
<div class="ui dropdown" style="border: 1px red dashed" data-tooltip-content="border for demo purpose only">
151+
<span class="text">simple</span>
152+
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
153+
<div class="menu">
154+
<div class="item">item</div>
155+
</div>
156+
</div>
157+
<div class="ui button dropdown">
158+
<span class="text">button dropdown</span>
159+
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
160+
<div class="menu">
161+
<div class="item">item</div>
162+
</div>
163+
</div>
164+
<div class="ui search selection dropdown">
165+
<span class="text">search ...</span>
166+
<input name="value" class="search">
167+
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
168+
{{svg "octicon-x" 14 "remove icon"}}
169+
<div class="menu">
170+
<div class="item">item</div>
171+
</div>
172+
</div>
173+
<div class="ui multiple selection dropdown">
174+
<input class="hidden" value="1">
175+
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
176+
{{svg "octicon-x" 14 "remove icon"}}
177+
<div class="default text">empty multiple dropdown</div>
178+
<div class="menu">
179+
<div class="item">item</div>
180+
</div>
181+
</div>
182+
<div class="ui multiple clearable search selection dropdown">
183+
<input type="hidden" value="1">
184+
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
185+
{{svg "octicon-x" 14 "remove icon"}}
186+
<div class="default text">clearable search dropdown</div>
187+
<div class="menu">
188+
<div class="item" data-value="1">item</div>
189+
</div>
190+
</div>
191+
<div class="ui buttons">
192+
<button class="ui button">Button with Dropdown</button>
193+
<div class="ui dropdown button icon">
194+
{{svg "octicon-triangle-down"}}
195+
<div class="menu">
196+
<div class="item">item</div>
197+
</div>
198+
</div>
199+
</div>
200+
</div>
201+
202+
<div>
203+
<div class="ui dropdown mini button">
204+
<span class="text">small dropdown</span>
205+
{{svg "octicon-triangle-down" 12 "dropdown icon"}}
206+
<div class="menu">
207+
<div class="item">item</div>
208+
</div>
209+
</div>
210+
<div class="ui dropdown large button">
211+
<span class="text">large dropdown</span>
212+
{{svg "octicon-triangle-down" 18 "dropdown icon"}}
213+
<div class="menu">
214+
<div class="item">item</div>
215+
</div>
216+
</div>
217+
</div>
218+
</div>
219+
120220
<div>
121221
<h1>ComboMarkdownEditor</h1>
122222
<div>ps: no JS code attached, so just a layout</div>

‎templates/repo/commits_list_small.tmpl‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,7 @@
66
<div class="singular-commit" id="{{$tag}}">
77
<span class="badge badge-commit">{{svg "octicon-git-commit"}}</span>
88
{{if .User}}
9-
<a href="{{.User.HomeLink}}">
10-
{{avatar $.root.Context .User}}
11-
</a>
9+
<a class="avatar" href="{{.User.HomeLink}}">{{avatar $.root.Context .User}}</a>
1210
{{else}}
1311
{{avatarByEmail $.root.Context .Author.Email .Author.Name}}
1412
{{end}}

‎templates/repo/diff/compare.tmpl‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
</div>
4545
<div class="menu">
4646
<div class="ui icon search input">
47-
<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i>
47+
<i class="icon">{{svg "octicon-filter" 16}}</i>
4848
<input name="search" placeholder="{{.locale.Tr "repo.filter_branch_and_tag"}}...">
4949
</div>
5050
<div class="header">
@@ -113,7 +113,7 @@
113113
</div>
114114
<div class="menu">
115115
<div class="ui icon search input">
116-
<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i>
116+
<i class="icon">{{svg "octicon-filter" 16}}</i>
117117
<input name="search" placeholder="{{.locale.Tr "repo.filter_branch_and_tag"}}...">
118118
</div>
119119
<div class="header">

‎templates/repo/issue/branch_selector_field.tmpl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
</div>
1313
<div class="menu">
1414
<div class="ui icon search input">
15-
<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i>
15+
<i class="icon">{{svg "octicon-filter" 16}}</i>
1616
<input name="search" placeholder="{{.locale.Tr "repo.filter_branch_and_tag"}}...">
1717
</div>
1818
<div class="header">

‎templates/repo/issue/view_content/pull.tmpl‎

Lines changed: 48 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,13 @@
2222
<div class="content">
2323
{{template "repo/pulls/status" .}}
2424
{{$showGeneralMergeForm := false}}
25-
<div class="ui attached merge-section segment {{if not $.LatestCommitStatus}}no-header{{end}}">
25+
<div class="ui attached merge-section segment {{if not $.LatestCommitStatus}}no-header{{end}} flex-items-block">
2626
{{if .Issue.PullRequest.HasMerged}}
2727
{{if .IsPullBranchDeletable}}
2828
<div class="item item-section text gt-f1">
2929
<div class="item-section-left">
3030
<h3 class="gt-mb-3">
31-
{{$.locale.Tr "repo.pulls.merged_success"}}
31+
{{$.locale.Tr "repo.pulls.merged_success"}}
3232
</h3>
3333
<div class="merge-section-info">
3434
{{$.locale.Tr "repo.pulls.merged_info_text" (printf "<code>%s</code>" (.HeadTarget | Escape)) | Str2html}}
@@ -58,93 +58,91 @@
5858
{{end}}
5959
</div>
6060
{{else if .IsPullFilesConflicted}}
61-
<div class="item text">
61+
<div class="item">
6262
{{svg "octicon-x"}}
6363
{{$.locale.Tr "repo.pulls.files_conflicted"}}
64-
<ul>
65-
{{range .ConflictedFiles}}
66-
<li>{{.}}</li>
67-
{{end}}
68-
</ul>
6964
</div>
65+
<ul>
66+
{{range .ConflictedFiles}}
67+
<li>{{.}}</li>
68+
{{end}}
69+
</ul>
7070
{{else if .IsPullRequestBroken}}
7171
<div class="item">
72-
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
72+
{{svg "octicon-x"}}
7373
{{$.locale.Tr "repo.pulls.data_broken"}}
7474
</div>
7575
{{else if .IsPullWorkInProgress}}
76-
<div class="item toggle-wip gt-df gt-ac gt-sb" data-title="{{.Issue.Title}}" data-wip-prefix="{{(.WorkInProgressPrefix|Escape)}}" data-update-url="{{.Issue.Link}}/title">
77-
<div>
78-
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
76+
<div class="item toggle-wip" data-title="{{.Issue.Title}}" data-wip-prefix="{{(.WorkInProgressPrefix|Escape)}}" data-update-url="{{.Issue.Link}}/title">
77+
<div class="item-section-left flex-text-inline gt-f1">
78+
{{svg "octicon-x"}}
7979
{{$.locale.Tr "repo.pulls.cannot_merge_work_in_progress"}}
8080
</div>
81-
<div>
82-
{{if or .HasIssuesOrPullsWritePermission .IsIssuePoster}}
83-
<button class="ui compact button">
84-
{{$.locale.Tr "repo.pulls.remove_prefix" (.WorkInProgressPrefix|Escape) | Safe}}
85-
</button>
86-
{{end}}
87-
</div>
81+
{{if or .HasIssuesOrPullsWritePermission .IsIssuePoster}}
82+
<button class="ui compact button">
83+
{{$.locale.Tr "repo.pulls.remove_prefix" (.WorkInProgressPrefix|Escape) | Safe}}
84+
</button>
85+
{{end}}
8886
</div>
8987
{{template "repo/issue/view_content/update_branch_by_merge" $}}
9088
{{else if .Issue.PullRequest.IsChecking}}
9189
<div class="item">
92-
<i class="icon icon-octicon">{{svg "octicon-sync"}}</i>
90+
{{svg "octicon-sync"}}
9391
{{$.locale.Tr "repo.pulls.is_checking"}}
9492
</div>
9593
{{else if .Issue.PullRequest.IsAncestor}}
9694
<div class="item">
97-
<i class="icon icon-octicon">{{svg "octicon-alert"}}</i>
95+
{{svg "octicon-alert"}}
9896
{{$.locale.Tr "repo.pulls.is_ancestor"}}
9997
</div>
10098
{{else if or .Issue.PullRequest.CanAutoMerge .Issue.PullRequest.IsEmpty}}
10199
{{if .IsBlockedByApprovals}}
102100
<div class="item">
103-
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
104-
{{$.locale.Tr "repo.pulls.blocked_by_approvals" .GrantedApprovals .ProtectedBranch.RequiredApprovals}}
101+
{{svg "octicon-x"}}
102+
{{$.locale.Tr "repo.pulls.blocked_by_approvals" .GrantedApprovals .ProtectedBranch.RequiredApprovals}}
105103
</div>
106104
{{else if .IsBlockedByRejection}}
107105
<div class="item">
108-
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
106+
{{svg "octicon-x"}}
109107
{{$.locale.Tr "repo.pulls.blocked_by_rejection"}}
110108
</div>
111109
{{else if .IsBlockedByOfficialReviewRequests}}
112110
<div class="item">
113-
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
111+
{{svg "octicon-x"}}
114112
{{$.locale.Tr "repo.pulls.blocked_by_official_review_requests"}}
115113
</div>
116114
{{else if .IsBlockedByOutdatedBranch}}
117115
<div class="item">
118-
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
119-
{{$.locale.Tr "repo.pulls.blocked_by_outdated_branch"}}
116+
{{svg "octicon-x"}}
117+
{{$.locale.Tr "repo.pulls.blocked_by_outdated_branch"}}
120118
</div>
121119
{{else if .IsBlockedByChangedProtectedFiles}}
122120
<div class="item">
123-
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
121+
{{svg "octicon-x"}}
124122
{{$.locale.TrN $.ChangedProtectedFilesNum "repo.pulls.blocked_by_changed_protected_files_1" "repo.pulls.blocked_by_changed_protected_files_n" | Safe}}
125-
<ul>
126-
{{range .ChangedProtectedFiles}}
127-
<li>{{.}}</li>
128-
{{end}}
129-
</ul>
130123
</div>
124+
<ul>
125+
{{range .ChangedProtectedFiles}}
126+
<li>{{.}}</li>
127+
{{end}}
128+
</ul>
131129
{{else if and .EnableStatusCheck (or .RequiredStatusCheckState.IsError .RequiredStatusCheckState.IsFailure)}}
132130
<div class="item">
133-
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
131+
{{svg "octicon-x"}}
134132
{{$.locale.Tr "repo.pulls.required_status_check_failed"}}
135133
</div>
136134
{{else if and .EnableStatusCheck (not .RequiredStatusCheckState.IsSuccess)}}
137135
<div class="item">
138-
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
136+
{{svg "octicon-x"}}
139137
{{$.locale.Tr "repo.pulls.required_status_check_missing"}}
140138
</div>
141139
{{else if and .AllowMerge .RequireSigned (not .WillSign)}}
142140
<div class="item">
143-
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
141+
{{svg "octicon-x"}}
144142
{{$.locale.Tr "repo.pulls.require_signed_wont_sign"}}
145143
</div>
146144
<div class="item">
147-
<i class="icon icon-octicon">{{svg "octicon-unlock"}}</i>
145+
{{svg "octicon-unlock"}}
148146
{{$.locale.Tr (printf "repo.signing.wont_sign.%s" .WontSignReason)}}
149147
</div>
150148
{{end}}
@@ -158,23 +156,23 @@
158156
{{if $canMergeNow}}
159157
{{if $notAllOverridableChecksOk}}
160158
<div class="item">
161-
<i class="icon icon-octicon">{{svg "octicon-dot-fill"}}</i>
159+
{{svg "octicon-dot-fill"}}
162160
{{$.locale.Tr "repo.pulls.required_status_check_administrator"}}
163161
</div>
164162
{{else}}
165163
<div class="item">
166-
<i class="icon icon-octicon">{{svg "octicon-check"}}</i>
164+
{{svg "octicon-check"}}
167165
{{$.locale.Tr "repo.pulls.can_auto_merge_desc"}}
168166
</div>
169167
{{end}}
170168
{{if .WillSign}}
171169
<div class="item">
172-
<i class="icon icon-octicon">{{svg "octicon-lock" 16 "text green"}}</i>
170+
{{svg "octicon-lock" 16 "text green"}}
173171
{{$.locale.Tr "repo.signing.will_sign" .SigningKey}}
174172
</div>
175173
{{else if .IsSigned}}
176174
<div class="item">
177-
<i class="icon icon-octicon">{{svg "octicon-unlock"}}</i>
175+
{{svg "octicon-unlock"}}
178176
{{$.locale.Tr (printf "repo.signing.wont_sign.%s" .WontSignReason)}}
179177
</div>
180178
{{end}}
@@ -184,7 +182,7 @@
184182
<div class="ui divider"></div>
185183

186184
<div class="item">
187-
<i class="icon icon-octicon">{{svg "octicon-alert"}}</i>
185+
{{svg "octicon-alert"}}
188186
{{$.locale.Tr "repo.pulls.is_empty"}}
189187
</div>
190188
{{end}}
@@ -315,19 +313,19 @@
315313
</div>
316314
{{else if .IsBlockedByOutdatedBranch}}
317315
<div class="item text red">
318-
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
319-
{{$.locale.Tr "repo.pulls.blocked_by_outdated_branch"}}
316+
{{svg "octicon-x"}}
317+
{{$.locale.Tr "repo.pulls.blocked_by_outdated_branch"}}
320318
</div>
321319
{{else if .IsBlockedByChangedProtectedFiles}}
322320
<div class="item text red">
323-
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
321+
{{svg "octicon-x"}}
324322
{{$.locale.TrN $.ChangedProtectedFilesNum "repo.pulls.blocked_by_changed_protected_files_1" "repo.pulls.blocked_by_changed_protected_files_n" | Safe}}
325-
<ul>
326-
{{range .ChangedProtectedFiles}}
327-
<li>{{.}}</li>
328-
{{end}}
329-
</ul>
330323
</div>
324+
<ul>
325+
{{range .ChangedProtectedFiles}}
326+
<li>{{.}}</li>
327+
{{end}}
328+
</ul>
331329
{{else if and .EnableStatusCheck (not .RequiredStatusCheckState.IsSuccess)}}
332330
<div class="item text red">
333331
{{svg "octicon-x"}}

‎templates/repo/issue/view_content/sidebar.tmpl‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -273,7 +273,7 @@
273273
<form method="POST" action="{{.Issue.Link}}/watch">
274274
<input type="hidden" name="watch" value="{{if $.IssueWatch.IsWatching}}0{{else}}1{{end}}">
275275
{{$.CsrfTokenHtml}}
276-
<button class="fluid ui button gt-df gt-jc">
276+
<button class="fluid ui button">
277277
{{if $.IssueWatch.IsWatching}}
278278
{{svg "octicon-mute" 16 "gt-mr-3"}}
279279
{{.locale.Tr "repo.issues.unsubscribe"}}
@@ -558,7 +558,7 @@
558558
{{if or .PinEnabled .Issue.IsPinned}}
559559
<form class="gt-mt-2" method="POST" {{if $.NewPinAllowed}}action="{{.Issue.Link}}/pin"{{else}}data-tooltip-content="{{.locale.Tr "repo.issues.max_pinned"}}"{{end}}>
560560
{{$.CsrfTokenHtml}}
561-
<button class="fluid ui button gt-df gt-jc {{if not $.NewPinAllowed}}disabled{{end}}">
561+
<button class="fluid ui button {{if not $.NewPinAllowed}}disabled{{end}}">
562562
{{if not .Issue.IsPinned}}
563563
{{svg "octicon-pin" 16 "gt-mr-3"}}
564564
{{.locale.Tr "pin"}}

‎templates/repo/issue/view_content/update_branch_by_merge.tmpl‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{{if and (gt $.Issue.PullRequest.CommitsBehind 0) (not $.Issue.IsClosed) (not $.Issue.PullRequest.IsChecking) (not $.IsPullFilesConflicted) (not $.IsPullRequestBroken)}}
22
<div class="ui divider"></div>
33
<div class="item item-section">
4-
<div class="item-section-left">
5-
<i class="icon icon-octicon">{{svg "octicon-alert"}}</i>
4+
<div class="item-section-left flex-text-inline">
5+
{{svg "octicon-alert"}}
66
{{$.locale.Tr "repo.pulls.outdated_with_base_branch"}}
77
</div>
88
<div class="item-section-right">
@@ -14,9 +14,8 @@
1414
{{$.locale.Tr "repo.pulls.update_branch"}}
1515
</span>
1616
</button>
17-
18-
<div class="ui dropdown icon button no-text">
19-
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
17+
<div class="ui dropdown icon button">
18+
{{svg "octicon-triangle-down"}}
2019
<div class="menu">
2120
<a class="item active selected" data-do="{{$.Link}}/update">{{$.locale.Tr "repo.pulls.update_branch"}}</a>
2221
<a class="item" data-do="{{$.Link}}/update?style=rebase">{{$.locale.Tr "repo.pulls.update_branch_rebase"}}</a>

‎templates/repo/issue/view_title.tmpl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@
8484
</div>
8585
<div class="menu">
8686
<div class="ui icon search input">
87-
<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i>
87+
<i class="icon">{{svg "octicon-filter" 16}}</i>
8888
<input name="search" placeholder="{{.locale.Tr "repo.pulls.filter_branch"}}...">
8989
</div>
9090
<div class="scrolling menu" id="branch-select">

‎templates/repo/release_tag_header.tmpl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
{{if $canReadReleases}}
55
<div class="gt-df">
6-
<div class="gt-f1">
6+
<div class="gt-f1 gt-df gt-ac">
77
<h2 class="ui compact small menu header small-menu-items">
88
<a class="{{if .PageIsReleaseList}}active {{end}}item" href="{{.RepoLink}}/releases">{{.locale.Tr "repo.release.releases"}}</a>
99
{{if $canReadCode}}

‎templates/repo/wiki/view.tmpl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
</div>
1616
<div class="menu">
1717
<div class="ui icon search input">
18-
<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i>
18+
<i class="icon">{{svg "octicon-filter" 16}}</i>
1919
<input name="search" placeholder="{{.locale.Tr "repo.wiki.filter_page"}}...">
2020
</div>
2121
<div class="scrolling menu">

‎web_src/css/base.css‎

Lines changed: 75 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1031,10 +1031,6 @@ img.ui.avatar,
10311031
background: var(--color-active);
10321032
}
10331033

1034-
.ui.form .field > .selection.dropdown > .dropdown.icon {
1035-
height: auto;
1036-
}
1037-
10381034
.ui.loading.segment::before,
10391035
.ui.loading.form::before {
10401036
background: none;
@@ -2124,35 +2120,6 @@ table th[data-sortt-desc] .svg {
21242120
margin-left: 0.25rem;
21252121
}
21262122

2127-
.ui.dropdown .svg.dropdown.icon,
2128-
.ui.dropdown .svg.remove.icon,
2129-
.svg.dropdown.icon {
2130-
margin-top: 0 !important; /* reset the "ui.selection.dropdown > .dropdown.icon {margin-top}", for the Issue Dependencies dropdown */
2131-
margin-right: -0.5rem !important; /* fix up SVG dropdown triangles because Fomantic thinks they are icon fonts */
2132-
height: auto; /* reset the ".ui.dropdown > .dropdown.icon {height}", otherwise the icon would be too small */
2133-
}
2134-
2135-
.ui.selection.dropdown > .svg.search.icon,
2136-
.ui.selection.dropdown > .svg.delete.icon,
2137-
.ui.selection.dropdown > .svg.dropdown.icon {
2138-
top: 0 !important; /* reset the ".ui.selection.dropdown > .xxx.icon {top}" if the icon is svg instead of the fomantic icon */
2139-
}
2140-
2141-
.ui.selection.dropdown > .svg.remove.icon {
2142-
top: .5px;
2143-
right: 32px;
2144-
width: auto;
2145-
}
2146-
2147-
.ui.selection.dropdown > .svg.remove.icon:hover {
2148-
opacity: 1;
2149-
}
2150-
2151-
.ui.dropdown.no-text > .dropdown.icon {
2152-
margin-left: 0 !important;
2153-
margin-right: 0 !important;
2154-
}
2155-
21562123
.ui.dropdown .menu .item {
21572124
border-radius: 0;
21582125
}
@@ -2304,3 +2271,78 @@ table th[data-sortt-desc] .svg {
23042271
width: 15px;
23052272
height: 15px;
23062273
}
2274+
2275+
.ui.dropdown {
2276+
line-height: 1em; /* the dropdown doesn't have default line-height, use this to make the dropdown icon align with plain dropdown */
2277+
}
2278+
2279+
/* dropdown has some kinds of icons:
2280+
- "> .dropdown.icon": the arrow for opening the dropdown
2281+
- "> .remove.icon": the "x" icon for clearing the dropdown, only used in selection dropdown
2282+
- "> .ui.label > .delete.icon": the "x" icon for removing a label item in multiple selection dropdown
2283+
*/
2284+
2285+
/* Gitea uses SVG images instead of Fomantic builtin "<i>" font icons, so we need to reset the icon styles */
2286+
.ui.ui.dropdown > .icon.icon {
2287+
position: initial; /* plain dropdown and button dropdown use flex layout for icons */
2288+
padding: 0;
2289+
margin: 0;
2290+
height: auto;
2291+
}
2292+
2293+
.ui.ui.dropdown > .icon.icon:hover {
2294+
opacity: 1;
2295+
}
2296+
2297+
.ui.ui.button.dropdown > .icon.icon,
2298+
.ui.ui.selection.dropdown > .icon.icon {
2299+
position: absolute; /* selection dropdown uses absolute layout for icons */
2300+
top: 50%;
2301+
transform: translateY(-50%);
2302+
}
2303+
2304+
.ui.ui.dropdown > .dropdown.icon {
2305+
right: 0.5em;
2306+
}
2307+
2308+
.ui.ui.dropdown > .remove.icon {
2309+
right: 2em;
2310+
}
2311+
2312+
.ui.ui.button,
2313+
.ui.ui.dropdown,
2314+
.flex-items-inline > .item,
2315+
.flex-text-inline {
2316+
display: inline-flex;
2317+
align-items: center;
2318+
flex-wrap: wrap;
2319+
gap: .25rem;
2320+
vertical-align: middle;
2321+
}
2322+
2323+
.ui.ui.button {
2324+
justify-content: center;
2325+
}
2326+
2327+
.ui.dropdown .ui.label .svg {
2328+
vertical-align: middle;
2329+
}
2330+
2331+
.ui.ui.labeled.button {
2332+
gap: 0;
2333+
align-items: stretch;
2334+
}
2335+
2336+
.ui.ui.icon.input .icon {
2337+
display: flex;
2338+
align-items: center;
2339+
justify-content: center;
2340+
}
2341+
2342+
.flex-items-block > .item,
2343+
.flex-text-block {
2344+
display: flex;
2345+
align-items: center;
2346+
flex-wrap: wrap;
2347+
gap: .25rem;
2348+
}

‎web_src/css/modules/button.css‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,6 @@
2424
color: var(--color-text);
2525
}
2626

27-
.ui.button.no-text .icon {
28-
margin: 0 !important;
29-
}
30-
3127
.delete-button,
3228
.delete-button:hover {
3329
color: var(--color-red);

‎web_src/css/repo.css‎

Lines changed: 6 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,6 @@
2020
margin-top: 2px;
2121
}
2222

23-
.repository .repo-header .repo-buttons .svg {
24-
margin: 0 0.42857143em 0 -0.21428571em;
25-
}
26-
27-
.repository .repo-header .button {
28-
margin-top: 2px;
29-
margin-bottom: 2px;
30-
}
31-
3223
.repository .tabs .navbar {
3324
justify-content: initial;
3425
}
@@ -850,6 +841,11 @@
850841
padding-top: 0;
851842
}
852843

844+
.repository.view.issue .comment-list .timeline-item.commits-list .ui.avatar,
845+
.repository.view.issue .comment-list .timeline-item.event .ui.avatar {
846+
margin-right: 0.25em;
847+
}
848+
853849
.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit {
854850
line-height: 34px; /* this must be same as .badge height, to avoid overflow */
855851
clear: both; /* reset the "float right shabox", in the future, use flexbox instead */
@@ -2537,11 +2533,6 @@
25372533
margin-left: 0.25rem;
25382534
}
25392535

2540-
.content-history-menu .octicon-triangle-down {
2541-
position: relative;
2542-
top: 1.5px;
2543-
}
2544-
25452536
.comment-body {
25462537
background: var(--color-box-body);
25472538
border: none !important;
@@ -2874,6 +2865,7 @@ tbody.commit-list {
28742865
flex-direction: row;
28752866
flex-wrap: wrap;
28762867
word-break: keep-all;
2868+
gap: 0.25em;
28772869
}
28782870

28792871
@media (max-width: 767.98px) {
@@ -2897,15 +2889,6 @@ tbody.commit-list {
28972889
color: var(--color-primary-dark-1);
28982890
}
28992891

2900-
.repo-buttons .ui.labeled.button {
2901-
cursor: initial;
2902-
}
2903-
2904-
.repo-buttons .ui.labeled.button > .label {
2905-
border-left: 0 !important;
2906-
margin: 0 !important;
2907-
}
2908-
29092892
.repo-buttons .ui.labeled.button.disabled {
29102893
pointer-events: inherit !important;
29112894
}

‎web_src/js/components/DashboardRepoList.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
<input @input="changeReposFilter(reposFilter)" v-model="searchQuery" ref="search" @keydown="reposFilterKeyControl" :placeholder="textSearchRepos">
2020
<i class="icon gt-df gt-ac gt-jc"><svg-icon name="octicon-search" :size="16"/></i>
2121
<div class="ui dropdown icon button" :title="textFilter">
22-
<i class="icon gt-df gt-ac gt-jc gt-m-0"><svg-icon name="octicon-filter" :size="16"/></i>
22+
<svg-icon name="octicon-filter" :size="16"/>
2323
<div class="menu">
2424
<a class="item" @click="toggleArchivedFilter()">
2525
<div class="ui checkbox" ref="checkboxArchivedFilter" :title="checkboxArchivedFilterTitle">

‎web_src/js/components/PullRequestMergeForm.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@
7272
</template>
7373
</span>
7474
</button>
75-
<div class="ui dropdown icon button no-text" @click.stop="showMergeStyleMenu = !showMergeStyleMenu" v-if="mergeStyleAllowedCount>1">
75+
<div class="ui dropdown icon button" @click.stop="showMergeStyleMenu = !showMergeStyleMenu" v-if="mergeStyleAllowedCount>1">
7676
<svg-icon name="octicon-triangle-down" :size="14"/>
7777
<div class="menu" :class="{'show':showMergeStyleMenu}">
7878
<template v-for="msd in mergeForm.mergeStyles">

‎web_src/js/components/RepoBranchTagSelector.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
</button>
1414
<div class="menu transition" :class="{visible: menuVisible}" v-if="menuVisible" v-cloak>
1515
<div class="ui icon search input">
16-
<i class="icon gt-df gt-ac gt-jc gt-m-0"><svg-icon name="octicon-filter" :size="16"/></i>
16+
<i class="icon"><svg-icon name="octicon-filter" :size="16"/></i>
1717
<input name="search" ref="searchField" autocomplete="off" v-model="searchTerm" @keydown="keydown($event)" :placeholder="searchFieldPlaceholder">
1818
</div>
1919
<template v-if="showBranchesInDropdown">

‎web_src/js/features/repo-issue-content.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,8 +75,8 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH
7575
function showContentHistoryMenu(issueBaseUrl, $item, commentId) {
7676
const $headerLeft = $item.find('.comment-header-left');
7777
const menuHtml = `
78-
<div class="ui pointing dropdown top left content-history-menu" data-comment-id="${commentId}">
79-
&bull; <a class="muted">${i18nTextEdited}${svg('octicon-triangle-down', 14, 'dropdown icon gt-ml-1 gt-mt-1')}</a>
78+
<div class="ui dropdown interact-fg content-history-menu" data-comment-id="${commentId}">
79+
&bull; ${i18nTextEdited}${svg('octicon-triangle-down', 14, 'dropdown icon')}
8080
<div class="menu">
8181
</div>
8282
</div>`;

0 commit comments

Comments
 (0)
Please sign in to comment.