div.cell-grid-container
q-window-resize-observable(@resize="updateGridDimensions")
div.cell-grid(
@dragenter="handleGridDragOver",
@dragover="handleGridDragOver",
@dragleave="handleGridDragEnd",
@drop="handleGridDrop",
@contextmenu="handleGridContextMenu",
:style="gridStyle")
q-context-menu(ref="gridmenu")
q-list(link, separator, no-border, style="min-width: 150px; max-height: 300px;")
q-item(
v-for="action in gridContextMenuActions",
:key="action.label",
v-close-overlay,
@click.native="event => {action.handler(event)}")
q-item-main(:label="action.label")
template(v-if="!resizingGrid")
template(v-for="(annotation, index) in annotations")
.cell-item(
v-if="!annotationUIStates[annotation._uuid] || !annotationUIStates[annotation._uuid].beingDragged",
draggable="true",
@click.prevent="event => {handleCellTouch(event, annotation)}",
@dragstart="event => {handleCellDragStart(event, annotation)}",
@dragend="event => {handleCellDragEnd(event, annotation)}",
@contextmenu="handleCellContextMenu",
:style="getAnnotationStyle(annotation)",
:class="getAnnotationClasses(annotation._uuid, 'cell-item')",
:key="`cell-${index}`")
//----- edit-/close-button
// TODO: find a more elegant solution
.desktop-only
q-btn.edit-button.absolute-top-right(
@click.prevent="event => {handleCellEditClick(event, annotation)}",
:class="getAnnotationClasses(annotation._uuid, 'editing')",
style="top: 8px; right: 8px;",
:icon="annotationUIStates[annotation._uuid].editing ? 'close' : 'edit'", flat, round, size="md"
)
.mobile-only
q-btn.edit-button.absolute.fit.bg-transparent(
@click.prevent="event => {touchMobileCell(event, annotation)}", flat)
// selecting cells disabled because it has no use currently
// switch with cell component below to re-enable it
//cell(
@click.native.prevent="event => {handleCellClick(event, annotation)}", :annotation="annotation", :preview="true")
cell(
:annotation="annotation",
:preview="true"
)
//----- resize-handler (cell)
div.cell-item-resize-handle(
draggable="true",
@dragstart="event => {handleCellResizerDragStart(event, annotation)}",
@dragend="event => {handleCellResizerDragEnd(event, annotation)}",
@dragexit="event => {handleCellResizerDragEnd(event, annotation)}")
q-icon(name="network cell")
q-context-menu
q-list(link, separator, no-border, style="min-width: 150px; max-height: 300px;")
q-item(
v-for="action in cellContextMenuActions",
:key="action.label",
v-close-overlay,
@click.native="event => {action.handler(event, annotation)}")
q-item-main(:label="action.label")
template(v-for="(tmpCell, index) in tmpObjects")
.cell-item.cell-item-tmp(:style="getAnnotationStyle(tmpCell)", :key="`cell-tmp-${index}`")
cell(:cell="tmpCell")
template(v-else)
.cell-item(:style="getAnnotationStyle({x:0,y:0,width:1,height:1})", key="cell-grid-resizer")
div.cell-item-resize-handle(
draggable="true",
@dragstart="event => {handleGridResizerDragStart(event)}",
@dragend="event => {handleGridResizerDragEnd(event)}",
@dragexit="event => {handleGridResizerDragEnd(event)}")
q-icon(name="network cell")
//template(v-if="!isMobile")
.fixed-top-right(style="right:18px; top:68px", v-if="!$store.state.mosys.showSources")
q-btn(round, color="primary", small, @click="handleGridButtonClickEdit", style="margin-right: 0.5em")
q-icon(name="add")
q-btn(round, color="primary", small, @click="$router.push(`/mosys/grids/${$route.params.uuid}`)")
q-icon(name="remove red eye")
//template(v-if="isMobile")
.fixed-top-right.q-mt-sm(v-if="!$store.state.mosys.showSources", style="z-index: 10000; padding-top: 3px;")
q-btn.q-mr-sm(round, color="primary", size="sm", @click="handleGridButtonClickEdit")
q-icon(name="add")
q-btn.q-mr-md(round, color="primary", size="sm", @click="$router.push(`/mosys/grids/${$route.params.uuid}`)")
q-icon(name="remove red eye")
// --------------------------------------------------------------------------------------------------------- buttons
q-page-sticky.z-top.q-mb-md.backdrop-filter.shadow-1.q-mx-md.overflow-hidden(v-if="showEditingCells", position="bottom-right")
div.row.text-center.text-dark.round-borders.full-width(style="border-bottom: 1px solid #bbb;")
.col-3
q-btn.full-width(@click="setEditMode('edit')", :class="{'bg-primary text-white' : editMode === 'edit'}", flat)
q-icon(name="edit")
.col-3
q-btn.full-width(@click="setEditMode('resize')", :class="{'bg-primary text-white' : editMode === 'resize'}", flat)
q-icon.flip-vertical(name="photo_size_select_small")
.col-3
q-btn.full-width(@click="setEditMode('move')", :class="{'bg-primary text-white' : editMode === 'move'}", flat)
q-icon(name="open_with")
.col-3
q-btn.full-width(@click="setEditMode('delete')", :class="{'bg-primary text-white' : editMode === 'delete'}", flat)
q-icon(name="delete")
div.full-width
//----- edit
div#edit-content-mobile(v-if="editMode === 'edit'")
grid-editor-editing-cells-mobile
//----- move
div(v-if="editMode === 'move'", :class="{'q-pa-md' : editMode}")
.text-center
q-btn.bg-dark(@click="mobileCellMove(mobileSelectedCell, 0, -1)", round, flat, size="md")
q-icon.rotate-90(name="keyboard_backspace")
.text-center
q-btn.bg-dark(@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.bg-dark(@click="mobileCellMove(mobileSelectedCell, 1, 0)", round, flat, size="md")
q-icon.rotate-180(name="keyboard_backspace")
.text-center
q-btn.bg-dark(@click="mobileCellMove(mobileSelectedCell, 0, 1)", round, flat, size="md")
q-icon.rotate-270(name="keyboard_backspace")
//----- resize
div(v-if="editMode === 'resize'", :class="{'q-pa-md' : editMode}")
.text-center
q-btn.bg-dark(@click="mobileCellResize(mobileSelectedCell, 0, -1)", round, flat, size="md")
q-icon(name="remove")
.text-center
q-btn.bg-dark(@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.bg-dark(@click="mobileCellResize(mobileSelectedCell, 1, 0)", round, flat, size="md")
q-icon(name="add")
.text-center
q-btn.bg-dark(@click="mobileCellResize(mobileSelectedCell, 0, 1)", round, flat, size="md")
q-icon(name="add")
//----- delete
div(v-if="editMode === 'delete'", :class="{'q-pa-md' : editMode}")
.text-center
.text-dark
| {{ $t('labels.delete_cell') }}
.q-mt-md
q-btn.bg-dark.text-white.q-mx-sm(@click="event => {handleCellContextMenuDelete(event, mobileSelectedCell)}",
flat, round, size="md")
q-icon(name="check")