Commit 5857f00a authored by Anton Koch's avatar Anton Koch

Merge branch '405-strange-move-handler-behavior---mosys' into 'release_2_0'

fixed strange move handler animations (#405)

See merge request !46
parents 3c602847 1eddcc6c
Pipeline #55130 passed with stage
in 1 minute and 24 seconds
<template lang="pug">
.cell-handler.justify-center.row.bg-white(ref="targetHandler")
q-btn.text-dark(@click="onDoubleTap", flat, size="sm", no-ripple, style="max-width: 100%;")
.default-handler.cell-handler.justify-center.row.bg-white(ref="targetHandler")
q-btn.text-dark(flat, size="sm", no-ripple, style="max-width: 100%;")
slot
</template>
<script>
export default {
props: ['type', 'doubleTap'],
data () {
return {
clickTimer: null
}
},
name: 'CellHandler',
props: ['type'],
mounted () {
if (this.type) {
let observer = new IntersectionObserver(this.observerCallback)
......@@ -20,23 +16,6 @@
}
},
methods: {
onDoubleTap () {
if (this.doubleTap) {
if (this.clickTimer == null) {
this.clickTimer = setTimeout(function () {
clearTimeout(this.clickTimer)
this.clickTimer = null
// alert('single')
}, 300)
}
else {
clearTimeout(this.clickTimer)
this.clickTimer = null
this.doubleTap.el.scrollLeft = this.doubleTap.oLeft - 16
// alert('double')
}
}
},
observerCallback (entries) {
let
target = entries[0],
......@@ -49,15 +28,13 @@
},
destroyed () {
if (this.observer) this.observer.disconnect()
},
name: 'CellHandler'
}
}
</script>
<style scoped lang="stylus">
handler-width = 40px
border-radius-handler = 100vw
gap = 0px
.cell-handler
width handler-width
......@@ -73,33 +50,6 @@
&.hide
width 0!important
overflow hidden
&.sticked-handler
position fixed
width handler-width
height handler-width
transition opacity ease 350ms
transition-delay 100ms
opacity 0
&.hide
width 0!important
overflow hidden
border-right 0!important
&.show
opacity 1
&.left-side
left gap
right auto
border-radius 0 border-radius-handler border-radius-handler 0
&.right-side
left auto
border-radius border-radius-handler 0 0 border-radius-handler
&.mobile
right gap
&.desktop
right calc(100vw / 4)
</style>
<style lang="stylus">
......
......@@ -113,45 +113,45 @@
//--------------------------------------------------------------------------------------------------- move handler
//----- default in cell
cell-handler.default-handler(
cell-handler(
v-if="!cellHandler.resize.pushed",
v-touch-pan.prevent="moveCell",
@onIntersectionChange="intersectionChanged",
:type="'move'",
type="move",
:style="{left: cellHandler.move.x - 20 + 4 + 'px', top: cellHandler.move.y - 20 + 4 + 'px'}",
:class="[{'pushed': !cellHandler.move.pushed}, {'hide': cellHandler.hidden}]")
q-icon.rotate-180(name="open_with", size="22px")
//----- sticked to edge
cell-handler.sticked-handler(
sticked-handler.move(
v-touch-pan.prevent="moveCell",
:doubleTap="{el: $el, type: 'scroll', oLeft: tempCell.left}",
:style="{top: cellHandler.move.y + 59 - 20 + 4 + 'px'}",
:style="{top: cellHandler.move.y - 20 + 4 + 'px'}",
:class="[(cellHandler.hidden || sideHandler.move.intersectingMainHandler || cellHandler.resize.pushed || cellHandler.move.pushed ? 'hide': 'show'), (sideHandler.move.side === 'left' ? 'left-side' : 'right-side'), (isMobile ? 'mobile' : 'desktop')]")
q-icon.rotate-180(name="open_with", size="22px")
//------------------------------------------------------------------------------------------------- temporary cell
.cell-item.temp-cell(
v-if="cellHandler.resize.pushed || cellHandler.move.pushed || cachedNewCell",
:style="getCellStyle(tempCell)",
:class="{'edit': tempCell.type === 'edit'}")
v-if="cellHandler.resize.pushed || cellHandler.move.pushed || cachedNewCell",
:style="getCellStyle(tempCell)",
:class="{'edit': tempCell.type === 'edit'}")
//------------------------------------------------------------------------------------------------- resize handler
//----- default in cell
cell-handler.default-handler(
cell-handler(
v-if="!cellHandler.move.pushed",
v-touch-pan.prevent="resizeCell",
@onIntersectionChange="intersectionChanged",
:type="'resize'",
type="resize",
:style="{left: cellHandler.resize.x - 20 - 4 + 'px', top: cellHandler.resize.y - 20 - 4 + 'px'}",
:class="[{'pushed': !cellHandler.resize.pushed}, {'hide': cellHandler.hidden}]")
q-icon(name="signal_cellular_4_bar", size="12px", style="margin-left: -3px;")
//----- sticked to edge
cell-handler.sticked-handler(
sticked-handler(
v-touch-pan.prevent="resizeCell",
:style="{top: cellHandler.resize.y + 59 - 20 - 4 + 'px'}",
:class="[(cellHandler.hidden || sideHandler.resize.intersectingMainHandler || cellHandler.move.pushed || cellHandler.resize.pushed ? 'hide': 'show'), (sideHandler.resize.side === 'left' ? 'left-side' : 'right-side'), (isMobile ? 'mobile' : 'desktop')]")
......@@ -220,6 +220,7 @@
import { mapGetters } from 'vuex'
import CellEditor from './CellEditor'
import CellHandler from './CellHandler'
import StickedHandler from './StickedHandler'
import constants from 'mbjs-data-models/src/constants'
const nullImage = new Image()
......@@ -229,7 +230,8 @@
components: {
Cell,
CellEditor,
CellHandler
CellHandler,
StickedHandler
},
props: ['gridUuid', 'tabsAreOpen'],
data () {
......@@ -1128,7 +1130,7 @@
if (_y <= 0) y = 1
else if (_y > configuration.rows) y = configuration.rows
else y = _y
console.log(this.cellHandler.move.y)
return { x: x, y: y, ox: ox, oy: oy }
},
updateGridDimensions (size) {
......
<template lang="pug">
.sticked-handler.cell-handler.justify-center.row.bg-white(ref="targetHandler")
q-btn.text-dark(@click="onDoubleTap", flat, size="sm", no-ripple, style="max-width: 100%;")
slot
</template>
<script>
export default {
name: 'StickedHandler',
props: ['doubleTap'],
data () {
return {
clickTimer: null
}
},
methods: {
onDoubleTap () {
if (this.doubleTap) {
if (this.clickTimer == null) {
this.clickTimer = setTimeout(function () {
clearTimeout(this.clickTimer)
this.clickTimer = null
// alert('single')
}, 300)
}
else {
clearTimeout(this.clickTimer)
this.clickTimer = null
this.doubleTap.el.scrollLeft = this.doubleTap.oLeft - 16
// alert('double')
}
}
}
}
}
</script>
<style scoped lang="stylus">
handler-width = 40px
border-radius-handler = 100vw
gap = 0px
.move
transform translateY(59px)
.cell-handler
width handler-width
height handler-width
&.pushed
transition top ease 200ms, left ease 200ms
&.sticked-handler
position fixed
width handler-width
height handler-width
transition opacity ease 350ms
transition-delay 100ms
opacity 0
&.hide
width 0!important
overflow hidden
border-right 0!important
&.show
opacity 1
&.left-side
left gap
right auto
border-radius 0 border-radius-handler border-radius-handler 0
&.right-side
left auto
border-radius border-radius-handler 0 0 border-radius-handler
&.mobile
right gap
&.desktop
right calc(100vw / 4)
</style>
<style lang="stylus">
.cell-handler
.q-focus-helper
display none!important
</style>
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