Commit 77fad235 authored by christianrhansen's avatar christianrhansen

mobile: "move cell"-button position #2: working better, still buggy

parent 72eecf0b
......@@ -37,7 +37,7 @@
// ------------------------------------------------------------------------------------------------------------ grid
@click="event => {addMobileCell(event)}",
div.cell-grid(
div.cell-grid.relative-position(
v-touch-pan="panGrid",
@dragenter="handleGridDragOver",
@dragover="handleGridDragOver",
......@@ -143,11 +143,12 @@
q-icon(name="check")
//----- resize handler (top left)
// :style="{left: resizeHandler.topLeft.x - 20 + 'px', top: resizeHandler.topLeft.y - 20 + 'px'}")
.resize-handler-mobile.top-left.fixed.text-dark.justify-center.row.bg-white.shadow-6(
v-if="mobileTempCell.onGrid",
v-touch-pan="handleTopLeft", round, flat,
:class="{'pushed': !resizeHandler.topLeft.pushed}",
:style="{left: resizeHandler.topLeft.x - 20 + 'px', top: resizeHandler.topLeft.y - 20 + 'px'}")
:style="setHandlerStyle()")
// q-icon.self-center.rotate-180(name="signal_cellular_4_bar", size="12px", style="margin-top: 2px;")
q-icon.self-center.rotate-180(name="open_with", size="22px")
......@@ -433,6 +434,27 @@
}
},
methods: {
setHandlerStyle () {
let _resizeHandler = this.resizeHandler
if (_resizeHandler.topLeft.pos.includes('absolute')) {
return {
'position': 'absolute',
'left': this.mobileTempCell.left + 'px',
'top': this.resizeHandler.topLeft.y - 20 + 'px'
}
}
else {
let side
if (_resizeHandler.topLeft.pos.includes('left')) side = '0px'
else side = 'calc(100vw - 40px)'
return {
'position': 'fixed',
'left': side,
'top': this.resizeHandler.topLeft.y - 20 + 59 + 'px'
}
}
},
// observerCallback (entries, observer) {
observerCallback (entries) {
let entryX = entries[0].boundingClientRect.x
......@@ -443,22 +465,18 @@
// ----- left
if (entryX < _resizeHandlerHalf) {
_resizeHandler.topLeft.x = _resizeHandlerHalf
_resizeHandler.topLeft.pos = 'fixed on-left-side'
}
// ----- middle
// if (entryX >= 20 && entryX <= window.innerWidth - 20) this.resizeHandler.topLeft.x = entryX
/*
if (entryX >= _resizeHandlerHalf && entryX <= window.innerWidth - _resizeHandler.size.width) {
_resizeHandler.topLeft.x = this.mobileTempCell.left
_resizeHandler.topLeft.pos = 'absolute'
}
*/
// ----- right
if (entryX > window.innerWidth - _resizeHandler.size.width) {
_resizeHandler.topLeft.x = window.innerWidth - _resizeHandlerHalf
_resizeHandler.topLeft.pos = 'fixed on-right-side'
}
},
......@@ -520,13 +538,13 @@
this.mobileTempCell.ox = res.ox
this.mobileTempCell.oy = res.oy
this.mobileTempCell.left = this.gridDimensions.full.cell.width * (res.x - 1)
this.resizeHandler.topLeft.y = res.y * this.gridDimensions.full.cell.height
if (obj.isFinal) {
this.mobileTempCell.onGrid = true
this.mobileTempCell.button = true
this.resizeHandler.topLeft.y = res.y * this.gridDimensions.full.cell.height + 16
this.resizeHandler.topLeft.pushed = false
this.mobileTempCell.left = this.gridDimensions.full.cell.width * (res.x - 1)
}
},
testButton (obj) {
......
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