Skip to content

Q
Quasar Components Shared
Commit 3b081396 authored by Mathias Bär's avatar Mathias Bär Committed by Anton Koch
Browse files
Options

Shared: PageSubNav fixes

parent d088fe59
Hide whitespace changes
Inline Side-by-side
Showing with 211 additions and 28 deletions
navigation/BreadcrumbNav.vue
View file @ 3b081396
......@@ -18,19 +18,19 @@
return {
excludeTermns: ['show', 'list'],
topLevel: {
'piecemaker': {
piecemaker: {
label: 'Piecemaker',
route: 'piecemaker.timelines.list'
},
'mosys': {
mosys: {
label: 'Mosys',
route: 'mosys.grids.list'
},
'documents': {
documents: {
label: 'Documents',
route: 'documents.list'
},
'users': {
users: {
label: 'Account Settings',
route: 'users.manage'
}
......
navigation/PageSubNav.vue
View file @ 3b081396
<template lang="pug">
div
template(v-if="currentConfig")
q-btn.q-mr-sm(
v-if="currentConfig.navLinks",
v-for="b in currentConfig.navLinks",
@click="$router.push({ name: b.name, params: { uuid: $route.params.uuid } })",
:class="$route.name === b.name ? 'text-primary' : ''",
:label="b.label",
flat
)
template(v-if="currentConfig.specialFunctions")
.ui-border-left.inline-block.q-pl-sm
.inline-block(:class="currentConfig.navLinks ? ['ui-border-right', 'q-pr-sm'] : ''")
template(v-if="currentSpecialFunctions", v-for="f in currentSpecialFunctions")
q-btn(v-if="f.type === 'popover'", :icon="f.icon", :class="f.iconClass", flat)
// popover
q-btn(v-if="f.type === 'popover'", :icon="f.icon", :class="f.iconClass", :key="f.name", :color="f.color || 'grey'")
q-popover
q-list
q-item(v-for="i in f.items")
......@@ -25,9 +18,42 @@
@input="i.onInput"
)
q-btn(v-if="f.type === 'toggle'", @click="f.onToggle", :class="[f.model === true ? 'bg-primary text-white' : '']", flat)
// toggle
q-btn(
v-if="f.type === 'toggle'",
@click="f.onToggle",
:class="[f.model === true ? 'bg-primary text-white' : '']",
:color="f.color || 'grey'"
)
q-icon(v-if="f.icon", :name="f.icon", :class="f.iconClass")
// link
template(v-if="f.type === 'link'")
template(v-if="f.icon")
q-btn(
@click="onClick(f)",
:color="f.color || 'grey'",
:icon="f.icon",
:label="f.label",
:key="f.name"
)
template(v-else)
q-btn(
@click="onClick(f)",
:label="f.label",
:color="f.color || 'grey'"
)
q-btn.q-ml-sm(
v-if="currentConfig.navLinks",
v-for="b in currentConfig.navLinks",
@click="onClick(b)",
:class="[$route.name === b.name ? 'text-primary' : '']",
:label="b.label",
:color="b.color",
flat,
)
</template>
<script>
......@@ -35,7 +61,7 @@
export default {
name: 'breadcrumb-nav',
props: ['type'],
props: [],
components: {
},
data () {
......@@ -47,7 +73,60 @@
annotationDetailsVisibility: undefined,
showSourceBrowser: true
},
routesForConfig: {
piecemaker: [
'piecemaker.timelines.list'
],
timeline: [
'piecemaker.timelines.annotate',
'piecemaker.timelines.edit',
'piecemaker.timelines.search',
'piecemaker.timelines.show',
'piecemaker.videos.create'
],
timelineCreate: [
'piecemaker.timelines.create'
],
video: [
'piecemaker.videos.annotate',
'piecemaker.videos.edit',
'piecemaker.videos.sync'
],
videoCreate: [
'piecemaker.videos.create'
],
mosys: [
'mosys.grids.list'
],
grid: [
'mosys.grids.annotate',
'mosys.grids.show',
'mosys.grids.edit'
],
gridCreate: [
'mosys.grids.create'
],
document: [
'documents.list'
],
documentCreate: [
'documents.create'
]
},
config: {
mosys: {
specialFunctions: {
'mosys.grids.list': [
{
type: 'link',
label: this.$t('buttons.create_grid'),
color: 'primary',
name: 'mosys.grids.create',
icon: 'add'
}
]
}
},
grid: {
navLinks: [
{
......@@ -76,6 +155,27 @@
]
}
},
gridCreate: {
navLinks: [
{
name: 'mosys.grids.list',
label: 'Cancel'
}
]
},
piecemaker: {
specialFunctions: {
'piecemaker.timelines.list': [
{
type: 'link',
label: this.$t('buttons.create_timeline'),
color: 'primary',
name: 'piecemaker.timelines.create',
icon: 'add'
}
]
}
},
timeline: {
navLinks: [
{
......@@ -94,7 +194,32 @@
name: 'piecemaker.timelines.search',
label: 'Search'
}
]
],
specialFunctions: {
'piecemaker.timelines.show': [
{
type: 'link',
label: this.$t('buttons.add_video'),
color: 'primary',
name: 'piecemaker.videos.create',
icon: 'add',
params: {
'timelineUuid': 'uuid'
}
}
]
}
},
timelineCreate: {
specialFunctions: {
'piecemaker.timelines.create': [
{
type: 'link',
label: 'Cancel',
name: 'piecemaker.timelines.list'
}
]
}
},
video: {
navLinks: [
......@@ -144,6 +269,44 @@
}
]
}
},
videoCreate: {
specialFunctions: {
'piecemaker.videos.create': [
{
type: 'link',
label: 'Cancel',
name: 'piecemaker.timelines.show',
params: {
'uuid': 'timelineUuid'
}
}
]
}
},
document: {
specialFunctions: {
'documents.list': [
{
type: 'link',
label: this.$t('buttons.create_document'),
color: 'primary',
name: 'documents.create',
icon: 'add'
}
]
}
},
documentCreate: {
specialFunctions: {
'documents.create': [
{
type: 'link',
label: 'Cancel',
name: 'documents.list'
}
]
}
}
}
}
......@@ -172,7 +335,8 @@
this.currentConfig = this.getConfig()
},
watch: {
// Watchers are in case the value is toggled from somewhere else than this component
// Watchers are in case the value is toggled from somewhere else
// than this component to keep the local models up to date
visibilityDrawer (val) {
this.models.annotationListVisibility = val
},
......@@ -181,6 +345,9 @@
},
visibilityDetails (val) {
this.models.annotationDetailsVisibility = val
},
'$route' () {
this.currentConfig = this.getConfig()
}
// '$store.state.mosys.showSources' (val) {
// this.models.showSourceBrowser = val
......@@ -191,10 +358,32 @@
return t.charAt(0).toUpperCase() + t.substr(1).toLowerCase()
},
getConfig () {
if (this.type in this.config) {
return this.config[this.type]
const name = this.$route.name
let config = null
for (let key in this.routesForConfig) {
let c = this.routesForConfig[key]
if (c.includes(name) && key in this.config) config = this.config[key]
}
else return undefined
return config
},
onClick (b) {
if (b.name) {
this.$router.push({ name: b.name, params: this.getParams(b.params) })
}
else {
this.$router.push({ path: '/' })
}
},
getParams (params) {
let p = {}
if (params) {
for (let key in params) {
if (params.hasOwnProperty(key)) {
p[key] = this.$route.params[params[key]] || undefined
}
}
}
return p
}
}
}
......
navigation/UserNav.vue
View file @ 3b081396
......@@ -10,7 +10,7 @@
q-toolbar-title
breadcrumb-nav(:timeline="timeline", :videoMetadata="videoMetadata", :grid="grid")
page-sub-nav(v-if="getSubNavType()", :type="getSubNavType()")
page-sub-nav
// drawer
q-layout-drawer.bg-dark(v-model="menuDrawer", content-class="bg-dark", overlay)
......@@ -374,12 +374,6 @@
}
},
methods: {
getSubNavType () {
if (this.timeline && !this.videoMetadata) return 'timeline'
else if (this.videoMetadata) return 'video'
else if (this.grid) return 'grid'
else return undefined
},
checkRoute (route) {
this.timeline = undefined
this.videoMetadata = undefined
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment