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

- more cell setting dummies added

- disabled selecting cells
- added highlight to cells being edited
parent d83e3c3d
......@@ -38,8 +38,11 @@
style="top: 8px; right: 8px;",
:icon="annotationUIStates[annotation._uuid].editing ? 'close' : 'edit'", flat, round, size="md"
)
// selecting cells disabled because it has no use currently
// switch with cell component below to re-enable it
//cell(
@click.native.prevent="event => {handleCellClick(event, annotation)}", :annotation="annotation", :preview="true")
cell(
@click.native.prevent="event => {handleCellClick(event, annotation)}",
:annotation="annotation",
:preview="true"
)
......@@ -642,6 +645,7 @@
display: block
&.editing
background-color lightpink
.edit-button
display: block
......
......@@ -9,7 +9,239 @@
q-tab-pane(name="tab-editing-cells")
template(v-if="showEditingCells")
cell-editor(:cells="editingCells")
q-list.data-cell-dummy-settings
q-list-header Timeline Video Cell
q-item
q-select(
class="full-width",
v-model="dataCell.displayContent.model",
float-label="Display Content",
radio,
:options="dataCell.displayContent.options",
hide-underline
)
template(v-if="dataCell.displayContent.model === 'video'")
q-item.wrap
q-checkbox(
v-model="dataCell.videoSettings.autoPlay",
label="Auto Play"
)
q-checkbox(
v-model="dataCell.videoSettings.showTitle",
label="Show Title"
)
q-checkbox(
v-model="checkbox.model2",
label="Show controls"
)
q-checkbox(
v-model="checkbox.model3",
label="Allow fullscreen"
)
template(v-if="dataCell.displayContent.model === 'annotationList'")
q-item
q-checkbox(
v-model="dataCell.annotationListSettings.showAuthor",
label="Show Author"
)
q-checkbox(
v-model="dataCell.annotationListSettings.showTimestamps",
label="Show Timestamps"
)
q-item
q-input(
class="full-width",
type="text",
float-label="Filter Annotations",
:min-rows="1"
)
q-item
div
div Display Type
q-option-group.full-width(
type="radio",
v-model="imageCell.displayMethod.model",
:options="[{ label: 'Continuous list', value: 'list' }, { label: 'Tab list', value: 'tab' }]"
)
q-list.data-cell-dummy-settings
q-list-header Video Cell
q-item
q-input(
class="full-width",
type="url",
float-label="URL",
:min-rows="1",
:value="'youtube.com/avnkdhhN'"
)
q-item.wrap
q-checkbox(
v-model="dataCell.videoSettings.autoPlay",
label="Auto Play"
)
q-checkbox(
v-model="dataCell.videoSettings.showTitle",
label="Show Title"
)
q-checkbox(
v-model="checkbox.model2",
label="Show controls"
)
q-checkbox(
v-model="checkbox.model3",
label="Allow fullscreen"
)
q-list.data-cell-dummy-settings
q-list-header Link Cell
q-item
q-select(
class="full-width",
v-model="linkCell.model",
float-label="Type",
radio,
:options="linkCell.options",
hide-underline
)
template(v-if="linkCell.model === 'external'")
q-item
q-input(
class="full-width",
type="url",
float-label="URL",
:min-rows="1",
value="https://url"
)
q-item
q-checkbox(
v-model="linkCell.external.newTab",
label="Open in new bab"
)
template(v-if="linkCell.model === 'grid'")
q-item
q-select(
class="full-width secondary-select",
v-model="linkCell.grid.model",
radio,
float-label="Target",
:options="linkCell.grid.options",
hide-underline
)
template(v-if="linkCell.model === 'cell'")
q-item
q-select(
class="full-width secondary-select",
v-model="linkCell.cell.model",
float-label="Target",
:options="linkCell.cell.options",
hide-underline,
radio
)
q-list.data-cell-dummy-settings
q-list-header Text Cell
q-item
q-editor(
class="full-width",
v-model="titleCell.editor.model"
)
q-list.data-cell-dummy-settings
q-list-header Titel Cell
q-item
q-input(
class="full-width",
type="text",
float-label="Text",
:min-rows="1",
value=""
)
q-list.data-cell-dummy-settings
q-list-header Image Cell
q-item
q-input(
class="full-width",
type="url",
float-label="URL",
:min-rows="1",
value="https://url"
)
q-item
q-checkbox(
v-model="checkbox.model0",
label="Allow fullscreen"
)
q-item
div
div Display Method
q-option-group.full-width(
type="radio",
v-model="imageCell.displayMethod.model",
:options="[{ label: 'Standard', value: 'standard' }, { label: 'Contain', value: 'contain' }, { label: 'Cover', value: 'cover' }]"
)
template(v-if="imageCell.displayMethod.model === 'standard'")
q-item
div
div Align to
q-option-group.full-width(
type="radio",
v-model="imageCell.alignTo.model",
:options="[{ label: 'Top', value: 'top' }, { label: 'Right', value: 'right' }, { label: 'Bottom', value: 'bottom' }, { label: 'Left', value: 'left' }]"
)
q-item
div
div Scale
q-option-group.full-width(
type="radio",
v-model="imageCell.scale.model",
:options="[{ label: 'Initial size', value: 'i' }, { label: 'Width 100%', value: 'w' }, { label: 'Height 100%', value: 'h' }]"
)
q-list.data-cell-dummy-settings
q-list-header IFrame Cell
q-list.data-cell-dummy-settings
q-list-header HTML Cell
q-list.data-cell-dummy-settings
q-list-header Document Cell
q-item
q-select(
class="full-width",
v-model="documentCell.model",
float-label="File",
:options="documentCell.options",
hide-underline,
radio
)
q-item
div
div Display Method
q-option-group.full-width(
type="radio",
v-model="imageCell.displayMethod.model",
:options="[{ label: 'Standard', value: 'standard' }, { label: 'Contain', value: 'contain' }, { label: 'Cover', value: 'cover' }]"
)
template(v-if="imageCell.displayMethod.model === 'standard'")
q-item
div
div Align
q-option-group.full-width(
type="radio",
v-model="imageCell.alignTo.model",
:options="[{ label: 'Top', value: 'top' }, { label: 'Right', value: 'right' }, { label: 'Bottom', value: 'bottom' }, { label: 'Left', value: 'left' }]"
)
q-item
div
div Scale
q-option-group.full-width(
type="radio",
v-model="imageCell.scale.model",
:options="[{ label: 'Initial size', value: 'i' }, { label: 'Width 100%', value: 'w' }, { label: 'Height 100%', value: 'h' }]"
)
q-list.data-cell-dummy-settings
q-list-header Table of Content Cell
q-item (Display a list of all Title Cells. Clicking on a title scrolls the grid to the according cell.)
</template>
<script>
......@@ -24,7 +256,139 @@
},
data () {
return {
selectedTab: 'tab-editing-cells'
checkbox: {
model0: false,
model1: false,
model2: false,
model3: false
},
selectedTab: 'tab-editing-cells',
dataCell: {
displayContent: {
model: 'video',
options: [
{
label: 'Video',
value: 'video'
},
{
label: 'Annotation list',
value: 'annotationList'
}
]
},
annotationListSettings: {
showAuthor: true,
showTimestamps: true
},
videoSettings: {
autoPlay: false,
showTitle: false
}
},
titleCell: {
editor: {
model: ''
}
},
linkCell: {
model: 'external',
options: [
{
label: 'External',
value: 'external'
},
{
label: 'Grid',
value: 'grid'
},
{
label: 'Cell',
value: 'cell'
}
],
external: {
newTab: true
},
grid: {
model: undefined,
options: [
{
label: 'Grid 0',
value: 'grid0'
},
{
label: 'Grid 1',
value: 'grid1'
},
{
label: 'Grid 2',
value: 'grid2'
},
{
label: 'Grid 3',
value: 'grid3'
},
{
label: 'Grid 4',
value: 'grid4'
}
]
},
cell: {
model: undefined,
options: [
{
label: 'Cell 0',
value: 'cell0'
},
{
label: 'Cell 1',
value: 'cell1'
},
{
label: 'Cell 2',
value: 'cell2'
}
]
}
},
documentCell: {
model: 'document0',
options: [
{
label: 'Document 0',
value: 'document0'
},
{
label: 'Document 1',
value: 'document1'
},
{
label: 'Document 2',
value: 'document2'
},
{
label: 'Document 3',
value: 'document3'
},
{
label: 'Document 4',
value: 'document4'
}
]
},
imageCell: {
displayMethod: {
model: 'list'
},
alignTo: {
model: 'top'
},
scale: {
model: 'i'
}
}
}
},
computed: {
......@@ -55,7 +419,23 @@
</script>
<style lang="stylus">
@import '~variables'
.data-cell-dummy-settings
background: #f6f6f6
margin-bottom: 1rem
.q-checkbox
.q-radio
margin-right: 1rem
.q-item-separator-component
margin-top: 2rem
.q-list-header
color: $primary
text-transform uppercase
.q-select
background: #e6e6e6
.secondary-select
margin-left: 2rem !important
.grid-editor-sources-tabs
background-color white
......
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