mirror of
https://github.com/go-gitea/gitea.git
synced 2024-08-20 11:33:25 +02:00
Fix regression from https://github.com/go-gitea/gitea/pull/24476 where
the `svg.svg` class misaligns SVG icons across the site and streched
buttons unintentionally in vertical height.
Before (button 30.3px):
<img width="157" alt="Screenshot 2023-05-11 at 22 09 42"
src="https://github.com/go-gitea/gitea/assets/115237/0fd137ab-ab52-4cf8-afca-c45776d526d0">
After (button 30px):
<img width="160" alt="Screenshot 2023-05-11 at 22 09 59"
src="https://github.com/go-gitea/gitea/assets/115237/4b741f4b-0fd2-4fae-9bee-16a7deb098e8">
[vertical-align:
middle](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align)
is not suitable to align icons to text because
> Aligns the middle of the element with the baseline plus half the
x-height of the parent.
Example of `vertical-align: middle` from MDN:
<img width="232" alt="Screenshot 2023-05-11 at 22 29 28"
src="https://github.com/go-gitea/gitea/assets/115237/179fb756-85a1-4cab-8219-1a4958f333e2">
So I think the
[existing](365bb77a54/web_src/css/svg.css (L3)
)
`vertical-align: text-top` is generally still the best bet:
<img width="241" alt="Screenshot 2023-05-11 at 22 34 24"
src="https://github.com/go-gitea/gitea/assets/115237/0cd6edf5-12c0-4bdb-8771-a900f5ba2d35">
Co-authored-by: Giteabot <teabot@gitea.io>
306 lines
11 KiB
Vue
306 lines
11 KiB
Vue
<template>
|
|
<div class="ui floating filter dropdown custom">
|
|
<button class="branch-dropdown-button gt-ellipsis ui basic small compact button gt-df gt-m-0" @click="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible">
|
|
<span class="text gt-df gt-ac gt-mr-2">
|
|
<template v-if="release">{{ textReleaseCompare }}</template>
|
|
<template v-else>
|
|
<svg-icon v-if="isViewTag" name="octicon-tag" />
|
|
<svg-icon v-else name="octicon-git-branch"/>
|
|
<strong ref="dropdownRefName" class="gt-ml-3">{{ refNameText }}</strong>
|
|
</template>
|
|
</span>
|
|
<svg-icon name="octicon-triangle-down" :size="14" class-name="dropdown icon"/>
|
|
</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>
|
|
<input name="search" ref="searchField" autocomplete="off" v-model="searchTerm" @keydown="keydown($event)" :placeholder="searchFieldPlaceholder">
|
|
</div>
|
|
<template v-if="showBranchesInDropdown">
|
|
<div class="header branch-tag-choice">
|
|
<div class="ui grid">
|
|
<div class="two column row">
|
|
<a class="reference column" href="#" @click="createTag = false; mode = 'branches'; focusSearchField()">
|
|
<span class="text" :class="{black: mode === 'branches'}">
|
|
<svg-icon name="octicon-git-branch" :size="16" class-name="gt-mr-2"/>{{ textBranches }}
|
|
</span>
|
|
</a>
|
|
<template v-if="!noTag">
|
|
<a class="reference column" href="#" @click="createTag = true; mode = 'tags'; focusSearchField()">
|
|
<span class="text" :class="{black: mode === 'tags'}">
|
|
<svg-icon name="octicon-tag" :size="16" class-name="gt-mr-2"/>{{ textTags }}
|
|
</span>
|
|
</a>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<div class="scrolling menu" ref="scrollContainer">
|
|
<div v-for="(item, index) in filteredItems" :key="item.name" class="item" :class="{selected: item.selected, active: active === index}" @click="selectItem(item)" :ref="'listItem' + index">
|
|
{{ item.name }}
|
|
<a v-if="enableFeed && mode === 'branches'" role="button" class="rss-icon ui compact right" :href="rssURLPrefix + item.url" target="_blank" @click.stop>
|
|
<svg-icon name="octicon-rss" :size="14"/>
|
|
</a>
|
|
</div>
|
|
<div class="item" v-if="showCreateNewBranch" :class="{active: active === filteredItems.length}" :ref="'listItem' + filteredItems.length">
|
|
<a href="#" @click="createNewBranch()">
|
|
<div v-show="createTag">
|
|
<i class="reference tags icon"/>
|
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
<span v-html="textCreateTag.replace('%s', searchTerm)"/>
|
|
</div>
|
|
<div v-show="!createTag">
|
|
<svg-icon name="octicon-git-branch"/>
|
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
<span v-html="textCreateBranch.replace('%s', searchTerm)"/>
|
|
</div>
|
|
<div class="text small">
|
|
<span v-if="isViewBranch || release">{{ textCreateBranchFrom.replace('%s', branchName) }}</span>
|
|
<span v-else-if="isViewTag">{{ textCreateBranchFrom.replace('%s', tagName) }}</span>
|
|
<span v-else>{{ textCreateBranchFrom.replace('%s', commitIdShort) }}</span>
|
|
</div>
|
|
</a>
|
|
<form ref="newBranchForm" :action="formActionUrl" method="post">
|
|
<input type="hidden" name="_csrf" :value="csrfToken">
|
|
<input type="hidden" name="new_branch_name" v-model="searchTerm">
|
|
<input type="hidden" name="create_tag" v-model="createTag">
|
|
<input type="hidden" name="current_path" v-model="treePath" v-if="treePath">
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="message" v-if="showNoResults">
|
|
{{ noResults }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {createApp, nextTick} from 'vue';
|
|
import $ from 'jquery';
|
|
import {SvgIcon} from '../svg.js';
|
|
import {pathEscapeSegments} from '../utils/url.js';
|
|
|
|
const sfc = {
|
|
components: {SvgIcon},
|
|
|
|
// no `data()`, at the moment, the `data()` is provided by the init code, which is not ideal and should be fixed in the future
|
|
|
|
computed: {
|
|
filteredItems() {
|
|
const items = this.items.filter((item) => {
|
|
return ((this.mode === 'branches' && item.branch) || (this.mode === 'tags' && item.tag)) &&
|
|
(!this.searchTerm || item.name.toLowerCase().includes(this.searchTerm.toLowerCase()));
|
|
});
|
|
|
|
// TODO: fix this anti-pattern: side-effects-in-computed-properties
|
|
this.active = (items.length === 0 && this.showCreateNewBranch ? 0 : -1);
|
|
return items;
|
|
},
|
|
showNoResults() {
|
|
return this.filteredItems.length === 0 && !this.showCreateNewBranch;
|
|
},
|
|
showCreateNewBranch() {
|
|
if (this.disableCreateBranch || !this.searchTerm) {
|
|
return false;
|
|
}
|
|
return this.items.filter((item) => item.name.toLowerCase() === this.searchTerm.toLowerCase()).length === 0;
|
|
},
|
|
formActionUrl() {
|
|
return `${this.repoLink}/branches/_new/${pathEscapeSegments(this.branchNameSubURL)}`;
|
|
},
|
|
},
|
|
|
|
watch: {
|
|
menuVisible(visible) {
|
|
if (visible) {
|
|
this.focusSearchField();
|
|
}
|
|
}
|
|
},
|
|
|
|
beforeMount() {
|
|
if (this.viewType === 'tree') {
|
|
this.isViewTree = true;
|
|
this.refNameText = this.commitIdShort;
|
|
} else if (this.viewType === 'tag') {
|
|
this.isViewTag = true;
|
|
this.refNameText = this.tagName;
|
|
} else {
|
|
this.isViewBranch = true;
|
|
this.refNameText = this.branchName;
|
|
}
|
|
|
|
document.body.addEventListener('click', (event) => {
|
|
if (this.$el.contains(event.target)) return;
|
|
if (this.menuVisible) {
|
|
this.menuVisible = false;
|
|
}
|
|
});
|
|
},
|
|
|
|
methods: {
|
|
selectItem(item) {
|
|
const prev = this.getSelected();
|
|
if (prev !== null) {
|
|
prev.selected = false;
|
|
}
|
|
item.selected = true;
|
|
const url = (item.tag) ? this.tagURLPrefix + item.url + this.tagURLSuffix : this.branchURLPrefix + item.url + this.branchURLSuffix;
|
|
if (!this.branchForm) {
|
|
window.location.href = url;
|
|
} else {
|
|
this.isViewTree = false;
|
|
this.isViewTag = false;
|
|
this.isViewBranch = false;
|
|
this.$refs.dropdownRefName.textContent = item.name;
|
|
if (this.setAction) {
|
|
$(`#${this.branchForm}`).attr('action', url);
|
|
} else {
|
|
$(`#${this.branchForm} input[name="refURL"]`).val(url);
|
|
}
|
|
$(`#${this.branchForm} input[name="ref"]`).val(item.name);
|
|
if (item.tag) {
|
|
this.isViewTag = true;
|
|
$(`#${this.branchForm} input[name="refType"]`).val('tag');
|
|
} else {
|
|
this.isViewBranch = true;
|
|
$(`#${this.branchForm} input[name="refType"]`).val('branch');
|
|
}
|
|
if (this.submitForm) {
|
|
$(`#${this.branchForm}`).trigger('submit');
|
|
}
|
|
this.menuVisible = false;
|
|
}
|
|
},
|
|
createNewBranch() {
|
|
if (!this.showCreateNewBranch) return;
|
|
$(this.$refs.newBranchForm).trigger('submit');
|
|
},
|
|
focusSearchField() {
|
|
nextTick(() => {
|
|
this.$refs.searchField.focus();
|
|
});
|
|
},
|
|
getSelected() {
|
|
for (let i = 0, j = this.items.length; i < j; ++i) {
|
|
if (this.items[i].selected) return this.items[i];
|
|
}
|
|
return null;
|
|
},
|
|
getSelectedIndexInFiltered() {
|
|
for (let i = 0, j = this.filteredItems.length; i < j; ++i) {
|
|
if (this.filteredItems[i].selected) return i;
|
|
}
|
|
return -1;
|
|
},
|
|
scrollToActive() {
|
|
let el = this.$refs[`listItem${this.active}`];
|
|
if (!el || !el.length) return;
|
|
if (Array.isArray(el)) {
|
|
el = el[0];
|
|
}
|
|
|
|
const cont = this.$refs.scrollContainer;
|
|
if (el.offsetTop < cont.scrollTop) {
|
|
cont.scrollTop = el.offsetTop;
|
|
} else if (el.offsetTop + el.clientHeight > cont.scrollTop + cont.clientHeight) {
|
|
cont.scrollTop = el.offsetTop + el.clientHeight - cont.clientHeight;
|
|
}
|
|
},
|
|
keydown(event) {
|
|
if (event.keyCode === 40) { // arrow down
|
|
event.preventDefault();
|
|
|
|
if (this.active === -1) {
|
|
this.active = this.getSelectedIndexInFiltered();
|
|
}
|
|
|
|
if (this.active + (this.showCreateNewBranch ? 0 : 1) >= this.filteredItems.length) {
|
|
return;
|
|
}
|
|
this.active++;
|
|
this.scrollToActive();
|
|
} else if (event.keyCode === 38) { // arrow up
|
|
event.preventDefault();
|
|
|
|
if (this.active === -1) {
|
|
this.active = this.getSelectedIndexInFiltered();
|
|
}
|
|
|
|
if (this.active <= 0) {
|
|
return;
|
|
}
|
|
this.active--;
|
|
this.scrollToActive();
|
|
} else if (event.keyCode === 13) { // enter
|
|
event.preventDefault();
|
|
|
|
if (this.active >= this.filteredItems.length) {
|
|
this.createNewBranch();
|
|
} else if (this.active >= 0) {
|
|
this.selectItem(this.filteredItems[this.active]);
|
|
}
|
|
} else if (event.keyCode === 27) { // escape
|
|
event.preventDefault();
|
|
this.menuVisible = false;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
export function initRepoBranchTagSelector(selector) {
|
|
for (const [elIndex, elRoot] of document.querySelectorAll(selector).entries()) {
|
|
const data = {
|
|
csrfToken: window.config.csrfToken,
|
|
items: [],
|
|
searchTerm: '',
|
|
refNameText: '',
|
|
menuVisible: false,
|
|
createTag: false,
|
|
release: null,
|
|
|
|
isViewTag: false,
|
|
isViewBranch: false,
|
|
isViewTree: false,
|
|
|
|
active: 0,
|
|
|
|
...window.config.pageData.branchDropdownDataList[elIndex],
|
|
};
|
|
|
|
// the "data.defaultBranch" is ambiguous, it could be "branch name" or "tag name"
|
|
|
|
if (data.showBranchesInDropdown && data.branches) {
|
|
for (const branch of data.branches) {
|
|
data.items.push({name: branch, url: branch, branch: true, tag: false, selected: branch === data.defaultBranch});
|
|
}
|
|
}
|
|
if (!data.noTag && data.tags) {
|
|
for (const tag of data.tags) {
|
|
if (data.release) {
|
|
data.items.push({name: tag, url: tag, branch: false, tag: true, selected: tag === data.release.tagName});
|
|
} else {
|
|
data.items.push({name: tag, url: tag, branch: false, tag: true, selected: tag === data.defaultBranch});
|
|
}
|
|
}
|
|
}
|
|
|
|
const comp = {...sfc, data() { return data }};
|
|
createApp(comp).mount(elRoot);
|
|
}
|
|
}
|
|
|
|
export default sfc; // activate IDE's Vue plugin
|
|
</script>
|
|
|
|
<style scoped>
|
|
.menu .item a {
|
|
display: none; /* only show RSS icon on hover */
|
|
}
|
|
.menu .item:hover a {
|
|
display: inline-block;
|
|
}
|
|
</style>
|