new configuration layoutDimensions

Display Layout grid toggle and dimensions
- Cleanup toolbar;
2020-08-13 12:48:55 -07:00 · 2020-08-12 18:16:21 -07:00 · 2020-08-11 15:47:14 -07:00
3 changed files with 46 additions and 10 deletions
--- a/src/plugins/displayLayout/DisplayLayoutType.js
+++ b/src/plugins/displayLayout/DisplayLayoutType.js
@@ -56,6 +56,28 @@ define(function () {
                        1
                    ],
                    required: true
+                },
+                {
+                    name: "Horizontal size (px)",
+                    control: "numberfield",
+                    cssClass: "l-input-sm l-numeric",
+                    property: [
+                        "configuration",
+                        "layoutDimensions",
+                        0
+                    ],
+                    required: false
+                },
+                {
+                    name: "Vertical size (px)",
+                    control: "numberfield",
+                    cssClass: "l-input-sm l-numeric",
+                    property: [
+                        "configuration",
+                        "layoutDimensions",
+                        1
+                    ],
+                    required: false
                }
            ]
        };
--- a/src/styles/_controls.scss
+++ b/src/styles/_controls.scss
@@ -731,8 +731,17 @@ select {
 }

 .c-toolbar {
-    > * + * {
-        margin-left: 2px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    > * {
+        // First level items
+        display: flex;
+
+        > * + * {
+            margin-left: 2px;
+        }
    }

    &__separator {
--- a/src/ui/toolbar/Toolbar.vue
+++ b/src/ui/toolbar/Toolbar.vue
@@ -1,13 +1,18 @@
 <template>
 <div class="c-toolbar">
-    <component
-        :is="item.control"
-        v-for="(item, index) in structure"
-        :key="index"
-        :options="item"
-        @click="triggerMethod(item, $event)"
-        @change="updateObjectValue"
-    />
+    <div class="c-toolbar__element-controls">
+        <component
+            :is="item.control"
+            v-for="(item, index) in structure"
+            :key="index"
+            :options="item"
+            @change="updateObjectValue"
+            @click="triggerMethod(item, $event)"
+        />
+    </div>
+    <div class="c-toolbar__dimensions-and-controls">
+        <button class="c-toolbar__control c-icon-button icon-grid"></button>
+    </div>
 </div>
 </template>
Author	SHA1	Message	Date
David Tsay	06c09eb7bb	new configuration layoutDimensions	2020-08-13 12:48:55 -07:00
charlesh88	2d899bacf4	Display Layout grid toggle and dimensions - Cleanup toolbar;	2020-08-12 18:16:21 -07:00
charlesh88	fc9407a026	Display Layout grid toggle and dimensions - Added toggle grid button; - Added Layout 'size' properties; - Very WIP!	2020-08-11 15:47:14 -07:00