Commit c6ac9440 authored by christianrhansen's avatar christianrhansen

removed "close"-button from modal. carousel styling & behavior.

parent 08f16a11
Pipeline #16751 passed with stage
in 1 minute and 25 seconds
<template lang="pug">
div.cell-grid-container
q-modal(v-model="modal")
q-modal(v-model="modal", minimized, content-css="background-color: #eee; border-radius: .75rem;")
grid-editor-editing-cells-mobile
q-btn.absolute-top-right.q-ma-md(@click="handleModal()")
q-icon(name="clear")
//
q-btn.absolute-top-right.q-ma-sm.bg-dark(@click="handleModal()", round, size="sm", flat)
q-icon(name="clear")
// this needs to stay for adding cells on mobile for whatever reason (strangest bug ever...)
// FIXME: find the problem and fix it
......@@ -155,50 +156,63 @@
//
q-page-sticky.z-top.backdrop-filter.shadow-1.q-mx-md.q-mb-md.overflow-hidden.round-borders(
v-if="showEditingCells", position="bottom")
q-page-sticky.q-mx-md.q-mb-md.round-borders(
:class="[carousel.visibility ? 'backdrop-filter shadow-1' : '']",
v-if="showEditingCells", position="bottom-right")
q-carousel.fixed-bottom.z-top.backdrop-filter.shadow-1.q-mx-md.q-mb-md.overflow-hidden.round-borders(
v-if="showEditingCells", v-model="slide", arrows)
q-carousel(v-if="carousel.visibility", v-model="slide", arrows, infinite, @input="getCarouselIcon(index)")
//
q-carousel-slide.q-pa-sm
.q-px-md
grid-editor-editing-cells-mobile
//
q-carousel-slide.q-pa-sm
.q-px-md
grid-editor-editing-cells-mobile
.text-center
q-btn.edit-cell-button(@click="mobileCellMove(mobileSelectedCell, 0, -1)", round, flat, size="md")
q-icon.rotate-90(name="keyboard_backspace")
.text-center
q-btn.edit-cell-button(@click="mobileCellMove(mobileSelectedCell, -1, 0)", round, flat, size="md")
q-icon(name="keyboard_backspace")
q-btn.invisible.text-dark(round, flat, size="md")
q-icon.flip-vertical(name="photo_size_select_small")
q-btn.edit-cell-button(@click="mobileCellMove(mobileSelectedCell, 1, 0)", round, flat, size="md")
q-icon.rotate-180(name="keyboard_backspace")
.text-center
q-btn.edit-cell-button(@click="mobileCellMove(mobileSelectedCell, 0, 1)", round, flat, size="md")
q-icon.rotate-270(name="keyboard_backspace")
q-carousel-slide.q-pa-sm
.text-center
q-btn.edit-cell-button(@click="mobileCellMove(mobileSelectedCell, 0, -1)", round, flat, size="md")
q-icon.rotate-90(name="keyboard_backspace")
.text-center
q-btn.edit-cell-button(@click="mobileCellMove(mobileSelectedCell, -1, 0)", round, flat, size="md")
q-icon(name="keyboard_backspace")
q-btn.invisible.text-dark(round, flat, size="md")
q-icon.flip-vertical(name="photo_size_select_small")
q-btn.edit-cell-button(@click="mobileCellMove(mobileSelectedCell, 1, 0)", round, flat, size="md")
q-icon.rotate-180(name="keyboard_backspace")
.text-center
q-btn.edit-cell-button(@click="mobileCellMove(mobileSelectedCell, 0, 1)", round, flat, size="md")
q-icon.rotate-270(name="keyboard_backspace")
q-carousel-slide.q-pa-sm
.text-center
q-btn.edit-cell-button(@click="mobileCellResize(mobileSelectedCell, 0, -1)", round, flat, size="md")
q-icon(name="remove")
.text-center
q-btn.edit-cell-button(@click="mobileCellResize(mobileSelectedCell, -1, 0)", round, flat, size="md")
q-icon(name="remove")
q-btn.invisible.text-dark(round, flat, size="md")
q-icon.rotate-45(name="zoom_out_map")
q-btn.edit-cell-button(@click="mobileCellResize(mobileSelectedCell, 1, 0)", round, flat, size="md")
q-icon(name="add")
.text-center
q-btn.edit-cell-button(@click="mobileCellResize(mobileSelectedCell, 0, 1)", round, flat, size="md")
q-icon(name="add")
q-carousel-slide.q-pa-sm
.text-center
q-btn.edit-cell-button(@click="mobileCellResize(mobileSelectedCell, 0, -1)", round, flat, size="md")
q-icon(name="remove")
.text-center
q-btn.edit-cell-button(@click="mobileCellResize(mobileSelectedCell, -1, 0)", round, flat, size="md")
q-icon(name="remove")
q-btn.invisible.text-dark(round, flat, size="md")
q-icon.rotate-45(name="zoom_out_map")
q-btn.edit-cell-button(@click="mobileCellResize(mobileSelectedCell, 1, 0)", round, flat, size="md")
q-icon(name="add")
.text-center
q-btn.edit-cell-button(@click="mobileCellResize(mobileSelectedCell, 0, 1)", round, flat, size="md")
q-icon(name="add")
q-carousel-slide.q-pa-sm.text-center
q-btn.text-dark(@click="event => {handleCellContextMenuDelete(event, mobileSelectedCell)}",
flat, round, size="xl")
q-icon(name="delete")
q-carousel-slide.q-pa-sm.text-center
q-btn.text-dark(@click="event => {handleCellContextMenuDelete(event, mobileSelectedCell)}",
flat, round, size="xl")
q-icon(name="delete")
//----- switch between carousel-visibility
q-btn(
@click="carouselVisibility()",
flat, no-ripple,
:round="!carousel.visibility",
:class="[carousel.visibility ? 'absolute-top-right' : 'backdrop-filter shadow-3']")
q-icon(v-if="carousel.visibility", name="clear")
q-icon.text-dark(v-else, :name="carousel.icon", :class="{'flip-vertical': carousel.icon === 'photo_size_select_small'}")
// ------------------------------
//----- not used at the moment
q-page-sticky.z-top.q-mb-md.backdrop-filter.shadow-1.q-mx-md.overflow-hidden.round-borders.hidden(
v-if="showEditingCells", position="bottom-right")
div.full-width
......@@ -316,7 +330,8 @@
isMobile: this.$q.platform.is.mobile,
mobileTempCell: {x: 0, y: 0, width: 1, height: 1, show: false, onGrid: false, button: false},
slide: undefined,
modal: false
modal: false,
carousel: {visibility: true, icon: 'open_with', slide: 0}
}
},
computed: {
......@@ -374,6 +389,25 @@
this.resetScrollPosition()
},
watch: {
slide (val) {
let icon
this.carousel.slide = val
switch (val) {
case 0:
icon = 'open_with'
break
case 1:
icon = 'photo_size_select_small'
break
case 2:
icon = 'delete'
break
default:
icon = 'open_with'
break
}
this.carousel.icon = icon
},
annotations () {
this.updateAnnotationUIStates()
},
......@@ -394,6 +428,12 @@
}
},
methods: {
getCarouselIcon (val) {
console.log(val)
},
carouselVisibility () {
this.carousel.visibility = !this.carousel.visibility
},
handleModal () {
this.modal = !this.modal
},
......@@ -1073,3 +1113,13 @@
background-color rgba(0, 0, 0, .1)
color $dark
</style>
<style lang="stylus">
@import '~variables'
.q-carousel-left-arrow,
.q-carousel-right-arrow
background-color transparent
.q-icon
color $grey-6
</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