Skip to content

Commit d793f25

Browse files
GiteaBotwxiaoguang
GiteaBot
and
wxiaoguang
authored
Fix branch selector UI (go-gitea#30803) (go-gitea#30819)
Backport go-gitea#30803 by wxiaoguang Fix go-gitea#30802 Co-authored-by: wxiaoguang <[email protected]>
1 parent e1a79ae commit d793f25

File tree

7 files changed

+96
-117
lines changed

7 files changed

+96
-117
lines changed

‎templates/repo/branch_dropdown.tmpl‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -69,9 +69,9 @@
6969

7070
<div class="js-branch-tag-selector {{if .ContainerClasses}}{{.ContainerClasses}}{{end}}">
7171
{{/* show dummy elements before Vue componment is mounted, this code must match the code in BranchTagSelector.vue */}}
72-
<div class="ui dropdown custom">
73-
<button class="branch-dropdown-button gt-ellipsis ui basic small compact button tw-flex tw-m-0">
74-
<span class="text tw-flex tw-items-center tw-mr-1 gt-ellipsis">
72+
<div class="ui dropdown custom branch-selector-dropdown">
73+
<div class="ui button branch-dropdown-button">
74+
<span class="flex-text-block gt-ellipsis">
7575
{{if .release}}
7676
{{ctx.Locale.Tr "repo.release.compare"}}
7777
{{else}}
@@ -84,6 +84,6 @@
8484
{{end}}
8585
</span>
8686
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
87-
</button>
87+
</div>
8888
</div>
8989
</div>

‎templates/repo/issue/branch_selector_field.tmpl‎

Lines changed: 19 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -4,47 +4,41 @@
44
<form method="post" action="{{$.RepoLink}}/issues/{{.Issue.Index}}/ref" id="update_issueref_form">
55
{{$.CsrfTokenHtml}}
66
</form>
7-
{{/* TODO: share this branch selector dropdown with the same in repo page */}}
8-
<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"}}">
9-
<div class="ui basic small button">
10-
<span class="text branch-name gt-ellipsis">{{if .Reference}}{{$.RefEndName}}{{else}}{{ctx.Locale.Tr "repo.issues.no_ref"}}{{end}}</span>
7+
<div class="ui dropdown select-branch branch-selector-dropdown {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}}"
8+
data-no-results="{{ctx.Locale.Tr "no_results_found"}}"
9+
{{if not .Issue}}data-for-new-issue="true"{{end}}
10+
>
11+
<div class="ui button branch-dropdown-button">
12+
<span class="text-branch-name gt-ellipsis">{{if .Reference}}{{$.RefEndName}}{{else}}{{ctx.Locale.Tr "repo.issues.no_ref"}}{{end}}</span>
1113
{{if .HasIssuesOrPullsWritePermission}}{{svg "octicon-triangle-down" 14 "dropdown icon"}}{{end}}
1214
</div>
1315
<div class="menu">
1416
<div class="ui icon search input">
1517
<i class="icon">{{svg "octicon-filter" 16}}</i>
1618
<input name="search" placeholder="{{ctx.Locale.Tr "repo.filter_branch_and_tag"}}...">
1719
</div>
18-
<div class="header">
19-
<div class="ui grid">
20-
<div class="two column row">
21-
<a class="reference column muted" href="#" data-target="#branch-list">
22-
<span class="text black">
23-
{{svg "octicon-git-branch" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.branches"}}
24-
</span>
25-
</a>
26-
<a class="reference column muted" href="#" data-target="#tag-list">
27-
<span class="text">
28-
{{svg "octicon-tag" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.tags"}}
29-
</span>
30-
</a>
31-
</div>
32-
</div>
20+
<div class="branch-tag-tab">
21+
<a class="branch-tag-item reference column muted active" href="#" data-target="#branch-list">
22+
{{svg "octicon-git-branch" 16 "tw-mr-1"}} {{ctx.Locale.Tr "repo.branches"}}
23+
</a>
24+
<a class="branch-tag-item reference column muted" href="#" data-target="#tag-list">
25+
{{svg "octicon-tag" 16 "tw-mr-1"}} {{ctx.Locale.Tr "repo.tags"}}
26+
</a>
3327
</div>
3428
<div class="branch-tag-divider"></div>
35-
<div id="branch-list" class="scrolling menu reference-list-menu {{if not .Issue}}new-issue{{end}}">
36-
{{if .Reference}}
37-
<div class="item text small" data-id="" data-id-selector="#ref_selector"><strong><a href="#">{{ctx.Locale.Tr "repo.clear_ref"}}</a></strong></div>
29+
<div id="branch-list" class="scrolling menu reference-list-menu">
30+
{{if or .Reference (not .Issue)}}
31+
<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>
3832
{{end}}
3933
{{range .Branches}}
4034
<div class="item" data-id="refs/heads/{{.}}" data-name="{{.}}" data-id-selector="#ref_selector" title="{{.}}">{{.}}</div>
4135
{{else}}
4236
<div class="item">{{ctx.Locale.Tr "no_results_found"}}</div>
4337
{{end}}
4438
</div>
45-
<div id="tag-list" class="scrolling menu reference-list-menu {{if not .Issue}}new-issue{{end}} tw-hidden">
46-
{{if .Reference}}
47-
<div class="item text small" data-id="" data-id-selector="#ref_selector"><strong><a href="#">{{ctx.Locale.Tr "repo.clear_ref"}}</a></strong></div>
39+
<div id="tag-list" class="scrolling menu reference-list-menu tw-hidden">
40+
{{if or .Reference (not .Issue)}}
41+
<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>
4842
{{end}}
4943
{{range .Tags}}
5044
<div class="item" data-id="refs/tags/{{.}}" data-name="tags/{{.}}" data-id-selector="#ref_selector">{{.}}</div>

‎templates/repo/issue/labels/labels_sidebar.tmpl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div class="ui labels list">
2-
<span class="no-select item {{if .root.HasSelectedLabel}}tw-hidden{{end}}">{{ctx.Locale.Tr "repo.issues.new.no_label"}}</span>
32
<span class="labels-list">
3+
<span class="no-select {{if .root.HasSelectedLabel}}tw-hidden{{end}}">{{ctx.Locale.Tr "repo.issues.new.no_label"}}</span>
44
{{range .root.Labels}}
55
{{template "repo/issue/labels/label" dict "root" $.root "label" .}}
66
{{end}}

‎web_src/css/base.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -875,6 +875,7 @@ input:-webkit-autofill:active,
875875

876876
.ui.dropdown .scrolling.menu {
877877
border-color: var(--color-secondary);
878+
border-radius: 0 0 var(--border-radius) var(--border-radius) !important;
878879
}
879880

880881
.color-preview {

‎web_src/css/repo.css‎

Lines changed: 53 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -2748,23 +2748,6 @@ tbody.commit-list {
27482748
}
27492749
}
27502750

2751-
.branch-dropdown-button {
2752-
max-width: 340px;
2753-
vertical-align: bottom !important;
2754-
}
2755-
2756-
@media (min-width: 768px) and (max-width: 991.98px) {
2757-
.branch-dropdown-button {
2758-
max-width: 185px;
2759-
}
2760-
}
2761-
2762-
@media (max-width: 767.98px) {
2763-
.branch-dropdown-button {
2764-
max-width: 165px;
2765-
}
2766-
}
2767-
27682751
.commit-status-header {
27692752
/* reset the default ".ui.attached.header" styles, to use the outer border */
27702753
border: none !important;
@@ -2841,32 +2824,70 @@ tbody.commit-list {
28412824
max-height: 200px;
28422825
}
28432826

2844-
/* Branch tag selector - TODO: Merge this into the same selector on repo page */
2845-
.repository .issue-content .issue-content-right .ui.grid .column.row {
2846-
padding: 10px;
2847-
padding-bottom: 0;
2827+
.branch-selector-dropdown {
2828+
max-width: 100%;
28482829
}
2849-
.repository .issue-content .issue-content-right .ui.grid .column.muted {
2850-
padding: 0;
2830+
2831+
.ui.dropdown.branch-selector-dropdown > .menu {
2832+
margin-top: 4px;
2833+
}
2834+
2835+
.branch-selector-dropdown .branch-dropdown-button {
2836+
margin: 0;
2837+
max-width: 340px;
2838+
line-height: var(--line-height-default);
2839+
}
2840+
2841+
/* FIXME: These media selectors are not ideal (just keep them from old code).
2842+
There are many different pages, some need the max-width while some others don't,
2843+
they should be tested and improved in the future. */
2844+
@media (min-width: 768px) and (max-width: 991.98px) {
2845+
.branch-selector-dropdown .branch-dropdown-button {
2846+
max-width: 185px;
2847+
}
2848+
}
2849+
2850+
@media (max-width: 767.98px) {
2851+
.branch-selector-dropdown .branch-dropdown-button {
2852+
max-width: 165px;
2853+
}
28512854
}
2852-
.repository .issue-content .issue-content-right .ui.grid .column.muted .text {
2855+
2856+
.branch-selector-dropdown .branch-tag-tab {
2857+
padding: 0 10px;
2858+
}
2859+
2860+
.branch-selector-dropdown .branch-tag-item {
28532861
display: inline-block;
28542862
padding: 10px;
2855-
width: 100%;
2856-
text-align: center;
28572863
border: 1px solid transparent;
28582864
border-bottom: none;
28592865
}
2860-
.repository .issue-content .issue-content-right .ui.grid .column.muted .text.black {
2866+
2867+
.branch-selector-dropdown .branch-tag-item.active {
28612868
border-color: var(--color-secondary);
28622869
background: var(--color-menu);
28632870
border-top-left-radius: var(--border-radius);
28642871
border-top-right-radius: var(--border-radius);
28652872
}
2866-
.repository .issue-content .issue-content-right .ui.dropdown .scrolling.menu {
2867-
border-top: none;
2868-
}
2869-
.repository .issue-content .issue-content-right .branch-tag-divider {
2870-
margin-top: -1px;
2873+
2874+
.branch-selector-dropdown .branch-tag-divider {
2875+
margin-top: -1px !important;
28712876
border-top: 1px solid var(--color-secondary);
28722877
}
2878+
2879+
.branch-selector-dropdown .scrolling.menu {
2880+
border-top: none !important;
2881+
}
2882+
2883+
.branch-selector-dropdown .menu .item .rss-icon {
2884+
visibility: hidden; /* only show RSS icon on hover */
2885+
}
2886+
2887+
.branch-selector-dropdown .menu .item:hover .rss-icon {
2888+
visibility: visible;
2889+
}
2890+
2891+
.branch-selector-dropdown .scrolling.menu .loading-indicator {
2892+
height: 4em;
2893+
}

‎web_src/js/components/RepoBranchTagSelector.vue‎

Lines changed: 4 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -246,9 +246,9 @@ export function initRepoBranchTagSelector(selector) {
246246
export default sfc; // activate IDE's Vue plugin
247247
</script>
248248
<template>
249-
<div class="ui dropdown custom">
250-
<button class="branch-dropdown-button gt-ellipsis ui basic small compact button tw-flex tw-m-0" @click="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible">
251-
<span class="text tw-flex tw-items-center tw-mr-1 gt-ellipsis">
249+
<div class="ui dropdown custom branch-selector-dropdown">
250+
<div class="ui button branch-dropdown-button" @click="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible">
251+
<span class="flex-text-block gt-ellipsis">
252252
<template v-if="release">{{ textReleaseCompare }}</template>
253253
<template v-else>
254254
<svg-icon v-if="isViewTag" name="octicon-tag"/>
@@ -257,7 +257,7 @@ export default sfc; // activate IDE's Vue plugin
257257
</template>
258258
</span>
259259
<svg-icon name="octicon-triangle-down" :size="14" class-name="dropdown icon"/>
260-
</button>
260+
</div>
261261
<div class="menu transition" :class="{visible: menuVisible}" v-show="menuVisible" v-cloak>
262262
<div class="ui icon search input">
263263
<i class="icon"><svg-icon name="octicon-filter" :size="16"/></i>
@@ -317,43 +317,3 @@ export default sfc; // activate IDE's Vue plugin
317317
</div>
318318
</div>
319319
</template>
320-
<style scoped>
321-
.branch-tag-tab {
322-
padding: 0 10px;
323-
}
324-
325-
.branch-tag-item {
326-
display: inline-block;
327-
padding: 10px;
328-
border: 1px solid transparent;
329-
border-bottom: none;
330-
}
331-
332-
.branch-tag-item.active {
333-
border-color: var(--color-secondary);
334-
background: var(--color-menu);
335-
border-top-left-radius: var(--border-radius);
336-
border-top-right-radius: var(--border-radius);
337-
}
338-
339-
.branch-tag-divider {
340-
margin-top: -1px !important;
341-
border-top: 1px solid var(--color-secondary);
342-
}
343-
344-
.scrolling.menu {
345-
border-top: none !important;
346-
}
347-
348-
.menu .item .rss-icon {
349-
display: none; /* only show RSS icon on hover */
350-
}
351-
352-
.menu .item:hover .rss-icon {
353-
display: inline-block;
354-
}
355-
356-
.scrolling.menu .loading-indicator {
357-
height: 4em;
358-
}
359-
</style>

‎web_src/js/features/repo-legacy.js‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import {initCompReactionSelector} from './comp/ReactionSelector.js';
1919
import {initRepoSettingBranches} from './repo-settings.js';
2020
import {initRepoPullRequestMergeForm} from './repo-issue-pr-form.js';
2121
import {initRepoPullRequestCommitStatus} from './repo-issue-pr-status.js';
22-
import {hideElem, showElem} from '../utils/dom.js';
22+
import {hideElem, queryElemChildren, showElem} from '../utils/dom.js';
2323
import {POST} from '../modules/fetch.js';
2424
import {initRepoIssueCommentEdit} from './repo-issue-edit.js';
2525

@@ -56,16 +56,19 @@ export function initRepoCommentForm() {
5656
}
5757

5858
function initBranchSelector() {
59-
const $selectBranch = $('.ui.select-branch');
59+
const elSelectBranch = document.querySelector('.ui.dropdown.select-branch');
60+
const isForNewIssue = elSelectBranch.getAttribute('data-for-new-issue') === 'true';
61+
62+
const $selectBranch = $(elSelectBranch);
6063
const $branchMenu = $selectBranch.find('.reference-list-menu');
61-
const $isNewIssue = $branchMenu.hasClass('new-issue');
62-
$branchMenu.find('.item:not(.no-select)').on('click', async function () {
63-
const selectedValue = $(this).data('id');
64+
$branchMenu.find('.item:not(.no-select)').on('click', async function (e) {
65+
e.preventDefault();
66+
const selectedValue = $(this).data('id'); // eg: "refs/heads/my-branch"
6467
const editMode = $('#editing_mode').val();
6568
$($(this).data('id-selector')).val(selectedValue);
66-
if ($isNewIssue) {
67-
$selectBranch.find('.ui .branch-name').text($(this).data('name'));
68-
return;
69+
if (isForNewIssue) {
70+
elSelectBranch.querySelector('.text-branch-name').textContent = this.getAttribute('data-name');
71+
return; // only update UI&form, do not send request/reload
6972
}
7073

7174
if (editMode === 'true') {
@@ -84,9 +87,9 @@ export function initRepoCommentForm() {
8487
});
8588
$selectBranch.find('.reference.column').on('click', function () {
8689
hideElem($selectBranch.find('.scrolling.reference-list-menu'));
87-
$selectBranch.find('.reference .text').removeClass('black');
88-
showElem($($(this).data('target')));
89-
$(this).find('.text').addClass('black');
90+
showElem(this.getAttribute('data-target'));
91+
queryElemChildren(this.parentNode, '.branch-tag-item', (el) => el.classList.remove('active'));
92+
this.classList.add('active');
9093
return false;
9194
});
9295
}

0 commit comments

Comments
 (0)