Skip to content

Commit 0f1018e

Browse files
zhendizhendi
authored
Update branch dropdown (#213)
* update branch dropdown * update icon * code indent * update changeBranch * update filelist changeBranch
1 parent 9cd4957 commit 0f1018e

File tree

4 files changed

+60
-36
lines changed

4 files changed

+60
-36
lines changed

‎app/javascript/components/shared/Blob.vue

+5-18
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,9 @@
22
<div class="min-h-[300px] py-8 md:px-5">
33
<div class="flex items-center justify-between">
44
<div class="flex items-center flex-wrap gap-4">
5-
<div>
6-
<el-dropdown split-button>
7-
<svg class="mr-1" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
8-
<circle cx="8.75" cy="2.25" r="1.75" stroke="#606266" stroke-linecap="round" stroke-linejoin="round"/>
9-
<circle cx="3.25" cy="9.5" r="1.75" stroke="#606266" stroke-linecap="round" stroke-linejoin="round"/>
10-
<path d="M3.25 4L3.25 7.75" stroke="#606266" stroke-linecap="round" stroke-linejoin="round"/>
11-
<circle cx="3.25" cy="2.25" r="1.75" stroke="#606266" stroke-linecap="round" stroke-linejoin="round"/>
12-
<path d="M3.25 7.75V7.75C3.25 6.64543 4.14543 5.75 5.25 5.75H7C7.9665 5.75 8.75 4.9665 8.75 4V4" stroke="#606266" stroke-linecap="round" stroke-linejoin="round"/>
13-
</svg>
14-
{{ currentBranch }}
15-
<template #dropdown>
16-
<el-dropdown-menu>
17-
<el-dropdown-item v-for="branch in branches" :key="branch.name" @click="changeBranch(branch.name)">{{ branch.name }}</el-dropdown-item>
18-
</el-dropdown-menu>
19-
</template>
20-
</el-dropdown>
21-
</div>
5+
<BranchDropdown @changeBranch="changeBranch"
6+
:current-branch="currentBranch"
7+
:branches="branches" />
228
<el-breadcrumb separator="/">
239
<el-breadcrumb-item>
2410
<a :href="`/${prefixPath}/${namespacePath}/files/${currentBranch}`">{{ namespacePath.split('/')[1] }}</a>
@@ -138,6 +124,7 @@
138124
import MarkdownViewer from './viewers/MarkdownViewer.vue';
139125
import TextViewer from './viewers/TextViewer.vue';
140126
import CodeViewer from './viewers/CodeViewer.vue';
127+
import BranchDropdown from './BranchDropdown.vue';
141128
import {ElMessage} from "element-plus";
142129
143130
const props = defineProps({
@@ -197,7 +184,7 @@
197184
198185
const changeBranch = (branch) => {
199186
if (branch !== props.currentBranch) {
200-
window.location.href = `/${prefixPath}/${props.namespacePath}/files/${branch}`
187+
window.location.href = `/${prefixPath}/${props.namespacePath}/blob/${branch}/${props.currentPath}`
201188
}
202189
}
203190

‎app/javascript/components/shared/BranchDropdown.vue

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<template>
2+
<div>
3+
<el-dropdown>
4+
<el-button type="default">
5+
<SvgIcon name="branch" class="mr-1" />
6+
{{ currentBranch }}
7+
<el-icon class="ml-1 el-icon--right">
8+
<arrow-down />
9+
</el-icon>
10+
</el-button>
11+
<template #dropdown>
12+
<el-dropdown-menu>
13+
<el-dropdown-item
14+
v-for="branch in branches"
15+
:key="branch.name"
16+
@click="handleClick(branch.name)"
17+
>
18+
{{ branch.name }}
19+
</el-dropdown-item>
20+
</el-dropdown-menu>
21+
</template>
22+
</el-dropdown>
23+
</div>
24+
</template>
25+
26+
<script setup>
27+
const props = defineProps({
28+
currentBranch: String,
29+
branches: Array
30+
})
31+
32+
const emit = defineEmits(['changeBranch'])
33+
34+
const handleClick = (branch) => {
35+
emit('changeBranch', branch)
36+
}
37+
</script>

‎app/javascript/components/shared/FileList.vue

+11-18
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,10 @@
11
<template>
22
<div class="min-h-[300px] py-8 md:px-5">
33
<div class="flex items-center justify-between">
4-
<div class="flex items-center flex-wrap">
5-
<div class="mr-4">
6-
<el-dropdown split-button>
7-
<svg class="mr-1" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
8-
<circle cx="8.75" cy="2.25" r="1.75" stroke="#606266" stroke-linecap="round" stroke-linejoin="round"/>
9-
<circle cx="3.25" cy="9.5" r="1.75" stroke="#606266" stroke-linecap="round" stroke-linejoin="round"/>
10-
<path d="M3.25 4L3.25 7.75" stroke="#606266" stroke-linecap="round" stroke-linejoin="round"/>
11-
<circle cx="3.25" cy="2.25" r="1.75" stroke="#606266" stroke-linecap="round" stroke-linejoin="round"/>
12-
<path d="M3.25 7.75V7.75C3.25 6.64543 4.14543 5.75 5.25 5.75H7C7.9665 5.75 8.75 4.9665 8.75 4V4" stroke="#606266" stroke-linecap="round" stroke-linejoin="round"/>
13-
</svg>
14-
{{ currentBranch }}
15-
<template #dropdown>
16-
<el-dropdown-menu>
17-
<el-dropdown-item v-for="branch in branches" :key="branch.name" @click="$emit('change-branch', branch.name)">{{ branch.name }}</el-dropdown-item>
18-
</el-dropdown-menu>
19-
</template>
20-
</el-dropdown>
21-
</div>
4+
<div class="flex items-center flex-wrap gap-4">
5+
<BranchDropdown @changeBranch="changeBranch"
6+
:current-branch="currentBranch"
7+
:branches="branches" />
228
<el-breadcrumb separator="/">
239
<el-breadcrumb-item>
2410
<a :href="`/${prefixPath}/${namespacePath}/files/${currentBranch}`">{{ namespacePath.split('/')[1] }}</a>
@@ -160,6 +146,7 @@
160146
import { format } from 'timeago.js';
161147
import { ElMessage } from "element-plus"
162148
import { useI18n } from 'vue-i18n'
149+
import BranchDropdown from './BranchDropdown.vue';
163150
164151
const props = defineProps({
165152
branches: Object,
@@ -178,6 +165,12 @@
178165
const lastCommitAvatar = ref('https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png')
179166
const prefixPath = document.location.pathname.split('/')[1]
180167
168+
const emit = defineEmits(['changeBranch'])
169+
170+
const changeBranch = (branch) => {
171+
emit('changeBranch', branch)
172+
}
173+
181174
const extractNameFromPath = (path) => {
182175
const parts = path.split('/')
183176
return parts[parts.length - 1]

‎public/images/icons/branch.svg

+7
Loading

0 commit comments

Comments
 (0)