Commit 85031d8d authored by Christian Hansen's avatar Christian Hansen Committed by Anton Koch

dark background in source- and cell-editor (#346)

parent 794a5225
<template lang="pug">
div.q-pb-md
.q-pl-md.q-py-xs.bg-grey-2
q-item.q-pa-none.text-dark(style="height: 54px;")
q-item-main
.q-pl-md.q-py-xs(style="border-bottom: 1px solid rgba(255,255,255,0.04);")
q-item.q-pa-none(style="height: 54px;")
q-item-main.text-grey-3
strong Edit Cell
q-item-side.text-right
q-btn.q-px-md(@click="closePanel()", flat, no-ripple)
q-btn.q-px-md.text-grey-3(@click="closePanel()", flat, no-ripple)
q-icon(name="clear")
q-list.q-pa-none.ani-opacity(v-for="(cell, index) in cells", :key="cell._uuid")
......@@ -14,10 +14,10 @@
//----- header
// q-item.q-py-sm(:class="[isMobil.componente ? 'q-pr-sm' : 'q-pr-none']")
q-item.q-pa-none.q-my-sm
q-item-main.text-dark.q-pl-md
q-item-main.text-grey-3.q-pl-md
strong {{ itemSpecs[cell.configuration._value.component][0].type }}
q-item-side.text-dark.text-right
q-item-side.text-grey-3.text-right
// delete-button
q-btn.q-py-sm.q-px-md.text-red(@click="deleteCell(annotations[index])", size="xs", flat, no-ripple)
......@@ -39,27 +39,28 @@
v-if="cell.configuration._value.path === spec.path",
:class="[isMobile ? '' : 'q-mt-sm']")
q-item-main.bg-grey-2.q-py-sm(style="border-radius: .35rem;")
q-item-main.bg-grey-9.q-py-sm(style="border-radius: .15rem;")
q-item-tile.q-px-md
q-field(
:helper="spec.help",
:error="spec.error",
:error-label="spec.errorMessage",
style="width: 100%")
:helper="spec.help",
:error="spec.error",
:error-label="spec.errorMessage",
style="width: 100%")
template(v-if="spec.inputType === 'select'")
q-select(
:float-label="spec.label",
:options="spec.selectOptions",
@select="value => handleItemChanged(value, cell, spec.path)")
:float-label="spec.label",
:options="spec.selectOptions",
@select="value => handleItemChanged(value, cell, spec.path)")
template(v-else)
q-input(
:type="spec.inputType",
:min-rows="1",
:max-height="500",
:value="cell.source._value[spec.path]",
@change="value => handleItemChanged(value, cell, spec.path)",
hide-underline)
dark,
:type="spec.inputType",
:min-rows="1",
:max-height="500",
:value="cell.source._value[spec.path]",
@change="value => handleItemChanged(value, cell, spec.path)",
hide-underline)
//----- media-/annotation-button
// q-item.q-pa-none(v-if="['CellMedia', 'CellAnnotationList'].includes(cell.component)")
......
......@@ -50,6 +50,14 @@
q-btn.text-grey-4(@click="clearHandler('selected cell')", flat)
q-icon(name="clear")
// -----------------------------------------------------------------------------------------------------------------
// ------------------------------------------------------------------------------------------------------------ grid
// modal for existing cell editing
q-modal.z-max(v-model="modal", minimized, content-css="border-radius: .35rem!important;")
cell-editor.bg-dark(@closePanel="closePanelHandler", @removeCell="removeCellHandler",
style="border: 1px solid rgba(255,255,255,0.2);")
// -----------------------------------------------------------------------------------------------------------------
// ------------------------------------------------------------------------------------------------------------ grid
div.cell-grid.relative-position(
v-touch-pan="panGrid",
......
<template lang="pug">
.q-px-none.q-pt-md.text-center.text-dark.text-weight-bold(:disabled="cachedNewCell")
slot
q-item-separator.q-ma-none.q-mt-md.bg-grey-3
q-item-separator.q-ma-none.q-mt-md(style="background-color: rgba(255,255,255,0.04);")
</template>
<script>
......
......@@ -2,34 +2,34 @@
div.relative-position.full-height
.q-pl-md.q-py-xs.bg-grey-2
q-item.q-pa-none.text-dark(style="height: 54px;")
.q-pl-md.q-py-xs(style="border-bottom: 1px solid rgba(255,255,255,0.04);")
q-item.q-pa-none(style="height: 54px;")
q-item-main
strong Add Cell
strong.text-grey-3 Add Cell
q-item-side.text-right
q-btn.q-px-md.text-dark(@click="closeSourceEditor()", flat, no-ripple)
q-btn.q-px-md.text-grey-3(@click="closeSourceEditor()", flat, no-ripple)
q-icon(name="clear")
// q-item-separator.q-ma-none.bg-grey-4
q-carousel.source-editor-carousel.full-height(v-model="slide", arrows, color="dark")
q-carousel.source-editor-carousel.full-height(v-model="slide", arrows, color="grey-3")
//---------- slide 1
q-carousel-slide.q-pa-none
q-carousel-slide.text-grey-3.q-pa-none
slide-header
| Select source
.slide-body(:class="[isMobile ? 'mobile' : 'desktop']")
template(v-for="(button, index) in buttons")
q-item-separator.q-ma-none.bg-grey-3(v-if="index > 0")
q-item-separator.q-ma-none(v-if="index > 0", style="background-color: rgba(255,255,255,0.04);")
.q-py-lg.q-pl-lg.custom-hover(
@click="selectSource(button.value)",
:class="{'text-dark text-weight-bold': selectedSource === button.value}")
:class="[selectedSource === button.value ? 'text-primary text-weight-bold' : 'text-grey-3']")
| {{ button.label }}
//---------- slide 2
q-carousel-slide.q-pa-none
slide-header
slide-header.text-grey-3
template(v-if="selectedSource === 'piecemaker'") Select timeline
template(v-else) Select {{ selectedSource.slice(0, -1) }}
......@@ -41,7 +41,7 @@
//---------- slide 3
q-carousel-slide.q-pa-none(v-if="selectedSource === 'piecemaker'")
slide-header(v-if="storeCurrentTimeline")
slide-header.text-grey-3(v-if="storeCurrentTimeline")
| {{ storeCurrentTimeline.title }}
.slide-body(:class="[isMobile ? 'mobile' : 'desktop']")
......@@ -106,6 +106,7 @@
</script>
<style scoped lang="stylus">
@import '~variables'
.slide-body
overflow-y scroll
......@@ -116,5 +117,5 @@
.custom-hover
cursor pointer
&:hover
background-color #eee
background-color $primary15
</style>
......@@ -3,8 +3,7 @@
q-list.q-py-none
template(v-for="(item, index) in items")
q-item-separator.q-ma-none.bg-grey-3(v-if="index > 0")
q-item-separator.q-ma-none(v-if="index > 0", style="background-color: rgba(255,255,255,0.05);")
q-item.q-pa-none.custom-hover(@click.native="selectItem(item, index)")
q-item-main
......@@ -14,11 +13,16 @@
//----- icon
q-item-side
q-icon.text-dark(:name="typeToIconName(item.type)", :disabled="selectedItem !== index || cachedNewCell", size="20px")
q-icon(
:name="typeToIconName(item.type)",
:disabled="selectedItem !== index || cachedNewCell",
size="20px",
:class="[selectedItem === index ? 'text-primary' : 'text-grey-3']")
//----- cell type
//:class="[{'text-primary text-weight-bold': selectedItem === index}]",
q-item-main.q-my-sm(
:class="[{'text-dark text-weight-bold': selectedItem === index}]",
:class="[selectedItem === index ? 'text-primary text-weight-bold' : 'text-grey-3']"
:disabled="cachedNewCell")
.q-my-xs
span.full-height(:class="{'q-my-xs': !item.value}") {{ item.type }}
......@@ -38,13 +42,14 @@
//------------------------------------------------------------------------------------------------------ input
q-item-tile.q-px-md(v-if="selectedItem === index")
q-field.q-mb-md.bg-grey-2.q-px-sm.q-py-xs(
q-field.q-mb-md.bg-grey-2.q-px-sm.q-py-xs.bg-grey-9(
:helper="item.help",
:error="item.error",
:error-label="item.errorMessage",
style="width: 100%; border-radius: .1rem;")
q-input(
dark,
hide-underline,
:disabled="cachedNewCell",
:type="item.inputType",
......@@ -202,10 +207,12 @@
</style>
<style lang="stylus">
@import '~variables'
.border-radius-full
border-radius 100vw!important
.custom-hover
cursor pointer
&:hover
background-color #eee
background-color $primary15
</style>
......@@ -5,12 +5,12 @@
//----- timelines
template(v-for="(timeline, index) in timelines")
q-item-separator.q-ma-none.bg-grey-3(v-if="index > 0")
q-item-separator.q-ma-none(v-if="index > 0", style="background-color: rgba(255,255,255,0.04);")
q-item.q-pa-none.custom-hover
.full-width.q-px-md.q-py-lg(
@click="clickTimeline(timeline)",
:class="{'text-dark text-weight-bold' : currentTimeline && currentTimeline.title === timeline.title}")
:class="[currentTimeline && currentTimeline.title === timeline.title ? 'text-primary text-weight-bold' : 'text-grey-3']")
| {{timeline.title}}
</template>
......@@ -43,8 +43,10 @@
</script>
<style scoped lang="stylus">
@import '~variables'
.custom-hover
cursor pointer
&:hover
background-color #eee
background-color $primary15
</style>
......@@ -9,17 +9,17 @@
q-spinner(style="margin-right: 1em")
q-item-main Loading Media
q-item.justify-center.fit(v-else, style="padding-top: 52px;") No Media Found!
q-item.text-grey-8.text-italic.q-mt-sm(v-else) No Media Found!
//----- list media items
template(v-else)
template(v-for="(entry, i) in currentMedia")
q-item-separator.q-ma-none.bg-grey-3(v-if="i > 0")
q-item-separator.q-ma-none(v-if="i > 0", style="background-color: rgba(255,255,255,0.04);")
q-item.q-px-md.q-py-lg.media-item
q-item-main
q-item-tile.q-mb-md {{entry.title || entry.annotation._uuid}}
q-item-tile.text-grey-3.q-mb-md {{entry.title || entry.annotation._uuid}}
q-item-tile
//----- media
......
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