Commit 57b1b26d authored by Anton's avatar Anton
Browse files

Add styleClass editing dialog to cell context menu in grid editor

parent 969923a1
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
const classes = ['cell-content'] const classes = ['cell-content']
if (this.cell) { if (this.cell) {
if (this.cell.type) classes.push(`cell-type-${this.cell.type.toLowerCase()}`) if (this.cell.type) classes.push(`cell-type-${this.cell.type.toLowerCase()}`)
if (this.cell.styleClass) classes.push(this.cell.styleClass.substr(1)) if (this.cell.styleClass) classes.push(this.cell.styleClass)
} }
return classes return classes
} }
......
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
div.cell-grid-container div.cell-grid-container
div.cell-grid(:style="gridStyle") div.cell-grid(:style="gridStyle")
style-tag(v-if="styles", :styles="styles")
template(v-for="(cell, index) in cells") template(v-for="(cell, index) in cells")
.cell-item( .cell-item(
:style="getCellStyle(cell)", :style="getCellStyle(cell)",
...@@ -12,6 +11,7 @@ ...@@ -12,6 +11,7 @@
q-page-sticky(position="top-right", :offset="[18, 18]", v-if="$store.state.auth.user") q-page-sticky(position="top-right", :offset="[18, 18]", v-if="$store.state.auth.user")
q-btn(round, color="primary", small, @click="$router.push(`/mosys/grids/${$route.params.id}/annotate`)") q-btn(round, color="primary", small, @click="$router.push(`/mosys/grids/${$route.params.id}/annotate`)")
q-icon(name="edit") q-icon(name="edit")
style-tag(v-if="styles", :styles="styles")
</template> </template>
......
...@@ -74,6 +74,8 @@ ...@@ -74,6 +74,8 @@
<script> <script>
import { ObjectUtil } from 'mbjs-utils' import { ObjectUtil } from 'mbjs-utils'
import Cell from './Cell' import Cell from './Cell'
import { userHasFeature } from 'mbjs-quasar/src/lib'
import { mapGetters } from 'vuex'
const nullImage = new Image() const nullImage = new Image()
nullImage.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' nullImage.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='
...@@ -85,24 +87,6 @@ ...@@ -85,24 +87,6 @@
props: ['gridUuid'], props: ['gridUuid'],
data () { data () {
return { return {
cellContextMenuActions: {
// edit: {
// label: 'Edit',
// handler: this.handleCellContextMenuEdit
// },
delete: {
label: 'Delete',
handler: this.handleCellContextMenuDelete
},
insert_column_left: {
label: 'Insert Column Left',
handler: this.handleGridContextMenuInsertColumnLeft
},
insert_row_above: {
label: 'Insert Row Above',
handler: this.handleGridContextMenuInsertRowAbove
}
},
gridContextMenuActions: { gridContextMenuActions: {
// add_cell: { // add_cell: {
// label: 'Add Cell', // label: 'Add Cell',
...@@ -140,6 +124,38 @@ ...@@ -140,6 +124,38 @@
resizingGrid: false resizingGrid: false
} }
}, },
computed: {
...mapGetters({
user: 'auth/getUserState'
}),
cellContextMenuActions () {
const actions = {
// edit: {
// label: 'Edit',
// handler: this.handleCellContextMenuEdit
// },
delete: {
label: 'Delete',
handler: this.handleCellContextMenuDelete
},
insert_column_left: {
label: 'Insert Column Left',
handler: this.handleGridContextMenuInsertColumnLeft
},
insert_row_above: {
label: 'Insert Row Above',
handler: this.handleGridContextMenuInsertRowAbove
}
}
if (userHasFeature(this.user, 'cssediting')) {
actions.edit_css_classname = {
label: 'Edit CSS class name',
handler: this.handleCellContextMenuEditCSS
}
}
return actions
}
},
async mounted () { async mounted () {
window.addEventListener('resize', this.updateGridDimensions) window.addEventListener('resize', this.updateGridDimensions)
await this.fetchData() await this.fetchData()
...@@ -228,6 +244,26 @@ ...@@ -228,6 +244,26 @@
handleCellContextMenu (event) { handleCellContextMenu (event) {
this.contextMenuClickPosition = this.getGridPositionForEvent(event) this.contextMenuClickPosition = this.getGridPositionForEvent(event)
}, },
async handleCellContextMenuEditCSS (event, cell) {
try {
let styleClass = await this.$q.dialog({
title: this.$t('forms.edit_css_class.title'),
ok: this.$t('buttons.set_css_class'),
cancel: this.$t('buttons.cancel'),
prompt: {
model: cell.styleClass,
type: 'text'
}
})
if (styleClass) {
if (!styleClass.length) styleClass = undefined
else if (styleClass.indexOf('.') === 0) styleClass = styleClass.substr(1)
}
cell.styleClass = styleClass
this.$store.dispatch('annotations/patch', [cell.uuid, { target: { styleClass: styleClass || null } }])
}
catch (e) { /* dialog canceled */ }
},
handleGridDragOver (event) { handleGridDragOver (event) {
let _this = this let _this = this
if (this.resizingGrid) { if (this.resizingGrid) {
...@@ -474,6 +510,8 @@ ...@@ -474,6 +510,8 @@
let cell = JSON.parse(annotation.body.value) let cell = JSON.parse(annotation.body.value)
if (cell) { if (cell) {
cell.uuid = annotation.uuid cell.uuid = annotation.uuid
cell.id = annotation.id
cell.styleClass = annotation.target ? annotation.target.styleClass : undefined
return cell return cell
} }
return null return null
......
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