From ad8ff731ed59f876bf0ebb04ced65457b1ae4fba Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Fri, 9 Jun 2023 10:35:53 +0800 Subject: [PATCH 1/7] fix alignment --- templates/devtest/gitea-ui.tmpl | 74 ++++++++++++++++++++++++++++ web_src/css/base.css | 87 ++++++++++++++++++++------------- 2 files changed, 128 insertions(+), 33 deletions(-) diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl index 824b7d0db6952..8589f6c7cefa4 100644 --- a/templates/devtest/gitea-ui.tmpl +++ b/templates/devtest/gitea-ui.tmpl @@ -117,6 +117,80 @@
1y future: {{TimeSince .TimeFuture1y $.locale}}
+
+

SVG alignment

+
{{svg "octicon-alert"}} {{svg "octicon-x"}} text (block)
+
{{svg "octicon-alert"}} {{svg "octicon-x"}} text
(inline)
+
+
+
+ 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" 14 "dropdown icon"}} +
+
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/web_src/css/base.css b/web_src/css/base.css index 38faf2287cc6c..2d7e07134f051 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -1042,10 +1042,6 @@ img.ui.avatar, background: var(--color-active); } -.ui.form .field > .selection.dropdown > .dropdown.icon { - height: auto; -} - .ui.loading.segment::before, .ui.loading.form::before { background: none; @@ -2135,35 +2131,6 @@ table th[data-sortt-desc] .svg { 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 { border-radius: 0; } @@ -2315,3 +2282,57 @@ table th[data-sortt-desc] .svg { width: 15px; height: 15px; } + +.ui.dropdown { + /* the dropdown doesn't have default line-height, use this to make the dropdown icon align with plain dropdown */ + line-height: 1em; +} + +.ui.ui.dropdown > .icon.icon { + /* plain dropdown and button dropdown use flex layout for icons */ + position: initial; + 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 { + /* selection dropdown uses absolute layout for icons */ + position: absolute; + top: 50%; + transform: translateY(-50%); +} + +.ui.ui.dropdown > .dropdown.icon { + right: 0.5em; +} + +.ui.ui.dropdown > .remove.icon { + right: 2em; /* clear the dropdown, only used in selection dropdown, it's beside the "dropdown icon arrow" */ +} + +.ui.ui.buttons .floating.dropdown.icon.button { + padding-right: 1em; +} + +.ui.ui.button, +.ui.ui.dropdown, +.flex-text-inline { + display: inline-flex; + align-items: center; + flex-wrap: wrap; + gap: .25rem; + vertical-align: middle; +} + +.flex-text-block { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: .25rem; +} From 8c2685cc4d8f000bdc647cb38c30f30741f332ef Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Tue, 13 Jun 2023 20:42:04 +0800 Subject: [PATCH 2/7] improve --- templates/devtest/gitea-ui.tmpl | 8 +- templates/repo/commits_list_small.tmpl | 4 +- templates/repo/issue/view_content/pull.tmpl | 98 +++++++++---------- .../view_content/update_branch_by_merge.tmpl | 9 +- web_src/css/base.css | 24 ++--- web_src/css/modules/button.css | 4 - web_src/css/repo.css | 5 + .../js/components/PullRequestMergeForm.vue | 2 +- 8 files changed, 78 insertions(+), 76 deletions(-) diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl index 8589f6c7cefa4..f8fe6f97b81c4 100644 --- a/templates/devtest/gitea-ui.tmpl +++ b/templates/devtest/gitea-ui.tmpl @@ -121,6 +121,10 @@

SVG alignment

{{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
+
@@ -166,8 +170,8 @@
-
- {{svg "octicon-triangle-down" 14 "dropdown icon"}} +
+ {{svg "octicon-triangle-down"}}
item
diff --git a/templates/repo/commits_list_small.tmpl b/templates/repo/commits_list_small.tmpl index 900d853601aa5..6bbc19529f942 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/issue/view_content/pull.tmpl b/templates/repo/issue/view_content/pull.tmpl index e2ec691ee3c2c..fd395c0eb6255 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/update_branch_by_merge.tmpl b/templates/repo/issue/view_content/update_branch_by_merge.tmpl index 84df244d8defe..d539ece888fef 100644 --- a/templates/repo/issue/view_content/update_branch_by_merge.tmpl +++ b/templates/repo/issue/view_content/update_branch_by_merge.tmpl @@ -1,8 +1,8 @@ {{if and (gt $.Issue.PullRequest.CommitsBehind 0) (not $.Issue.IsClosed) (not $.Issue.PullRequest.IsChecking) (not $.IsPullFilesConflicted) (not $.IsPullRequestBroken)}}
-
- {{svg "octicon-alert"}} +
+ {{svg "octicon-alert"}} {{$.locale.Tr "repo.pulls.outdated_with_base_branch"}}
@@ -14,9 +14,8 @@ {{$.locale.Tr "repo.pulls.update_branch"}} - -
- {{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/web_src/css/base.css b/web_src/css/base.css index 2d7e07134f051..814bf15be252b 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -2284,13 +2284,18 @@ table th[data-sortt-desc] .svg { } .ui.dropdown { - /* the dropdown doesn't have default line-height, use this to make the dropdown icon align with plain dropdown */ - line-height: 1em; + 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 "" font icons, so we need to reset the icon styles */ .ui.ui.dropdown > .icon.icon { - /* plain dropdown and button dropdown use flex layout for icons */ - position: initial; + position: initial; /* plain dropdown and button dropdown use flex layout for icons */ padding: 0; margin: 0; height: auto; @@ -2302,8 +2307,7 @@ table th[data-sortt-desc] .svg { .ui.ui.button.dropdown > .icon.icon, .ui.ui.selection.dropdown > .icon.icon { - /* selection dropdown uses absolute layout for icons */ - position: absolute; + position: absolute; /* selection dropdown uses absolute layout for icons */ top: 50%; transform: translateY(-50%); } @@ -2313,15 +2317,12 @@ table th[data-sortt-desc] .svg { } .ui.ui.dropdown > .remove.icon { - right: 2em; /* clear the dropdown, only used in selection dropdown, it's beside the "dropdown icon arrow" */ -} - -.ui.ui.buttons .floating.dropdown.icon.button { - padding-right: 1em; + right: 2em; } .ui.ui.button, .ui.ui.dropdown, +.flex-items-inline > .item, .flex-text-inline { display: inline-flex; align-items: center; @@ -2330,6 +2331,7 @@ table th[data-sortt-desc] .svg { vertical-align: middle; } +.flex-items-block > .item, .flex-text-block { display: flex; align-items: center; diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css index 72eb1f3989bd3..c3728e2e264c7 100644 --- a/web_src/css/modules/button.css +++ b/web_src/css/modules/button.css @@ -24,10 +24,6 @@ color: var(--color-text); } -.ui.button.no-text .icon { - margin: 0 !important; -} - .delete-button, .delete-button:hover { color: var(--color-red); diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 99ef340177b53..7fc2e4d4f2931 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -850,6 +850,11 @@ 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 { 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 */ diff --git a/web_src/js/components/PullRequestMergeForm.vue b/web_src/js/components/PullRequestMergeForm.vue index d6ddbef8173b4..909ea950db050 100644 --- a/web_src/js/components/PullRequestMergeForm.vue +++ b/web_src/js/components/PullRequestMergeForm.vue @@ -72,7 +72,7 @@ -
+