From 5191ab64453e9e8a52f9e51ee65911b82fa516ec Mon Sep 17 00:00:00 2001 From: Giteabot Date: Wed, 14 Jun 2023 13:21:48 -0400 Subject: [PATCH] Use flex to align SVG and text (#25163) (#25260) Backport #25163 by @wxiaoguang The code can be as simple as: ```html
{{svg "octicon-alert"}} {{svg "octicon-x"}} text (block)
{{svg "octicon-alert"}} {{svg "octicon-x"}} text
(inline)
``` ![image](https://github.com/go-gitea/gitea/assets/2114189/1d3c10f1-0bc7-4c26-b236-bad537d5c465) Co-authored-by: wxiaoguang --- templates/devtest/gitea-ui.tmpl | 100 ++++++++++++++++ templates/repo/commits_list_small.tmpl | 4 +- templates/repo/diff/compare.tmpl | 4 +- .../repo/issue/branch_selector_field.tmpl | 2 +- templates/repo/issue/view_content/pull.tmpl | 98 ++++++++-------- .../repo/issue/view_content/sidebar.tmpl | 4 +- .../view_content/update_branch_by_merge.tmpl | 9 +- templates/repo/issue/view_title.tmpl | 2 +- templates/repo/release_tag_header.tmpl | 2 +- templates/repo/wiki/view.tmpl | 2 +- web_src/css/base.css | 108 ++++++++++++------ web_src/css/modules/button.css | 4 - web_src/css/repo.css | 29 +---- web_src/js/components/DashboardRepoList.vue | 2 +- .../js/components/PullRequestMergeForm.vue | 2 +- .../js/components/RepoBranchTagSelector.vue | 2 +- web_src/js/features/repo-issue-content.js | 4 +- 17 files changed, 247 insertions(+), 131 deletions(-) diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl index 824b7d0db6..b3971921d3 100644 --- a/templates/devtest/gitea-ui.tmpl +++ b/templates/devtest/gitea-ui.tmpl @@ -117,6 +117,106 @@
1y future: {{TimeSince .TimeFuture1y $.locale}}
+
+

SVG alignment

+ +

Text with SVG

+
{{svg "octicon-alert"}} {{svg "octicon-x"}} text (block)
+
{{svg "octicon-alert"}} {{svg "octicon-x"}} text
(inline)
+
+
{{svg "octicon-alert"}} flex every line
+
{{svg "octicon-alert"}} flex every item
+
+ +

Button with SVG

+
+ +
+ + 123 +
+
+ +

Input with SVG

+
+
+ {{svg "octicon-search"}} + +
+
+ +

Dropdown with SVG

+
+
+ simple + {{svg "octicon-triangle-down" 14 "dropdown icon"}} +
+
item
+
+
+
+ button dropdown + {{svg "octicon-triangle-down" 14 "dropdown icon"}} +
+
item
+
+
+
+ search ... + + {{svg "octicon-triangle-down" 14 "dropdown icon"}} + {{svg "octicon-x" 14 "remove icon"}} +
+
item
+
+
+
+ + {{svg "octicon-triangle-down" 14 "dropdown icon"}} + {{svg "octicon-x" 14 "remove icon"}} +
empty multiple dropdown
+
+
item
+
+
+
+ + {{svg "octicon-triangle-down" 14 "dropdown icon"}} + {{svg "octicon-x" 14 "remove icon"}} +
clearable search dropdown
+
+
item
+
+
+
+ +
+ {{svg "octicon-triangle-down"}} +
+
item
+
+
+
+
+ +
+
+ small dropdown + {{svg "octicon-triangle-down" 12 "dropdown icon"}} +
+
item
+
+
+
+ large dropdown + {{svg "octicon-triangle-down" 18 "dropdown icon"}} +
+
item
+
+
+
+
+

ComboMarkdownEditor

ps: no JS code attached, so just a layout
diff --git a/templates/repo/commits_list_small.tmpl b/templates/repo/commits_list_small.tmpl index 900d853601..6bbc19529f 100644 --- a/templates/repo/commits_list_small.tmpl +++ b/templates/repo/commits_list_small.tmpl @@ -6,9 +6,7 @@
{{svg "octicon-git-commit"}} {{if .User}} - - {{avatar $.root.Context .User}} - + {{avatar $.root.Context .User}} {{else}} {{avatarByEmail $.root.Context .Author.Email .Author.Name}} {{end}} diff --git a/templates/repo/diff/compare.tmpl b/templates/repo/diff/compare.tmpl index 01a1cfd54e..4efe81682c 100644 --- a/templates/repo/diff/compare.tmpl +++ b/templates/repo/diff/compare.tmpl @@ -44,7 +44,7 @@
- {{svg "octicon-filter" 16}} + {{svg "octicon-filter" 16}}
@@ -113,7 +113,7 @@
- {{svg "octicon-filter" 16}} + {{svg "octicon-filter" 16}}
diff --git a/templates/repo/issue/branch_selector_field.tmpl b/templates/repo/issue/branch_selector_field.tmpl index 51eb5e26a0..2577a0feb0 100644 --- a/templates/repo/issue/branch_selector_field.tmpl +++ b/templates/repo/issue/branch_selector_field.tmpl @@ -12,7 +12,7 @@
- {{svg "octicon-filter" 16}} + {{svg "octicon-filter" 16}}
diff --git a/templates/repo/issue/view_content/pull.tmpl b/templates/repo/issue/view_content/pull.tmpl index e2ec691ee3..fd395c0eb6 100644 --- a/templates/repo/issue/view_content/pull.tmpl +++ b/templates/repo/issue/view_content/pull.tmpl @@ -22,13 +22,13 @@
{{template "repo/pulls/status" .}} {{$showGeneralMergeForm := false}} -
+
{{if .Issue.PullRequest.HasMerged}} {{if .IsPullBranchDeletable}}

- {{$.locale.Tr "repo.pulls.merged_success"}} + {{$.locale.Tr "repo.pulls.merged_success"}}

{{$.locale.Tr "repo.pulls.merged_info_text" (printf "%s" (.HeadTarget | Escape)) | Str2html}} @@ -58,93 +58,91 @@ {{end}}
{{else if .IsPullFilesConflicted}} -
+
{{svg "octicon-x"}} {{$.locale.Tr "repo.pulls.files_conflicted"}} -
    - {{range .ConflictedFiles}} -
  • {{.}}
    • - {{end}} -
+
    + {{range .ConflictedFiles}} +
  • {{.}}
    • + {{end}} +
{{else if .IsPullRequestBroken}}
- {{svg "octicon-x"}} + {{svg "octicon-x"}} {{$.locale.Tr "repo.pulls.data_broken"}}
{{else if .IsPullWorkInProgress}} -
-
- {{svg "octicon-x"}} +
+
+ {{svg "octicon-x"}} {{$.locale.Tr "repo.pulls.cannot_merge_work_in_progress"}}
-
- {{if or .HasIssuesOrPullsWritePermission .IsIssuePoster}} - - {{end}} -
+ {{if or .HasIssuesOrPullsWritePermission .IsIssuePoster}} + + {{end}}
{{template "repo/issue/view_content/update_branch_by_merge" $}} {{else if .Issue.PullRequest.IsChecking}}
- {{svg "octicon-sync"}} + {{svg "octicon-sync"}} {{$.locale.Tr "repo.pulls.is_checking"}}
{{else if .Issue.PullRequest.IsAncestor}}
- {{svg "octicon-alert"}} + {{svg "octicon-alert"}} {{$.locale.Tr "repo.pulls.is_ancestor"}}
{{else if or .Issue.PullRequest.CanAutoMerge .Issue.PullRequest.IsEmpty}} {{if .IsBlockedByApprovals}}
- {{svg "octicon-x"}} - {{$.locale.Tr "repo.pulls.blocked_by_approvals" .GrantedApprovals .ProtectedBranch.RequiredApprovals}} + {{svg "octicon-x"}} + {{$.locale.Tr "repo.pulls.blocked_by_approvals" .GrantedApprovals .ProtectedBranch.RequiredApprovals}}
{{else if .IsBlockedByRejection}}
- {{svg "octicon-x"}} + {{svg "octicon-x"}} {{$.locale.Tr "repo.pulls.blocked_by_rejection"}}
{{else if .IsBlockedByOfficialReviewRequests}}
- {{svg "octicon-x"}} + {{svg "octicon-x"}} {{$.locale.Tr "repo.pulls.blocked_by_official_review_requests"}}
{{else if .IsBlockedByOutdatedBranch}}
- {{svg "octicon-x"}} - {{$.locale.Tr "repo.pulls.blocked_by_outdated_branch"}} + {{svg "octicon-x"}} + {{$.locale.Tr "repo.pulls.blocked_by_outdated_branch"}}
{{else if .IsBlockedByChangedProtectedFiles}}
- {{svg "octicon-x"}} + {{svg "octicon-x"}} {{$.locale.TrN $.ChangedProtectedFilesNum "repo.pulls.blocked_by_changed_protected_files_1" "repo.pulls.blocked_by_changed_protected_files_n" | Safe}} -
    - {{range .ChangedProtectedFiles}} -
  • {{.}}
    • - {{end}} -
+
    + {{range .ChangedProtectedFiles}} +
  • {{.}}
    • + {{end}} +
{{else if and .EnableStatusCheck (or .RequiredStatusCheckState.IsError .RequiredStatusCheckState.IsFailure)}}
- {{svg "octicon-x"}} + {{svg "octicon-x"}} {{$.locale.Tr "repo.pulls.required_status_check_failed"}}
{{else if and .EnableStatusCheck (not .RequiredStatusCheckState.IsSuccess)}}
- {{svg "octicon-x"}} + {{svg "octicon-x"}} {{$.locale.Tr "repo.pulls.required_status_check_missing"}}
{{else if and .AllowMerge .RequireSigned (not .WillSign)}}
- {{svg "octicon-x"}} + {{svg "octicon-x"}} {{$.locale.Tr "repo.pulls.require_signed_wont_sign"}}
- {{svg "octicon-unlock"}} + {{svg "octicon-unlock"}} {{$.locale.Tr (printf "repo.signing.wont_sign.%s" .WontSignReason)}}
{{end}} @@ -158,23 +156,23 @@ {{if $canMergeNow}} {{if $notAllOverridableChecksOk}}
- {{svg "octicon-dot-fill"}} + {{svg "octicon-dot-fill"}} {{$.locale.Tr "repo.pulls.required_status_check_administrator"}}
{{else}}
- {{svg "octicon-check"}} + {{svg "octicon-check"}} {{$.locale.Tr "repo.pulls.can_auto_merge_desc"}}
{{end}} {{if .WillSign}}
- {{svg "octicon-lock" 16 "text green"}} + {{svg "octicon-lock" 16 "text green"}} {{$.locale.Tr "repo.signing.will_sign" .SigningKey}}
{{else if .IsSigned}}
- {{svg "octicon-unlock"}} + {{svg "octicon-unlock"}} {{$.locale.Tr (printf "repo.signing.wont_sign.%s" .WontSignReason)}}
{{end}} @@ -184,7 +182,7 @@
- {{svg "octicon-alert"}} + {{svg "octicon-alert"}} {{$.locale.Tr "repo.pulls.is_empty"}}
{{end}} @@ -315,19 +313,19 @@
{{else if .IsBlockedByOutdatedBranch}}
- {{svg "octicon-x"}} - {{$.locale.Tr "repo.pulls.blocked_by_outdated_branch"}} + {{svg "octicon-x"}} + {{$.locale.Tr "repo.pulls.blocked_by_outdated_branch"}}
{{else if .IsBlockedByChangedProtectedFiles}}
- {{svg "octicon-x"}} + {{svg "octicon-x"}} {{$.locale.TrN $.ChangedProtectedFilesNum "repo.pulls.blocked_by_changed_protected_files_1" "repo.pulls.blocked_by_changed_protected_files_n" | Safe}} -
    - {{range .ChangedProtectedFiles}} -
  • {{.}}
    • - {{end}} -
+
    + {{range .ChangedProtectedFiles}} +
  • {{.}}
    • + {{end}} +
{{else if and .EnableStatusCheck (not .RequiredStatusCheckState.IsSuccess)}}
{{svg "octicon-x"}} diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl index 23e2c18547..901f714e32 100644 --- a/templates/repo/issue/view_content/sidebar.tmpl +++ b/templates/repo/issue/view_content/sidebar.tmpl @@ -273,7 +273,7 @@
{{$.CsrfTokenHtml}} - - -
- {{svg "octicon-triangle-down" 14 "dropdown icon"}} +
+ {{svg "octicon-triangle-down"}}
{{$.locale.Tr "repo.pulls.update_branch"}} {{$.locale.Tr "repo.pulls.update_branch_rebase"}} diff --git a/templates/repo/issue/view_title.tmpl b/templates/repo/issue/view_title.tmpl index 6a302d7401..e928b7bd25 100644 --- a/templates/repo/issue/view_title.tmpl +++ b/templates/repo/issue/view_title.tmpl @@ -84,7 +84,7 @@
- {{svg "octicon-filter" 16}} + {{svg "octicon-filter" 16}}