Commit 944a9312 authored by christianrhansen's avatar christianrhansen

mobile: added move-button

parent da40dd56
Pipeline #16981 passed with stage
in 5 minutes and 46 seconds
......@@ -136,10 +136,17 @@
@click="event => {addMobileCell(event)}", round, flat)
q-icon(name="check")
//----- resize handler
.resize-handler-mobile.text-dark.fixed.justify-center.row.bg-white.shadow-6(
//----- resize handler (top left)
.resize-handler-mobile.top-left.text-dark.fixed.justify-center.row.bg-white.shadow-6(
v-touch-pan="handleTopLeft", round, flat,
:style="{left: resizeHandler.topLeft.x - 20 + 'px', top: resizeHandler.topLeft.y - 20 + 'px'}")
// 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")
//----- resize handler (bottom right)
.resize-handler-mobile.bottom-right.text-dark.fixed.justify-center.row.bg-white.shadow-6(
v-touch-pan="testButton", round, flat,
:style="{left: cursor.x - 20 + 'px', top: cursor.y - 20 + 'px'}")
:style="{left: resizeHandler.bottomRight.x - 20 + 'px', top: resizeHandler.bottomRight.y - 20 + 'px'}")
q-icon.self-center(name="signal_cellular_4_bar", size="12px", style="margin-left: -3px;")
// ---------------------------------------------------------------------------------------------------------------
......@@ -283,7 +290,11 @@
slide: undefined,
modal: false,
carousel: {visibility: false, icon: 'open_with', slide: 0},
cursor: {x: undefined, y: undefined}
// cursor: {x: undefined, y: undefined},
resizeHandler: {
topLeft: {x: undefined, y: undefined},
bottomRight: {x: undefined, y: undefined}
}
}
},
computed: {
......@@ -381,9 +392,26 @@
}
},
methods: {
testButton (obj) {
this.cursor = {x: obj.position.left, y: obj.position.top}
handleTopLeft (obj) {
this.resizeHandler.topLeft = {x: obj.position.left, y: obj.position.top}
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
if (obj.isFinal) {
this.mobileTempCell.onGrid = true
this.mobileTempCell.button = true
}
},
testButton (obj) {
// this.cursor = {x: obj.position.left, y: obj.position.top}
this.resizeHandler.bottomRight = {x: obj.position.left, y: obj.position.top}
// ---> panGrid
let res = this.getGridPositionForEvent(obj)
......@@ -1130,11 +1158,15 @@
transition opacity ease 350ms
.resize-handler-mobile
left calc(100vw - 40px - 8px)
top calc(100vh - 40px - 8px)
width 40px
height 40px
border-radius 1000px
&.bottom-right
left calc(100vw - 40px - 8px)
top calc(100vh - 40px - 8px)
&.top-left
left 8px
top 68px
</style>
<style lang="stylus">
......
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