From ebe6f4cad775a82d11c916c9af716beec394768b Mon Sep 17 00:00:00 2001 From: wxiaoguang <wxiaoguang@gmail.com> Date: Thu, 2 May 2024 18:45:23 +0800 Subject: [PATCH] Fix branch selector UI (#30803) Fix #30802 --- templates/repo/branch_dropdown.tmpl | 8 +- .../repo/issue/branch_selector_field.tmpl | 44 +++++----- .../repo/issue/labels/labels_sidebar.tmpl | 2 +- web_src/css/base.css | 1 + web_src/css/repo.css | 85 ++++++++++++------- .../js/components/RepoBranchTagSelector.vue | 48 +---------- web_src/js/features/repo-legacy.js | 25 +++--- 7 files changed, 96 insertions(+), 117 deletions(-) diff --git a/templates/repo/branch_dropdown.tmpl b/templates/repo/branch_dropdown.tmpl index 7b39830df8..8f58826c6a 100644 --- a/templates/repo/branch_dropdown.tmpl +++ b/templates/repo/branch_dropdown.tmpl @@ -69,9 +69,9 @@ <div class="js-branch-tag-selector {{if .ContainerClasses}}{{.ContainerClasses}}{{end}}"> {{/* show dummy elements before Vue componment is mounted, this code must match the code in BranchTagSelector.vue */}} - <div class="ui dropdown custom"> - <button class="branch-dropdown-button gt-ellipsis ui basic small compact button tw-flex tw-m-0"> - <span class="text tw-flex tw-items-center tw-mr-1 gt-ellipsis"> + <div class="ui dropdown custom branch-selector-dropdown"> + <div class="ui button branch-dropdown-button"> + <span class="flex-text-block gt-ellipsis"> {{if .release}} {{ctx.Locale.Tr "repo.release.compare"}} {{else}} @@ -84,6 +84,6 @@ {{end}} </span> {{svg "octicon-triangle-down" 14 "dropdown icon"}} - </button> + </div> </div> </div> diff --git a/templates/repo/issue/branch_selector_field.tmpl b/templates/repo/issue/branch_selector_field.tmpl index ed0d58cf27..e9e5574cd7 100644 --- a/templates/repo/issue/branch_selector_field.tmpl +++ b/templates/repo/issue/branch_selector_field.tmpl @@ -4,10 +4,12 @@ <form method="post" action="{{$.RepoLink}}/issues/{{.Issue.Index}}/ref" id="update_issueref_form"> {{$.CsrfTokenHtml}} </form> -{{/* TODO: share this branch selector dropdown with the same in repo page */}} -<div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating filter select-branch dropdown tw-max-w-full" data-no-results="{{ctx.Locale.Tr "no_results_found"}}"> - <div class="ui basic small button"> - <span class="text branch-name gt-ellipsis">{{if .Reference}}{{$.RefEndName}}{{else}}{{ctx.Locale.Tr "repo.issues.no_ref"}}{{end}}</span> +<div class="ui dropdown select-branch branch-selector-dropdown {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}}" + data-no-results="{{ctx.Locale.Tr "no_results_found"}}" + {{if not .Issue}}data-for-new-issue="true"{{end}} +> + <div class="ui button branch-dropdown-button"> + <span class="text-branch-name gt-ellipsis">{{if .Reference}}{{$.RefEndName}}{{else}}{{ctx.Locale.Tr "repo.issues.no_ref"}}{{end}}</span> {{if .HasIssuesOrPullsWritePermission}}{{svg "octicon-triangle-down" 14 "dropdown icon"}}{{end}} </div> <div class="menu"> @@ -15,26 +17,18 @@ <i class="icon">{{svg "octicon-filter" 16}}</i> <input name="search" placeholder="{{ctx.Locale.Tr "repo.filter_branch_and_tag"}}..."> </div> - <div class="header"> - <div class="ui grid"> - <div class="two column row"> - <a class="reference column muted" href="#" data-target="#branch-list"> - <span class="text black"> - {{svg "octicon-git-branch" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.branches"}} - </span> - </a> - <a class="reference column muted" href="#" data-target="#tag-list"> - <span class="text"> - {{svg "octicon-tag" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.tags"}} - </span> - </a> - </div> - </div> + <div class="branch-tag-tab"> + <a class="branch-tag-item reference column muted active" href="#" data-target="#branch-list"> + {{svg "octicon-git-branch" 16 "tw-mr-1"}} {{ctx.Locale.Tr "repo.branches"}} + </a> + <a class="branch-tag-item reference column muted" href="#" data-target="#tag-list"> + {{svg "octicon-tag" 16 "tw-mr-1"}} {{ctx.Locale.Tr "repo.tags"}} + </a> </div> <div class="branch-tag-divider"></div> - <div id="branch-list" class="scrolling menu reference-list-menu {{if not .Issue}}new-issue{{end}}"> - {{if .Reference}} - <div class="item text small" data-id="" data-id-selector="#ref_selector"><strong><a href="#">{{ctx.Locale.Tr "repo.clear_ref"}}</a></strong></div> + <div id="branch-list" class="scrolling menu reference-list-menu"> + {{if or .Reference (not .Issue)}} + <div class="item text small" data-id="" data-name="{{ctx.Locale.Tr "repo.issues.no_ref"}}" data-id-selector="#ref_selector"><strong><a href="#">{{ctx.Locale.Tr "repo.clear_ref"}}</a></strong></div> {{end}} {{range .Branches}} <div class="item" data-id="refs/heads/{{.}}" data-name="{{.}}" data-id-selector="#ref_selector" title="{{.}}">{{.}}</div> @@ -42,9 +36,9 @@ <div class="item">{{ctx.Locale.Tr "no_results_found"}}</div> {{end}} </div> - <div id="tag-list" class="scrolling menu reference-list-menu {{if not .Issue}}new-issue{{end}} tw-hidden"> - {{if .Reference}} - <div class="item text small" data-id="" data-id-selector="#ref_selector"><strong><a href="#">{{ctx.Locale.Tr "repo.clear_ref"}}</a></strong></div> + <div id="tag-list" class="scrolling menu reference-list-menu tw-hidden"> + {{if or .Reference (not .Issue)}} + <div class="item text small" data-id="" data-name="{{ctx.Locale.Tr "repo.issues.no_ref"}}" data-id-selector="#ref_selector"><strong><a href="#">{{ctx.Locale.Tr "repo.clear_ref"}}</a></strong></div> {{end}} {{range .Tags}} <div class="item" data-id="refs/tags/{{.}}" data-name="tags/{{.}}" data-id-selector="#ref_selector">{{.}}</div> diff --git a/templates/repo/issue/labels/labels_sidebar.tmpl b/templates/repo/issue/labels/labels_sidebar.tmpl index be30baba92..0b7b9b8969 100644 --- a/templates/repo/issue/labels/labels_sidebar.tmpl +++ b/templates/repo/issue/labels/labels_sidebar.tmpl @@ -1,6 +1,6 @@ <div class="ui labels list"> - <span class="no-select item {{if .root.HasSelectedLabel}}tw-hidden{{end}}">{{ctx.Locale.Tr "repo.issues.new.no_label"}}</span> <span class="labels-list"> + <span class="no-select {{if .root.HasSelectedLabel}}tw-hidden{{end}}">{{ctx.Locale.Tr "repo.issues.new.no_label"}}</span> {{range .root.Labels}} {{template "repo/issue/labels/label" dict "root" $.root "label" .}} {{end}} diff --git a/web_src/css/base.css b/web_src/css/base.css index 1d65bb37e7..c0ced2955c 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -871,6 +871,7 @@ input:-webkit-autofill:active, .ui.dropdown .scrolling.menu { border-color: var(--color-secondary); + border-radius: 0 0 var(--border-radius) var(--border-radius) !important; } .color-preview { diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 0b46f6b69f..cc09ec94e2 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -2748,23 +2748,6 @@ tbody.commit-list { } } -.branch-dropdown-button { - max-width: 340px; - vertical-align: bottom !important; -} - -@media (min-width: 768px) and (max-width: 991.98px) { - .branch-dropdown-button { - max-width: 185px; - } -} - -@media (max-width: 767.98px) { - .branch-dropdown-button { - max-width: 165px; - } -} - .commit-status-header { /* reset the default ".ui.attached.header" styles, to use the outer border */ border: none !important; @@ -2841,32 +2824,70 @@ tbody.commit-list { max-height: 200px; } -/* Branch tag selector - TODO: Merge this into the same selector on repo page */ -.repository .issue-content .issue-content-right .ui.grid .column.row { - padding: 10px; - padding-bottom: 0; +.branch-selector-dropdown { + max-width: 100%; } -.repository .issue-content .issue-content-right .ui.grid .column.muted { - padding: 0; + +.ui.dropdown.branch-selector-dropdown > .menu { + margin-top: 4px; } -.repository .issue-content .issue-content-right .ui.grid .column.muted .text { + +.branch-selector-dropdown .branch-dropdown-button { + margin: 0; + max-width: 340px; + line-height: var(--line-height-default); +} + +/* FIXME: These media selectors are not ideal (just keep them from old code). + There are many different pages, some need the max-width while some others don't, + they should be tested and improved in the future. */ +@media (min-width: 768px) and (max-width: 991.98px) { + .branch-selector-dropdown .branch-dropdown-button { + max-width: 185px; + } +} + +@media (max-width: 767.98px) { + .branch-selector-dropdown .branch-dropdown-button { + max-width: 165px; + } +} + +.branch-selector-dropdown .branch-tag-tab { + padding: 0 10px; +} + +.branch-selector-dropdown .branch-tag-item { display: inline-block; padding: 10px; - width: 100%; - text-align: center; border: 1px solid transparent; border-bottom: none; } -.repository .issue-content .issue-content-right .ui.grid .column.muted .text.black { + +.branch-selector-dropdown .branch-tag-item.active { border-color: var(--color-secondary); background: var(--color-menu); border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); } -.repository .issue-content .issue-content-right .ui.dropdown .scrolling.menu { - border-top: none; -} -.repository .issue-content .issue-content-right .branch-tag-divider { - margin-top: -1px; + +.branch-selector-dropdown .branch-tag-divider { + margin-top: -1px !important; border-top: 1px solid var(--color-secondary); } + +.branch-selector-dropdown .scrolling.menu { + border-top: none !important; +} + +.branch-selector-dropdown .menu .item .rss-icon { + visibility: hidden; /* only show RSS icon on hover */ +} + +.branch-selector-dropdown .menu .item:hover .rss-icon { + visibility: visible; +} + +.branch-selector-dropdown .scrolling.menu .loading-indicator { + height: 4em; +} diff --git a/web_src/js/components/RepoBranchTagSelector.vue b/web_src/js/components/RepoBranchTagSelector.vue index c13af14dea..8a741b68da 100644 --- a/web_src/js/components/RepoBranchTagSelector.vue +++ b/web_src/js/components/RepoBranchTagSelector.vue @@ -246,9 +246,9 @@ export function initRepoBranchTagSelector(selector) { export default sfc; // activate IDE's Vue plugin </script> <template> - <div class="ui dropdown custom"> - <button class="branch-dropdown-button gt-ellipsis ui basic small compact button tw-flex tw-m-0" @click="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible"> - <span class="text tw-flex tw-items-center tw-mr-1 gt-ellipsis"> + <div class="ui dropdown custom branch-selector-dropdown"> + <div class="ui button branch-dropdown-button" @click="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible"> + <span class="flex-text-block gt-ellipsis"> <template v-if="release">{{ textReleaseCompare }}</template> <template v-else> <svg-icon v-if="isViewTag" name="octicon-tag"/> @@ -257,7 +257,7 @@ export default sfc; // activate IDE's Vue plugin </template> </span> <svg-icon name="octicon-triangle-down" :size="14" class-name="dropdown icon"/> - </button> + </div> <div class="menu transition" :class="{visible: menuVisible}" v-show="menuVisible" v-cloak> <div class="ui icon search input"> <i class="icon"><svg-icon name="octicon-filter" :size="16"/></i> @@ -317,43 +317,3 @@ export default sfc; // activate IDE's Vue plugin </div> </div> </template> -<style scoped> -.branch-tag-tab { - padding: 0 10px; -} - -.branch-tag-item { - display: inline-block; - padding: 10px; - border: 1px solid transparent; - border-bottom: none; -} - -.branch-tag-item.active { - border-color: var(--color-secondary); - background: var(--color-menu); - border-top-left-radius: var(--border-radius); - border-top-right-radius: var(--border-radius); -} - -.branch-tag-divider { - margin-top: -1px !important; - border-top: 1px solid var(--color-secondary); -} - -.scrolling.menu { - border-top: none !important; -} - -.menu .item .rss-icon { - display: none; /* only show RSS icon on hover */ -} - -.menu .item:hover .rss-icon { - display: inline-block; -} - -.scrolling.menu .loading-indicator { - height: 4em; -} -</style> diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js index 18d98c891d..670e60def0 100644 --- a/web_src/js/features/repo-legacy.js +++ b/web_src/js/features/repo-legacy.js @@ -19,7 +19,7 @@ import {initCompReactionSelector} from './comp/ReactionSelector.js'; import {initRepoSettingBranches} from './repo-settings.js'; import {initRepoPullRequestMergeForm} from './repo-issue-pr-form.js'; import {initRepoPullRequestCommitStatus} from './repo-issue-pr-status.js'; -import {hideElem, showElem} from '../utils/dom.js'; +import {hideElem, queryElemChildren, showElem} from '../utils/dom.js'; import {POST} from '../modules/fetch.js'; import {initRepoIssueCommentEdit} from './repo-issue-edit.js'; @@ -56,16 +56,19 @@ export function initRepoCommentForm() { } function initBranchSelector() { - const $selectBranch = $('.ui.select-branch'); + const elSelectBranch = document.querySelector('.ui.dropdown.select-branch'); + const isForNewIssue = elSelectBranch.getAttribute('data-for-new-issue') === 'true'; + + const $selectBranch = $(elSelectBranch); const $branchMenu = $selectBranch.find('.reference-list-menu'); - const $isNewIssue = $branchMenu.hasClass('new-issue'); - $branchMenu.find('.item:not(.no-select)').on('click', async function () { - const selectedValue = $(this).data('id'); + $branchMenu.find('.item:not(.no-select)').on('click', async function (e) { + e.preventDefault(); + const selectedValue = $(this).data('id'); // eg: "refs/heads/my-branch" const editMode = $('#editing_mode').val(); $($(this).data('id-selector')).val(selectedValue); - if ($isNewIssue) { - $selectBranch.find('.ui .branch-name').text($(this).data('name')); - return; + if (isForNewIssue) { + elSelectBranch.querySelector('.text-branch-name').textContent = this.getAttribute('data-name'); + return; // only update UI&form, do not send request/reload } if (editMode === 'true') { @@ -84,9 +87,9 @@ export function initRepoCommentForm() { }); $selectBranch.find('.reference.column').on('click', function () { hideElem($selectBranch.find('.scrolling.reference-list-menu')); - $selectBranch.find('.reference .text').removeClass('black'); - showElem($($(this).data('target'))); - $(this).find('.text').addClass('black'); + showElem(this.getAttribute('data-target')); + queryElemChildren(this.parentNode, '.branch-tag-item', (el) => el.classList.remove('active')); + this.classList.add('active'); return false; }); }