Changes to FlatButtonGroup and more Styling

packages/builder/src/components/common/Input.svelte

@@ -1,30 +1,33 @@
 <script>
+  import {buildStyle} from "../../helpers.js"
   export let value = ""
-  export let width = ""
+  export let textAlign = "left"
+  export let width = "160px"
+  export let placeholder = ""
 
-  let style = { width }
+  let style = buildStyle({ width, textAlign })
 </script>
 
-<input type="text" style={`width: ${width};`} on:change bind:value />
+<input type="text" {placeholder} {style} on:change bind:value />
 
 <style>
     input {
-    display: block;
+    width: 32px;
-    font-size: 14px;
-    font-weight: 500;
-    color: var(--ink);
-    line-height: 1.3;
-    padding: 12px;
-    width: 164px;
-    float: right;
-    max-width: 100%;
-    box-sizing: border-box;
-    margin: 0;
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    appearance: none;
-    background: #fff;
-    border: 1px solid var(--grey-dark);
     height: 32px;
+    font-size: 12px;
+    font-weight: 700;
+    margin: 0px 0px 0px 1px;
+    color: var(--ink);
+    opacity: 0.7;
+    padding: 0px 4px;
+    box-sizing: border-box;
+    border: 1px solid var(--grey);
+    border-radius: 2px;
+    outline: none;
+    float: right;
+  }
+
+   input::placeholder {
+    text-align: center;
   }
 </style>

packages/builder/src/components/common/Inputs/InputGroup.svelte

@@ -1,35 +1,36 @@
 <script>
   import { onMount } from "svelte"
+  import Input from "../Input.svelte"
 
   export let meta = []
   export let label = ""
-  export let value = [0, 0, 0, 0]
+  export let value = ["0", "0", "0", "0"]
   export let type = "number"
   export let onChange = () => {}
 
   function handleChange(val, idx) {
     value.splice(idx, 1, val)
     value = value
-    onChange(value)
+    console.log("IDX",idx)
+    let _value = value.map(v => !/px$/.test(v) ? `${v}px` : v)
+    onChange(_value)
   }
+
+  $: displayValues = value.map(v => v.toString().replace(/px$/, ""))
 </script>
 
 <div class="input-container">
   <div class="label">{label}</div>
   <div class="inputs">
     {#each meta as { placeholder }, i}
-      <input
+
-        {type}
+        <Input width="32px" textAlign="center" placeholder={placeholder || ""} value={!displayValues || displayValues[i] === 0 ? '' : displayValues[i]} on:change={e => handleChange(e.target.value || 0, i)} />
-        placeholder={placeholder || ''}
+        
-        value={!value || value[i] === 0 ? '' : value[i]}
-        on:change={e => handleChange(e.target.value || 0, i)} />
     {/each}
   </div>
 </div>
 
 <style>
-  .input-container {
-  }
 
   .label {
     flex: 0;
@@ -39,36 +40,5 @@
     flex: 1;
   }
 
-  input {
-    width: 40px;
-    height: 32px;
-    font-size: 12px;
-    font-weight: 700;
-    margin: 0px 0px 0px 1px;
-    text-align: center;
-    color: var(--ink);
-    opacity: 0.7;
-    padding: 0px 4px;
-    box-sizing: border-box;
-    border: 1px solid var(--grey);
-    border-radius: 2px;
-    outline: none;
-    float: right;
-  }
  
-  input[type="number"]::-webkit-inner-spin-button,
-  input[type="number"]::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    margin: 0;
-  }
-
-  input[type="number"] {
-    -moz-appearance: textfield;
-  }
-
-  input::placeholder {
-    text-align: center;
-  }
 </style>

packages/builder/src/components/userInterface/FlatButton.svelte

@@ -1,21 +1,26 @@
 <script>
+  import {buildStyle} from "../../helpers.js"
   export let value = ""
   export let text = ""
   export let icon = ""
+  export let padding = "8px 2px;"
   export let onClick = value => {}
   export let selected = false
+  export let fontWeight = ""
 
+  $: style = buildStyle({padding, fontWeight})
   $: useIcon = !!icon
 </script>
 
