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

Mosys: split source browser

parent 46c950be
<template lang="pug">
q-list
q-list-header
q-item.q-pa-none
small Cell Content Editor
q-item-separator
template(v-for="(cell, index) in cellsData", :key="cell._uuid")
.q-mb-md(v-for="(cell, index) in cellsData", :key="cell._uuid")
q-item-separator(v-if="index > 0")
//q-item-separator(v-if="index > 0")
<!--q-item(v-if="cell.type in itemSpecs", v-for="spec in itemSpecs[cell.type]", :key="`${spec.type}-${spec.path}`")-->
q-item.q-pa-none(v-for="spec in itemSpecs[cell.component]", :key="`${spec.component}-${spec.path}`",
q-item(v-for="spec in itemSpecs[cell.component]", :key="`${spec.component}-${spec.path}`",
v-if="cell.data.path === spec.path")
q-item-main
......@@ -48,6 +43,7 @@
:max-height="500",
:value="cell.data[spec.path]",
@change="value => handleItemChanged(value, cell, spec.path)")
q-item-separator
// q-item(v-else)
q-field This cell type is not supported yet: {{ cell.component }}.{{ spec.path }}
......@@ -223,6 +219,7 @@
inputType: 'text',
type: 'Annotation-List',
label: 'RegExp',
help: 'Filter annotations by regular expression',
error: false,
errorMessage: '',
......
......@@ -30,10 +30,19 @@
@dragend="event => {handleCellDragEnd(event, annotation)}",
@contextmenu="handleCellContextMenu",
:style="getAnnotationStyle(annotation)",
@click.prevent="event => {handleCellClick(event, annotation)}",
:class="{selected: annotationUIStates[annotation._uuid] ? annotationUIStates[annotation._uuid].selected : false}",
:class="getAnnotationClasses(annotation._uuid, 'cell-item')",
:key="`cell-${index}`")
cell(:annotation="annotation", preview)
q-btn.edit-button.absolute-top-right(
@click.prevent="event => {handleCellEditClick(event, annotation)}",
:class="getAnnotationClasses(annotation._uuid, 'editing')",
style="top: 8px; right: 8px;",
:icon="annotationUIStates[annotation._uuid].editing ? 'close' : 'edit'", flat, round, size="md"
)
cell(
@click.native.prevent="event => {handleCellClick(event, annotation)}",
:annotation="annotation",
:preview="true"
)
div.cell-item-resize-handle(
draggable="true",
@dragstart="event => {handleCellResizerDragStart(event, annotation)}",
......@@ -127,7 +136,9 @@
computed: {
...mapGetters({
user: 'auth/getUserState',
isMobile: 'globalSettings/getIsMobile'
isMobile: 'globalSettings/getIsMobile',
// editingCells: 'mosys/getEditingCells'
showEditingCells: 'mosys/getShowEditingCells'
}),
cellContextMenuActions () {
const actions = {
......@@ -171,7 +182,8 @@
},
async mounted () {
await this.fetchData()
this.$root.$emit('setBackButton', '/mosys/grids')
// this.$root.$emit('setBackButton', '/mosys/grids')
console.log('show editing', this.showEditingCells)
},
watch: {
annotations () {
......@@ -182,6 +194,12 @@
},
async gridUuid () {
await this.fetchData()
},
showEditingCells (val) {
console.log('show editing cells', val)
if (val === false) {
this.updateAnnotationUIStates()
}
}
},
methods: {
......@@ -223,17 +241,30 @@
})
this.$store.commit('mosys/setSelectedCells', selectedCells)
},
updateEditingCells () {
const _this = this
let editingCells = Object.keys(this.annotationUIStates).filter(k => {
return _this.annotationUIStates[k].editing
}).map(k => {
// return _this.cells.find(c => c._uuid === k)
return _this.annotations.find(c => c._uuid === k)
})
this.$store.commit('mosys/setEditingCells', editingCells)
},
updateAnnotationUIStates () {
let newAnnotationUIStates = {}
this.annotations.forEach(a => {
newAnnotationUIStates[a._uuid] = {
selected: false,
editing: false,
beingResized: false,
beginDragged: false,
annotation: a
}
})
this.annotationUIStates = newAnnotationUIStates
this.updateSelectedCells()
this.updateEditingCells()
},
//
......@@ -250,7 +281,7 @@
else {
let annotation = this.annotations.filter(annotation => {
if (!_this.annotationUIStates[annotation._uuid]) return false
return _this.annotationUIStates[annotation._uuid].beginDragged ||
return _this.annotationUIStates[annotation._uuid].beingDragged ||
_this.annotationUIStates[annotation._uuid].beingResized
}).shift()
let offset, position
......@@ -327,6 +358,11 @@
//
// CELL DRAG & DROP HANDLERS
//
handleCellEditClick (event, cell) {
this.annotationUIStates[cell._uuid].editing = !this.annotationUIStates[cell._uuid].editing
this.updateEditingCells()
// this.$store.commit('mosys/showEditingCells')
},
handleCellClick (event, cell) {
this.annotationUIStates[cell._uuid].selected = !this.annotationUIStates[cell._uuid].selected
......@@ -343,7 +379,7 @@
y: (event.clientY - elContainerBoundingBox.y) - (elBoundingBox.y - elContainerBoundingBox.y)
}
this.annotationUIStates[annotation._uuid].draggingOffset = offset
this.annotationUIStates[annotation._uuid].beginDragged = true
this.annotationUIStates[annotation._uuid].beingDragged = true
}
this.tmpObjects.push(annotation)
},
......@@ -353,6 +389,7 @@
async handleCellContextMenuDelete (event, annotation) {
this.annotationUIStates[annotation._uuid].selected = false
this.updateSelectedCells()
this.updateEditingCells()
await this.$store.dispatch('cells/delete', annotation.body.source.id)
await this.$store.dispatch('annotations/delete', annotation.id)
this.annotations = this.annotations.filter(a => a.id !== annotation.id)
......@@ -550,6 +587,23 @@
'grid-row-start': parsed.xywh[1],
'grid-row-end': `span ${parsed.xywh[3]}`
}
},
getAnnotationClasses (uuid, which) {
if (which === 'editing') {
if (this.annotationUIStates[uuid].editing) {
return 'bg-primary text-white'
}
else {
return 'bg-grey'
}
}
if (which === 'cell-item') {
return {
selected: this.annotationUIStates[uuid] ? this.annotationUIStates[uuid].selected : false,
editing: this.annotationUIStates[uuid] ? this.annotationUIStates[uuid].editing : false
}
}
else return {}
}
}
}
......@@ -577,9 +631,20 @@
&:hover
background-color lightblue
.edit-button
display: block
&.editing
.edit-button
display: block
&.selected
background-color lightpink
.edit-button
display: none
.cell-item-inner
width 100%
height 100%
......
<template lang="pug">
q-tabs.grid-editor-sources-tabs.shadow-11(v-model="selectedTab")
q-tab(slot="title", name="tab-default-cells", default, icon="add")
q-btn(slot="title", icon="close",
small, flat, round, class="fixed", style="right: 2px; margin-top: 3px",
@click="event => {$store.commit('mosys/hideAddCells')}")
q-tab-pane(name="tab-default-cells")
grid-editor-default-source
</template>
<script>
import GridEditorDefaultSource from './GridEditorDefaultSource'
import { mapGetters } from 'vuex'
export default {
components: {
GridEditorDefaultSource
},
data () {
return {
selectedTab: ''
}
},
computed: {
...mapGetters({
})
},
watch: {
},
beforeDestroy () {
this.$store.commit('mosys/hideAddCells')
}
}
</script>
<style lang="stylus">
.grid-editor-sources-tabs
background-color white
.q-tabs-panes
display flex
flex-direction column
overflow auto
</style>
......@@ -2,12 +2,6 @@
q-list.default-source-container
q-list-header
q-item
small Standard Cell Types
q-item-separator
template(v-for="(item, i) in items")
template(v-if="i > 0")
......@@ -31,6 +25,7 @@
:model="item.value",
@input="value => {handleItemChanged(value, item)}",
@change="value => {handleItemChanged(value, item)}")
q-item-separator
</template>
......
<template lang="pug">
q-tabs.grid-editor-sources-tabs.shadow-11(v-model="selectedTab", color="dark")
q-tab(slot="title", name="tab-editing-cells", default) Edit Cell
q-btn(slot="title", icon="close",
small, flat, round, class="fixed", style="right: 2px; margin-top: 3px",
@click="() => {$store.commit('mosys/hideEditingCells')}")
q-tab-pane(name="tab-editing-cells")
template(v-if="showEditingCells")
cell-editor(:cells="editingCells")
</template>
<script>
import CellEditor from './CellEditor'
import { mapGetters } from 'vuex'
import { userHasFeature } from 'mbjs-quasar/src/lib'
export default {
components: {
CellEditor
},
data () {
return {
selectedTab: 'tab-editing-cells'
}
},
computed: {
...mapGetters({
user: 'auth/getUserState',
editingCells: 'mosys/getEditingCells',
showEditingCells: 'mosys/getShowEditingCells'
// selectedCells: 'mosys/getSelectedCells'
}),
userHasDocuments () {
return userHasFeature(this.user, 'documents')
}
},
watch: {
},
mounted () {
},
beforeDestroy () {
this.$store.commit('mosys/hideEditingCells')
}
}
</script>
<style lang="stylus">
.grid-editor-sources-tabs
background-color white
.q-tabs-panes
display flex
flex-direction column
overflow auto
</style>
<template lang="pug">
q-list.default-source-container
q-list-header
q-item
small Documents
q-item-separator
template(v-for="(file, i) in images")
template(v-if="i > 0")
q-item-separator
q-item
q-item-side
q-icon(
......@@ -18,6 +9,7 @@
@dragstart.native="event => {handleItemDragStart(event, file)}",
:name="typeToIconName(getSimpleType(file.metaData['content-type']))", style="font-size: 1.8rem")
q-item-main {{ file.name }}
q-item-separator
</template>
......
<template lang="pug">
q-list.piecemaker-source-container
q-list-header
template(v-if="currentTimeline")
q-btn(flat, round, small, style="margin-right: 0.5em",
@click="handleClickUnsetCurrentTimeline", icon="keyboard backspace")
span Videos in Timeline #[strong {{currentTimeline.title}}]
template(v-else)
router-link(:to="{name: 'piecemaker.timelines.list'}") Piecemaker Timelines
template(v-if="currentTimeline")
q-list-header
q-btn(outline, size="sm", style="margin-right: 0.5em",
@click="handleClickUnsetCurrentTimeline", icon="keyboard backspace" label="Timelines")
div {{currentTimeline.title}} (Videos)
template(v-else)
q-list-header Timelines
router-link(class="ui-tab-pane-inner-button", :to="{name: 'piecemaker.timelines.list'}")
q-btn(outline, size="sm", icon-right="call_made", label="Show in Piecemaker")
q-item-separator
......@@ -46,11 +49,10 @@
template(v-for="(timeline, i) in timelines")
template(v-if="i > 0")
q-item-separator
q-item
q-item-side
q-icon(name="list", style="font-size: 1.8rem")
q-item-main
a(@click.prevent="event => {handleTimelineItemClick(event, timeline)}") {{timeline.title}}
q-item(class="button-item")
a(class="ui-directory-link", @click.prevent="event => {handleTimelineItemClick(event, timeline)}")
q-btn(align="left", icon-right="keyboard_arrow_right", flat) {{timeline.title}}
q-item-separator
</template>
<script>
......
<template lang="pug">
q-tabs.grid-editor-sources-tabs.shadow-11(v-model="selectedTab")
q-tab(slot="title", name="tab-default-cells", default, icon="add")
q-tabs.grid-editor-sources-tabs.shadow-11(v-model="selectedTab", color="dark")
q-tab(slot="title", name="tab-default-cells", default) Cells
q-tab(slot="title", name="tab-piecemaker") Piecemaker
q-tab(slot="title", name="tab-documents", v-if="userHasDocuments") Documents
q-btn(slot="title", icon="close",
......@@ -9,12 +9,12 @@
@click="event => {$store.commit('mosys/hideSources')}")
q-tab-pane(name="tab-default-cells")
template(v-if="this.selectedCells.length > 0")
// template(v-if="this.selectedCells.length > 0")
cell-editor(:cells="selectedCells")
template(v-else)
grid-editor-default-source
// template(v-else)
grid-editor-default-source
q-tab-pane(name="tab-piecemaker")
q-tab-pane(name="tab-piecemaker", class="relative-position")
grid-editor-source-piece-maker
q-tab-pane(name="tab-documents", v-if="userHasDocuments")
......@@ -45,16 +45,15 @@
},
computed: {
...mapGetters({
user: 'auth/getUserState'
user: 'auth/getUserState',
editingCells: 'mosys/getEditingCells',
selectedCells: 'mosys/getSelectedCells'
}),
userHasDocuments () {
return userHasFeature(this.user, 'documents')
},
currentStoreTab () {
return this.$store.state.mosys.sourcesTabName
},
selectedCells () {
return this.$store.state.mosys.selectedCells
}
},
watch: {
......
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