...
 
Commits (6)
<template lang="pug"> <template lang="pug">
// :class="{'overflow-hidden': mobileTempCell.show && cachedNewCell && !mobileTempCell.button}",
div.cell-grid-container( div.cell-grid-container(
:class="{'overflow-hidden': activeHandler}", :class="{'overflow-hidden': activeHandler}",
style="overflow-y: hidden; scroll-behavior: smooth;") style="overflow-y: hidden; scroll-behavior: smooth;")
q-modal(v-model="modal", minimized, content-css="background-color: #eee; border-radius: .75rem;")
grid-editor-editing-cells-mobile
//
q-btn.absolute-top-right.q-ma-sm.bg-dark(@click="handleModal()", round, size="sm", flat)
q-icon(name="clear")
// this needs to stay for adding cells on mobile for whatever reason (strangest bug ever...)
// FIXME: find the problem and fix it
.mobile-only.fixed-top-left.q-caption.z-max.hidden
.bg-red {{ cachedNewCell }}
.bg-green {{ mobileTempCell }}
q-window-resize-observable(@resize="updateGridDimensions") q-window-resize-observable(@resize="updateGridDimensions")
// ------------------------------------------------------------------------------------------------- new cell header //----- modal for existing cell editing
q-modal(v-model="modal", minimized, content-css="background-color: #eee; border-radius: .75rem;")
grid-editor-editing-cells-mobile
// ----------------------------------------------------------------------------------------------- "new cell"-header
#new-cell-header.fixed-top.z-top.bg-dark.text-white.transition(:class="{'show': cachedNewCell}") #new-cell-header.fixed-top.z-top.bg-dark.text-white.transition(:class="{'show': cachedNewCell}")
q-item.q-pl-md.q-pr-xs.q-py-none.full-height q-item.q-pl-md.q-pr-xs.q-py-none.full-height
q-item-main q-item-main
strong New {{ newCellType }} strong New {{ newCellType }}
q-item-side q-item-side.text-white
q-btn.text-white( q-btn(@click="event => {addMobileCell(event)}", round, flat)
@click="event => {addMobileCell(event)}", round, flat,
style="background-color: rgba(0, 0, 0, 0);")
q-icon(name="check") q-icon(name="check")
q-btn.text-white.q-px-md.q-mr-md.on-right(@click="clearHandler('cached cell')", flat, q-btn.clear-button.q-px-md.q-mr-md.on-right(@click="clearHandler('cached cell')", flat)
style="border-radius: .5rem; width: 42px; border: 1px solid rgba(255, 255, 255, .3);")
q-icon(name="clear") q-icon(name="clear")
// -------------------------------------------------------------------------------------------- selected cell header // ------------------------------------------------------------------------------------------ "selected cell"-header
#selected-cell-header.fixed-top.z-top.bg-dark.text-white.transition(:class="{'show': showEditingCells}") #selected-cell-header.fixed-top.z-top.bg-dark.text-white.transition(:class="{'show': showEditingCells}")
q-item.q-pl-md.q-pr-none.q-py-none.full-height(v-if="!modal") q-item.q-pl-md.q-pr-none.q-py-none.full-height(v-if="!modal")
q-item-main q-item-main
strong {{ selectedCell.type }} strong {{ selectedCell.type }}
q-item-side q-item-side.text-white
q-btn.text-white.q-px-sm(@click="event => {handleCellEdit(event, selectedCell.annotation)}", flat) q-btn.q-px-sm(@click="event => {handleCellEdit(event, selectedCell.annotation)}", flat)
q-icon(name="edit") q-icon(name="edit")
q-btn.text-white.q-px-sm.on-right.on-left(@click="event => {handleCellContextMenuDelete(event, mobileSelectedCell)}", q-btn.q-px-sm.on-right.on-left(
flat) @click="event => {handleCellContextMenuDelete(event, mobileSelectedCell)}", flat)
q-icon(name="delete") q-icon(name="delete")
q-btn.text-white.q-px-md.q-mr-md.on-right(@click="clearHandler('cell')", flat, q-btn.clear-button.q-px-md.q-mr-md.on-right(@click="clearHandler('cell')", flat)
style="border-radius: .5rem; width: 42px; border: 1px solid rgba(255, 255, 255, .3);")
q-icon(name="clear") q-icon(name="clear")
// ------------------------------------------------------------------------------------------------------------ grid // ------------------------------------------------------------------------------------------------------------ grid
...@@ -991,10 +979,12 @@ ...@@ -991,10 +979,12 @@
this.updateEditingCells() this.updateEditingCells()
this.$root.$emit('mosys_saveScrollPosition') this.$root.$emit('mosys_saveScrollPosition')
}, },
/*
handleCellClick (event, cell) { handleCellClick (event, cell) {
this.annotationUIStates[cell._uuid].selected = !this.annotationUIStates[cell._uuid].selected this.annotationUIStates[cell._uuid].selected = !this.annotationUIStates[cell._uuid].selected
this.updateSelectedCells() this.updateSelectedCells()
}, },
*/
handleCellDragStart (event, annotation) { handleCellDragStart (event, annotation) {
console.log('§§§§§§§§', annotation) console.log('§§§§§§§§', annotation)
if (!this.isMobile) { if (!this.isMobile) {
...@@ -1273,6 +1263,11 @@ ...@@ -1273,6 +1263,11 @@
<style scoped lang="stylus"> <style scoped lang="stylus">
@import '~variables' @import '~variables'
.clear-button
border-radius .5rem
width 42px
border 1px solid rgba(255, 255, 255, .3)
.cell-grid .cell-grid
display grid display grid
background-color #eee background-color #eee
......