styling style features

partials/CellEditor.vue

@@ -97,9 +97,18 @@
                     v-model="cell.source._value[spec.path]",
                     :label="spec.label",
                     @input="value => handleItemChanged(value, cell, spec.path)")
-      //-------------------------------------------------------------------------------------------- features (optional)
-      template(v-if="cell.configuration._value.component === 'CellImage'")
-        cell-style-editor(:cell="cell")
+      //-------------------------------------------------------------------------------------- style features (optional)
+      template(v-if="itemSpecs[cell.configuration._value.component].styleFeatures")
+        q-item.native.cursor-pointer.q-py-none.q-mb-xs.q-pr-none.q-mt-lg(@click.native="toggleStyleFeatures()")
+          q-item-main.text-grey-3
+            strong Style features
+          q-item-side
+            q-btn.text-grey-3(flat)
+              q-icon(v-if="!show.styleFeatures", name="keyboard_arrow_down")
+              q-icon(v-else, name="keyboard_arrow_up")
+
+        template(v-if="show.styleFeatures")
+          cell-style-editor(:cell="cell")
 
 </template>
 
@@ -114,7 +123,7 @@
     },
     data () {
       return {
-        show: {features: true},
+        show: {features: true, styleFeatures: true},
         isMobile: undefined,
         cells: [],
         cell: undefined,
@@ -147,7 +156,8 @@
               errorMessage: 'Needs to be a valid URL',
               value: '',
               path: 'link'
-            }]
+            }],
+            styleFeatures: false
           },
           'CellText': {
             inputType: 'textarea',
@@ -158,7 +168,8 @@
             errorMessage: '',
             value: '',
             path: 'content',
-            features: []
+            features: [],
+            styleFeatures: false
           },
           'CellPiecemaker': {
             inputType: 'url',
@@ -190,7 +201,8 @@
                 value: 0,
                 path: 'duration'
               }
-            ]
+            ],
+            styleFeatures: false
           },
           'CellMedia': {
             inputType: 'url',
@@ -222,7 +234,8 @@
                 value: 0,
                 path: 'duration'
               }
-            ]
+            ],
+            styleFeatures: false
           },
           'CellImage': {
             inputType: 'url',
@@ -244,7 +257,8 @@
                 value: '',
                 path: 'link'
               }
-            ]
+            ],
+            styleFeatures: true
           },
           /*
           'CellInternalLink': {
@@ -268,7 +282,8 @@
             errorMessage: 'Needs to be a valid URL',
             value: '',
             path: 'content',
-            features: []
+            features: [],
+            styleFeatures: false
           },
           'CellAnnotationList': {
             inputType: 'text',
@@ -354,7 +369,8 @@
                 path: 'displayType'
               }
               */
-            ]
+            ],
+            styleFeatures: false
           }
         }
       }
@@ -377,6 +393,9 @@
       this.getCell(this.storeEditingCell)
     },
     methods: {
+      toggleStyleFeatures () {
+        this.show.styleFeatures = !this.show.styleFeatures
+      },
       toggleFeatures () {
         this.show.features = !this.show.features
       },