From 42cbe6005adfe6e1440cdc9c15a05996f065bf83 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Mon, 21 Aug 2023 21:35:02 +0800
Subject: [PATCH] Improve the branch selector tab UI (#26631)
---
web_src/css/repo.css | 4 +-
.../js/components/RepoBranchTagSelector.vue | 57 ++++++++++++-------
2 files changed, 39 insertions(+), 22 deletions(-)
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 8e8125a5f4..03e9019b25 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -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 {
diff --git a/web_src/js/components/RepoBranchTagSelector.vue b/web_src/js/components/RepoBranchTagSelector.vue
index e6e72e3886..488f80a76f 100644
--- a/web_src/js/components/RepoBranchTagSelector.vue
+++ b/web_src/js/components/RepoBranchTagSelector.vue
@@ -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;
}