Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix branch selector UI (#30803) #30819

Merged
merged 1 commit into from
May 2, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Fix branch selector UI (#30803)
Fix  #30802
  • Loading branch information
wxiaoguang authored and GiteaBot committed May 2, 2024
commit aa26fe8fbfc4ccf74bd8eafe449d0a1bb85ed589
8 changes: 4 additions & 4 deletions templates/repo/branch_dropdown.tmpl
Original file line number Diff line number Diff line change
@@ -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>
44 changes: 19 additions & 25 deletions templates/repo/issue/branch_selector_field.tmpl
Original file line number Diff line number Diff line change
@@ -4,47 +4,41 @@
<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">
<div class="ui icon search input">
<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>
{{else}}
<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>
2 changes: 1 addition & 1 deletion templates/repo/issue/labels/labels_sidebar.tmpl
Original file line number Diff line number Diff line change
@@ -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}}
1 change: 1 addition & 0 deletions web_src/css/base.css
Original file line number Diff line number Diff line change
@@ -875,6 +875,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 {
85 changes: 53 additions & 32 deletions web_src/css/repo.css
Original file line number Diff line number Diff line change
@@ -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;
}

.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;
}
}
.repository .issue-content .issue-content-right .ui.grid .column.muted .text {

.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;
}
48 changes: 4 additions & 44 deletions web_src/js/components/RepoBranchTagSelector.vue
Original file line number Diff line number Diff line change
@@ -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>
25 changes: 14 additions & 11 deletions web_src/js/features/repo-legacy.js
Original file line number Diff line number Diff line change
@@ -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;
});
}