From d31d8c8e7e37281798391f3c773259edd2c5f5eb Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Thu, 20 Feb 2020 17:07:25 +0000
Subject: [PATCH] added height and width as positioning options

---
 .../builder/src/builderStore/generate_css.js  | 26 +++++++++++++++----
 .../src/userInterface/LayoutEditor.svelte     | 21 +++++++++++++++
 2 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/packages/builder/src/builderStore/generate_css.js b/packages/builder/src/builderStore/generate_css.js
index 212a032a6f..2c0fa48406 100644
--- a/packages/builder/src/builderStore/generate_css.js
+++ b/packages/builder/src/builderStore/generate_css.js
@@ -4,22 +4,29 @@ import { pipe } from "../common/core"
 const self = n => n
 const join_with = delimiter => a => a.join(delimiter)
 const empty_string_to_unset = s => (s.length ? s : "0")
-const add_suffix = suffix => s => s + suffix
+const add_suffix_if_number = suffix => s => {
+  try {
+    if (isNaN(s) || isNaN(parseFloat(s))) return s
+  } catch (_) {
+    return s
+  }
+  return s + suffix
+}
 
 export const make_margin = values =>
   pipe(values, [
     map(empty_string_to_unset),
-    map(add_suffix("px")),
+    map(add_suffix_if_number("px")),
     join_with(" "),
   ])
 
 const css_map = {
   templaterows: {
-    name: "grid-template-columns",
+    name: "grid-template-rows",
     generate: self,
   },
   templatecolumns: {
-    name: "grid-template-rows",
+    name: "grid-template-columns",
     generate: self,
   },
   gridarea: {
@@ -58,6 +65,14 @@ const css_map = {
     name: "z-index",
     generate: self,
   },
+  height: {
+    name: "height",
+    generate: self,
+  },
+  width: {
+    name: "width",
+    generate: self,
+  },
 }
 
 export const generate_rule = ([name, values]) =>
@@ -97,10 +112,11 @@ const apply_class = (id, name, styles) => `.${name}-${id} {\n${styles}\n}`
 
 export const generate_screen_css = component_array => {
   let styles = ""
+  let emptyStyles = { layout: {}, position: {} }
 
   for (let i = 0; i < component_array.length; i += 1) {
     const { _styles, _id, _children } = component_array[i]
-    const { layout, position } = generate_css(_styles)
+    const { layout, position } = generate_css(_styles || emptyStyles)
 
     styles += apply_class(_id, "pos", position) + "\n"
     styles += apply_class(_id, "lay", layout) + "\n"
diff --git a/packages/builder/src/userInterface/LayoutEditor.svelte b/packages/builder/src/userInterface/LayoutEditor.svelte
index b77b47523d..98f43fd59e 100644
--- a/packages/builder/src/userInterface/LayoutEditor.svelte
+++ b/packages/builder/src/userInterface/LayoutEditor.svelte
@@ -35,6 +35,11 @@
     padding: ["Padding", tbrl, "small"],
   }
 
+  $: size = {
+    height: ["Height", single],
+    width: ["Width", single],
+  }
+
   $: zindex = {
     zindex: ["Z-Index", single],
   }
@@ -82,6 +87,22 @@
         onStyleChanged={_value => onStyleChanged('position', key, _value)}
         values={layout[key] || newValue(meta.length)}
         {meta}
+        {size}
+        type="text" />
+    </div>
+  {/each}
+</div>
+
+<h4>Size</h4>
+<div class="layout-layer">
+  {#each Object.entries(size) as [key, [name, meta, size]] (component._id + key)}
+    <div class="grid">
+      <h5>{name}:</h5>
+      <InputGroup
+        onStyleChanged={_value => onStyleChanged('position', key, _value)}
+        values={layout[key] || newValue(meta.length)}
+        type="text"
+        {meta}
         {size} />
     </div>
   {/each}