Commit 686806c9 authored by Anton Koch's avatar Anton Koch

Merge branch '346-dark-background-in-editors---mosys' into 'master'

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

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