Merge pull request #148 from shogunpurple/layout-enhancements

Layout enhancements

packages/builder/src/builderStore/generate_css.js

@@ -29,6 +29,18 @@ const css_map = {
     name: "grid-template-columns",
     generate: self,
   },
+  align: {
+    name: "align-items",
+    generate: self,
+  },
+  justify: {
+    name: "justify-content",
+    generate: self,
+  },
+  direction: {
+    name: "flex-direction",
+    generate: self
+  },
   gridarea: {
     name: "grid-area",
     generate: make_margin,
@@ -100,7 +112,9 @@ const object_to_css_string = [
 
 export const generate_css = ({ layout, position }) => {
   let _layout = pipe(layout, object_to_css_string)
-  _layout = _layout.length ? _layout + "\ndisplay: grid;" : _layout
+  if (_layout.length) {
+    _layout += `\ndisplay: ${_layout.includes("flex") ? "flex" : "grid"};`;
+  }
 
   return {
     layout: _layout,

packages/builder/src/builderStore/index.js

@@ -5,7 +5,6 @@ export const store = getStore()
 
 export const initialise = async () => {
   try {
-    console.log(process.env.NODE_ENV);
     if (process.env.NODE_ENV === "production") {
       LogRocket.init("knlald/budibase");
     }

packages/builder/src/index.html

@@ -6,6 +6,7 @@
 
 	<title>Budibase Builder</title>
 
+	<link href="https://cdn.jsdelivr.net/npm/remixicon@2.3.0/fonts/remixicon.css" rel="stylesheet">
 	<link rel='icon' type='image/png' href='/_builder/favicon.png'>
 	<link rel='stylesheet' href='/_builder/global.css'>
 	<link rel='stylesheet' href='/_builder/codemirror.css'>

packages/builder/src/userInterface/ComponentPropertiesPanel.svelte

@@ -29,7 +29,7 @@
     $store.currentFrontEndType === "page"
       ? getProps($store.currentPreviewItem, ["name", "favicon"])
       : getProps($store.currentPreviewItem, ["name", "description", "route"])
-  $: console.log(screen_props)
+
   const onPropChanged = store.setComponentProp
   const onStyleChanged = store.setComponentStyle
 

packages/builder/src/userInterface/LayoutEditor.svelte

@@ -1,5 +1,6 @@
 <script>
   import InputGroup from "../common/Inputs/InputGroup.svelte"
+  import LayoutTemplateControls from "./LayoutTemplateControls.svelte";
 
   export let onStyleChanged = () => {}
   export let component
@@ -25,6 +26,12 @@
     templatecolumns: ["Grid Columns", single],
   }
 
+  $: display = {
+    direction: ["Direction", single],
+    align: ["Align", single],
+    justify: ["Justify", single],
+  }
+
   $: positions = {
     column: ["Column", se],
     row: ["Row", se],
@@ -49,22 +56,24 @@
 
 <h3>Styles</h3>
 
-<h4>Positioning</h4>
+<h4>Display</h4>
 <div class="layout-pos">
-  {#each Object.entries(layouts) as [key, [name, meta, size]] (component._id + key)}
+  {#each Object.entries(display) as [key, [name, meta, size]] (component._id + key)}
     <div class="grid">
       <h5>{name}:</h5>
-      <InputGroup
-        onStyleChanged={_value => onStyleChanged('layout', key, _value)}
-        values={layout[key] || newValue(meta.length)}
-        {meta}
-        {size}
-        type="text" />
+        <LayoutTemplateControls
+          onStyleChanged={_value => onStyleChanged('layout', key, _value)}
+          values={layout[key] || newValue(meta.length)}
+          propertyName={name}
+          {meta}
+          {size}
+          type="text" 
+        />
     </div>
   {/each}
 </div>
 
-<h4>Positioning</h4>
+<!-- <h4>Positioning</h4>
 <div class="layout-pos">
   {#each Object.entries(positions) as [key, [name, meta, size]] (component._id + key)}
     <div class="grid">
@@ -76,7 +85,7 @@
         {size} />
     </div>
   {/each}
-</div>
+</div> -->
 
 <h4>Spacing</h4>
 <div class="layout-spacing">

packages/builder/src/userInterface/LayoutTemplateControls.svelte

@@ -0,0 +1,80 @@
+<script>
+  import PlusButton from "../common/PlusButton.svelte"
+
+  export let meta = []
+  export let size = ""
+  export let values = []
+  export let propertyName
+  export let onStyleChanged = () => {}
+
+  let selectedLayoutValues = values.map(v => v)
+
+  $: onStyleChanged(selectedLayoutValues)
+
+  const PROPERTY_OPTIONS = {
+    Direction: {
+      vertical: ["column", "ri-arrow-up-down-line"],
+      horizontal: ["row", "ri-arrow-left-right-line"],
+    },
+    Align: {
+      left: ["flex-start", "ri-layout-bottom-line"],
+      center: ["center", "ri-layout-row-line"],
+      right: ["flex-end", "ri-layout-top-line"],
+      space: ["space-between", "ri-space"],
+    },
+    Justify: {
+      left: ["flex-start", "ri-layout-left-line"],
+      center: ["center", "ri-layout-column-line"],
+      right: ["flex-end", "ri-layout-right-line"],
+      space: ["space-between", "ri-space"],
+    },
+  }
+
+  $: propertyChoices = Object.entries(PROPERTY_OPTIONS[propertyName])
+</script>
+
+<div class="inputs {size}">
+  {#each meta as { placeholder }, i}
+    {#each propertyChoices as [displayName, [cssPropValue, icon]]}
+      <button
+        class:selected={cssPropValue === selectedLayoutValues[i]}
+        on:click={() => {
+          const newPropertyValue = cssPropValue === selectedLayoutValues[i] ? '' : cssPropValue
+          selectedLayoutValues[i] = newPropertyValue
+        }}>
+        <i class={icon} />
+      </button>
+    {/each}
+  {/each}
+</div>
+
+<style>
+  .selected {
+    color: var(--button-text);
+    background: var(--background-button);
+  }
+
+  button {
+    cursor: pointer;
+    outline: none;
+    border: none;
+    border-radius: 5px;
+    background: rgba(249, 249, 249, 1);
+
+    min-width: 1.6rem;
+    min-height: 1.6rem;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    font-size: 1.2rem;
+    font-weight: 500;
+    color: rgba(22, 48, 87, 1);
+  }
+
+  .inputs {
+    display: flex;
+    justify-content: space-between;
+  }
+</style>