mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-09-10 12:12:32 +02:00
Improve the branch selector tab UI (#26631)
This commit is contained in:
parent
5bd63f83e3
commit
42cbe6005a
2 changed files with 39 additions and 22 deletions
|
@ -1255,8 +1255,8 @@
|
|||
color: var(--color-text-light-2);
|
||||
}
|
||||
|
||||
.repository .filter.dropdown .menu {
|
||||
margin-top: 1px !important;
|
||||
.repository .ui.dropdown.filter > .menu {
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.repository.branches .commit-divergence .bar-group {
|
||||
|
|
|
@ -16,26 +16,15 @@
|
|||
<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">
|
||||
</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="handleTabSwitch('branches')">
|
||||
<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="handleTabSwitch('tags')">
|
||||
<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 v-if="showBranchesInDropdown" class="branch-tag-tab">
|
||||
<a class="branch-tag-item muted" :class="{active: mode === 'branches'}" href="#" @click="handleTabSwitch('branches')">
|
||||
<svg-icon name="octicon-git-branch" :size="16" class-name="gt-mr-2"/>{{ textBranches }}
|
||||
</a>
|
||||
<a v-if="!noTag" class="branch-tag-item muted" :class="{active: mode === 'tags'}" href="#" @click="handleTabSwitch('tags')">
|
||||
<svg-icon name="octicon-tag" :size="16" class-name="gt-mr-2"/>{{ textTags }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="branch-tag-divider"/>
|
||||
<div class="scrolling menu" ref="scrollContainer">
|
||||
<svg-icon name="octicon-rss" symbol-id="svg-symbol-octicon-rss"/>
|
||||
<div class="loading-indicator is-loading" v-if="isLoading"/>
|
||||
|
@ -327,9 +316,37 @@ export default sfc; // activate IDE's Vue plugin
|
|||
</script>
|
||||
|
||||
<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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue