...
 
Commits (4)
......@@ -7,7 +7,7 @@
q-window-resize-observable(@resize="updateGridDimensions")
//----- modal for existing cell editing
q-modal(v-model="modal", minimized, content-css="background-color: #eee; border-radius: .75rem;")
q-modal(v-model="modal", minimized, content-css="background-color: #eee; border-radius: .5rem;")
grid-editor-editing-cells-mobile
// -----------------------------------------------------------------------------------------------------------------
......@@ -52,7 +52,7 @@
@contextmenu="handleGridContextMenu",
:style="gridStyle")
//----- context menu grid (desktop only)
//----------------------------------------------------------------------------------- context menu: grid (desktop)
q-context-menu.desktop-only(ref="gridmenu")
q-list(link, separator, no-border, style="min-width: 150px; max-height: 300px;")
q-item(
......@@ -79,7 +79,7 @@
:class="getAnnotationClasses(annotation._uuid, 'cell-item')",
:key="`cell-${index}`")
//-------------------------------------------------------------------------------------------------- desktop
//------------------------------------------------------------------------------------ edit-button (desktop)
.desktop-only
q-btn.edit-button.absolute-top-right(
@click.prevent="event => {handleCellEditClick(event, annotation)}",
......@@ -87,12 +87,13 @@
style="top: 8px; right: 8px;",
:icon="annotationUIStates[annotation._uuid].editing ? 'close' : 'edit'", flat, round, size="md")
//--------------------------------------------------------------------------------------------------- mobile
//------------------------------------------------------------------------------------- select cell (mobile)
.mobile-only
.edit-button.absolute.fit.bg-transparent(
v-touch-hold="event => {handleCellEdit(event, annotation)}",
@click.prevent="event => {touchMobileCell(event, annotation)}")
//--------------------------------------------------------------------------------------------- cell content
//----- selecting cells disabled because it has no use currently
// switch with cell component below to re-enable it
//cell(
......@@ -101,7 +102,8 @@
:annotation="annotation",
:preview="true")
//----- resize-handler (desktop only)
//-------------------------------------------------------------------------------------------------- desktop
//------------------------------------------------------------------------------------------- resize-handler
.desktop-only.cell-item-resize-handle(
draggable="true",
@dragstart="event => {handleCellResizerDragStart(event, annotation)}",
......@@ -109,7 +111,7 @@
@dragexit="event => {handleCellResizerDragEnd(event, annotation)}")
q-icon.q-ma-xs(name="network cell")
//----- context menu for cells (desktop only)
//-------------------------------------------------------------------------------------- context menu: cells
// TODO: needs revision
q-context-menu.desktop-only
q-list(link, separator, no-border, style="min-width: 150px; max-height: 300px;")
......@@ -128,20 +130,13 @@
//------------------------------------------------------------------------------------------------------- mobile
template(v-if="mobileTempCell.show && cachedNewCell")
.cell-item.cell-item-tmp-mobile.row.justify-center.items-center(
ref="_mobileTempCell",
:style="mobileTempCellStyle(mobileTempCell)")
cell.absolute-top-left.q-ma-sm(:cell="cachedNewCell", :temp="true")
//
q-btn.text-white(v-if="mobileTempCell.button",
@click="event => {addMobileCell(event)}", round, flat, size="lg",
style="background-color: rgba(0, 0, 0, 0);")
q-icon(name="check")
//------------------------------------------------------------------------------------------------- move handler
//------------------------------------------------------------------------------------------------------ handler
//--------------------------------------------------------------------------------------------------------- move
//----- (main)
cell-handler-mobile.main-handler.shadow-1(
v-if="!cellHandler.resize.pushed",
......@@ -161,7 +156,7 @@
:style="{top: cellHandler.move.y + 59 - 20 + 'px'}",)
q-icon.rotate-180(name="open_with", size="22px")
//----------------------------------------------------------------------------------------------- resize handler
//------------------------------------------------------------------------------------------------------- resize
//----- (main)
cell-handler-mobile.main-handler.shadow-1(
v-if="!cellHandler.move.pushed",
......@@ -203,69 +198,6 @@
q-btn.q-mr-md(round, color="primary", size="sm", @click="$router.push(`/mosys/grids/${$route.params.uuid}`)")
q-icon(name="remove red eye")
// ------------------------------------------------------------------------------------------ edit box (mobile only)
q-page-sticky.edit-box.q-mx-md.q-mb-md.transition-bottom.backdrop-filter.shadow-6.overflow-hidden.hidden(
v-if="isMobile",
:class="[{'show-full' : carousel.visibility && showEditingCells}, {'show-minimized' : showEditingCells}]",
style="border-radius: .5rem;",
position="bottom-right")
//------------------------- buttons
// .row.text-dark(style="background-color: rgba(0, 0, 0, .2);")
.row.text-dark(style="background-color: rgba(255, 150, 150, .3);")
//----- delete cell
.col
q-btn.q-py-none.q-pl-sm.q-ml-xs(
@click="event => {handleCellContextMenuDelete(event, mobileSelectedCell)}", flat, no-ripple)
q-icon(name="delete")
//----- toggle edit-box
.col.text-right
q-btn.q-py-none.q-pr-sm.q-mr-xs(@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
q-carousel-slide.q-py-none
.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
q-carousel-slide.q-py-none
.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>
......@@ -331,9 +263,7 @@
onGrid: false,
button: false
},
slide: undefined,
modal: false,
carousel: {visibility: false, icon: 'open_with', slide: 0},
// cursor: {x: undefined, y: undefined},
cellHandler: {
size: {width: 40, height: 40},
......@@ -430,26 +360,6 @@
},
deep: true
},
slide (val) {
let icon
switch (val) {
case 0:
icon = 'open_with'
break
case 1:
icon = 'photo_size_select_small'
break
case 2:
icon = 'more_horiz'
break
default:
icon = 'open_with'
break
}
// this.carousel.slide = val
// this.carousel.icon = icon
this.carousel = {slide: val, icon: icon, visibility: this.carousel.visibility}
},
annotations () {
this.updateAnnotationUIStates()
},
......@@ -608,16 +518,6 @@
this.touchMobileCell(event, annotation)
this.handleModal()
},
getCarouselIcon (val) {
console.log(val)
},
carouselVisibility () {
console.log(this.carousel.slide)
if (this.$refs.carousel) {
this.$refs.carousel.goToSlide(this.carousel.slide)
}
this.carousel.visibility = !this.carousel.visibility
},
handleModal () {
this.modal = !this.modal
},
......@@ -1335,27 +1235,6 @@
background-color rgba(0, 0, 0, 0)
color $grey-8
.edit-box
bottom -220px
.carousel
opacity 0
&.show-minimized
bottom calc(-220px + 58px)
&.show-full
bottom 0px
.carousel
opacity 1
.transition-bottom
transition bottom ease 350ms
.transition-opacity
transition opacity ease 350ms
//************************************************** mobile: new cell
handler-width = 40px
gap = 0px
......@@ -1398,10 +1277,4 @@
<style lang="stylus">
@import '~variables'
.q-carousel-left-arrow,
.q-carousel-right-arrow
background-color transparent
.q-icon
color $grey-6
</style>