Commit 4fdd9129 authored by Anton Koch's avatar Anton Koch

Merge branch '28-new-add-cell-handling' into 'master'

Add cell got a better UX (both mobile & desktop) – mosys

Closes #28

See merge request !25
parents 330d412c a3784721
Pipeline #49274 passed with stage
in 52 seconds
<template lang="pug">
div.q-px-md.q-pb-md.q-pt-sm
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
strong Edit Cell
q-item-side.text-right
q-btn.q-px-md(@click="closePanel()", flat, no-ripple)
q-icon(name="clear")
q-list.q-py-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")
//----- header
// q-item.q-py-sm(:class="[isMobil.componente ? 'q-pr-sm' : 'q-pr-none']")
q-item.q-pa-none.q-mb-sm(:class="[isMobile ? '' : 'q-py-xs q-mt-sm']")
q-item-main.text-dark
q-item.q-pa-none.q-my-sm
q-item-main.text-dark.q-pl-md
strong {{ itemSpecs[cell.configuration._value.component][0].type }}
q-item-side.mobile-only.text-dark.text-right
q-item-side.text-dark.text-right
// delete-button
q-btn.q-pa-sm(@click="deleteCell(cells[index])", size="xs", flat, style="border-radius: .5rem;")
q-btn.q-py-sm.q-px-md.text-red(@click="deleteCell(annotations[index])", size="xs", flat, no-ripple)
q-icon(name="delete", size="20px")
// close-button
......@@ -23,12 +30,12 @@
q-icon(name="clear", size="20px")
//----- preview image
q-item.q-pa-none.q-mx-none.q-mb-md(v-if="cell.configuration._value.component === 'CellImage'",
q-item.q-pa-none.q-mx-md.q-mb-md(v-if="cell.configuration._value.component === 'CellImage'",
:class="[isMobile ? '' : 'q-mt-sm']")
img(:src="cell.source._value.content", style="max-height: 50vh; max-width: 100%; margin: 0 auto;")
//----- input-field
q-item.q-pa-none(v-for="spec in itemSpecs[cell.configuration._value.component]", :key="`${spec.component}-${spec.path}`",
q-item.q-pa-none.q-px-md(v-for="spec in itemSpecs[cell.configuration._value.component]", :key="`${spec.component}-${spec.path}`",
v-if="cell.configuration._value.path === spec.path",
:class="[isMobile ? '' : 'q-mt-sm']")
......@@ -301,8 +308,12 @@
// this.getCells(this.annotations)
},
methods: {
deleteCell (cell) {
this.$emit('removeCell', cell)
closePanel () {
this.$emit('closePanel')
this.closeHandler()
},
deleteCell (annotation) {
this.$emit('removeCell', annotation)
this.closeHandler()
},
closeHandler () {
......@@ -350,6 +361,7 @@
</script>
<style scoped lang="stylus">
@import '~variables'
.ani-opacity
animation ani-opacity ease 220ms
......@@ -362,4 +374,6 @@
width: 42px
border-radius: .35rem
.header
border-bottom 1px solid $grey-4
</style>
This diff is collapsed.
<template lang="pug">
.q-px-none.q-pt-md.text-center.text-dark.text-weight-bold
.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
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'slideHeader'
name: 'slideHeader',
computed: {
...mapGetters({
cachedNewCell: 'mosys/getNewCell'
})
}
}
</script>
......
......@@ -2,6 +2,15 @@
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-item-main
strong Add Cell
q-item-side.text-right
q-btn.q-px-md.text-dark(@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")
//---------- slide 1
......@@ -14,7 +23,7 @@
template(v-for="(button, index) in buttons")
q-item-separator.q-ma-none.bg-grey-3(v-if="index > 0")
.q-py-lg.q-pl-lg(
.q-py-lg.q-pl-lg.custom-hover(
@click="selectSource(button.value)",
:class="{'text-dark text-weight-bold': selectedSource === button.value}")
| {{ button.label }}
......@@ -41,9 +50,10 @@
.slide-body(:class="[isMobile ? 'mobile' : 'desktop']")
source-piecemaker-details
.absolute-top-left.fit.bg-white.q-pa-md(v-if="cachedNewCell")
| Place new
span.lowercase &nbsp;{{ cachedNewCell.configuration.value.component.substr(4, cachedNewCell.configuration.value.component.length - 4) }}
.absolute-top-left.fit.q-pa-md(v-if="cachedNewCell", disabled)
//
| Place new
span.lowercase &nbsp;{{ cachedNewCell.configuration.value.component.substr(4, cachedNewCell.configuration.value.component.length - 4) }}
</template>
<script>
......@@ -92,6 +102,9 @@
this.$store.commit('mosys/hideSources')
},
methods: {
closeSourceEditor () {
this.$store.commit('mosys/toggleSources')
},
onNextSlide () {
this.slide += 1
},
......@@ -104,10 +117,15 @@
</script>
<style scoped lang="stylus">
.slide-body
overflow-y scroll
&.mobile
height calc(80vh - 52px)
&.desktop
height calc(calc(100vh - 59px) - 52px)
.custom-hover
cursor pointer
&:hover
background-color #eee
</style>
......@@ -6,31 +6,35 @@
q-item-separator.q-ma-none.bg-grey-3(v-if="index > 0")
q-item.q-pa-none(@click.native="selectItem(item, index)")
q-item.q-pa-none.custom-hover(@click.native="selectItem(item, index)")
q-item-main
//----------------------------------------------------------------------------------------------------- header
q-item-tile.q-pa-md
q-item-tile.q-px-md.q-py-sm.q-my-xs
q-item.q-pa-none
q-item-main
//----- add-button
q-btn.on-left.text-white(v-if="item.value && selectedItem === index", @click="cacheNewCell(item)",
flat, size="sm",
style="background-color: rgba(115, 170, 255, .75); width: 42px; height: 42px; border-radius: .35rem;")
q-icon(name="add", size="22px")
//----- icon
q-item-side
q-icon.text-dark(:name="typeToIconName(item.type)", :disabled="selectedItem !== index || cachedNewCell", size="20px")
//----- icon
q-btn.on-left(v-else, flat, no-ripple, size="sm", style="width: 42px; height: 42px; border-radius: .35rem;")
q-icon(:name="typeToIconName(item.type)", size="22px", :class="{'text-dark': selectedItem === index}")
//----- show type
span(:class="{'text-dark text-weight-bold': selectedItem === index}") {{ item.type }}
//----- cell type
q-item-main.q-my-sm(
:class="[{'text-dark text-weight-bold': selectedItem === index}]",
:disabled="cachedNewCell")
.q-my-xs
span.full-height(:class="{'q-my-xs': !item.value}") {{ item.type }}
//----- buttons
q-item-side(v-if="selectedItem === index", :disabled="!item.value")
//----- clear input-button
q-btn(@click="clearSource()", flat, size="sm", style="width: 32px; height: 32px; border-radius: .35rem;")
q-icon(name="clear", size="20px")
q-btn-group(v-if="item.value && selectedItem === index", style="margin: 1px 0", flat)
// use
q-btn.text-white.bg-primary.border-radius-full(@click="cacheNewCell(item)", :disabled="cachedNewCell")
// | Use
q-icon(name="check", size="20px")
// clear
q-btn.bg-grey-1.border-radius-full.q-ml-xs(@click="clearSource()", :disabled="cachedNewCell")
q-icon(name="clear", size="20px")
//------------------------------------------------------------------------------------------------------ input
q-item-tile.q-px-md(v-if="selectedItem === index")
......@@ -42,6 +46,7 @@
q-input(
hide-underline,
:disabled="cachedNewCell",
:type="item.inputType",
:min-rows="1",
:max-height="500",
......@@ -136,7 +141,8 @@
},
computed: {
...mapGetters({
storeSourceCellInput: 'mosys/getSourceCellInput'
storeSourceCellInput: 'mosys/getSourceCellInput',
cachedNewCell: 'mosys/getNewCell'
})
},
watch: {
......@@ -191,4 +197,15 @@
</script>
<style scoped lang="stylus">
.q-item-section + .q-item-section
margin-left 0
</style>
<style lang="stylus">
.border-radius-full
border-radius 100vw!important
.custom-hover
cursor pointer
&:hover
background-color #eee
</style>
......@@ -2,7 +2,7 @@
q-list.default-source-container
template(v-for="(file, i) in images")
q-item
q-item.custom-hover
q-item-side
q-icon(
draggable="true",
......@@ -102,4 +102,9 @@
.q-input
padding-left 0
.custom-hover
cursor pointer
&:hover
background-color #eee
</style>
......@@ -7,7 +7,7 @@
q-item-separator.q-ma-none.bg-grey-3(v-if="index > 0")
q-item.q-pa-none
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}")
......@@ -43,4 +43,8 @@
</script>
<style scoped lang="stylus">
.custom-hover
cursor pointer
&:hover
background-color #eee
</style>
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