Commit dd68d002 authored by Mathias Bär's avatar Mathias Bär Committed by Anton Koch

- introduced menu for display settings. at the moment only for video.annotate

- removed buttons to toggle visibilty of components in video.annotate
- FIXME for expand button in swim lane. should not be focusable.
parent 8daecdde
<template lang="pug">
div
template(v-for="b in breadcrumbs")
q-icon(name="chevron_right")
template(v-for="(b, index) in breadcrumbs")
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-else, :label="b.label", flat)
......
<template lang="pug">
div
template(v-if="getButtons()")
template(v-if="currentConfig")
q-btn.q-mr-sm(
v-for="b in getButtons()",
@click="$router.push({ name: b.name, params: { uuid: $route.params.uuid } })",
:class="$route.name === b.name ? 'text-primary' : ''",
:label="b.label",
flat
)
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
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>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'breadcrumb-nav',
......@@ -20,58 +40,174 @@
},
data () {
return {
buttons: {
timeline: [
{
name: 'piecemaker.timelines.show',
label: 'Videos'
},
{
name: 'piecemaker.timelines.annotate',
label: 'Live Annotate'
},
{
name: 'piecemaker.timelines.edit',
label: 'Edit'
},
{
name: 'piecemaker.timelines.search',
label: 'Search'
currentConfig: undefined,
models: {
annotationListVisibility: undefined,
swimLaneVisibility: undefined,
annotationDetailsVisibility: undefined,
showSourceBrowser: true
},
config: {
grid: {
navLinks: [
{
name: 'mosys.grids.show',
label: 'Preview'
},
{
name: 'mosys.grids.annotate',
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: [
{
name: 'piecemaker.videos.annotate',
label: 'Annotate'
},
{
name: 'piecemaker.videos.edit',
label: 'Edit'
},
{
name: 'piecemaker.videos.sync',
label: 'Sync'
},
timeline: {
navLinks: [
{
name: 'piecemaker.timelines.show',
label: 'Videos'
},
{
name: 'piecemaker.timelines.annotate',
label: 'Live Annotate'
},
{
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: {
...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 () {
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: {
// 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: {
toProperCase (t) {
return t.charAt(0).toUpperCase() + t.substr(1).toLowerCase()
},
getButtons () {
if (this.type in this.buttons) {
return this.buttons[this.type]
// getButtons () {
// if (this.type in this.buttons) {
// return this.buttons[this.type]
// }
// else return undefined
// },
getConfig () {
if (this.type in this.config) {
return this.config[this.type]
}
else return undefined
}
// getSpecialFunctions (config) {
// if (this.$route.name in config.specialFunctions) {
// return config.specialFunctions[this.$route.name]
// }
// else return undefined
// }
}
}
</script>
......
......@@ -5,11 +5,11 @@
<!--q-btn(@click="goBack()", icon="keyboard_backspace", flat, no-ripple,-->
<!--:class="{'back-button': !targetBackButton}")-->
<!--q-chip(floating, color="transparent", text-color="primary") 2-->
// menu button
q-btn(@click="handlerMenuDrawer", icon="menu", flat)
q-toolbar-title
breadcrumb-nav(:timeline="timeline", :videoMetadata="videoMetadata", :grid="grid")
page-sub-nav(v-if="getSubNavType()", :type="getSubNavType()")
// drawer
......@@ -277,7 +277,8 @@
'piecemaker.timelines.edit',
'piecemaker.timelines.search',
'piecemaker.timelines.show',
'piecemaker.videos.list'
'piecemaker.videos.list',
'piecemaker.videos.create'
]
},
activeUserButtons: [],
......@@ -366,6 +367,7 @@
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) {
......
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