Commit cf4fc470 authored by christianrhansen's avatar christianrhansen

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