Nulo/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Use flex to align SVG and text (#25163)

Browse source 
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: Giteabot <teabot@gitea.io>
This commit is contained in:
wxiaoguang 2023-06-15 00:40:15 +08:00 committed by GitHub
parent 4c290e9209
commit 46c17c8029
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 247 additions and 131 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -128,6 +128,106 @@
<div>1y future: {{TimeSince .TimeFuture1y $.locale}}</div> <div>1y future: {{TimeSince .TimeFuture1y $.locale}}</div>
</div> </div>
<div>
<h1>SVG alignment</h1>
<h2>Text with SVG</h2>
<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 class="flex-items-block">
<div class="item">{{svg "octicon-alert"}} flex every line</div>
<div class="item">{{svg "octicon-alert"}} flex every item</div>
</div>
<h2>Button with SVG</h2>
<div>
<button class="ui red button">{{svg "octicon-alert" 24}} {{svg "octicon-x" 24}} text</button>
<div class="ui labeled button">
<button class="ui basic button">labeled button</button>
<a class="ui basic label">123</a>
</div>
</div>
<h2>Input with SVG</h2>
<div>
<div class="ui icon search input">
<i class="icon">{{svg "octicon-search"}}</i>
<input type="text" placeholder="place holder">
</div>
</div>
<h2>Dropdown with SVG</h2>
<div>
<div class="ui dropdown" style="border: 1px red dashed" data-tooltip-content="border for demo purpose only">
<span class="text">simple</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu">
<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">
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
{{svg "octicon-x" 14 "remove icon"}}
<div class="menu">
<div class="item">item</div>
</div>
</div>
<div class="ui multiple selection dropdown">
<input class="hidden" value="1">
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
{{svg "octicon-x" 14 "remove icon"}}
<div class="default text">empty multiple dropdown</div>
<div class="menu">
<div class="item">item</div>
</div>
</div>
<div class="ui multiple clearable search selection dropdown">
<input type="hidden" value="1">
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
{{svg "octicon-x" 14 "remove icon"}}
<div class="default text">clearable search dropdown</div>
<div class="menu">
<div class="item" data-value="1">item</div>
</div>
</div>
<div class="ui buttons">
<button class="ui button">Button with Dropdown</button>
<div class="ui dropdown button icon">
{{svg "octicon-triangle-down"}}
<div class="menu">
<div class="item">item</div>
</div>
</div>
</div>
</div>
<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>
</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>
</div>
</div>
</div>
<div> <div>
<h1>ComboMarkdownEditor</h1> <h1>ComboMarkdownEditor</h1>
<div>ps: no JS code attached, so just a layout</div> <div>ps: no JS code attached, so just a layout</div>

4
templates/repo/commits_list_small.tmpl
View file

@ -6,9 +6,7 @@
<div class="singular-commit" id="{{$tag}}"> <div class="singular-commit" id="{{$tag}}">
<span class="badge badge-commit">{{svg "octicon-git-commit"}}</span> <span class="badge badge-commit">{{svg "octicon-git-commit"}}</span>
{{if .User}} {{if .User}}
<a href="{{.User.HomeLink}}"> <a class="avatar" href="{{.User.HomeLink}}">{{avatar $.root.Context .User}}</a>
{{avatar $.root.Context .User}}
</a>
{{else}} {{else}}
{{avatarByEmail $.root.Context .Author.Email .Author.Name}} {{avatarByEmail $.root.Context .Author.Email .Author.Name}}
{{end}} {{end}}

4
templates/repo/diff/compare.tmpl
View file

@ -44,7 +44,7 @@
</div> </div>
<div class="menu"> <div class="menu">
<div class="ui icon search input"> <div class="ui icon search input">
<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i> <i class="icon">{{svg "octicon-filter" 16}}</i>
<input name="search" placeholder="{{.locale.Tr "repo.filter_branch_and_tag"}}..."> <input name="search" placeholder="{{.locale.Tr "repo.filter_branch_and_tag"}}...">
</div> </div>
<div class="header"> <div class="header">
@ -113,7 +113,7 @@
</div> </div>
<div class="menu"> <div class="menu">
<div class="ui icon search input"> <div class="ui icon search input">
<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i> <i class="icon">{{svg "octicon-filter" 16}}</i>
<input name="search" placeholder="{{.locale.Tr "repo.filter_branch_and_tag"}}..."> <input name="search" placeholder="{{.locale.Tr "repo.filter_branch_and_tag"}}...">
</div> </div>
<div class="header"> <div class="header">

2
templates/repo/issue/branch_selector_field.tmpl
View file

@ -12,7 +12,7 @@
</div> </div>
<div class="menu"> <div class="menu">
<div class="ui icon search input"> <div class="ui icon search input">
<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i> <i class="icon">{{svg "octicon-filter" 16}}</i>
<input name="search" placeholder="{{.locale.Tr "repo.filter_branch_and_tag"}}..."> <input name="search" placeholder="{{.locale.Tr "repo.filter_branch_and_tag"}}...">
</div> </div>
<div class="header"> <div class="header">

56
templates/repo/issue/view_content/pull.tmpl
View file

@ -22,7 +22,7 @@
<div class="content"> <div class="content">
{{template "repo/pulls/status" .}} {{template "repo/pulls/status" .}}
{{$showGeneralMergeForm := false}} {{$showGeneralMergeForm := false}}
<div class="ui attached merge-section segment {{if not $.LatestCommitStatus}}no-header{{end}}"> <div class="ui attached merge-section segment {{if not $.LatestCommitStatus}}no-header{{end}} flex-items-block">
{{if .Issue.PullRequest.HasMerged}} {{if .Issue.PullRequest.HasMerged}}
{{if .IsPullBranchDeletable}} {{if .IsPullBranchDeletable}}
<div class="item item-section text gt-f1"> <div class="item item-section text gt-f1">
@ -58,93 +58,91 @@
{{end}} {{end}}
</div> </div>
{{else if .IsPullFilesConflicted}} {{else if .IsPullFilesConflicted}}
<div class="item text"> <div class="item">
{{svg "octicon-x"}} {{svg "octicon-x"}}
{{$.locale.Tr "repo.pulls.files_conflicted"}} {{$.locale.Tr "repo.pulls.files_conflicted"}}
</div>
<ul> <ul>
{{range .ConflictedFiles}} {{range .ConflictedFiles}}
<li>{{.}}</li> <li>{{.}}</li>
{{end}} {{end}}
</ul> </ul>
</div>
{{else if .IsPullRequestBroken}} {{else if .IsPullRequestBroken}}
<div class="item"> <div class="item">
<i class="icon icon-octicon">{{svg "octicon-x"}}</i> {{svg "octicon-x"}}
{{$.locale.Tr "repo.pulls.data_broken"}} {{$.locale.Tr "repo.pulls.data_broken"}}
</div> </div>
{{else if .IsPullWorkInProgress}} {{else if .IsPullWorkInProgress}}
<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"> <div class="item toggle-wip" data-title="{{.Issue.Title}}" data-wip-prefix="{{(.WorkInProgressPrefix|Escape)}}" data-update-url="{{.Issue.Link}}/title">
<div> <div class="item-section-left flex-text-inline gt-f1">
<i class="icon icon-octicon">{{svg "octicon-x"}}</i> {{svg "octicon-x"}}
{{$.locale.Tr "repo.pulls.cannot_merge_work_in_progress"}} {{$.locale.Tr "repo.pulls.cannot_merge_work_in_progress"}}
</div> </div>
<div>
{{if or .HasIssuesOrPullsWritePermission .IsIssuePoster}} {{if or .HasIssuesOrPullsWritePermission .IsIssuePoster}}
<button class="ui compact button"> <button class="ui compact button">
{{$.locale.Tr "repo.pulls.remove_prefix" (.WorkInProgressPrefix|Escape) | Safe}} {{$.locale.Tr "repo.pulls.remove_prefix" (.WorkInProgressPrefix|Escape) | Safe}}
</button> </button>
{{end}} {{end}}
</div> </div>
</div>
{{template "repo/issue/view_content/update_branch_by_merge" $}} {{template "repo/issue/view_content/update_branch_by_merge" $}}
{{else if .Issue.PullRequest.IsChecking}} {{else if .Issue.PullRequest.IsChecking}}
<div class="item"> <div class="item">
<i class="icon icon-octicon">{{svg "octicon-sync"}}</i> {{svg "octicon-sync"}}
{{$.locale.Tr "repo.pulls.is_checking"}} {{$.locale.Tr "repo.pulls.is_checking"}}
</div> </div>
{{else if .Issue.PullRequest.IsAncestor}} {{else if .Issue.PullRequest.IsAncestor}}
<div class="item"> <div class="item">
<i class="icon icon-octicon">{{svg "octicon-alert"}}</i> {{svg "octicon-alert"}}
{{$.locale.Tr "repo.pulls.is_ancestor"}} {{$.locale.Tr "repo.pulls.is_ancestor"}}
</div> </div>
{{else if or .Issue.PullRequest.CanAutoMerge .Issue.PullRequest.IsEmpty}} {{else if or .Issue.PullRequest.CanAutoMerge .Issue.PullRequest.IsEmpty}}
{{if .IsBlockedByApprovals}} {{if .IsBlockedByApprovals}}
<div class="item"> <div class="item">
<i class="icon icon-octicon">{{svg "octicon-x"}}</i> {{svg "octicon-x"}}
{{$.locale.Tr "repo.pulls.blocked_by_approvals" .GrantedApprovals .ProtectedBranch.RequiredApprovals}} {{$.locale.Tr "repo.pulls.blocked_by_approvals" .GrantedApprovals .ProtectedBranch.RequiredApprovals}}
</div> </div>
{{else if .IsBlockedByRejection}} {{else if .IsBlockedByRejection}}
<div class="item"> <div class="item">
<i class="icon icon-octicon">{{svg "octicon-x"}}</i> {{svg "octicon-x"}}
{{$.locale.Tr "repo.pulls.blocked_by_rejection"}} {{$.locale.Tr "repo.pulls.blocked_by_rejection"}}
</div> </div>
{{else if .IsBlockedByOfficialReviewRequests}} {{else if .IsBlockedByOfficialReviewRequests}}
<div class="item"> <div class="item">
<i class="icon icon-octicon">{{svg "octicon-x"}}</i> {{svg "octicon-x"}}
{{$.locale.Tr "repo.pulls.blocked_by_official_review_requests"}} {{$.locale.Tr "repo.pulls.blocked_by_official_review_requests"}}
</div> </div>
{{else if .IsBlockedByOutdatedBranch}} {{else if .IsBlockedByOutdatedBranch}}
<div class="item"> <div class="item">
<i class="icon icon-octicon">{{svg "octicon-x"}}</i> {{svg "octicon-x"}}
{{$.locale.Tr "repo.pulls.blocked_by_outdated_branch"}} {{$.locale.Tr "repo.pulls.blocked_by_outdated_branch"}}
</div> </div>
{{else if .IsBlockedByChangedProtectedFiles}} {{else if .IsBlockedByChangedProtectedFiles}}
<div class="item"> <div class="item">
<i class="icon icon-octicon">{{svg "octicon-x"}}</i> {{svg "octicon-x"}}
{{$.locale.TrN $.ChangedProtectedFilesNum "repo.pulls.blocked_by_changed_protected_files_1" "repo.pulls.blocked_by_changed_protected_files_n" | Safe}} {{$.locale.TrN $.ChangedProtectedFilesNum "repo.pulls.blocked_by_changed_protected_files_1" "repo.pulls.blocked_by_changed_protected_files_n" | Safe}}
</div>
<ul> <ul>
{{range .ChangedProtectedFiles}} {{range .ChangedProtectedFiles}}
<li>{{.}}</li> <li>{{.}}</li>
{{end}} {{end}}
</ul> </ul>
</div>
{{else if and .EnableStatusCheck (or .RequiredStatusCheckState.IsError .RequiredStatusCheckState.IsFailure)}} {{else if and .EnableStatusCheck (or .RequiredStatusCheckState.IsError .RequiredStatusCheckState.IsFailure)}}
<div class="item"> <div class="item">
<i class="icon icon-octicon">{{svg "octicon-x"}}</i> {{svg "octicon-x"}}
{{$.locale.Tr "repo.pulls.required_status_check_failed"}} {{$.locale.Tr "repo.pulls.required_status_check_failed"}}
</div> </div>
{{else if and .EnableStatusCheck (not .RequiredStatusCheckState.IsSuccess)}} {{else if and .EnableStatusCheck (not .RequiredStatusCheckState.IsSuccess)}}
<div class="item"> <div class="item">
<i class="icon icon-octicon">{{svg "octicon-x"}}</i> {{svg "octicon-x"}}
{{$.locale.Tr "repo.pulls.required_status_check_missing"}} {{$.locale.Tr "repo.pulls.required_status_check_missing"}}
</div> </div>
{{else if and .AllowMerge .RequireSigned (not .WillSign)}} {{else if and .AllowMerge .RequireSigned (not .WillSign)}}
<div class="item"> <div class="item">
<i class="icon icon-octicon">{{svg "octicon-x"}}</i> {{svg "octicon-x"}}
{{$.locale.Tr "repo.pulls.require_signed_wont_sign"}} {{$.locale.Tr "repo.pulls.require_signed_wont_sign"}}
</div> </div>
<div class="item"> <div class="item">
<i class="icon icon-octicon">{{svg "octicon-unlock"}}</i> {{svg "octicon-unlock"}}
{{$.locale.Tr (printf "repo.signing.wont_sign.%s" .WontSignReason)}} {{$.locale.Tr (printf "repo.signing.wont_sign.%s" .WontSignReason)}}
</div> </div>
{{end}} {{end}}
@ -158,23 +156,23 @@
{{if $canMergeNow}} {{if $canMergeNow}}
{{if $notAllOverridableChecksOk}} {{if $notAllOverridableChecksOk}}
<div class="item"> <div class="item">
<i class="icon icon-octicon">{{svg "octicon-dot-fill"}}</i> {{svg "octicon-dot-fill"}}
{{$.locale.Tr "repo.pulls.required_status_check_administrator"}} {{$.locale.Tr "repo.pulls.required_status_check_administrator"}}
</div> </div>
{{else}} {{else}}
<div class="item"> <div class="item">
<i class="icon icon-octicon">{{svg "octicon-check"}}</i> {{svg "octicon-check"}}
{{$.locale.Tr "repo.pulls.can_auto_merge_desc"}} {{$.locale.Tr "repo.pulls.can_auto_merge_desc"}}
</div> </div>
{{end}} {{end}}
{{if .WillSign}} {{if .WillSign}}
<div class="item"> <div class="item">
<i class="icon icon-octicon">{{svg "octicon-lock" 16 "text green"}}</i> {{svg "octicon-lock" 16 "text green"}}
{{$.locale.Tr "repo.signing.will_sign" .SigningKey}} {{$.locale.Tr "repo.signing.will_sign" .SigningKey}}
</div> </div>
{{else if .IsSigned}} {{else if .IsSigned}}
<div class="item"> <div class="item">
<i class="icon icon-octicon">{{svg "octicon-unlock"}}</i> {{svg "octicon-unlock"}}
{{$.locale.Tr (printf "repo.signing.wont_sign.%s" .WontSignReason)}} {{$.locale.Tr (printf "repo.signing.wont_sign.%s" .WontSignReason)}}
</div> </div>
{{end}} {{end}}
@ -184,7 +182,7 @@
<div class="ui divider"></div> <div class="ui divider"></div>
<div class="item"> <div class="item">
<i class="icon icon-octicon">{{svg "octicon-alert"}}</i> {{svg "octicon-alert"}}
{{$.locale.Tr "repo.pulls.is_empty"}} {{$.locale.Tr "repo.pulls.is_empty"}}
</div> </div>
{{end}} {{end}}
@ -315,19 +313,19 @@
</div> </div>
{{else if .IsBlockedByOutdatedBranch}} {{else if .IsBlockedByOutdatedBranch}}
<div class="item text red"> <div class="item text red">
<i class="icon icon-octicon">{{svg "octicon-x"}}</i> {{svg "octicon-x"}}
{{$.locale.Tr "repo.pulls.blocked_by_outdated_branch"}} {{$.locale.Tr "repo.pulls.blocked_by_outdated_branch"}}
</div> </div>
{{else if .IsBlockedByChangedProtectedFiles}} {{else if .IsBlockedByChangedProtectedFiles}}
<div class="item text red"> <div class="item text red">
<i class="icon icon-octicon">{{svg "octicon-x"}}</i> {{svg "octicon-x"}}
{{$.locale.TrN $.ChangedProtectedFilesNum "repo.pulls.blocked_by_changed_protected_files_1" "repo.pulls.blocked_by_changed_protected_files_n" | Safe}} {{$.locale.TrN $.ChangedProtectedFilesNum "repo.pulls.blocked_by_changed_protected_files_1" "repo.pulls.blocked_by_changed_protected_files_n" | Safe}}
</div>
<ul> <ul>
{{range .ChangedProtectedFiles}} {{range .ChangedProtectedFiles}}
<li>{{.}}</li> <li>{{.}}</li>
{{end}} {{end}}
</ul> </ul>
</div>
{{else if and .EnableStatusCheck (not .RequiredStatusCheckState.IsSuccess)}} {{else if and .EnableStatusCheck (not .RequiredStatusCheckState.IsSuccess)}}
<div class="item text red"> <div class="item text red">
{{svg "octicon-x"}} {{svg "octicon-x"}}

4
templates/repo/issue/view_content/sidebar.tmpl
View file

@ -273,7 +273,7 @@
<form method="POST" action="{{.Issue.Link}}/watch"> <form method="POST" action="{{.Issue.Link}}/watch">
<input type="hidden" name="watch" value="{{if $.IssueWatch.IsWatching}}0{{else}}1{{end}}"> <input type="hidden" name="watch" value="{{if $.IssueWatch.IsWatching}}0{{else}}1{{end}}">
{{$.CsrfTokenHtml}} {{$.CsrfTokenHtml}}
<button class="fluid ui button gt-df gt-jc"> <button class="fluid ui button">
{{if $.IssueWatch.IsWatching}} {{if $.IssueWatch.IsWatching}}
{{svg "octicon-mute" 16 "gt-mr-3"}} {{svg "octicon-mute" 16 "gt-mr-3"}}
{{.locale.Tr "repo.issues.unsubscribe"}} {{.locale.Tr "repo.issues.unsubscribe"}}
@ -558,7 +558,7 @@
{{if or .PinEnabled .Issue.IsPinned}} {{if or .PinEnabled .Issue.IsPinned}}
<form class="gt-mt-2" method="POST" {{if $.NewPinAllowed}}action="{{.Issue.Link}}/pin"{{else}}data-tooltip-content="{{.locale.Tr "repo.issues.max_pinned"}}"{{end}}> <form class="gt-mt-2" method="POST" {{if $.NewPinAllowed}}action="{{.Issue.Link}}/pin"{{else}}data-tooltip-content="{{.locale.Tr "repo.issues.max_pinned"}}"{{end}}>
{{$.CsrfTokenHtml}} {{$.CsrfTokenHtml}}
<button class="fluid ui button gt-df gt-jc {{if not $.NewPinAllowed}}disabled{{end}}"> <button class="fluid ui button {{if not $.NewPinAllowed}}disabled{{end}}">
{{if not .Issue.IsPinned}} {{if not .Issue.IsPinned}}
{{svg "octicon-pin" 16 "gt-mr-3"}} {{svg "octicon-pin" 16 "gt-mr-3"}}
{{.locale.Tr "pin"}} {{.locale.Tr "pin"}}

9
templates/repo/issue/view_content/update_branch_by_merge.tmpl
View file

@ -1,8 +1,8 @@
{{if and (gt $.Issue.PullRequest.CommitsBehind 0) (not $.Issue.IsClosed) (not $.Issue.PullRequest.IsChecking) (not $.IsPullFilesConflicted) (not $.IsPullRequestBroken)}} {{if and (gt $.Issue.PullRequest.CommitsBehind 0) (not $.Issue.IsClosed) (not $.Issue.PullRequest.IsChecking) (not $.IsPullFilesConflicted) (not $.IsPullRequestBroken)}}
<div class="ui divider"></div> <div class="ui divider"></div>
<div class="item item-section"> <div class="item item-section">
<div class="item-section-left"> <div class="item-section-left flex-text-inline">
<i class="icon icon-octicon">{{svg "octicon-alert"}}</i> {{svg "octicon-alert"}}
{{$.locale.Tr "repo.pulls.outdated_with_base_branch"}} {{$.locale.Tr "repo.pulls.outdated_with_base_branch"}}
</div> </div>
<div class="item-section-right"> <div class="item-section-right">
@ -14,9 +14,8 @@
{{$.locale.Tr "repo.pulls.update_branch"}} {{$.locale.Tr "repo.pulls.update_branch"}}
</span> </span>
</button> </button>
<div class="ui dropdown icon button">
<div class="ui dropdown icon button no-text"> {{svg "octicon-triangle-down"}}
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu"> <div class="menu">
<a class="item active selected" data-do="{{$.Link}}/update">{{$.locale.Tr "repo.pulls.update_branch"}}</a> <a class="item active selected" data-do="{{$.Link}}/update">{{$.locale.Tr "repo.pulls.update_branch"}}</a>
<a class="item" data-do="{{$.Link}}/update?style=rebase">{{$.locale.Tr "repo.pulls.update_branch_rebase"}}</a> <a class="item" data-do="{{$.Link}}/update?style=rebase">{{$.locale.Tr "repo.pulls.update_branch_rebase"}}</a>

2
templates/repo/issue/view_title.tmpl
View file

@ -84,7 +84,7 @@
</div> </div>
<div class="menu"> <div class="menu">
<div class="ui icon search input"> <div class="ui icon search input">
<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i> <i class="icon">{{svg "octicon-filter" 16}}</i>
<input name="search" placeholder="{{.locale.Tr "repo.pulls.filter_branch"}}..."> <input name="search" placeholder="{{.locale.Tr "repo.pulls.filter_branch"}}...">
</div> </div>
<div class="scrolling menu" id="branch-select"> <div class="scrolling menu" id="branch-select">

2
templates/repo/release_tag_header.tmpl
View file

@ -3,7 +3,7 @@
{{if $canReadReleases}} {{if $canReadReleases}}
<div class="gt-df"> <div class="gt-df">
<div class="gt-f1"> <div class="gt-f1 gt-df gt-ac">
<h2 class="ui compact small menu header small-menu-items"> <h2 class="ui compact small menu header small-menu-items">
<a class="{{if .PageIsReleaseList}}active {{end}}item" href="{{.RepoLink}}/releases">{{.locale.Tr "repo.release.releases"}}</a> <a class="{{if .PageIsReleaseList}}active {{end}}item" href="{{.RepoLink}}/releases">{{.locale.Tr "repo.release.releases"}}</a>
{{if $canReadCode}} {{if $canReadCode}}

2
templates/repo/wiki/view.tmpl
View file

@ -15,7 +15,7 @@
</div> </div>
<div class="menu"> <div class="menu">
<div class="ui icon search input"> <div class="ui icon search input">
<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i> <i class="icon">{{svg "octicon-filter" 16}}</i>
<input name="search" placeholder="{{.locale.Tr "repo.wiki.filter_page"}}..."> <input name="search" placeholder="{{.locale.Tr "repo.wiki.filter_page"}}...">
</div> </div>
<div class="scrolling menu"> <div class="scrolling menu">

108
web_src/css/base.css
View file

@ -1031,10 +1031,6 @@ img.ui.avatar,
background: var(--color-active); background: var(--color-active);
} }
.ui.form .field > .selection.dropdown > .dropdown.icon {
height: auto;
}
.ui.loading.segment::before, .ui.loading.segment::before,
.ui.loading.form::before { .ui.loading.form::before {
background: none; background: none;
@ -2124,35 +2120,6 @@ table th[data-sortt-desc] .svg {
margin-left: 0.25rem; margin-left: 0.25rem;
} }
.ui.dropdown .svg.dropdown.icon,
.ui.dropdown .svg.remove.icon,
.svg.dropdown.icon {
margin-top: 0 !important; /* reset the "ui.selection.dropdown > .dropdown.icon {margin-top}", for the Issue Dependencies dropdown */
margin-right: -0.5rem !important; /* fix up SVG dropdown triangles because Fomantic thinks they are icon fonts */
height: auto; /* reset the ".ui.dropdown > .dropdown.icon {height}", otherwise the icon would be too small */
}
.ui.selection.dropdown > .svg.search.icon,
.ui.selection.dropdown > .svg.delete.icon,
.ui.selection.dropdown > .svg.dropdown.icon {
top: 0 !important; /* reset the ".ui.selection.dropdown > .xxx.icon {top}" if the icon is svg instead of the fomantic icon */
}
.ui.selection.dropdown > .svg.remove.icon {
top: .5px;
right: 32px;
width: auto;
}
.ui.selection.dropdown > .svg.remove.icon:hover {
opacity: 1;
}
.ui.dropdown.no-text > .dropdown.icon {
margin-left: 0 !important;
margin-right: 0 !important;
}
.ui.dropdown .menu .item { .ui.dropdown .menu .item {
border-radius: 0; border-radius: 0;
} }
@ -2304,3 +2271,78 @@ table th[data-sortt-desc] .svg {
width: 15px; width: 15px;
height: 15px; height: 15px;
} }
.ui.dropdown {
line-height: 1em; /* the dropdown doesn't have default line-height, use this to make the dropdown icon align with plain dropdown */
}
/* dropdown has some kinds of icons:
- "> .dropdown.icon": the arrow for opening the dropdown
- "> .remove.icon": the "x" icon for clearing the dropdown, only used in selection dropdown
- "> .ui.label > .delete.icon": the "x" icon for removing a label item in multiple selection dropdown
*/
/* 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 */
padding: 0;
margin: 0;
height: auto;
}
.ui.ui.dropdown > .icon.icon:hover {
opacity: 1;
}
.ui.ui.button.dropdown > .icon.icon,
.ui.ui.selection.dropdown > .icon.icon {
position: absolute; /* selection dropdown uses absolute layout for icons */
top: 50%;
transform: translateY(-50%);
}
.ui.ui.dropdown > .dropdown.icon {
right: 0.5em;
}
.ui.ui.dropdown > .remove.icon {
right: 2em;
}
.ui.ui.button,
.ui.ui.dropdown,
.flex-items-inline > .item,
.flex-text-inline {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: .25rem;
vertical-align: middle;
}
.ui.ui.button {
justify-content: center;
}
.ui.dropdown .ui.label .svg {
vertical-align: middle;
}
.ui.ui.labeled.button {
gap: 0;
align-items: stretch;
}
.ui.ui.icon.input .icon {
display: flex;
align-items: center;
justify-content: center;
}
.flex-items-block > .item,
.flex-text-block {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .25rem;
}

