Commit bfc7b867 authored by christianrhansen's avatar christianrhansen

mobile: animated resize button

parent 6f6a3530
Pipeline #17203 passed with stage
in 38 seconds
......@@ -142,7 +142,7 @@
style="background-color: rgba(0, 0, 0, 0);")
q-icon(name="check")
//----- resize handler (top left)
//----- move handler (top left)
// :style="{left: handlerNewCell.move.x - 20 + 'px', top: handlerNewCell.move.y - 20 + 'px'}")
.handler-new-cell.move.absolute.text-dark.justify-center.row.bg-white.shadow-6(
v-if="mobileTempCell.onGrid",
......@@ -157,7 +157,8 @@
.handler-new-cell.resize.absolute.text-dark.justify-center.row.bg-white.shadow-6(
v-if="mobileTempCell.onGrid",
v-touch-pan="handleResizeCell", round, flat,
:style="{left: handlerNewCell.resize.x - 20 + 'px', top: handlerNewCell.resize.y - 20 + 'px'}")
:style="{left: handlerNewCell.resize.x - 20 + 'px', top: handlerNewCell.resize.y - 20 + 'px'}",
:class="{'pushed': !handlerNewCell.resize.pushed}")
q-icon.self-center(name="signal_cellular_4_bar", size="12px", style="margin-left: -3px;")
// ---------------------------------------------------------------------------------------------------------------
......@@ -514,25 +515,34 @@
},
handleResizeCell (obj) {
// this.cursor = {x: obj.position.left, y: obj.position.top}
this.handlerNewCell.resize = {x: obj.position.left, y: obj.position.top}
// this.handlerNewCell.resize = {x: obj.position.left, y: obj.position.top}
console.log(obj.position.left)
this.handlerNewCell.resize.x = obj.position.left
this.handlerNewCell.resize.y = obj.position.top
// ---> panGrid
let res = this.getGridPositionForEvent(obj)
if (obj.isFirst) {
this.mobileTempCell.show = true
this.mobileTempCell.button = false
// this.mobileTempCell.x = res.x
// this.mobileTempCell.y = res.y
this.handlerNewCell.resize.pushed = true
}
this.mobileTempCell.width = res.x - this.mobileTempCell.x + 1
this.mobileTempCell.height = res.y - this.mobileTempCell.y + 1
this.handlerNewCell.resize.x = res.ox
this.handlerNewCell.resize.y = res.oy
if (obj.isFinal) {
this.mobileTempCell.onGrid = true
this.mobileTempCell.button = true
this.handlerNewCell.resize.pushed = false
// this.addMobileCell(obj)
// this.mobileTempCell.show = false
this.handlerNewCell.resize.x = this.gridDimensions.full.cell.width * res.x - 8 - 20
this.handlerNewCell.resize.y = this.gridDimensions.full.cell.height * res.y - 8 - 20
}
},
clearCachedCell () {
......@@ -1275,9 +1285,17 @@
width handler-width
height handler-width
border-radius 1000px
&.resize
left 'calc(100vw - %s - 8px)' % handler-width
top 'calc(100vh - %s - 8px)' % handler-width
&.pushed
transition top ease 200ms, left ease 200ms
&.on-left-side
left 0
&.on-right-side
left 'calc(100vw - %s)' % handler-width
&.move
left 8px
top 68px
......
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