-<div class="flatbutton" class:selected on:click={() => onClick(value || text)}>
+<div class="flatbutton" {style} class:selected on:click={() => onClick(value || text)}>
   {#if useIcon}
     <i class={icon} />
   {:else}
-    <span>{text}</span>
+    <span>{@html text}</span>
   {/if}
 </div>
 
+
 <style>
   .flatbutton {
     cursor: pointer;
@@ -28,6 +33,7 @@
     font-size: 14px;
     font-weight: 400;
     transition: all 0.3s;
+    margin-left: 5px;
     text-rendering: optimizeLegibility;
   }
 
@@ -35,4 +41,8 @@
     background: var(--ink-light);
     color: #ffffff;
   }
+  
+  i{
+    font-size: 20px;
+  }
 </style>

packages/builder/src/components/userInterface/FlatButtonGroup.svelte

@@ -27,13 +27,17 @@
     }
     onChange(val)
   }
+
+  const checkSelected = val => isMultiSelect ? value.includes(val) : value === val
+
+  $: console.log("VALUE",value)
 </script>
 
 <div class="flatbutton-group">
   {#each buttonProps as props}
     <div class="button-container">
       <FlatButton
-        selected={value.includes(props.value)}
+        selected={checkSelected(props.value)}
         onClick={onButtonClicked}
         {...props} />
     </div>

packages/builder/src/components/userInterface/OptionSelect.svelte

@@ -141,7 +141,7 @@
   .bb-select-container {
     position: relative;
     outline: none;
-    width: 189px;
+    width: 160px;
     height: 32px;
     cursor: pointer;
   }
@@ -158,15 +158,15 @@
   .bb-select-anchor > span {
     color: #565a66;
     font-weight: 500;
-    width: 145px;
+    width: 140px;
     overflow-x: hidden;
   }
 
   .bb-select-anchor > i {
     transition: transform 0.13s ease;
     transform-origin: center;
-    width: 25px;
+    width: 20px;
-    height: 25px;
+    height: 20px;
     text-align: center;
   }
 
@@ -181,7 +181,7 @@
     box-sizing: border-box;
     flex-direction: column;
     opacity: 0;
-    width: 189px;
+    width: 160px;
     z-index: 2;
     color: #808192;
     font-weight: 500;

packages/builder/src/components/userInterface/PropertyControl.svelte

@@ -63,6 +63,7 @@
 
   .control {
     flex: 1;
+    display: flex;
     padding-left: 2px;
     max-width: 164px;
   }

packages/builder/src/components/userInterface/propertyCategories.js

@@ -1,6 +1,7 @@
 import Input from "../common/Input.svelte"
 import OptionSelect from "./OptionSelect.svelte"
 import InputGroup from "../common/Inputs/InputGroup.svelte"
+import FlatButtonGroup from "./FlatButtonGroup.svelte"
 // import Colorpicker from "../common/Colorpicker.svelte"
 /*
   TODO: Allow for default values for all properties
@@ -20,13 +21,16 @@ export const layout = [
   {
     label: "Direction",
     key: "flex-direction",
-    control: OptionSelect,
+    control: FlatButtonGroup,
-    initialValue: "Row",
+    buttonProps: [
-    options: [
+      { icon: "ri-arrow-right-line", padding: "4px 8px", value: "row" },
-      { label: "Row", value: "row" },
+      { icon: "ri-arrow-left-line", padding: "4px 8px", value: "rowReverse" },
-      { label: "Row Reverse", value: "rowReverse" },
+      { icon: "ri-arrow-down-line", padding: "4px 8px", value: "column" },
-      { label: "column", value: "column" },
+      {
-      { label: "Column Reverse", value: "columnReverse" },
+        icon: "ri-arrow-up-line",
+        padding: "4px 8px",
+        value: "columnReverse",
+      },
     ],
   },
   {
@@ -68,10 +72,10 @@ export const layout = [
 ]
 
 const spacingMeta = [
-  { placeholder: "L" },
+  { placeholder: "↑" },
-  { placeholder: "B" },
+  { placeholder: "→" },
-  { placeholder: "R" },
+  { placeholder: "↓" },
-  { placeholder: "T" },
+  { placeholder: "←" },
 ]
 
 export const spacing = [
@@ -85,12 +89,54 @@ export const spacing = [
 ]
 
 export const size = [
-  { label: "Width", key: "width", control: Input },
+  {
-  { label: "Height", key: "height", control: Input },
+    label: "Width",
-  { label: "Min W", key: "min-width", control: Input },
+    key: "width",
-  { label: "Min H", key: "min-height", control: Input },
+    control: Input,
-  { label: "Max W", key: "max-width", control: Input },
+    placeholder: "px",
-  { label: "Max H", key: "max-height", control: Input },
+    width: "48px",
+    textAlign: "center",
+  },
+  {
+    label: "Height",
+    key: "height",
+    control: Input,
+    placeholder: "px",
+    width: "48px",
+    textAlign: "center",
+  },
+  {
+    label: "Min W",
+    key: "min-width",
+    control: Input,
+    placeholder: "px",
+    width: "48px",
+    textAlign: "center",
+  },
+  {
+    label: "Min H",
+    key: "min-height",
+    control: Input,
+    placeholder: "px",
+    width: "48px",
+    textAlign: "center",
+  },
+  {
+    label: "Max W",
+    key: "max-width",
+    control: Input,
+    placeholder: "px",
+    width: "48px",
+    textAlign: "center",
+  },
+  {
+    label: "Max H",
+    key: "max-height",
+    control: Input,
+    placeholder: "px",
+    width: "48px",
+    textAlign: "center",
+  },
 ]
 
 export const position = [
@@ -111,26 +157,41 @@ export const position = [
     label: "Top",
     key: "top",
     control: Input,
+    placeholder: "px",
+    width: "48px",
+    textAlign: "center",
   },
   {
     label: "Right",
     key: "right",
     control: Input,
+    placeholder: "px",
+    width: "48px",
+    textAlign: "center",
   },
   {
     label: "Bottom",
     key: "bottom",
     control: Input,
+    placeholder: "px",
+    width: "48px",
+    textAlign: "center",
   },
   {
     label: "Left",
     key: "left",
     control: Input,
+    placeholder: "px",
+    width: "48px",
+    textAlign: "center",
   },
   {
     label: "Z-index",
     key: "z-index",
     control: Input,
+    placeholder: "Num",
+    width: "48px",
+    textAlign: "center",
   },
 ]
 
@@ -166,8 +227,23 @@ export const typography = [
     control: OptionSelect,
     options: ["normal", "bold", "bolder", "lighter"],
   },
-  { label: "size", key: "font-size", defaultValue: "", control: Input },
+  {
-  { label: "Line H", key: "line-height", control: Input },
+    label: "size",
+    key: "font-size",
+    defaultValue: "",
+    control: Input,
+    placeholder: "px",
+    width: "48px",
+    textAlign: "center",
+  },
+  {
+    label: "Line H",
+    key: "line-height",
+    control: Input,
+    placeholder: "lh",
+    width: "48px",
+    textAlign: "center",
+  },
   {
     label: "Color",
     key: "color",
@@ -176,11 +252,31 @@ export const typography = [
   {
     label: "align",
     key: "text-align",
-    control: OptionSelect,
+    control: FlatButtonGroup,
-    options: ["initial", "left", "right", "center", "justify"],
+    buttonProps: [
-  }, //custom
+      { icon: "ri-align-left", padding: "4px 8px", value: "left" },
-  { label: "transform", key: "text-transform", control: Input }, //custom
+      { icon: "ri-align-center", padding: "4px 8px", value: "center" },
-  { label: "style", key: "font-style", control: Input }, //custom
+      { icon: "ri-align-right", padding: "4px 8px", value: "right" },
+      { icon: "ri-align-justify", padding: "4px 8px", value: "justify" },
+    ],
+  }, 
+  {
+    label: "transform",
+    key: "text-transform",
+    control: FlatButtonGroup,
+    buttonProps: [
+      { text: "BB", padding: "4px 8px", fontWeight: 500, value: "uppercase" },
+      { text: "Bb", padding: "4px 8px", fontWeight: 500, value: "capitalize" },
+      { text: "bb", padding: "4px 8px", fontWeight: 500, value: "lowercase" },
+      {
+        text: "×",
+        padding: "4px 8px",
+        fontWeight: 500,
+        value: "none",
+      },
+    ],
+  },
+  { label: "style", key: "font-style", control: Input }, 
 ]
 
 export const background = [

packages/builder/src/helpers.js

@@ -2,7 +2,8 @@ export const buildStyle = styles => {
   let str = ""
   for (let s in styles) {
     if (styles[s]) {
-      str += `${s}: ${styles[s]}; `
+      let key = convertCamel(s)
+      str += `${key}: ${styles[s]}; `
     }
   }
   return str