4
web_src/css/modules/button.css
View file

@ -24,10 +24,6 @@
color: var(--color-text); color: var(--color-text);
} }
.ui.button.no-text .icon {
margin: 0 !important;
}
.delete-button, .delete-button,
.delete-button:hover { .delete-button:hover {
color: var(--color-red); color: var(--color-red);

29
web_src/css/repo.css
View file

@ -20,15 +20,6 @@
margin-top: 2px; margin-top: 2px;
} }
.repository .repo-header .repo-buttons .svg {
margin: 0 0.42857143em 0 -0.21428571em;
}
.repository .repo-header .button {
margin-top: 2px;
margin-bottom: 2px;
}
.repository .tabs .navbar { .repository .tabs .navbar {
justify-content: initial; justify-content: initial;
} }
@ -850,6 +841,11 @@
padding-top: 0; padding-top: 0;
} }
.repository.view.issue .comment-list .timeline-item.commits-list .ui.avatar,
.repository.view.issue .comment-list .timeline-item.event .ui.avatar {
margin-right: 0.25em;
}
.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit { .repository.view.issue .comment-list .timeline-item.commits-list .singular-commit {
line-height: 34px; /* this must be same as .badge height, to avoid overflow */ line-height: 34px; /* this must be same as .badge height, to avoid overflow */
clear: both; /* reset the "float right shabox", in the future, use flexbox instead */ clear: both; /* reset the "float right shabox", in the future, use flexbox instead */
@ -2537,11 +2533,6 @@
margin-left: 0.25rem; margin-left: 0.25rem;
} }
.content-history-menu .octicon-triangle-down {
position: relative;
top: 1.5px;
}
.comment-body { .comment-body {
background: var(--color-box-body); background: var(--color-box-body);
border: none !important; border: none !important;
@ -2874,6 +2865,7 @@ tbody.commit-list {
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
word-break: keep-all; word-break: keep-all;
gap: 0.25em;
} }
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
@ -2897,15 +2889,6 @@ tbody.commit-list {
color: var(--color-primary-dark-1); color: var(--color-primary-dark-1);
} }
.repo-buttons .ui.labeled.button {
cursor: initial;
}
.repo-buttons .ui.labeled.button > .label {
border-left: 0 !important;
margin: 0 !important;
}
.repo-buttons .ui.labeled.button.disabled { .repo-buttons .ui.labeled.button.disabled {
pointer-events: inherit !important; pointer-events: inherit !important;
} }

