Designer minor improvements

- fix tree width if overflow
- JSON editor format button
- Paste menu option disable/label

Signed-off-by: Yannick Schaus <habpanel@schaus.net>

web/src/layouts/designer/CardDesigner.vue

@@ -19,9 +19,13 @@
  </q-toolbar>
  </q-layout-footer>
 
- <q-layout-drawer side="left" content-class="bg-grey-2 shadow-1 tree-drawer" v-model="layout.treepane">
+ <q-layout-drawer side="left" content-class="bg-grey-2 shadow-1 tree-drawer" v-model="layout.treepane" ref="treeDrawer">
  <div>
- <q-tree ref="tree" v-if="treeModel" class="designer-tree" :nodes="treeModel" node-key="id" :selected.sync="selectedNodeId" default-expand-all></q-tree>
+ <q-resize-observable @resize="treeViewResized"></q-resize-observable>
+ <q-tree ref="tree"
+ v-if="treeModel" class="designer-tree"
+ :nodes="treeModel" node-key="id" :selected.sync="selectedNodeId" default-expand-all
+ :style="{ 'width': layout.treeViewWidth }"></q-tree>
  </div>
  </q-layout-drawer>
 
@@ -56,8 +60,8 @@
  <q-item v-close-overlay @click.native="showJsonEditor = true">
  <q-item-main label="Edit JSON" />
  </q-item>
- <q-item v-close-overlay @click.native="pasteComponent()">
- <q-item-main label="Paste" />
+ <q-item v-close-overlay @click.native="pasteComponent()" :disabled="!$q.sessionStorage.has('habot.designerClipboard')">
+ <q-item-main :label="'Paste ' + ($q.sessionStorage.has('habot.designerClipboard') ? $q.sessionStorage.get.item('habot.designerClipboard').component : '')" />
  </q-item>
  </q-list>
  </q-popover>
@@ -324,7 +328,8 @@ export default {
  components: Components,
  layout: {
  treepane: true,
- toolpane: true
+ toolpane: true,
+ treeViewWidth: null
  },
  cardModel: null,
  treeModel: null,
@@ -496,6 +501,11 @@ export default {
  if (evt.target.nodeName === 'INPUT' || evt.target.nodeName === 'TEXTAREA') return
  this.pasteComponent()
  },
+ treeViewResized (size) {
+ let aside = this.$refs.treeDrawer.$el.getElementsByTagName('aside')
+ if (!aside.length) return
+ this.layout.treeViewWidth = (aside[0].scrollWidth > aside[0].clientWidth) ? aside[0].scrollWidth + 'px' : '100%'
+ },
  slotJsonUpdated (newSlot) {
  this.selectedNode.component.slots[this.selectedNode.label] = newSlot
  this.showJsonEditor = false

web/src/layouts/designer/JsonEditor.vue

@@ -11,8 +11,9 @@
  <q-toolbar-title>
  {{component.component}} <q-icon name="chevron_right" /> {{slotName}}
  </q-toolbar-title>
- <q-btn flat round icon="done" @click="validate(false)" />
- <q-btn flat round icon="system_update_alt" @click="update" />
+ <q-btn flat round icon="format_indent_increase" @click="format"><q-tooltip :disable="$q.platform.has.touch">Format</q-tooltip></q-btn>
+ <q-btn flat round icon="done" @click="validate(false)"><q-tooltip :disable="$q.platform.has.touch">Validate</q-tooltip></q-btn>
+ <q-btn flat round icon="system_update_alt" @click="update"><q-tooltip :disable="$q.platform.has.touch">Update</q-tooltip></q-btn>
  </q-toolbar>
  <q-scroll-area class="fit q-pt-md q-px-sm">
  <q-input class="json-editor" v-model="json" hide-underline type="textarea" />
@@ -132,6 +133,14 @@ export default {
  if (!this.errors.length) {
  this.$emit('update', JSON.parse(this.json))
  }
+ },
+ format () {
+ try {
+ let parsed = JSON.parse(this.json)
+ this.json = JSON.stringify(parsed, null, 2)
+ } catch (e) {
+ this.$q.notify('JSON parse error:' + e)
+ }
  }
  }
 }