Commit 1c6889ce authored by Mathias Bär's avatar Mathias Bär

tab container vertical added

parent b6914265
......@@ -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'
}
]
}]
......
......@@ -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: ''
}
]
}
......
<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>
<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