2
web_src/js/components/DashboardRepoList.vue
View file

@ -19,7 +19,7 @@
<input @input="changeReposFilter(reposFilter)" v-model="searchQuery" ref="search" @keydown="reposFilterKeyControl" :placeholder="textSearchRepos"> <input @input="changeReposFilter(reposFilter)" v-model="searchQuery" ref="search" @keydown="reposFilterKeyControl" :placeholder="textSearchRepos">
<i class="icon gt-df gt-ac gt-jc"><svg-icon name="octicon-search" :size="16"/></i> <i class="icon gt-df gt-ac gt-jc"><svg-icon name="octicon-search" :size="16"/></i>
<div class="ui dropdown icon button" :title="textFilter"> <div class="ui dropdown icon button" :title="textFilter">
<i class="icon gt-df gt-ac gt-jc gt-m-0"><svg-icon name="octicon-filter" :size="16"/></i> <svg-icon name="octicon-filter" :size="16"/>
<div class="menu"> <div class="menu">
<a class="item" @click="toggleArchivedFilter()"> <a class="item" @click="toggleArchivedFilter()">
<div class="ui checkbox" ref="checkboxArchivedFilter" :title="checkboxArchivedFilterTitle"> <div class="ui checkbox" ref="checkboxArchivedFilter" :title="checkboxArchivedFilterTitle">

