Skip to content

Commit 151f24d

Browse files
youngbeom-shin申永范-UX
youngbeom-shin
and
申永范-UX
authored
Csghub add dropdown component styles new (#1325)
* feat(dropdown): add dropdown component styles * feat(dropdown): add dropdown component styles * feat(dropdown): add dropdown component styles --------- Co-authored-by: 申永范-UX <[email protected]>
1 parent 62c0389 commit 151f24d

File tree

6 files changed

+177
-25
lines changed

6 files changed

+177
-25
lines changed

‎frontend/public/images/icons/add-file.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎frontend/public/images/icons/upload-file.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎frontend/src/assets/stylesheets/element-plus/dropdown.css‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
/* 下拉菜单按钮样式 */
2+
.el-dropdown {
3+
display: inline-flex;
4+
align-items: center;
5+
}
6+
7+
/* 禁用下拉菜单触发器的焦点轮廓 */
8+
9+
10+
.el-dropdown *:focus {
11+
outline: none !important;
12+
box-shadow: none !important;
13+
}
14+
15+
/* 下拉菜单容器样式 */
16+
.el-dropdown-menu {
17+
border-radius: 8px;
18+
padding: 4px;
19+
border: 1px solid var(--Gray-300);
20+
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
21+
}
22+
23+
/* 下拉菜单项样式 */
24+
.el-dropdown-menu__item {
25+
padding: 10px 16px;
26+
font-size: 14px;
27+
color: var(--Gray-700);
28+
border-radius: 6px;
29+
margin: 2px 2px;
30+
line-height: 1.4;
31+
font-weight: 400;
32+
}
33+
34+
.el-dropdown-menu__item:not(.is-disabled):hover {
35+
background-color: var(--Gray-50);
36+
color: inherit;
37+
}
38+
39+
/* 禁用下拉菜单触发器的hover颜色变化 */
40+
.el-dropdown .btn.btn-secondary-gray:hover {
41+
background-color: var(--Gray-50) !important;
42+
border-color: var(--Gray-300) !important;
43+
color: var(--Gray-800) !important;
44+
}
45+
46+
.el-dropdown-menu__item:not(.is-disabled):focus {
47+
background-color: var(--Gray-50);
48+
color: var(--Gray-800);
49+
}
50+
51+
.el-dropdown-menu__item.is-disabled {
52+
color: var(--Gray-400);
53+
cursor: not-allowed;
54+
}
55+
56+
57+
.el-dropdown-menu__divider {
58+
margin: 4px 0;
59+
border-top: 1px solid var(--Gray-100);
60+
}
61+
62+
63+
.el-icon.el-icon--right {
64+
font-size: 14px;
65+
margin-left: 8px;
66+
}
67+
68+
69+
.el-dropdown .el-button .el-icon {
70+
font-size: 14px;
71+
}

‎frontend/src/components/shared/BranchDropdown.vue‎

Lines changed: 72 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,19 @@
11
<template>
22
<div>
3-
<el-dropdown :max-height="300">
4-
<el-button type="default">
5-
<SvgIcon
6-
name="branch"
7-
class="mr-1"
8-
/>
9-
{{ currentBranch }}
10-
<el-icon class="ml-1 el-icon--right">
11-
<arrow-down />
12-
</el-icon>
13-
</el-button>
3+
<el-dropdown :max-height="300" class="branch-dropdown">
4+
<CsgButton
5+
class="btn btn-secondary-gray btn-sm"
6+
:name="currentBranch"
7+
svgName="chevron-down"
8+
svgPosition="right"
9+
/>
1410
<template #dropdown>
15-
<el-dropdown-menu>
11+
<el-dropdown-menu class="branch-dropdown-menu">
1612
<el-dropdown-item
1713
v-for="branch in branches"
1814
:key="branch.name"
1915
@click="handleClick(branch.name)"
16+
class="branch-dropdown-item"
2017
>
2118
{{ branch.name }}
2219
</el-dropdown-item>
@@ -76,3 +73,66 @@
7673
fetchBranches()
7774
})
7875
</script>
76+
77+
<style scoped>
78+
.branch-button {
79+
border: 1px solid var(--Gray-300);
80+
border-radius: 8px;
81+
padding: 10px 12px !important;
82+
height: auto !important;
83+
font-size: 14px;
84+
font-weight: 400;
85+
color: var(--Gray-700);
86+
background-color: white;
87+
transition: all 0.3s;
88+
display: flex;
89+
align-items: center;
90+
gap: 6px;
91+
line-height: 1;
92+
}
93+
94+
.branch-button:hover {
95+
border-color: var(--Gray-300) !important;
96+
background-color: var(--Gray-50) !important;
97+
color: var(--Gray-800) !important;
98+
}
99+
100+
:deep(.branch-dropdown-menu) {
101+
border-radius: 8px;
102+
padding: 4px;
103+
min-width: 200px;
104+
border: 1px solid var(--Gray-200);
105+
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
106+
}
107+
108+
:deep(.branch-dropdown-item) {
109+
padding: 8px 16px;
110+
font-size: 14px;
111+
color: var(--Gray-700);
112+
border-radius: 6px;
113+
margin: 2px 2px;
114+
}
115+
116+
:deep(.branch-dropdown-item:hover) {
117+
background-color: var(--Gray-50);
118+
color: var(--Gray-800);
119+
}
120+
121+
:deep(.branch-dropdown-item.selected) {
122+
color: var(--Gray-50);
123+
font-weight: 500;
124+
}
125+
126+
:deep(.el-icon) {
127+
font-size: 14px;
128+
margin: 0 0 0 6px;
129+
}
130+
131+
.mr-1\.5 {
132+
margin-right: 6px;
133+
}
134+
135+
.ml-1\.5 {
136+
margin-left: 6px;
137+
}
138+
</style>

