tab container vertical added

partials/CellEditor.vue

@@ -220,7 +220,7 @@
             error: false,
             errorMessage: '',
             value: 'scroll-list',
-            path: 'displaytype',
+            path: 'displayType',
             selectOptions: [
               {
                 label: 'Scroll List',
@@ -228,7 +228,7 @@
               },
               {
                 label: 'Tab List',
-                value: 'tab-list'
+                value: 'tabs'
               }
             ]
           }]

partials/GridEditorDefaultSource.vue

@@ -102,15 +102,6 @@
             error: false,
             errorMessage: 'Needs to be a valid URL',
             value: ''
-          },
-          {
-            inputType: 'text',
-            type: 'Annotation-List-Tabs',
-            label: 'Annotation List Cell Tabs',
-            help: 'Insert a Video UUID',
-            error: false,
-            errorMessage: '',
-            value: ''
           }
         ]
       }

partials/cells/CellAnnotationList.vue

 <template lang="pug">
   // annotation list
-  div.annotation-list(:class="{'display-preview': preview, 'display-full': display}"
+  div.annotation-list(:class="{'display-preview': preview, 'display-full': display}")
     template(v-if="display")
       template(v-if="video && video.body")
 
         //q-list-header
           q-item {{videoMeta.title}}
 
-        template(v-for="(annotation, index) in annotations")
-          q-item-separator(v-if="index > 0")
-
-          template(v-if="cell.allow_annotations && $store.state.auth.user && showAnnotationInput(index)")
-            q-item.annotation-input-container
-              q-input.annotation-input(type="textarea",
-              :max-height="200",
-              :min-rows="3"
-              style="width:100%",
-              v-model="newAnnotationText",
-              @keyup.native.enter="handleInputChanged",
-              stack-label="Leave Comment")
-            q-item-separator
-
-          q-item.annotation
-            a(:class="{'active': isAnnotationActive(annotation, index)}",
-            @click.prevent="event => {handleAnnotationClick(event, annotation, index)}")
-              .row.no-wrap
+        // should be => template(v-if="cell.displayType ==='tabs'")
+        template(v-if="displayType ==='tabs'")
+          .annotation-tabs-container.column
+            .annotation-tab(
+              v-for="(annotation, index) in annotations",
+              @click="event => {handleTabClick(event, annotation, index)}",
+              :class="{active: index === activeTabIdx}"
+              )
+              div {{index + 1}}
+          .annotation-content-container
+            q-item.annotation(v-for="(annotation, index) in annotations", v-show="index === activeTabIdx")
+              div
                 .date {{formatSelectorForList(annotation)}}
-                div
-                  <!--.author {{annotation.author.name}}-->
-                  .content {{annotation.body.value}}
+                div {{annotation.body.value}}
+
+        template(v-if="displayType ==='scroll-list'")
+
+          template(v-for="(annotation, index) in annotations")
+            q-item-separator(v-if="index > 0")
+
+            template(v-if="cell.allow_annotations && $store.state.auth.user && showAnnotationInput(index)")
+              q-item.annotation-input-container
+                q-input.annotation-input(type="textarea",
+                :max-height="200",
+                :min-rows="3"
+                style="width:100%",
+                v-model="newAnnotationText",
+                @keyup.native.enter="handleInputChanged",
+                stack-label="Leave Comment")
+              q-item-separator
+
+            q-item.annotation
+              a(:class="{'active': isAnnotationActive(annotation, index)}",
+              @click.prevent="event => {handleAnnotationClick(event, annotation, index)}")
+                .row.no-wrap
+                  .date {{formatSelectorForList(annotation)}}
+                  div
+                    <!--.author {{annotation.author.name}}-->
+                    .content {{annotation.body.value}}
 
       template(v-else)
         strong Loading annotations
@@ -67,7 +84,9 @@ export default {
       annotationTimes: [],
       inputIndex: 0,
       newAnnotationText: '',
-      staging: process.env.IS_STAGING
+      staging: process.env.IS_STAGING,
+      displayType: 'tabs', // TODO: this is fake. should be set in CellEditor => cell['displayType']
+      activeTabIdx: 0
     }
   },
   async mounted () {
@@ -138,6 +157,10 @@ export default {
     handleAnnotationClick (event, annotation, index) {
       this.$root.$emit('annotation-trigger', annotation, this.annotationTimes[index])
     },
+    handleTabClick (event, annotation, index) {
+      this.activeTabIdx = index
+      this.$root.$emit('annotation-trigger', annotation, this.annotationTimes[index])
+    },
     isAnnotationActive (annotation, index) {
       let i = 0
       while (i < this.annotations.length) {
@@ -225,7 +248,6 @@ export default {
 
 <style scoped lang="stylus">
   @import '~variables'
-
   .q-item
     font-size 1.125rem
     line-height 1.45em
@@ -289,14 +311,34 @@ export default {
   .q-item-separator-component
     background-color #222
 
-  /*.annotation-list.display-full*/
-    /*background-color #7f7f7f*/
-    /*&::-webkit-scrollbar*/
-      /*display: none !important*/
-  /*.annotation*/
-    /*.date*/
-    /*.author*/
-      /*color #b0b0b0*/
-  /*.q-item-separator-component*/
-    /*background-color #6f6f6f*/
+  .annotation-content-container
+    padding-right 66px
+
+  .annotation-tabs-container
+    background-color #252324
+    position: absolute
+    top: 0
+    right: 0
+    height 100%
+    width 66px
+    padding-left 1px
+    .annotation-tab
+      cursor: pointer
+      line-height: 100%
+      font-size 1.125rem
+      width 66px
+      flex-grow 1
+      text-align: center
+      flex-direction: column
+      background-color #323031
+      &.active
+        background-color $primary
+        color: white
+      &:not(:last-child)
+        border-bottom: 1px solid #252324
+      div
+        display: flex
+        flex-direction: column
+        justify-content: center
+        height: 100%
 </style>

partials/cells/CellAnnotationListTabs.vue

-<template lang="pug">
-  // annotation list
-  div Annotation Tabs
-</template>
-<script>
-  import CellAnnotationList from './CellAnnotationList.vue'
-  export default {
-    extends: CellAnnotationList,
-    data () {
-      return {
-      }
-    }
-  }
-</script>
-<style scoped lang="stylus">
-  @import '~variables'
-</style>

partials/cells/index.js

@@ -10,7 +10,6 @@ import CellVideo from './CellVideo'
 import CellHtml from './CellHtml'
 import CellTimeline from './CellTimeline'
 import CellAnnotationList from './CellAnnotationList'
-import CellAnnotationListTabs from './CellAnnotationListTabs'
 import Cell2DGrid from './Cell2DGrid'
 
 // import CellVimeo from './CellVimeo'
@@ -30,7 +29,6 @@ export default {
   CellInternalLink,
   CellVideo,
   CellAnnotationList,
-  CellAnnotationListTabs,
   CellTimeline,
   Cell2DGrid
 }