2
web_src/js/components/PullRequestMergeForm.vue
View file

@ -72,7 +72,7 @@
</template> </template>
</span> </span>
</button> </button>
<div class="ui dropdown icon button no-text" @click.stop="showMergeStyleMenu = !showMergeStyleMenu" v-if="mergeStyleAllowedCount>1"> <div class="ui dropdown icon button" @click.stop="showMergeStyleMenu = !showMergeStyleMenu" v-if="mergeStyleAllowedCount>1">
<svg-icon name="octicon-triangle-down" :size="14"/> <svg-icon name="octicon-triangle-down" :size="14"/>
<div class="menu" :class="{'show':showMergeStyleMenu}"> <div class="menu" :class="{'show':showMergeStyleMenu}">
<template v-for="msd in mergeForm.mergeStyles"> <template v-for="msd in mergeForm.mergeStyles">

2
web_src/js/components/RepoBranchTagSelector.vue
View file

@ -13,7 +13,7 @@
</button> </button>
<div class="menu transition" :class="{visible: menuVisible}" v-if="menuVisible" v-cloak> <div class="menu transition" :class="{visible: menuVisible}" v-if="menuVisible" v-cloak>
<div class="ui icon search input"> <div class="ui icon search input">
<i class="icon gt-df gt-ac gt-jc gt-m-0"><svg-icon name="octicon-filter" :size="16"/></i> <i class="icon"><svg-icon name="octicon-filter" :size="16"/></i>
<input name="search" ref="searchField" autocomplete="off" v-model="searchTerm" @keydown="keydown($event)" :placeholder="searchFieldPlaceholder"> <input name="search" ref="searchField" autocomplete="off" v-model="searchTerm" @keydown="keydown($event)" :placeholder="searchFieldPlaceholder">
</div> </div>
<template v-if="showBranchesInDropdown"> <template v-if="showBranchesInDropdown">

4
web_src/js/features/repo-issue-content.js
View file

@ -75,8 +75,8 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH
function showContentHistoryMenu(issueBaseUrl, $item, commentId) { function showContentHistoryMenu(issueBaseUrl, $item, commentId) {
const $headerLeft = $item.find('.comment-header-left'); const $headerLeft = $item.find('.comment-header-left');
const menuHtml = ` const menuHtml = `
<div class="ui pointing dropdown top left content-history-menu" data-comment-id="${commentId}"> <div class="ui dropdown interact-fg content-history-menu" data-comment-id="${commentId}">
&bull; <a class="muted">${i18nTextEdited}${svg('octicon-triangle-down', 14, 'dropdown icon gt-ml-1 gt-mt-1')}</a> &bull; ${i18nTextEdited}${svg('octicon-triangle-down', 14, 'dropdown icon')}
<div class="menu"> <div class="menu">
</div> </div>
</div>`; </div>`;