‎frontend/src/components/shared/FileList.vue‎

Lines changed: 26 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div class="min-h-[300px] py-8 md:px-5">
3-
<div class="flex items-center justify-between">
3+
<div class="flex items-center justify-between px-1">
44
<div class="flex items-center flex-wrap gap-4">
55
<BranchDropdown @changeBranch="changeBranch"
66
:current-branch="currentBranch" />
@@ -18,23 +18,36 @@
1818
<el-avatar :size="24" class="mr-1" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
1919
1 {{ $t('all.contributors') }}
2020
</div>
21-
<a @click.prevent="goToCommits"
22-
class="ml-4 flex items-center px-4 py-[5px] border border-gray-200 rounded-full cursor-pointer">
23-
<SvgIcon name="commits" class="mr-2" />
24-
{{ $t('all.commits') }}
25-
</a>
21+
<CsgButton
22+
class="btn btn-secondary-gray btn-sm"
23+
:name="$t('all.commits')"
24+
svgName="commits"
25+
svgPosition="left"
26+
@click="goToCommits"
27+
/>
2628
<el-dropdown v-if="canWrite" class="ml-4">
27-
<el-button type="default">
28-
+ {{ $t('all.addFile') }}
29-
<el-icon class="el-icon--right pl-1"><arrow-down /></el-icon>
30-
</el-button>
29+
<CsgButton
30+
class="btn btn-secondary-gray btn-sm !hover:text-inherit"
31+
:name="$t('all.addFile')"
32+
svgName="navbar-new"
33+
/>
3134
<template #dropdown>
3235
<el-dropdown-menu>
3336
<a @click="goToNewFile">
34-
<el-dropdown-item>{{ $t('all.createNewFile') }}</el-dropdown-item>
37+
<el-dropdown-item>
38+
<div class="flex items-center gap-2">
39+
<SvgIcon name="add-file" class="w-4 h-4" />
40+
{{ $t('all.createNewFile') }}
41+
</div>
42+
</el-dropdown-item>
3543
</a>
3644
<a @click="goToUploadFile">
37-
<el-dropdown-item>{{ $t('all.uploadFile') }}</el-dropdown-item>
45+
<el-dropdown-item>
46+
<div class="flex items-center gap-2">
47+
<SvgIcon name="upload-file" class="w-4 h-4" />
48+
{{ $t('all.uploadFile') }}
49+
</div>
50+
</el-dropdown-item>
3851
</a>
3952
</el-dropdown-menu>
4053
</template>
@@ -142,7 +155,7 @@
142155
import BranchDropdown from './BranchDropdown.vue';
143156
import useFetchApi from '../../packs/useFetchApi'
144157
import { useRepoTabStore } from '../../stores/RepoTabStore'
145-
import { createAndClickAnchor, beiJingTimeParser, ToNotFoundPage, ToUnauthorizedPage } from '../../packs/utils'
158+
import { createAndClickAnchor, beiJingTimeParser, ToNotFoundPage, ToUnauthorizedPage } from '../../packs/utils';
146159
147160
const props = defineProps({
148161
// currentBranch: String,

‎frontend/src/main.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import * as ElementPlusIconsVue from '@element-plus/icons-vue'
88

99
import 'element-plus/dist/index.css'
1010
import './assets/stylesheets/element-plus/_variables.css'
11+
import "./assets/stylesheets/element-plus/index.css";
12+
import "./assets/stylesheets/element-plus/dropdown.css";
1113
import './assets/stylesheets/markdown.css'
1214
import './style.css'
1315
import { createWebHistory, createRouter } from "vue-router";

0 commit comments

Comments
 (0)