diff --git a/packages/builder/src/components/common/Input.svelte b/packages/builder/src/components/common/Input.svelte index a136b4e2f3..442be58735 100644 --- a/packages/builder/src/components/common/Input.svelte +++ b/packages/builder/src/components/common/Input.svelte @@ -1,30 +1,33 @@ - + diff --git a/packages/builder/src/components/common/Inputs/InputGroup.svelte b/packages/builder/src/components/common/Inputs/InputGroup.svelte index ffe6880f51..3b747b47a0 100644 --- a/packages/builder/src/components/common/Inputs/InputGroup.svelte +++ b/packages/builder/src/components/common/Inputs/InputGroup.svelte @@ -1,35 +1,36 @@
{label}
{#each meta as { placeholder }, i} - handleChange(e.target.value || 0, i)} /> + + handleChange(e.target.value || 0, i)} /> + {/each}
diff --git a/packages/builder/src/components/userInterface/FlatButton.svelte b/packages/builder/src/components/userInterface/FlatButton.svelte index 7fb5742c46..7cd8b2bac7 100644 --- a/packages/builder/src/components/userInterface/FlatButton.svelte +++ b/packages/builder/src/components/userInterface/FlatButton.svelte @@ -1,21 +1,26 @@ -
onClick(value || text)}> +
onClick(value || text)}> {#if useIcon} {:else} - {text} + {@html text} {/if}
+ diff --git a/packages/builder/src/components/userInterface/FlatButtonGroup.svelte b/packages/builder/src/components/userInterface/FlatButtonGroup.svelte index ffa1a98393..ba49128716 100644 --- a/packages/builder/src/components/userInterface/FlatButtonGroup.svelte +++ b/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)
{#each buttonProps as props}
diff --git a/packages/builder/src/components/userInterface/OptionSelect.svelte b/packages/builder/src/components/userInterface/OptionSelect.svelte index bd05b3a171..841d413125 100644 --- a/packages/builder/src/components/userInterface/OptionSelect.svelte +++ b/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; - height: 25px; + width: 20px; + 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; diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte index 632f7a9fc0..a7ea35c014 100644 --- a/packages/builder/src/components/userInterface/PropertyControl.svelte +++ b/packages/builder/src/components/userInterface/PropertyControl.svelte @@ -63,6 +63,7 @@ .control { flex: 1; + display: flex; padding-left: 2px; max-width: 164px; } diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js index 41e2a2eb5e..676a8bb0bd 100644 --- a/packages/builder/src/components/userInterface/propertyCategories.js +++ b/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, - initialValue: "Row", - options: [ - { label: "Row", value: "row" }, - { label: "Row Reverse", value: "rowReverse" }, - { label: "column", value: "column" }, - { label: "Column Reverse", value: "columnReverse" }, + control: FlatButtonGroup, + buttonProps: [ + { icon: "ri-arrow-right-line", padding: "4px 8px", value: "row" }, + { icon: "ri-arrow-left-line", padding: "4px 8px", value: "rowReverse" }, + { icon: "ri-arrow-down-line", padding: "4px 8px", value: "column" }, + { + icon: "ri-arrow-up-line", + padding: "4px 8px", + value: "columnReverse", + }, ], }, { @@ -68,10 +72,10 @@ export const layout = [ ] const spacingMeta = [ - { placeholder: "L" }, - { placeholder: "B" }, - { placeholder: "R" }, - { placeholder: "T" }, + { placeholder: "↑" }, + { placeholder: "→" }, + { placeholder: "↓" }, + { 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: "Min W", key: "min-width", control: Input }, - { label: "Min H", key: "min-height", control: Input }, - { label: "Max W", key: "max-width", control: Input }, - { label: "Max H", key: "max-height", control: Input }, + { + label: "Width", + key: "width", + control: Input, + placeholder: "px", + 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, - options: ["initial", "left", "right", "center", "justify"], - }, //custom - { label: "transform", key: "text-transform", control: Input }, //custom - { label: "style", key: "font-style", control: Input }, //custom + control: FlatButtonGroup, + buttonProps: [ + { icon: "ri-align-left", padding: "4px 8px", value: "left" }, + { icon: "ri-align-center", padding: "4px 8px", value: "center" }, + { 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 = [ diff --git a/packages/builder/src/helpers.js b/packages/builder/src/helpers.js index ee2053d8e4..5d9ff750af 100644 --- a/packages/builder/src/helpers.js +++ b/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