Commit cf4fc470 authored by christianrhansen's avatar christianrhansen
Browse files

mobile: using classes instead of style bindings for temp-handler-positioning

parent 6ade9f15
Pipeline #18827 passed with stage
in 4 minutes and 29 seconds
...@@ -161,8 +161,8 @@ ...@@ -161,8 +161,8 @@
//----- (when main move handler is outside of viewport) //----- (when main move handler is outside of viewport)
cell-handler-mobile.temp.fixed( cell-handler-mobile.temp.fixed(
v-touch-pan="handleMoveCell", v-touch-pan="handleMoveCell",
:class="[tempHandler.move.visibility || handlerNewCell.resize.pushed ? 'temp-hide': 'temp-show']", :class="[(tempHandler.move.visibility || handlerNewCell.resize.pushed ? 'temp-hide': 'temp-show'), (tempHandler.move.side === 'left' ? 'left-side' : 'right-side')]",
:style="{left: tempHandler.move.left + 'px', top: handlerNewCell.move.y + 59 - 20 + 'px'}",) :style="{top: handlerNewCell.move.y + 59 - 20 + 'px'}",)
q-icon.self-center.rotate-180(name="open_with", size="22px") q-icon.self-center.rotate-180(name="open_with", size="22px")
//--------------------------------------------------------------------------------------------- resize handler //--------------------------------------------------------------------------------------------- resize handler
...@@ -183,10 +183,11 @@ ...@@ -183,10 +183,11 @@
//----- (temp) //----- (temp)
//----- (when main resize handler is outside of viewport) //----- (when main resize handler is outside of viewport)
// :style="{left: tempHandler.resize.left + 'px', top: handlerNewCell.resize.y + 59 - 20 + 'px'}",)
cell-handler-mobile.temp.fixed( cell-handler-mobile.temp.fixed(
v-touch-pan="handleResizeCell", v-touch-pan="handleResizeCell",
:class="[tempHandler.resize.visibility || handlerNewCell.move.pushed || handlerNewCell.resize.pushed? 'temp-hide': 'temp-show']", :class="[(tempHandler.resize.visibility || handlerNewCell.move.pushed || handlerNewCell.resize.pushed? 'temp-hide': 'temp-show'), (tempHandler.resize.side === 'left' ? 'left-side' : 'right-side')]",
:style="{left: tempHandler.resize.left + 'px', top: handlerNewCell.resize.y + 59 - 20 + 'px'}",) :style="{top: handlerNewCell.resize.y + 59 - 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;")
// --------------------------------------------------------------------------------------------------------------- // ---------------------------------------------------------------------------------------------------------------
...@@ -351,8 +352,8 @@ ...@@ -351,8 +352,8 @@
}, },
handlerNewCellTemp: {visibility: true, left: 0}, handlerNewCellTemp: {visibility: true, left: 0},
tempHandler: { tempHandler: {
move: {left: undefined, visibility: false, intersectingMainHandler: undefined}, move: {left: undefined, visibility: false, side: undefined, intersectingMainHandler: undefined},
resize: {left: undefined, visibility: false, intersectingMainHandler: undefined} resize: {left: undefined, visibility: false, side: undefined, intersectingMainHandler: undefined}
} }
} }
}, },
...@@ -471,7 +472,8 @@ ...@@ -471,7 +472,8 @@
// behind left side // behind left side
if (Math.sign(obj.offsetLeft) < 0) { if (Math.sign(obj.offsetLeft) < 0) {
this.tempHandler.move.left = 4 // this.tempHandler.move.left = 4
this.tempHandler.move.side = 'left'
} }
// visible // visible
else if (Math.sign(obj.offsetLeft) === 0) { else if (Math.sign(obj.offsetLeft) === 0) {
...@@ -479,7 +481,8 @@ ...@@ -479,7 +481,8 @@
} }
// behind right side // behind right side
else if (Math.sign(obj.offsetLeft) === 1) { else if (Math.sign(obj.offsetLeft) === 1) {
this.tempHandler.move.left = window.innerWidth - 40 - 4 // this.tempHandler.move.left = window.innerWidth - 40 - 4
this.tempHandler.move.side = 'right'
} }
} }
...@@ -490,14 +493,16 @@ ...@@ -490,14 +493,16 @@
// on left side // on left side
if (Math.sign(obj.offsetLeft) === -1) { if (Math.sign(obj.offsetLeft) === -1) {
this.tempHandler.resize.left = 4 // this.tempHandler.resize.left = 4
this.tempHandler.resize.side = 'left'
} }
// visible // visible
else if (Math.sign(obj.offsetLeft) === 0) { else if (Math.sign(obj.offsetLeft) === 0) {
} }
// on right side // on right side
else if (Math.sign(obj.offsetLeft) === 1) { else if (Math.sign(obj.offsetLeft) === 1) {
this.tempHandler.resize.left = window.innerWidth - 40 - 4 // this.tempHandler.resize.left = window.innerWidth - 40 - 4
this.tempHandler.resize.side = 'right'
// if (this.tempHandler.move.visibility === false) this.tempHandler.resize.visibility = true // if (this.tempHandler.move.visibility === false) this.tempHandler.resize.visibility = true
} }
} }
...@@ -1313,12 +1318,6 @@ ...@@ -1313,12 +1318,6 @@
&.pushed &.pushed
transition top ease 200ms, left ease 200ms transition top ease 200ms, left ease 200ms
&.on-left-side
left 0
&.on-right-side
left 'calc(100vw - %s)' % handler-width
&.temp &.temp
width handler-width width handler-width
height handler-width height handler-width
...@@ -1331,6 +1330,15 @@ ...@@ -1331,6 +1330,15 @@
overflow hidden overflow hidden
&.temp-show &.temp-show
opacity 1 opacity 1
&.left-side
left 4px
right auto
&.right-side
// left 'calc(100vw - %s)' % handler-width
left auto
right 4px
</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