Skip to content

GitLab

Commits (9)
Hide whitespace changes
Inline Side-by-side
Showing with 136 additions and 169 deletions
partials/CellHandler.vue
View file @ 2cd97297
<template lang="pug">
.handler-new-cell.justify-center.row.bg-white(ref="targetHandler")
.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 {
props: ['element', 'doubleTap'],
props: ['type', 'doubleTap'],
data () {
return {
clickTimer: null
}
},
mounted () {
if (this.element) {
if (this.type) {
let observer = new IntersectionObserver(this.observerCallback)
observer.observe(this.$refs.targetHandler)
this.observer = observer
......@@ -40,7 +40,7 @@
observerCallback (entries) {
let
target = entries[0],
arg = {element: this.element, intersecting: target.isIntersecting, offsetLeft: undefined}
arg = {type: this.type, intersecting: target.isIntersecting, offsetLeft: undefined}
if (!target.isIntersecting) Object.assign(arg, {offsetLeft: target.boundingClientRect.left})
......@@ -56,14 +56,53 @@
<style scoped lang="stylus">
handler-width = 40px
border-radius-handler = 100vw
gap = 0px
.handler-new-cell
.cell-handler
width handler-width
height handler-width
&.pushed
transition top ease 200ms, left ease 200ms
&.default-handler
position absolute
border-radius border-radius-handler
&.hide
width 0!important
overflow hidden
&.sticked-handler
position fixed
width handler-width
height handler-width
transition opacity ease 350ms
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">
.handler-new-cell
.cell-handler
.q-focus-helper
display none!important
</style>
partials/GridEditor.vue
View file @ 2cd97297
<template lang="pug">
div.cell-grid-container.bg-dark(
:class="{'overflow-hidden': (cellHandler.resize.pushed || cellHandler.move.pushed) && isMobile}",
style="overflow-y: hidden; scroll-behavior: smooth;")
q-window-resize-observable(@resize="updateGridDimensions")
......@@ -70,97 +69,85 @@
@click.native="event => {action.handler(event)}")
q-item-main(:label="action.label")
template
//--------------------------------------------------------------------------------------------------------- cell
template(v-if="data.annotations", v-for="(annotation, index) in data.annotations")
// v-touch-pan="event => { panCell(event, annotation) }",
// draggable="true",
.cell-item(
v-if="!annotationUIStates[annotation._uuid] || !annotationUIStates[annotation._uuid].beingDragged",
@contextmenu="handleCellContextMenu",
:style="getCellStyle(annotation)",
:class="getAnnotationClasses(annotation._uuid, 'cell-item')",
:key="`cell-${index}`")
//--------------------------------------------------------------------------------------------- cell content
// v-touch-hold="event => {editCell(event, annotation)}",
cell.absolute.fit(
v-touch-hold="event => { holdCell(event, annotation) }",
@click.native="event => {selectCell(event, annotation)}",
:annotation="annotation",
:preview="true")
// is needed to prevent click-event after panning
// .absolute.fit(v-if="pannedCell.panned")
//-------------------------------------------------------------------------------------- context menu: cells
// TODO: needs revision
q-context-menu.desktop-only.bg-grey-3.text-dark
q-list(link, separator, no-border, style="min-width: 150px; max-height: 300px;")
q-item(
v-for="action in cellContextMenuActions",
:key="action.label",
v-close-overlay,
@click.native="event => {action.handler(event, annotation)}")
q-item-main(:label="action.label")
//----------------------------------------------------------------------------------------------- temporary cell
.cell-item.temp-cell(
//------------------------------------------------------------------------------------------------- temporary cell
.cell-item.temp-cell(
v-if="cellHandler.resize.pushed || cellHandler.move.pushed || cachedNewCell",
:style="getCellStyle(tempCell)",
:class="{'edit': tempCell.type === 'edit'}")
//------------------------------------------------------------------------------------------------- move handler
//----- main
cell-handler.main-handler(
v-if="!cellHandler.resize.pushed",
@onIntersectionChange="intersectionChanged",
:element="'move'",
v-touch-pan="moveCell",
: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(
v-touch-pan="moveCell",
:doubleTap="{el: $el, type: 'scroll', oLeft: tempCell.left}",
: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')]",
:style="{top: cellHandler.move.y + 59 - 20 + 4 + 'px'}",)
q-icon.rotate-180(name="open_with", size="22px")
//----------------------------------------------------------------------------------------------- resize handler
//----- main
cell-handler.main-handler(
v-if="!cellHandler.move.pushed",
@onIntersectionChange="intersectionChanged",
:element="'resize'",
v-touch-pan="resizeCell",
: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(
v-touch-pan="resizeCell",
: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')]",
:style="{top: cellHandler.resize.y + 59 - 20 - 4 + 'px'}",)
q-icon(name="signal_cellular_4_bar", size="12px", style="margin-left: -3px;")
// ---------------------------------------------------------------------------------------------------------------
template(v-else)
.cell-item(:style="getCellStyle({x:0,y:0,width:1,height:1})", key="cell-grid-resizer")
div.cell-handler.resize(
draggable="true",
@dragstart="event => {handleGridResizerDragStart(event)}",
@dragend="event => {handleGridResizerDragEnd(event)}",
@dragexit="event => {handleGridResizerDragEnd(event)}")
q-icon(name="network cell")
//----------------------------------------------------------------------------------------------------------- cell
template(v-if="data.annotations", v-for="(annotation, index) in data.annotations")
// v-touch-pan="event => { panCell(event, annotation) }",
// draggable="true",
.cell-item(
v-if="!annotationUIStates[annotation._uuid] || !annotationUIStates[annotation._uuid].beingDragged",
@contextmenu="handleCellContextMenu",
:style="getCellStyle(annotation)",
:class="getAnnotationClasses(annotation._uuid, 'cell-item')",
:key="`cell-${index}`")
//----- content
// v-touch-hold="event => {editCell(event, annotation)}",
cell.absolute.fit(
v-touch-hold="event => {holdCell(event, annotation)}",
@click.native="event => {selectCell(event, annotation)}",
:annotation="annotation",
:preview="true")
// is needed to prevent click-event after panning
// .absolute.fit(v-if="pannedCell.panned")
//----- context menu: cells
// TODO: needs revision
q-context-menu.desktop-only.bg-grey-3.text-dark
q-list(link, separator, no-border, style="min-width: 150px; max-height: 300px;")
q-item(
v-for="action in cellContextMenuActions",
:key="action.label",
v-close-overlay,
@click.native="event => {action.handler(event, annotation)}")
q-item-main(:label="action.label")
//--------------------------------------------------------------------------------------------------- move handler
//----- default in cell
cell-handler.default-handler(
v-if="!cellHandler.resize.pushed",
@onIntersectionChange="intersectionChanged",
:type="'move'",
v-touch-pan.prevent="moveCell",
: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(
v-touch-pan.prevent="moveCell",
:doubleTap="{el: $el, type: 'scroll', oLeft: tempCell.left}",
: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')]",
:style="{top: cellHandler.move.y + 59 - 20 + 4 + 'px'}",)
q-icon.rotate-180(name="open_with", size="22px")
//------------------------------------------------------------------------------------------------- resize handler
//----- default in cell
cell-handler.default-handler(
v-if="!cellHandler.move.pushed",
@onIntersectionChange="intersectionChanged",
:type="'resize'",
v-touch-pan.prevent="resizeCell",
: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(
v-touch-pan.prevent="resizeCell",
: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')]",
:style="{top: cellHandler.resize.y + 59 - 20 - 4 + 'px'}",)
q-icon(name="signal_cellular_4_bar", size="12px", style="margin-left: -3px;")
//--------------------------------------------------------------------------------------------------- grid handler
template(v-if="editGrid")
......@@ -168,6 +155,8 @@
// is needed to prevent unintentionally cell handling
.fixed.fit.bg-dark(@click.right="toggleAxis()", style="opacity: .5;")
//----- add
template(v-if="editingGrid.mode")
template(v-if="editingGrid.axis")
.grid-handler.add-row(
......@@ -185,6 +174,8 @@
:class="{'first': n === 1}",
:style="{'grid-row-end':'span ' + data.configuration.rows, 'grid-column-start': n, 'grid-column-end': n}")
//----- remove
template(v-else)
template(v-if="editingGrid.axis")
.grid-handler.remove-row(
......@@ -504,7 +495,7 @@
resizeHandler = this.sideHandler.resize
// -------------------- move
if (obj.element === 'move') {
if (obj.type === 'move') {
moveHandler.intersectingMainHandler = obj.intersecting
// behind left side
......@@ -523,7 +514,7 @@
}
// -------------------- resize
else if (obj.element === 'resize') {
else if (obj.type === 'resize') {
resizeHandler.intersectingMainHandler = obj.intersecting
// on left side
......@@ -1181,8 +1172,6 @@
<style scoped lang="stylus">
@import '~variables'
border-radius-cell = .25rem
border-radius-handler = 100vw
handler-height-desktop = 30px
.opacity-25
opacity .25
......@@ -1224,44 +1213,25 @@
background-color $primary50
border 1px solid $primary
&:hover
&.hover
// background-color $primary33
&.edit
border-color transparent
background-color $primary33
//---------------------------------------------------------------------------------------------------------- temp cell
.temp-cell
background-color rgba(115, 170, 255, .75)
border 1px solid rgba(110, 150, 255, 1)
&.edit
border 1px dashed white
background-color transparent
//------------------------------------------------------------------------------------------------------- cell handler
.cell-handler
color $dark
background-color rgba(255, 255, 255, 1)
border-radius border-radius-handler
width handler-height-desktop
height handler-height-desktop
&.move
&.edit
&.resize
opacity 0
&:hover
&.hover
// background rgba(20, 20, 20, .8)
border-color white
// margin 2px
.cell-handler.move
.cell-handler.edit
.cell-handler.resize
//---------------------------------------------------------------------------------------------------------- temp cell
.temp-cell
// background-color rgba(115, 170, 255, .75)
// border 1px solid rgba(110, 150, 255, 1)
background-color $green
border 1px solid $green
opacity .5
&.edit
border 1px dashed white
background-color transparent
opacity 1
//------------------------------------------------------------------------------------------------------- grid handler
......@@ -1303,48 +1273,6 @@
background-color rgba(219, 40, 41, .2)
grid-row-start 1
//************************************************** mobile: new cell
handler-width-mobile = 40px
gap = 0px
.main-handler
position absolute
border-radius border-radius-handler
&.hide
width 0!important
overflow hidden
.handler-new-cell
&.pushed
transition top ease 200ms, left ease 200ms
&.sticked-handler
position fixed
width handler-width-mobile
height handler-width-mobile
transition opacity ease 350ms
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">
......