- 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.

navigation/BreadcrumbNav.vue

 <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)
 

navigation/PageSubNav.vue

 <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>

navigation/UserNav.vue

@@ -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) {