apache/cloudstack
1
0
Fork 0
mirror of https://github.com/apache/cloudstack.git synced 2025-11-03 04:12:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

breadcrumb: de-duplicate and reuse component

Browse Source 
Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
This commit is contained in:
Rohit Yadav 2019-10-12 22:52:07 +05:30
parent 10cd8fcb3e
commit cfabc88485
4 changed files with 32 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
ui/src/components/page/GlobalHeader.vue
View File

@ -11,26 +11,7 @@
class="trigger"
:type="collapsed ? 'menu-unfold' : 'menu-fold'"
@click="toggle"/>
<a-breadcrumb class="breadcrumb" v-if="device === 'desktop'">
<a-breadcrumb-item v-for="(item, index) in breadList" :key="index">
<router-link
v-if="item.name"
:to="{ path: item.path === '' ? '/' : item.path }"
>
<a-icon v-if="index == 0" :type="item.meta.icon" />
{{ $t(item.meta.title) }}
</router-link>
<span v-else-if="$route.params.id">
{{ $route.params.id }}
<a-button shape="circle" type="dashed" size="small" v-clipboard:copy="$route.params.id">
<a-icon type="copy" style="margin-left: -1px; margin-top: 1px"/>
</a-button>
</span>
<span v-else>{{ $t(tem.meta.title) }}</span>
</a-breadcrumb-item>
</a-breadcrumb>
<breadcrumb v-if="device !== 'mobile'" />
<user-menu></user-menu>
</div>
<div v-else :class="['top-nav-header-index', theme]">
@ -49,19 +30,7 @@
:type="collapsed ? 'menu-fold' : 'menu-unfold'"
@click="toggle"></a-icon>
</div>
<a-breadcrumb class="breadcrumb" v-if="device !== 'mobile'">
<a-breadcrumb-item v-for="(item, index) in breadList" :key="index">
<router-link
v-if="item.name"
:to="{ path: item.path === '' ? '/' : item.path }"
>
<a-icon v-if="index == 0" :type="item.meta.icon" />
{{ item.meta.title }}
</router-link>
<span v-else-if="$route.params.id">{{ $route.params.id }}</span>
<span v-else>{{ item.meta.title }}</span>
</a-breadcrumb-item>
</a-breadcrumb>
<breadcrumb v-if="device !== 'mobile'" />
<user-menu class="header-index-right"></user-menu>
</div>
</div>
@ -70,17 +39,19 @@
</template>
<script>
import UserMenu from '../tools/UserMenu'
import SMenu from '../menu/'
import Breadcrumb from '@/components/widgets/Breadcrumb'
import Logo from '../tools/Logo'
import SMenu from '../menu/'
import UserMenu from '../tools/UserMenu'
import { mixin } from '@/utils/mixin.js'
export default {
name: 'GlobalHeader',
components: {
SMenu,
Breadcrumb,
Logo,
SMenu,
UserMenu
},
mixins: [mixin],
@ -112,29 +83,13 @@ export default {
},
data () {
return {
headerBarFixed: false,
breadList: []
}
},
created () {
this.getBreadcrumb()
},
watch: {
$route () {
this.getBreadcrumb()
headerBarFixed: false
}
},
mounted () {
window.addEventListener('scroll', this.handleScroll)
},
methods: {
getBreadcrumb () {
this.breadList = []
this.name = this.$route.name
this.$route.matched.forEach((item) => {
this.breadList.push(item)
})
},
handleScroll () {
if (this.autoHideHeader) {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
@ -163,19 +118,6 @@ export default {
.ant-breadcrumb {
display: inline;
vertical-align: text-bottom;
}
.ant-breadcrumb .anticon {
margin-top: -3px;
margin-left: 12px;
}
.anticon-home {
font-size: 14px;
}
.anticon {
vertical-align: middle;
}
}

37
ui/src/components/widgets/Breadcrumb.vue
View File

@ -1,23 +1,21 @@
<template>
<a-breadcrumb class="breadcrumb">
<a-card :bordered="true">
<a-breadcrumb-item v-for="(item, index) in breadList" :key="index">
<router-link
v-if="item.name"
:to="{ path: item.path === '' ? '/' : item.path }"
>
<a-icon v-if="index == 0" :type="item.meta.icon" />
{{ $t(item.meta.title) }}
</router-link>
<span v-else-if="$route.params.id">
{{ $route.params.id }}
<a-button shape="circle" type="dashed" size="small" v-clipboard:copy="$route.params.id">
<a-icon type="copy" style="margin-left: -1px; margin-top: 1px"/>
</a-button>
</span>
<span v-else>{{ $t(item.meta.title) }}</span>
</a-breadcrumb-item>
</a-card>
<a-breadcrumb-item v-for="(item, index) in breadList" :key="index">
<router-link
v-if="item && item.name"
:to="{ path: item.path === '' ? '/' : item.path }"
>
<a-icon v-if="index == 0" :type="item.meta.icon" />
{{ $t(item.meta.title) }}
</router-link>
<span v-else-if="$route.params.id">
{{ $route.params.id }}
<a-button shape="circle" type="dashed" size="small" v-clipboard:copy="$route.params.id">
<a-icon type="copy" style="margin-left: -1px; margin-top: 1px"/>
</a-button>
</span>
<span v-else>{{ $t(item.meta.title) }}</span>
</a-breadcrumb-item>
</a-breadcrumb>
</template>
@ -43,8 +41,8 @@ export default {
},
methods: {
getBreadcrumb () {
this.breadList = []
this.name = this.$route.name
this.breadList = []
this.$route.matched.forEach((item) => {
this.breadList.push(item)
})
@ -61,5 +59,6 @@ export default {
.ant-breadcrumb .anticon {
margin-left: 8px;
vertical-align: text-bottom;
}
</style>

4
ui/src/utils/device.js
View File

@ -28,6 +28,6 @@ export const deviceEnquire = function (callback) {
// screen and (max-width: 1087.99px)
enquireJs
.register('screen and (max-width: 576px)', matchMobile)
.register('screen and (min-width: 576px) and (max-width: 1199px)', matchTablet)
.register('screen and (min-width: 1200px)', matchDesktop)
.register('screen and (min-width: 576px) and (max-width: 1366px)', matchTablet)
.register('screen and (min-width: 1367px)', matchDesktop)
}

6
ui/src/views/AutogenView.vue
View File

@ -1,6 +1,8 @@
<template>
<div>
<breadcrumb v-if="device !== 'desktop'" class="mobile-breadcrumb" />
<a-card class="mobile-breadcrumb" v-if="device === 'mobile'">
<breadcrumb />
</a-card>
<a-row>
<a-col :span="18">
<a-tooltip placement="bottom" v-for="(action, actionIndex) in actions" :key="actionIndex" v-if="action.api in $store.getters.apis && ((!dataView && (action.listView || action.groupAction && selectedRowKeys.length > 0)) || (dataView && action.dataView))">
@ -576,7 +578,7 @@ export default {
margin-left: -16px;
margin-right: -16px;
margin-top: -16px;
padding-bottom: 16px;
margin-bottom: 12px;
}
.row-element {