From 3376f5bf8415fec7af32f8b65fab615ac00a8516 Mon Sep 17 00:00:00 2001 From: christianrhansen Date: Fri, 11 Oct 2019 16:01:46 +0200 Subject: [PATCH] carousel slides styling --- partials/GridEditor.vue | 112 +++++++++++++++++++++++----------------- 1 file changed, 65 insertions(+), 47 deletions(-) diff --git a/partials/GridEditor.vue b/partials/GridEditor.vue index 1ac2d5b..608f211 100644 --- a/partials/GridEditor.vue +++ b/partials/GridEditor.vue @@ -82,6 +82,8 @@ .mobile-only q-btn.edit-button.absolute.fit.bg-transparent( @click.prevent="event => {touchMobileCell(event, annotation)}", flat) + + // invisible q-btn.absolute-top-left.bg-blue( @click.prevent="handleModal()", flat, style="opacity: 0") bla @@ -160,56 +162,72 @@ :class="[carousel.visibility ? 'backdrop-filter shadow-1' : '']", v-if="showEditingCells", position="bottom-right") - 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 - .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") + div(v-if="carousel.visibility") + q-carousel(v-model="slide", infinite, @input="getCarouselIcon(index)") - 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 + .q-px-md + grid-editor-editing-cells-mobile - 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") + //----- move + 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") + + //----- resize + 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") + + //----- delete + q-carousel-slide.q-pa-sm.text-center + .row.text-dark.items-center.full-height + .col.full-height.q-pl-xl + q-btn.full-height( + @click="event => {handleCellContextMenuDelete(event, mobileSelectedCell)}", + flat, round, size="xl") + q-icon(name="delete") + .col.full-height.q-pr-xl + q-btn.full-height( + @click.prevent="handleModal()", + flat, round, size="xl") + q-icon(name="edit") + + //----- button: minimize carousel + q-btn.absolute-top-right( + @click="carouselVisibility()", + flat, no-ripple) + q-icon(name="clear") - //----- 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'}") + //----- button: maximize carousel + q-btn.backdrop-filter.shadow-1( + v-if="!carousel.visibility", + @click="carouselVisibility()", + flat, no-ripple, round) + q-icon(:name="carousel.icon", :class="{'flip-vertical': carousel.icon === 'photo_size_select_small'}") // ------------------------------ //----- not used at the moment -- GitLab