Commit 3376f5bf authored by christianrhansen's avatar christianrhansen

carousel slides styling

parent c6ac9440
Pipeline #16753 passed with stage
in 5 minutes and 7 seconds
......@@ -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
......
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