Commit b9592af2 authored by Anton's avatar Anton

Update from annotation list tabs branch

# Conflicts:
#	partials/cells/CellAnnotationList.vue
parents 6cbdd540 53b4aeab
......@@ -219,7 +219,7 @@
error: false,
errorMessage: '',
value: 'scroll-list',
path: 'displaytype',
path: 'displayType',
selectOptions: [
{
label: 'Scroll List',
......@@ -227,7 +227,7 @@
},
{
label: 'Tab List',
value: 'tab-list'
value: 'tabs'
}
]
}]
......
......@@ -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: ''
}
]
}
......
......@@ -7,19 +7,36 @@
//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
// 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 {{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)}",
......@@ -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
......@@ -243,7 +265,7 @@ export default {
overflow auto
.annotation-list.display-full
background-color #323031
background-color #303030
.annotation-list.display-preview
color #ddd
......@@ -287,16 +309,36 @@ export default {
background-color #e7e9ff
.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*/
background-color #252525
.annotation-content-container
padding-right 66px
.annotation-tabs-container
background-color #252525
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 #303030
&.active
background-color $primary
color: white
&:not(:last-child)
border-bottom: 1px solid #252525
div
display: flex
flex-direction: column
justify-content: center
height: 100%
</style>
<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>
......@@ -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
}
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