Commit 2a7d2c8b authored by christianrhansen's avatar christianrhansen

layout edit-box (now narrower & with header)

parent e9963e8a
Pipeline #16842 passed with stage
in 32 seconds
......@@ -158,60 +158,65 @@
// ------------------------------------------------------------------------------------------ edit box (mobile only)
//v-if="showEditingCells && isMobile",
q-page-sticky.edit-box.q-mx-md.q-mb-md.transition-bottom.backdrop-filter.shadow-3(
v-if="isMobile",
:class="[{'show-full' : carousel.visibility && showEditingCells}, {'show-minimized' : showEditingCells}]",
style="border-radius: .5rem;",
position="bottom-right")
div
q-carousel.q-py-sm.carousel.transition-opacity(ref="carousel", v-model="slide", infinite, @input="getCarouselIcon(index)")
//----- move
q-carousel-slide.q-py-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-py-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")
//----- button: delete cell
.absolute-top-left
//------------------------- buttons
.row
//----- delete cell
.col
q-btn.q-py-none.q-pl-sm.q-ml-xs.text-grey-8(
@click="event => {handleCellContextMenuDelete(event, mobileSelectedCell)}", flat, no-ripple)
@click="event => {handleCellContextMenuDelete(event, mobileSelectedCell)}", flat, no-ripple)
q-icon(name="delete")
//----- button: toggle edit-box
.absolute-top-right
//----- toggle edit-box
.col.text-right
q-btn.q-py-none.q-pr-sm.q-mr-xs.text-grey-8(@click="carouselVisibility()", flat, no-ripple)
q-icon(v-if="carousel.visibility", name="keyboard_arrow_down")
q-icon(v-else, name="keyboard_arrow_up")
q-item-separator.q-ma-none
//------------------------- carousel
q-carousel.q-py-sm.carousel.transition-opacity(ref="carousel", v-model="slide",
infinite, @input="getCarouselIcon(index)", style="width: 180px;")
//----- move
q-carousel-slide.q-py-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-py-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")
</template>
<script>
......@@ -1066,13 +1071,13 @@
color $grey-8
.edit-box
bottom -180px
bottom -220px
.carousel
opacity 0
&.show-minimized
bottom calc(-180px + 46px)
bottom calc(-220px + 42px)
&.show-full
bottom 0px
......
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