linden123/githaven-fork
1
1
Fork 0
forked from Shiloh/githaven
Code Pull Requests Activity

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);
}
.repository .filter.dropdown .menu {
margin-top: 1px !important;
.repository .ui.dropdown.filter > .menu {
margin-top: 1px;
}
.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>
<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'}">
<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 }}
</span>
</a>
<template v-if="!noTag">
<a class="reference column" href="#" @click="handleTabSwitch('tags')">
<span class="text" :class="{black: mode === 'tags'}">
<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 }}
</span>
</a>
</template>
</div>
</div>
</div>
</template>
<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;
}