Commit 4272518f authored by christianrhansen's avatar christianrhansen

edit panel button styling. show mobile temp cell only when needed.

parent 75d7d551
Pipeline #16643 passed with stage
in 1 minute and 24 seconds
......@@ -103,7 +103,7 @@
cell(:cell="tmpCell")
//----- temporary cell (mobile)
.cell-item.cell-item-tmp-mobile(:style="mobileTempCellStyle(mobileTempCell)")
.cell-item.cell-item-tmp-mobile(v-if="mobileTempCell.show && cachedNewCell", :style="mobileTempCellStyle(mobileTempCell)")
// cell(:cell="tmpCell")
// ---------------------------------------------------------------------------------------------------------------
......@@ -141,37 +141,33 @@
//----- "move"-buttons
div(v-if="editMode === 'move'", :class="{'q-pa-md' : editMode}")
.text-center
q-btn.text-dark(@click="mobileCellMove(mobileSelectedCell, 0, -1)", round, flat, size="md",
style="border: 0px solid #333; background-color: rgba(0, 0, 0, .1);")
q-btn.edit-cell-button(@click="mobileCellMove(mobileSelectedCell, 0, -1)", round, flat, size="md")
q-icon.rotate-90(name="keyboard_backspace")
.text-center
q-btn.text-dark(@click="mobileCellMove(mobileSelectedCell, -1, 0)", round, flat, size="md",
style="border: 0px solid #333; background-color: rgba(0, 0, 0, .1);")
q-btn.edit-cell-button(@click="mobileCellMove(mobileSelectedCell, -1, 0)", round, flat, size="md")
q-icon(name="keyboard_backspace")
q-btn.invisible.text-dark(round, flat, size="md")
q-icon.flip-vertical(name="photo_size_select_small")
q-btn.text-dark(@click="mobileCellMove(mobileSelectedCell, 1, 0)", round, flat, size="md",
style="border: 0px solid #333; background-color: rgba(0, 0, 0, .1);")
q-btn.edit-cell-button(@click="mobileCellMove(mobileSelectedCell, 1, 0)", round, flat, size="md")
q-icon.rotate-180(name="keyboard_backspace")
.text-center
q-btn.text-dark(@click="mobileCellMove(mobileSelectedCell, 0, 1)", round, flat, size="md",
style="border: 0px solid #333; background-color: rgba(0, 0, 0, .1);")
q-btn.edit-cell-button(@click="mobileCellMove(mobileSelectedCell, 0, 1)", round, flat, size="md")
q-icon.rotate-270(name="keyboard_backspace")
//----- "resize"-buttons
div(v-if="editMode === 'resize'", :class="{'q-pa-md' : editMode}")
.text-center
q-btn.bg-dark(@click="mobileCellResize(mobileSelectedCell, 0, -1)", round, flat, size="md")
q-btn.edit-cell-button(@click="mobileCellResize(mobileSelectedCell, 0, -1)", round, flat, size="md")
q-icon(name="remove")
.text-center
q-btn.bg-dark(@click="mobileCellResize(mobileSelectedCell, -1, 0)", round, flat, size="md")
q-btn.edit-cell-button(@click="mobileCellResize(mobileSelectedCell, -1, 0)", round, flat, size="md")
q-icon(name="remove")
q-btn.invisible.text-dark(round, flat, size="md")
q-icon.rotate-45(name="zoom_out_map")
q-btn.bg-dark(@click="mobileCellResize(mobileSelectedCell, 1, 0)", round, flat, size="md")
q-btn.edit-cell-button(@click="mobileCellResize(mobileSelectedCell, 1, 0)", round, flat, size="md")
q-icon(name="add")
.text-center
q-btn.bg-dark(@click="mobileCellResize(mobileSelectedCell, 0, 1)", round, flat, size="md")
q-btn.edit-cell-button(@click="mobileCellResize(mobileSelectedCell, 0, 1)", round, flat, size="md")
q-icon(name="add")
//----- "delete"-button
......@@ -180,7 +176,7 @@
.text-dark
| {{ $t('labels.delete_cell') }}
.q-mt-md
q-btn.bg-dark.text-white.q-mx-sm(@click="event => {handleCellContextMenuDelete(event, mobileSelectedCell)}",
q-btn.edit-cell-button(@click="event => {handleCellContextMenuDelete(event, mobileSelectedCell)}",
flat, round, size="md")
q-icon(name="check")
......@@ -249,7 +245,7 @@
mobileSelectedCell: undefined,
touch: {position: {top: undefined, left: undefined}},
isMobile: this.$q.platform.is.mobile,
mobileTempCell: {x: 0, y: 0, width: 1, height: 1}
mobileTempCell: {x: 0, y: 0, width: 1, height: 1, show: false}
}
},
computed: {
......@@ -328,19 +324,23 @@
},
methods: {
panGrid (obj) {
console.log('hhhhhhhhhhhhhhhhh', obj)
let res = this.getGridPositionForEvent(obj)
// console.log('**********', res)
// this.mobileTempCell.x = res.x
// this.mobileTempCell.y = res.y
if (obj.isFirst) {
this.mobileTempCell.x = res.x
this.mobileTempCell.y = res.y
}
this.mobileTempCell.width = res.x - this.mobileTempCell.x + 1
this.mobileTempCell.height = res.y - this.mobileTempCell.y + 1
if (obj.isFinal) {
this.addMobileCell(obj)
if (this.cachedNewCell) {
console.log('hhhhhhhhhhhhhhhhh', obj)
let res = this.getGridPositionForEvent(obj)
if (obj.isFirst) {
this.mobileTempCell.show = true
this.mobileTempCell.x = res.x
this.mobileTempCell.y = res.y
}
this.mobileTempCell.width = res.x - this.mobileTempCell.x + 1
this.mobileTempCell.height = res.y - this.mobileTempCell.y + 1
if (obj.isFinal) {
this.addMobileCell(obj)
this.mobileTempCell.show = false
}
}
},
async cellHold (event, annotation) {
......@@ -877,6 +877,8 @@
</script>
<style scoped lang="stylus">
@import '~variables'
.cell-grid
display grid
background-color #eee
......@@ -954,4 +956,9 @@
.cell-item-tmp-mobile
background-color rgba(0, 0, 255, .15)
backdrop-filter blur(0px)
.edit-cell-button
border 0px solid #333
background-color rgba(0, 0, 0, .1)
color $dark
</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