Commit 1d52a57a authored by christianrhansen's avatar christianrhansen

mobile: working dummy "move new cell"-handler when main "move new...

mobile: working dummy "move new cell"-handler when main "move new cell"-handler is outside the viewport
parent f3a97003
Pipeline #17270 passed with stage
in 50 seconds
......@@ -145,8 +145,9 @@
//----- move handler (top left)
// :style="{left: handlerNewCell.move.x - 20 + 'px', top: handlerNewCell.move.y - 20 + 'px'}")
// :class="[handlerNewCell.move.inViewport ? 'absolute' : 'fixed', {'pushed': !handlerNewCell.move.pushed}]")
// v-if="mobileTempCell.onGrid && !handlerNewCell.resize.pushed",
.handler-new-cell.move.absolute.text-dark.justify-center.row.bg-white.shadow-6(
v-if="mobileTempCell.onGrid && !handlerNewCell.resize.pushed",
ref="move",
v-touch-pan="handleMoveCell", round, flat,
:style="{left: handlerNewCell.move.x - 20 + 'px', top: handlerNewCell.move.y - 20 + 'px'}",
:class="[{'pushed': !handlerNewCell.move.pushed}]")
......@@ -155,9 +156,9 @@
q-icon.self-center.rotate-180(name="open_with", size="22px")
// dummy move handler
.handler-new-cell.fixed.text-dark.justify-center.row.bg-white.shadow-6(
.handler-new-cell.dummy.fixed.text-dark.justify-center.row.bg-white.shadow-6(
v-touch-pan="handleMoveCell",
:class="{'dummyButtonHide': !dummyButton.visibility}",
:class="[!dummyButton.visibility ? 'dummyButtonHide': 'dummyButtonShow']",
:style="{left: dummyButton.left + 'px', top: handlerNewCell.move.y + 59 - 20 + 'px'}",)
q-icon.self-center.rotate-180(name="open_with", size="22px")
......@@ -398,8 +399,8 @@
*/
let observer = new IntersectionObserver(this.observerCallback)
// observer.observe(this.$refs.move)
observer.observe(this.$refs._mobileTempCell)
observer.observe(this.$refs.move)
// observer.observe(this.$refs._mobileTempCell)
this.observer = observer
},
beforeDestroy () {
......@@ -481,7 +482,22 @@
// this.handlerNewCell.move.inViewport = false
// this.handlerNewCell.move.x = 20
this.dummyButton.visibility = true
if (scrollLeft < this.mobileTempCell.x * this.gridDimensions.full.cell.width - 1) {
/*
console.log('----------------')
console.log('scrollLeft', scrollLeft)
console.log('scrollLeft + window.innerWidth', scrollLeft + window.innerWidth)
console.log('this.mobileTempCell.x', this.mobileTempCell.x * (this.gridDimensions.full.cell.width - 1))
*/
if (scrollLeft < this.handlerNewCell.move.x) {
console.log('-->')
this.dummyButton.left = window.innerWidth - 40
}
if (scrollLeft > this.handlerNewCell.move.x) {
console.log('<--')
this.dummyButton.left = 0
}
/*
if (scrollLeft + window.innerWidth < this.mobileTempCell.x * this.gridDimensions.full.cell.width - 1) {
// console.log('--->')
this.dummyButton.left = window.innerWidth - 40
}
......@@ -489,6 +505,7 @@
// console.log('<---')
this.dummyButton.left = 0
}
*/
}
else {
console.log('is intersecting')
......@@ -1329,10 +1346,14 @@
//************************************************** mobile: new cell
handler-width = 40px
.dummy
transition opacity ease 200ms
opacity 0
.dummyButtonHide
width 0!important
overflow hidden
.dummyButtonShow
opacity 1
.handler-new-cell
width handler-width
height handler-width
......
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