diff options
| -rw-r--r-- | templates/devtest/gitea-ui.tmpl | 100 | ||||
| -rw-r--r-- | templates/repo/commits_list_small.tmpl | 4 | ||||
| -rw-r--r-- | templates/repo/diff/compare.tmpl | 4 | ||||
| -rw-r--r-- | templates/repo/issue/branch_selector_field.tmpl | 2 | ||||
| -rw-r--r-- | templates/repo/issue/view_content/pull.tmpl | 98 | ||||
| -rw-r--r-- | templates/repo/issue/view_content/sidebar.tmpl | 4 | ||||
| -rw-r--r-- | templates/repo/issue/view_content/update_branch_by_merge.tmpl | 9 | ||||
| -rw-r--r-- | templates/repo/issue/view_title.tmpl | 2 | ||||
| -rw-r--r-- | templates/repo/release_tag_header.tmpl | 2 | ||||
| -rw-r--r-- | templates/repo/wiki/view.tmpl | 2 | ||||
| -rw-r--r-- | web_src/css/base.css | 108 | ||||
| -rw-r--r-- | web_src/css/modules/button.css | 4 | ||||
| -rw-r--r-- | web_src/css/repo.css | 29 | ||||
| -rw-r--r-- | web_src/js/components/DashboardRepoList.vue | 2 | ||||
| -rw-r--r-- | web_src/js/components/PullRequestMergeForm.vue | 2 | ||||
| -rw-r--r-- | web_src/js/components/RepoBranchTagSelector.vue | 2 | ||||
| -rw-r--r-- | 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 516b73cf09..0da443aade 100644 --- a/templates/devtest/gitea-ui.tmpl +++ b/templates/devtest/gitea-ui.tmpl @@ -129,6 +129,106 @@ </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> <h1>ComboMarkdownEditor</h1> <div>ps: no JS code attached, so just a layout</div> {{template "shared/combomarkdowneditor" .}} 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 @@ <div class="singular-commit" id="{{$tag}}"> <span class="badge badge-commit">{{svg "octicon-git-commit"}}</span> {{if .User}} - <a href="{{.User.HomeLink}}"> - {{avatar $.root.Context .User}} - </a> + <a class="avatar" href="{{.User.HomeLink}}">{{avatar $.root.Context .User}}</a> {{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 @@ </div> <div class="menu"> <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"}}..."> </div> <div class="header"> @@ -113,7 +113,7 @@ </div> <div class="menu"> <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"}}..."> </div> <div class="header"> 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 @@ </div> <div class="menu"> <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"}}..."> </div> <div class="header"> 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 @@ <div class="content"> {{template "repo/pulls/status" .}} {{$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 .IsPullBranchDeletable}} <div class="item item-section text gt-f1"> <div class="item-section-left"> <h3 class="gt-mb-3"> - {{$.locale.Tr "repo.pulls.merged_success"}} + {{$.locale.Tr "repo.pulls.merged_success"}} </h3> <div class="merge-section-info"> {{$.locale.Tr "repo.pulls.merged_info_text" (printf "<code>%s</code>" (.HeadTarget | Escape)) | Str2html}} @@ -58,93 +58,91 @@ {{end}} </div> {{else if .IsPullFilesConflicted}} - <div class="item text"> + <div class="item"> {{svg "octicon-x"}} {{$.locale.Tr "repo.pulls.files_conflicted"}} - <ul> - {{range .ConflictedFiles}} - <li>{{.}}</li> - {{end}} - </ul> </div> + <ul> + {{range .ConflictedFiles}} + <li>{{.}}</li> + {{end}} + </ul> {{else if .IsPullRequestBroken}} <div class="item"> - <i class="icon icon-octicon">{{svg "octicon-x"}}</i> + {{svg "octicon-x"}} {{$.locale.Tr "repo.pulls.data_broken"}} </div> {{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> - <i class="icon icon-octicon">{{svg "octicon-x"}}</i> + <div class="item toggle-wip" data-title="{{.Issue.Title}}" data-wip-prefix="{{(.WorkInProgressPrefix|Escape)}}" data-update-url="{{.Issue.Link}}/title"> + <div class="item-section-left flex-text-inline gt-f1"> + {{svg "octicon-x"}} {{$.locale.Tr "repo.pulls.cannot_merge_work_in_progress"}} </div> - <div> - {{if or .HasIssuesOrPullsWritePermission .IsIssuePoster}} - <button class="ui compact button"> - {{$.locale.Tr "repo.pulls.remove_prefix" (.WorkInProgressPrefix|Escape) | Safe}} - </button> - {{end}} - </div> + {{if or .HasIssuesOrPullsWritePermission .IsIssuePoster}} + <button class="ui compact button"> + {{$.locale.Tr "repo.pulls.remove_prefix" (.WorkInProgressPrefix|Escape) | Safe}} + </button> + {{end}} </div> {{template "repo/issue/view_content/update_branch_by_merge" $}} {{else if .Issue.PullRequest.IsChecking}} <div class="item"> - <i class="icon icon-octicon">{{svg "octicon-sync"}}</i> + {{svg "octicon-sync"}} {{$.locale.Tr "repo.pulls.is_checking"}} </div> {{else if .Issue.PullRequest.IsAncestor}} <div class="item"> - <i class="icon icon-octicon">{{svg "octicon-alert"}}</i> + {{svg "octicon-alert"}} {{$.locale.Tr "repo.pulls.is_ancestor"}} </div> {{else if or .Issue.PullRequest.CanAutoMerge .Issue.PullRequest.IsEmpty}} {{if .IsBlockedByApprovals}} <div class="item"> - <i class="icon icon-octicon">{{svg "octicon-x"}}</i> - {{$.locale.Tr "repo.pulls.blocked_by_approvals" .GrantedApprovals .ProtectedBranch.RequiredApprovals}} + {{svg "octicon-x"}} + {{$.locale.Tr "repo.pulls.blocked_by_approvals" .GrantedApprovals .ProtectedBranch.RequiredApprovals}} </div> {{else if .IsBlockedByRejection}} <div class="item"> - <i class="icon icon-octicon">{{svg "octicon-x"}}</i> + {{svg "octicon-x"}} {{$.locale.Tr "repo.pulls.blocked_by_rejection"}} </div> {{else if .IsBlockedByOfficialReviewRequests}} <div class="item"> - <i class="icon icon-octicon">{{svg "octicon-x"}}</i> + {{svg "octicon-x"}} {{$.locale.Tr "repo.pulls.blocked_by_official_review_requests"}} </div> {{else if .IsBlockedByOutdatedBranch}} <div class="item"> - <i class="icon icon-octicon">{{svg "octicon-x"}}</i> - {{$.locale.Tr "repo.pulls.blocked_by_outdated_branch"}} + {{svg "octicon-x"}} + {{$.locale.Tr "repo.pulls.blocked_by_outdated_branch"}} </div> {{else if .IsBlockedByChangedProtectedFiles}} <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}} - <ul> - {{range .ChangedProtectedFiles}} - <li>{{.}}</li> - {{end}} - </ul> </div> + <ul> + {{range .ChangedProtectedFiles}} + <li>{{.}}</li> + {{end}} + </ul> {{else if and .EnableStatusCheck (or .RequiredStatusCheckState.IsError .RequiredStatusCheckState.IsFailure)}} <div class="item"> - <i class="icon icon-octicon">{{svg "octicon-x"}}</i> + {{svg "octicon-x"}} {{$.locale.Tr "repo.pulls.required_status_check_failed"}} </div> {{else if and .EnableStatusCheck (not .RequiredStatusCheckState.IsSuccess)}} <div class="item"> - <i class="icon icon-octicon">{{svg "octicon-x"}}</i> + {{svg "octicon-x"}} {{$.locale.Tr "repo.pulls.required_status_check_missing"}} </div> {{else if and .AllowMerge .RequireSigned (not .WillSign)}} <div class="item"> - <i class="icon icon-octicon">{{svg "octicon-x"}}</i> + {{svg "octicon-x"}} {{$.locale.Tr "repo.pulls.require_signed_wont_sign"}} </div> <div class="item"> - <i class="icon icon-octicon">{{svg "octicon-unlock"}}</i> + {{svg "octicon-unlock"}} {{$.locale.Tr (printf "repo.signing.wont_sign.%s" .WontSignReason)}} </div> {{end}} @@ -158,23 +156,23 @@ {{if $canMergeNow}} {{if $notAllOverridableChecksOk}} <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"}} </div> {{else}} <div class="item"> - <i class="icon icon-octicon">{{svg "octicon-check"}}</i> + {{svg "octicon-check"}} {{$.locale.Tr "repo.pulls.can_auto_merge_desc"}} </div> {{end}} {{if .WillSign}} <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}} </div> {{else if .IsSigned}} <div class="item"> - <i class="icon icon-octicon">{{svg "octicon-unlock"}}</i> + {{svg "octicon-unlock"}} {{$.locale.Tr (printf "repo.signing.wont_sign.%s" .WontSignReason)}} </div> {{end}} @@ -184,7 +182,7 @@ <div class="ui divider"></div> <div class="item"> - <i class="icon icon-octicon">{{svg "octicon-alert"}}</i> + {{svg "octicon-alert"}} {{$.locale.Tr "repo.pulls.is_empty"}} </div> {{end}} @@ -315,19 +313,19 @@ </div> {{else if .IsBlockedByOutdatedBranch}} <div class="item text red"> - <i class="icon icon-octicon">{{svg "octicon-x"}}</i> - {{$.locale.Tr "repo.pulls.blocked_by_outdated_branch"}} + {{svg "octicon-x"}} + {{$.locale.Tr "repo.pulls.blocked_by_outdated_branch"}} </div> {{else if .IsBlockedByChangedProtectedFiles}} <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}} - <ul> - {{range .ChangedProtectedFiles}} - <li>{{.}}</li> - {{end}} - </ul> </div> + <ul> + {{range .ChangedProtectedFiles}} + <li>{{.}}</li> + {{end}} + </ul> {{else if and .EnableStatusCheck (not .RequiredStatusCheckState.IsSuccess)}} <div class="item text red"> {{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 @@ <form method="POST" action="{{.Issue.Link}}/watch"> <input type="hidden" name="watch" value="{{if $.IssueWatch.IsWatching}}0{{else}}1{{end}}"> {{$.CsrfTokenHtml}} - <button class="fluid ui button gt-df gt-jc"> + <button class="fluid ui button"> {{if $.IssueWatch.IsWatching}} {{svg "octicon-mute" 16 "gt-mr-3"}} {{.locale.Tr "repo.issues.unsubscribe"}} @@ -558,7 +558,7 @@ {{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}}> {{$.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}} {{svg "octicon-pin" 16 "gt-mr-3"}} {{.locale.Tr "pin"}} 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 84df244d8d..d539ece888 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)}} <div class="ui divider"></div> <div class="item item-section"> - <div class="item-section-left"> - <i class="icon icon-octicon">{{svg "octicon-alert"}}</i> + <div class="item-section-left flex-text-inline"> + {{svg "octicon-alert"}} {{$.locale.Tr "repo.pulls.outdated_with_base_branch"}} </div> <div class="item-section-right"> @@ -14,9 +14,8 @@ {{$.locale.Tr "repo.pulls.update_branch"}} </span> </button> - - <div class="ui dropdown icon button no-text"> - {{svg "octicon-triangle-down" 14 "dropdown icon"}} + <div class="ui dropdown icon button"> + {{svg "octicon-triangle-down"}} <div class="menu"> <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> 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 @@ </div> <div class="menu"> <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"}}..."> </div> <div class="scrolling menu" id="branch-select"> diff --git a/templates/repo/release_tag_header.tmpl b/templates/repo/release_tag_header.tmpl index d8f60a2c6c..0af9ba8635 100644 --- a/templates/repo/release_tag_header.tmpl +++ b/templates/repo/release_tag_header.tmpl @@ -3,7 +3,7 @@ {{if $canReadReleases}} <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"> <a class="{{if .PageIsReleaseList}}active {{end}}item" href="{{.RepoLink}}/releases">{{.locale.Tr "repo.release.releases"}}</a> {{if $canReadCode}} diff --git a/templates/repo/wiki/view.tmpl b/templates/repo/wiki/view.tmpl index b892bff947..370109caa4 100644 --- a/templates/repo/wiki/view.tmpl +++ b/templates/repo/wiki/view.tmpl @@ -15,7 +15,7 @@ </div> <div class="menu"> <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"}}..."> </div> <div class="scrolling menu"> diff --git a/web_src/css/base.css b/web_src/css/base.css index 879465ab7c..d2aa64e6ed 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -1031,10 +1031,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; @@ -2124,35 +2120,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; } @@ -2304,3 +2271,78 @@ table th[data-sortt-desc] .svg { width: 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; +} diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css index 72eb1f3989..c3728e2e26 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 99ef340177..674f8c9e67 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -20,15 +20,6 @@ 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 { justify-content: initial; } @@ -850,6 +841,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 */ @@ -2537,11 +2533,6 @@ margin-left: 0.25rem; } -.content-history-menu .octicon-triangle-down { - position: relative; - top: 1.5px; -} - .comment-body { background: var(--color-box-body); border: none !important; @@ -2874,6 +2865,7 @@ tbody.commit-list { flex-direction: row; flex-wrap: wrap; word-break: keep-all; + gap: 0.25em; } @media (max-width: 767.98px) { @@ -2897,15 +2889,6 @@ tbody.commit-list { 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 { pointer-events: inherit !important; } diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue index 25a94c1fa7..b47d872927 100644 --- a/web_src/js/components/DashboardRepoList.vue +++ b/web_src/js/components/DashboardRepoList.vue @@ -19,7 +19,7 @@ <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> <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"> <a class="item" @click="toggleArchivedFilter()"> <div class="ui checkbox" ref="checkboxArchivedFilter" :title="checkboxArchivedFilterTitle"> diff --git a/web_src/js/components/PullRequestMergeForm.vue b/web_src/js/components/PullRequestMergeForm.vue index d6ddbef817..909ea950db 100644 --- a/web_src/js/components/PullRequestMergeForm.vue +++ b/web_src/js/components/PullRequestMergeForm.vue @@ -72,7 +72,7 @@ </template> </span> </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"/> <div class="menu" :class="{'show':showMergeStyleMenu}"> <template v-for="msd in mergeForm.mergeStyles"> diff --git a/web_src/js/components/RepoBranchTagSelector.vue b/web_src/js/components/RepoBranchTagSelector.vue index 2b0715a092..5d08575278 100644 --- a/web_src/js/components/RepoBranchTagSelector.vue +++ b/web_src/js/components/RepoBranchTagSelector.vue @@ -13,7 +13,7 @@ </button> <div class="menu transition" :class="{visible: menuVisible}" v-if="menuVisible" v-cloak> <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"> </div> <template v-if="showBranchesInDropdown"> diff --git a/web_src/js/features/repo-issue-content.js b/web_src/js/features/repo-issue-content.js index 792a11c5ab..d66f6ad4a4 100644 --- a/web_src/js/features/repo-issue-content.js +++ b/web_src/js/features/repo-issue-content.js @@ -75,8 +75,8 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH function showContentHistoryMenu(issueBaseUrl, $item, commentId) { const $headerLeft = $item.find('.comment-header-left'); const menuHtml = ` - <div class="ui pointing dropdown top left content-history-menu" data-comment-id="${commentId}"> - • <a class="muted">${i18nTextEdited}${svg('octicon-triangle-down', 14, 'dropdown icon gt-ml-1 gt-mt-1')}</a> + <div class="ui dropdown interact-fg content-history-menu" data-comment-id="${commentId}"> + • ${i18nTextEdited}${svg('octicon-triangle-down', 14, 'dropdown icon')} <div class="menu"> </div> </div>`; |