......@@ -7,15 +7,15 @@
// ------------------------------------------------------------------------------------------ cached new cell helper
// q-page-sticky.z-top(v-touch-pan="moveCachedCell", v-if="cachedNewCell", position="top-right")
// .fixed.z-top(v-if="cachedNewCell")
// .fixed-top-left.z-top(v-touch-pan="moveCachedCell", v-if="cachedNewCell",
// :style="{top: touch.position.top - 16 - 16 + 'px', left: touch.position.left - 16 - 16 + 'px'}")
.fixed-top-right.z-top(v-touch-pan="moveCachedCell", v-if="cachedNewCell")
.bg-frosted-glass.text-dark.q-px-md.q-py-sm.q-ma-md.shadow-4(:style="{width: gridDimensions.full.cell.width + 'px', height: gridDimensions.full.cell.height + 'px'}")
| {{ cachedNewCell.type }} Cell:
br
| {{ cachedNewCell.value }}
q-btn.bg-dark.text-white.on-right(@click.native="cachedNewCell = undefined", round, flat, size="sm")
q-icon(name="clear")
// .fixed-top.z-top(v-touch-pan="moveCachedCell", v-if="cachedNewCell")
.fixed-top-right.z-top(v-touch-pan="moveCachedCell", v-if="cachedNewCell",
:style="{top: touch.position.top - 16 - 16 + 'px'}")
q-item.backdrop-filter.text-dark.q-pa-sm.q-ma-md.shadow-4.q-pl-md()
q-item-main
| Place your cell anywhere.
q-item-side
q-btn.bg-primary.text-white.on-right(@click.native="cachedNewCell = undefined", round, flat)
q-icon(name="delete")
// ------------------------------------------------------------------------------------------------------------ grid
div.cell-grid(
......@@ -27,8 +27,8 @@
@contextmenu="handleGridContextMenu",
:style="gridStyle")
// context menu grid
q-context-menu(ref="gridmenu")
// context menu grid (desktop only)
q-context-menu.desktop-only(ref="gridmenu")
q-list(link, separator, no-border, style="min-width: 150px; max-height: 300px;")
q-item(
v-for="action in gridContextMenuActions",
......@@ -44,6 +44,7 @@
//----- cell
.cell-item(
v-if="!annotationUIStates[annotation._uuid] || !annotationUIStates[annotation._uuid].beingDragged",
v-touch-hold="event => {cellHold(event, annotation)}",
draggable="true",
@click.prevent="event => {handleCellTouch(event, annotation)}",
@dragstart="event => {handleCellDragStart(event, annotation)}",
......@@ -126,18 +127,21 @@
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
.col
q-btn.full-width(@click="setEditMode('edit')", :class="{'bg-primary text-white' : editMode === 'edit'}", flat)
q-icon(name="edit")
.col-3
.col
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
.col
q-btn.full-width(@click="setEditMode('move')", :class="{'bg-primary text-white' : editMode === 'move'}", flat)
q-icon(name="open_with")
.col-3
.col
q-btn.full-width(@click="setEditMode('delete')", :class="{'bg-primary text-white' : editMode === 'delete'}", flat)
q-icon(name="delete")
.col
q-btn.full-width.bg-dark.text-white(@click="setEditMode('clone')", :class="{'bg-primary text-white' : editMode === 'clone'}", flat)
q-icon(name="filter_none", size="18px")
div.full-width
......@@ -314,6 +318,21 @@
}
},
methods: {
async cellHold (event, annotation) {
this.$q.notify({
message: 'Cell was cloned.',
color: 'dark',
textColor: 'white'
})
const _cell = await this.$store.dispatch('cells/get', annotation.body.source.id)
const resourceCell = {
data: { content: '' },
config: {},
component: _cell.component
}
this.$store.commit('mosys/cacheNewCell', resourceCell)
},
moveCachedCell (obj) {
this.touch.position = {top: obj.position.top, left: obj.position.left}
/*
......
......@@ -7,10 +7,10 @@
img(v-else, :src="imgSrc")
template(v-else)
.absolute-top-left.q-pa-sm.z-top
cell-info(:cell="cell", type="Image Cell")
div.q-pa-sm.cell-background(:style="cellBackgroundStyle")
// cell-info(:cell="cell", type="Image Cell")
.absolute-top-left.q-pa-sm
cell-info(:cell="cell", type="Image Cell")
</template>
......