Commit aaa91365 authored by Anton Koch's avatar Anton Koch

Merge branch 'shared-on-page-view-settings' into 'master'

Shared: page sub nav changes

See merge request !13
parents 8daecdde dd68d002
Pipeline #11869 passed with stage
in 7 minutes and 52 seconds
<template lang="pug"> <template lang="pug">
div div
template(v-for="b in breadcrumbs") template(v-for="(b, index) in breadcrumbs")
q-icon(name="chevron_right") q-icon.icon-color-inactive(v-if="index > 0", name="chevron_right")
q-btn(v-if="b.name", @click="() => {$router.push({ name: b.name, params: b.params })}", :label="b.label", flat) q-btn(v-if="b.name", @click="() => {$router.push({ name: b.name, params: b.params })}", :label="b.label", flat)
q-btn(v-else, :label="b.label", flat) q-btn(v-else, :label="b.label", flat)
......
<template lang="pug"> <template lang="pug">
div div
template(v-if="getButtons()") template(v-if="currentConfig")
q-btn.q-mr-sm( q-btn.q-mr-sm(
v-for="b in getButtons()", v-if="currentConfig.navLinks",
@click="$router.push({ name: b.name, params: { uuid: $route.params.uuid } })", v-for="b in currentConfig.navLinks",
:class="$route.name === b.name ? 'text-primary' : ''", @click="$router.push({ name: b.name, params: { uuid: $route.params.uuid } })",
:label="b.label", :class="$route.name === b.name ? 'text-primary' : ''",
flat :label="b.label",
) flat
)
template(v-if="currentConfig.specialFunctions")
.ui-border-left.inline-block.q-pl-sm
template(v-if="currentSpecialFunctions", v-for="f in currentSpecialFunctions")
q-btn(v-if="f.type === 'popover'", :icon="f.icon", :class="f.iconClass", flat)
q-popover
q-list
q-item(v-for="i in f.items")
q-checkbox(
v-model="models[i.model]",
:label="i.label",
:class="i.class",
@input="i.onInput"
)
q-btn(v-if="f.type === 'toggle'", @click="f.onToggle", :class="[f.model === true ? 'bg-primary text-white' : '']", flat)
q-icon(v-if="f.icon", :name="f.icon", :class="f.iconClass")
</template> </template>
<script> <script>
import { mapGetters } from 'vuex'
export default { export default {
name: 'breadcrumb-nav', name: 'breadcrumb-nav',
...@@ -20,58 +40,174 @@ ...@@ -20,58 +40,174 @@
}, },
data () { data () {
return { return {
buttons: { currentConfig: undefined,
timeline: [ models: {
{ annotationListVisibility: undefined,
name: 'piecemaker.timelines.show', swimLaneVisibility: undefined,
label: 'Videos' annotationDetailsVisibility: undefined,
}, showSourceBrowser: true
{ },
name: 'piecemaker.timelines.annotate', config: {
label: 'Live Annotate' grid: {
}, navLinks: [
{ {
name: 'piecemaker.timelines.edit', name: 'mosys.grids.show',
label: 'Edit' label: 'Preview'
}, },
{ {
name: 'piecemaker.timelines.search', name: 'mosys.grids.annotate',
label: 'Search' label: 'Add cells'
},
{
name: 'mosys.grids.edit',
label: 'Edit'
}
],
specialFunctions: {
'mosys.grids.annotate': [
{
type: 'toggle',
icon: 'folder_open',
model: this.$store.state.mosys.showSources,
onToggle: () => {
this.$store.commit('mosys/toggleSources')
}
}
]
} }
], },
video: [ timeline: {
{ navLinks: [
name: 'piecemaker.videos.annotate', {
label: 'Annotate' name: 'piecemaker.timelines.show',
}, label: 'Videos'
{ },
name: 'piecemaker.videos.edit', {
label: 'Edit' name: 'piecemaker.timelines.annotate',
}, label: 'Live Annotate'
{ },
name: 'piecemaker.videos.sync', {
label: 'Sync' name: 'piecemaker.timelines.edit',
label: 'Edit'
},
{
name: 'piecemaker.timelines.search',
label: 'Search'
}
]
},
video: {
navLinks: [
{
name: 'piecemaker.videos.annotate',
label: 'Annotate'
},
{
name: 'piecemaker.videos.edit',
label: 'Edit'
},
{
name: 'piecemaker.videos.sync',
label: 'Sync'
}
],
specialFunctions: {
'piecemaker.videos.annotate': [
{
type: 'popover',
icon: 'view_quilt',
iconClass: 'flip-horizontal',
items: [
{
label: 'Annotation List',
model: 'annotationListVisibility',
onInput: () => {
this.$store.commit('swimLaneSettings/setVisibilityDrawer')
}
},
{
label: 'Swim Lane',
model: 'swimLaneVisibility',
onInput: () => {
this.$store.commit('swimLaneSettings/setVisibilitySwimlanes')
}
},
{
label: 'Annotation Details',
model: 'annotationDetailsVisibility',
class: 'q-pl-lg',
onInput: () => {
this.$store.commit('swimLaneSettings/setVisibilityDetails')
}
}
]
}
]
} }
] }
} }
} }
}, },
computed: { computed: {
...mapGetters({
// user: 'auth/getUserState',
// isMobile: 'globalSettings/getIsMobile',
visibilitySwimlanes: 'swimLaneSettings/getVisibilitySwimlanes',
visibilityDetails: 'swimLaneSettings/getVisibilityDetails',
visibilityDrawer: 'swimLaneSettings/getVisibilityDrawer'
}),
currentSpecialFunctions () {
if (this.$route.name in this.currentConfig.specialFunctions) {
return this.currentConfig.specialFunctions[this.$route.name]
}
else return undefined
}
}, },
mounted () { mounted () {
this.models.swimLaneVisibility = this.visibilitySwimlanes
this.models.annotationDetailsVisibility = this.visibilityDetails
this.models.annotationListVisibility = this.visibilityDrawer
// this.models.showSourceBrowser = this.$store.state.mosys.showSources
this.currentConfig = this.getConfig()
}, },
watch: { watch: {
// Watchers are in case the value is toggled from somewhere else than this component
visibilityDrawer (val) {
this.models.annotationListVisibility = val
},
visibilitySwimlanes (val) {
this.models.swimLaneVisibility = val
},
visibilityDetails (val) {
this.models.annotationDetailsVisibility = val
}
// '$store.state.mosys.showSources' (val) {
// this.models.showSourceBrowser = val
// }
}, },
methods: { methods: {
toProperCase (t) { toProperCase (t) {
return t.charAt(0).toUpperCase() + t.substr(1).toLowerCase() return t.charAt(0).toUpperCase() + t.substr(1).toLowerCase()
}, },
getButtons () { // getButtons () {
if (this.type in this.buttons) { // if (this.type in this.buttons) {
return this.buttons[this.type] // return this.buttons[this.type]
// }
// else return undefined
// },
getConfig () {
if (this.type in this.config) {
return this.config[this.type]
} }
else return undefined else return undefined
} }
// getSpecialFunctions (config) {
// if (this.$route.name in config.specialFunctions) {
// return config.specialFunctions[this.$route.name]
// }
// else return undefined
// }
} }
} }
</script> </script>
......
...@@ -5,11 +5,11 @@ ...@@ -5,11 +5,11 @@
<!--q-btn(@click="goBack()", icon="keyboard_backspace", flat, no-ripple,--> <!--q-btn(@click="goBack()", icon="keyboard_backspace", flat, no-ripple,-->
<!--:class="{'back-button': !targetBackButton}")--> <!--:class="{'back-button': !targetBackButton}")-->
<!--q-chip(floating, color="transparent", text-color="primary") 2--> <!--q-chip(floating, color="transparent", text-color="primary") 2-->
// menu button // menu button
q-btn(@click="handlerMenuDrawer", icon="menu", flat) q-btn(@click="handlerMenuDrawer", icon="menu", flat)
q-toolbar-title q-toolbar-title
breadcrumb-nav(:timeline="timeline", :videoMetadata="videoMetadata", :grid="grid") breadcrumb-nav(:timeline="timeline", :videoMetadata="videoMetadata", :grid="grid")
page-sub-nav(v-if="getSubNavType()", :type="getSubNavType()") page-sub-nav(v-if="getSubNavType()", :type="getSubNavType()")
// drawer // drawer
...@@ -277,7 +277,8 @@ ...@@ -277,7 +277,8 @@
'piecemaker.timelines.edit', 'piecemaker.timelines.edit',
'piecemaker.timelines.search', 'piecemaker.timelines.search',
'piecemaker.timelines.show', 'piecemaker.timelines.show',
'piecemaker.videos.list' 'piecemaker.videos.list',
'piecemaker.videos.create'
] ]
}, },
activeUserButtons: [], activeUserButtons: [],
...@@ -366,6 +367,7 @@ ...@@ -366,6 +367,7 @@
getSubNavType () { getSubNavType () {
if (this.timeline && !this.videoMetadata) return 'timeline' if (this.timeline && !this.videoMetadata) return 'timeline'
else if (this.videoMetadata) return 'video' else if (this.videoMetadata) return 'video'
else if (this.grid) return 'grid'
else return undefined else return undefined
}, },
checkRoute (route) { checkRoute (route) {
......
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