troldspejlet/forgejo
troldspejlet/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2024-11-23 19:11:58 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

Improve the branch selector tab UI (#26631)

Browse source
This commit is contained in:
wxiaoguang 2023-08-21 21:35:02 +08:00 committed by GitHub
parent 5bd63f83e3
commit 42cbe6005a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 39 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
web_src/css/repo.css
View file

@ -1255,8 +1255,8 @@
color: var(--color-text-light-2); color: var(--color-text-light-2);
} }
.repository .filter.dropdown .menu { .repository .ui.dropdown.filter > .menu {
margin-top: 1px !important; margin-top: 1px;
} }
.repository.branches .commit-divergence .bar-group { .repository.branches .commit-divergence .bar-group {

47
web_src/js/components/RepoBranchTagSelector.vue
View file

@ -16,26 +16,15 @@
<i class="icon"><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"> <input name="search" ref="searchField" autocomplete="off" v-model="searchTerm" @keydown="keydown($event)" :placeholder="searchFieldPlaceholder">
</div> </div>
<template v-if="showBranchesInDropdown"> <div v-if="showBranchesInDropdown" class="branch-tag-tab">
<div class="header branch-tag-choice"> <a class="branch-tag-item muted" :class="{active: mode === 'branches'}" href="#" @click="handleTabSwitch('branches')">
<div class="ui grid">
<div class="two column row">
<a class="reference column" href="#" @click="handleTabSwitch('branches')">
<span class="text" :class="{black: mode === 'branches'}">
<svg-icon name="octicon-git-branch" :size="16" class-name="gt-mr-2"/>{{ textBranches }} <svg-icon name="octicon-git-branch" :size="16" class-name="gt-mr-2"/>{{ textBranches }}
</span>
</a> </a>
<template v-if="!noTag"> <a v-if="!noTag" class="branch-tag-item muted" :class="{active: mode === 'tags'}" href="#" @click="handleTabSwitch('tags')">
<a class="reference column" href="#" @click="handleTabSwitch('tags')">
<span class="text" :class="{black: mode === 'tags'}">
<svg-icon name="octicon-tag" :size="16" class-name="gt-mr-2"/>{{ textTags }} <svg-icon name="octicon-tag" :size="16" class-name="gt-mr-2"/>{{ textTags }}
</span>
</a> </a>
</template>
</div> </div>
</div> <div class="branch-tag-divider"/>
</div>
</template>
<div class="scrolling menu" ref="scrollContainer"> <div class="scrolling menu" ref="scrollContainer">
<svg-icon name="octicon-rss" symbol-id="svg-symbol-octicon-rss"/> <svg-icon name="octicon-rss" symbol-id="svg-symbol-octicon-rss"/>
<div class="loading-indicator is-loading" v-if="isLoading"/> <div class="loading-indicator is-loading" v-if="isLoading"/>
@ -327,9 +316,37 @@ export default sfc; // activate IDE's Vue plugin
</script> </script>
<style scoped> <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 { .menu .item .rss-icon {
display: none; /* only show RSS icon on hover */ display: none; /* only show RSS icon on hover */
} }
.menu .item:hover .rss-icon { .menu .item:hover .rss-icon {
display: inline-block; display: inline-block;
} }