...
 
Commits (3)
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
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: .75rem;")
grid-editor-editing-cells-mobile grid-editor-editing-cells-mobile
// -----------------------------------------------------------------------------------------------------------------
// ----------------------------------------------------------------------------------------------- "new cell"-header // ----------------------------------------------------------------------------------------------- "new cell"-header
#new-cell-header.fixed-top.z-top.bg-dark.text-white.transition(:class="{'show': cachedNewCell}") #new-cell-header.fixed-top.z-top.bg-dark.text-white.transition(:class="{'show': cachedNewCell}")
q-item.q-pl-md.q-pr-xs.q-py-none.full-height q-item.q-pl-md.q-pr-xs.q-py-none.full-height
...@@ -40,8 +41,8 @@ ...@@ -40,8 +41,8 @@
q-btn.clear-button.q-px-md.q-mr-md.on-right(@click="clearHandler('cell')", flat) q-btn.clear-button.q-px-md.q-mr-md.on-right(@click="clearHandler('cell')", flat)
q-icon(name="clear") q-icon(name="clear")
// -----------------------------------------------------------------------------------------------------------------
// ------------------------------------------------------------------------------------------------------------ grid // ------------------------------------------------------------------------------------------------------------ grid
@click="event => {addMobileCell(event)}",
div.cell-grid.relative-position( div.cell-grid.relative-position(
v-touch-pan="panGrid", v-touch-pan="panGrid",
@dragenter="handleGridDragOver", @dragenter="handleGridDragOver",
...@@ -51,7 +52,7 @@ ...@@ -51,7 +52,7 @@
@contextmenu="handleGridContextMenu", @contextmenu="handleGridContextMenu",
:style="gridStyle") :style="gridStyle")
// context menu grid (desktop only) //----- context menu grid (desktop only)
q-context-menu.desktop-only(ref="gridmenu") q-context-menu.desktop-only(ref="gridmenu")
q-list(link, separator, no-border, style="min-width: 150px; max-height: 300px;") q-list(link, separator, no-border, style="min-width: 150px; max-height: 300px;")
q-item( q-item(
...@@ -63,10 +64,10 @@ ...@@ -63,10 +64,10 @@
template(v-if="!resizingGrid") template(v-if="!resizingGrid")
//--------------------------------------------------------------------------------------------------------------
//--------------------------------------------------------------------------------------------------------- cell
template(v-for="(annotation, index) in annotations") template(v-for="(annotation, index) in annotations")
// v-touch-hold="event => {cellCopy(event, annotation)}",
//----- cell
// v-touch-hold="event => {cellHold(event, annotation)}",
.cell-item( .cell-item(
v-if="!annotationUIStates[annotation._uuid] || !annotationUIStates[annotation._uuid].beingDragged", v-if="!annotationUIStates[annotation._uuid] || !annotationUIStates[annotation._uuid].beingDragged",
draggable="true", draggable="true",
...@@ -78,43 +79,27 @@ ...@@ -78,43 +79,27 @@
:class="getAnnotationClasses(annotation._uuid, 'cell-item')", :class="getAnnotationClasses(annotation._uuid, 'cell-item')",
:key="`cell-${index}`") :key="`cell-${index}`")
//--------------------------------------------------------------------------------------- edit-/close-button
// TODO: find a more elegant solution
//-------------------------------------------------------------------------------------------------- desktop //-------------------------------------------------------------------------------------------------- desktop
.desktop-only .desktop-only
q-btn.edit-button.absolute-top-right( q-btn.edit-button.absolute-top-right(
@click.prevent="event => {handleCellEditClick(event, annotation)}", @click.prevent="event => {handleCellEditClick(event, annotation)}",
:class="getAnnotationClasses(annotation._uuid, 'editing')", :class="getAnnotationClasses(annotation._uuid, 'editing')",
style="top: 8px; right: 8px;", style="top: 8px; right: 8px;",
:icon="annotationUIStates[annotation._uuid].editing ? 'close' : 'edit'", flat, round, size="md" :icon="annotationUIStates[annotation._uuid].editing ? 'close' : 'edit'", flat, round, size="md")
)
//--------------------------------------------------------------------------------------------------- mobile //--------------------------------------------------------------------------------------------------- mobile
.mobile-only .mobile-only
.edit-button.absolute.fit.bg-transparent( .edit-button.absolute.fit.bg-transparent(
v-touch-hold="event => {handleCellEdit(event, annotation)}", v-touch-hold="event => {handleCellEdit(event, annotation)}",
@click.prevent="event => {touchMobileCell(event, annotation)}") @click.prevent="event => {touchMobileCell(event, annotation)}")
//
q-btn.absolute-top-right.text-dark.q-pa-none.q-mr-xs(
v-if="showEditingCells",
@click.prevent="event => {handleCellEdit(event, annotation)}",
flat, round, size="sm", style="margin-top: 2px;")
q-icon(name="edit", size="20px")
//----- invisible edit-modal handler
//
q-btn.absolute-top-left.bg-blue(
@click.prevent="event => {handleCellEdit(event, annotation)}", flat, style="opacity: 0") bla
// @click.prevent="handleModal()", flat, style="opacity: 0") bla
//----- selecting cells disabled because it has no use currently //----- selecting cells disabled because it has no use currently
// switch with cell component below to re-enable it // switch with cell component below to re-enable it
//cell( //cell(
@click.native.prevent="event => {handleCellClick(event, annotation)}", :annotation="annotation", :preview="true") @click.native.prevent="event => {handleCellClick(event, annotation)}", :annotation="annotation", :preview="true")
cell( cell(
:annotation="annotation", :annotation="annotation",
:preview="true" :preview="true")
)
//----- resize-handler (desktop only) //----- resize-handler (desktop only)
.desktop-only.cell-item-resize-handle( .desktop-only.cell-item-resize-handle(
...@@ -135,12 +120,13 @@ ...@@ -135,12 +120,13 @@
@click.native="event => {action.handler(event, annotation)}") @click.native="event => {action.handler(event, annotation)}")
q-item-main(:label="action.label") q-item-main(:label="action.label")
//----- temporary cell when pulling a new cell into grid (desktop) //----------------------------------------------------------------------------------------------- temporary cell
//------------------------------------------------------------------------------------------------------ desktop
template(v-for="(tmpCell, index) in tmpObjects") template(v-for="(tmpCell, index) in tmpObjects")
.cell-item.cell-item-tmp(:style="getAnnotationStyle(tmpCell)", :key="`cell-tmp-${index}`") .cell-item.cell-item-tmp(:style="getAnnotationStyle(tmpCell)", :key="`cell-tmp-${index}`")
cell(:cell="tmpCell") cell(:cell="tmpCell")
//-------------------------------------------------------------------------------------- temporary cell (mobile) //------------------------------------------------------------------------------------------------------- mobile
template(v-if="mobileTempCell.show && cachedNewCell") template(v-if="mobileTempCell.show && cachedNewCell")
.cell-item.cell-item-tmp-mobile.row.justify-center.items-center( .cell-item.cell-item-tmp-mobile.row.justify-center.items-center(
...@@ -663,7 +649,7 @@ ...@@ -663,7 +649,7 @@
} }
} }
}, },
async cellHold (event, annotation) { async cellCopy (event, annotation) {
this.$store.commit('mosys/setEditingCells', '') this.$store.commit('mosys/setEditingCells', '')
this.$q.notify({ this.$q.notify({
......