gitlab.rlp.net will be temporarily unavailable for maintenance reasons on 2021-01-15 21:00 - 23:00

gitlab.rlp.net will be temporarily unavailable for maintenance reasons on 2021-01-15 21:00 - 23:00

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