Merge remote-tracking branch 'origin/mosys-maintenance-update---mosys' into...

Merge remote-tracking branch 'origin/mosys-maintenance-update---mosys' into mosys-maintenance-update---mosys

partials/CellStyleEditor.vue

 <template lang="pug">
   div
-    q-select(
-      v-model="test",
-      :options="selectOptions")
     //--------------------------------------------------------------------------------------------------- image position
     q-item.q-pa-none(style="border-bottom: 1px solid rgba(255,255,255,0.04);")
 
@@ -21,22 +18,19 @@
     //------------------------------------------------------------------------------------------------------- image size
     q-item.q-pa-none(style="border-bottom: 1px solid rgba(255,255,255,0.04);")
 
-      q-item-main.bg-grey-9.q-py-sm(style="border-radius: .15rem;")
+      q-item-main.bg-grey-9(style="border-radius: .15rem;")
 
-        //
-          q-tooltip.z-max.shadow-6.bg-grey-9(anchor="center left", self="center right", :offset="[8, 0]",
-          style="border: 1px solid rgba(255,255,255,0.1);") Fit image to cell
+        q-tooltip.z-max.shadow-6.bg-grey-9(anchor="center left", self="center right", :offset="[8, 0]",
+        style="border: 1px solid rgba(255,255,255,0.1);")
+          | The image can be left to its natural size, stretched, or constrained to fit the available space.
 
-        q-item-tile.q-px-md
+        q-item-tile
           q-select(
-          v-model="test",
-          :options="selectOptions")
-
-          q-checkbox.full-width.q-py-sm(
-          dark,
-          v-model="cell.configuration._value.backgroundSize",
-          label="Fit image to cell",
-          @input="value => setCssAttribute('backgroundSize', 'contain')")
+          v-model="model.backgroundSize",
+          float-label="Image size",
+          :options="css.backgroundSizes",
+          hide-underline, dark,
+          @input="value => setCssAttribute('backgroundSize', value)")
 
 </template>
 
@@ -46,30 +40,19 @@
     props: ['cell', 'annotation'],
     data () {
       return {
-        selectOptions: [
-          {
-            label: 'Google',
-            value: 'goog'
-          },
-          {
-            label: 'Facebook',
-            value: 'fb'
-          }
-        ],
-        test: 'goog',
         updatedCell: undefined,
         model: {
           backgroundPosition: undefined,
-          backgroundSize: false
+          backgroundSize: this.cell.configuration._value.backgroundSize
         },
         css: {
-          backgroundPositions: ['top left', 'top', 'top right', 'left', 'center', 'right', 'bottom left', 'bottom', 'bottom right']
+          backgroundPositions: ['top left', 'top', 'top right', 'left', 'center', 'right', 'bottom left', 'bottom', 'bottom right'],
+          backgroundSizes: [
+            { label: 'Contain', value: 'contain' },
+            { label: 'Cover', value: 'cover' },
+            { label: 'Unset', value: 'unset' }
+          ]
         },
-        backgroundSizes: [
-          { label: 'Contain', value: 'contain' },
-          { label: 'Cover', value: 'cover' },
-          { label: 'None', value: 'none' }
-        ],
         cssAttributes: {
           backgroundSize: 'background-size',
           backgroundPosition: 'background-position'