From 73223debe93850f3494a0e5c5128f57789d59fbe Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Thu, 28 May 2020 16:24:53 +0100 Subject: [PATCH 1/8] Complete OptionSelect Component --- .../ComponentsPaneSwitcher.svelte | 4 + .../userInterface/DesignView.svelte | 1 + .../userInterface/OptionSelect.svelte | 232 ++++++++++++++++-- .../userInterface/OptionSelectOld.svelte | 33 +++ .../userInterface/PropertyControl.svelte | 2 + .../userInterface/PropertyGroup.svelte | 12 +- .../userInterface/SettingsView.svelte | 4 + .../userInterface/UserInterfaceRoot.svelte | 3 +- .../userInterface/propertyCategories.js | 24 +- .../[application]/frontend/_layout.svelte | 1 - 10 files changed, 268 insertions(+), 48 deletions(-) create mode 100644 packages/builder/src/components/userInterface/OptionSelectOld.svelte diff --git a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte index c85e23403c..25ecfd3280 100644 --- a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte +++ b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte @@ -78,4 +78,8 @@ .switcher > .selected { color: var(--ink); } + + .panel { + height: 100%; + } diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte index 40aac9027a..9e005ee3bb 100644 --- a/packages/builder/src/components/userInterface/DesignView.svelte +++ b/packages/builder/src/components/userInterface/DesignView.svelte @@ -55,6 +55,7 @@ display: flex; flex-direction: column; width: 100%; + height: 100%; } .design-view-state-categories { diff --git a/packages/builder/src/components/userInterface/OptionSelect.svelte b/packages/builder/src/components/userInterface/OptionSelect.svelte index 4fbedde4ac..8ac0ca4184 100644 --- a/packages/builder/src/components/userInterface/OptionSelect.svelte +++ b/packages/builder/src/components/userInterface/OptionSelect.svelte @@ -1,36 +1,218 @@ - +
toggleSelect(!open)}> +
+ {displayLabel} + +
+
+
    + {#if isOptionsObject} + {#each options as { value: v, label }} +
  • + {label} +
    • + {/each} + {:else} + {#each options as v} +
  • + {v} +
    • + {/each} + {/if} +
+
+
+{#if open} +
toggleSelect(false)} class="overlay" /> +{/if} + + diff --git a/packages/builder/src/components/userInterface/OptionSelectOld.svelte b/packages/builder/src/components/userInterface/OptionSelectOld.svelte new file mode 100644 index 0000000000..db3c19de35 --- /dev/null +++ b/packages/builder/src/components/userInterface/OptionSelectOld.svelte @@ -0,0 +1,33 @@ + + + diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte index cd1bad35f7..2946636872 100644 --- a/packages/builder/src/components/userInterface/PropertyControl.svelte +++ b/packages/builder/src/components/userInterface/PropertyControl.svelte @@ -49,6 +49,8 @@ .label { flex: 0 0 50px; + display: flex; + align-items: center; padding: 0px 5px; font-size: 12px; font-weight: 500; diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte index 240618a4c7..2e227d0b61 100644 --- a/packages/builder/src/components/userInterface/PropertyGroup.svelte +++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte @@ -70,12 +70,16 @@ } .property-panel { - height: 0px; - overflow: hidden; + /* height: 0px; + overflow: hidden; */ + display: none; } .show { - overflow: auto; - height: auto; + /* overflow: auto; + height: auto; */ + display: flex; + flex-direction: column; + flex: 1; } diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte index 36b2ab9c75..e5b997b8aa 100644 --- a/packages/builder/src/components/userInterface/SettingsView.svelte +++ b/packages/builder/src/components/userInterface/SettingsView.svelte @@ -3,6 +3,7 @@ import InputGroup from "../common/Inputs/InputGroup.svelte" import Colorpicker from "../common/Colorpicker.svelte" import { excludeProps } from "./propertyCategories.js" + import OptionSelectNew from "./OptionSelectNew.svelte" export let panelDefinition = [] export let componentDefinition = {} @@ -16,6 +17,9 @@ } + + {#if panelDefinition.length > 0} {#each panelDefinition as definition} {#if propExistsOnComponentDef(definition.key)} diff --git a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte index 13d7a7e2a1..68f3ff80da 100644 --- a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte +++ b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte @@ -151,8 +151,7 @@ .components-pane { grid-column: 3; background-color: var(--white); - height: 100vh; - overflow-y: scroll; + height: calc(100vh - 49px); } .components-nav-page { diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js index 07101779a5..bbcef302f6 100644 --- a/packages/builder/src/components/userInterface/propertyCategories.js +++ b/packages/builder/src/components/userInterface/propertyCategories.js @@ -13,9 +13,9 @@ export const layout = [ control: OptionSelect, initialValue: "columnReverse", options: [ - { label: "row" }, + { label: "row", value: "row" }, { label: "row-reverse", value: "rowReverse" }, - { label: "column" }, + { label: "column", value: "column" }, { label: "column-reverse", value: "columnReverse" }, ], }, @@ -25,7 +25,10 @@ export const layout = [ label: "Wrap", key: "flex-wrap", control: OptionSelect, - options: [{ label: "wrap" }, { label: "no wrap", value: "noWrap" }], + options: [ + { label: "wrap", value: "wrap" }, + { label: "no wrap", value: "noWrap" }, + ], }, ] @@ -59,13 +62,7 @@ export const position = [ label: "Position", key: "position", control: OptionSelect, - options: [ - { label: "static" }, - { label: "relative" }, - { label: "fixed" }, - { label: "absolute" }, - { label: "sticky" }, - ], + options: ["static", "relative", "fixed", "absolute", "sticky"], }, ] @@ -91,12 +88,7 @@ export const typography = [ label: "Weight", key: "font-weight", control: OptionSelect, - options: [ - { label: "normal" }, - { label: "bold" }, - { label: "bolder" }, - { label: "lighter" }, - ], + options: ["normal", "bold", "bolder", "lighter"], }, { label: "size", key: "font-size", defaultValue: "", control: Input }, { label: "Line H", key: "line-height", control: Input }, diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte index df9762fb07..8afee37d74 100644 --- a/packages/builder/src/pages/[application]/frontend/_layout.svelte +++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte @@ -163,7 +163,6 @@ grid-column: 3; background-color: var(--white); min-height: 0px; - overflow-y: scroll; } .components-nav-page { From a9a0a35c5a294150d8642a460db7b1940e0eba5e Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Fri, 29 May 2020 10:45:19 +0100 Subject: [PATCH 2/8] Tidyup --- .../userInterface/OptionSelect.svelte | 26 ++++++++++--------- .../userInterface/SettingsView.svelte | 4 --- packages/builder/src/helpers.js | 13 ++++++++++ 3 files changed, 27 insertions(+), 16 deletions(-) create mode 100644 packages/builder/src/helpers.js diff --git a/packages/builder/src/components/userInterface/OptionSelect.svelte b/packages/builder/src/components/userInterface/OptionSelect.svelte index 8ac0ca4184..197d3e6a0d 100644 --- a/packages/builder/src/components/userInterface/OptionSelect.svelte +++ b/packages/builder/src/components/userInterface/OptionSelect.svelte @@ -1,7 +1,6 @@ - - {#if panelDefinition.length > 0} {#each panelDefinition as definition} {#if propExistsOnComponentDef(definition.key)} diff --git a/packages/builder/src/helpers.js b/packages/builder/src/helpers.js new file mode 100644 index 0000000000..ee2053d8e4 --- /dev/null +++ b/packages/builder/src/helpers.js @@ -0,0 +1,13 @@ +export const buildStyle = styles => { + let str = "" + for (let s in styles) { + if (styles[s]) { + str += `${s}: ${styles[s]}; ` + } + } + return str +} + +export const convertCamel = str => { + return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`) +} From 6a9e5a9dd1a0a72dce3e6b4de2d76915265a8b71 Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Fri, 29 May 2020 10:49:51 +0100 Subject: [PATCH 3/8] Optionselect hover style fix --- .../builder/src/components/userInterface/OptionSelect.svelte | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/builder/src/components/userInterface/OptionSelect.svelte b/packages/builder/src/components/userInterface/OptionSelect.svelte index 197d3e6a0d..bd05b3a171 100644 --- a/packages/builder/src/components/userInterface/OptionSelect.svelte +++ b/packages/builder/src/components/userInterface/OptionSelect.svelte @@ -205,13 +205,14 @@ ul { list-style-type: none; margin: 0; - padding: 5px 10px; + padding: 5px 0px; } li { height: auto; padding: 5px 0px; cursor: pointer; + padding-left: 10px } li:hover { From 5afc23517878f60640e926fa44621073d6feb934 Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Sat, 30 May 2020 18:48:20 +0100 Subject: [PATCH 4/8] Changes to FlatButtonGroup and more Styling --- .../src/components/common/Input.svelte | 43 +++--- .../common/Inputs/InputGroup.svelte | 52 ++----- .../userInterface/FlatButton.svelte | 14 +- .../userInterface/FlatButtonGroup.svelte | 6 +- .../userInterface/OptionSelect.svelte | 10 +- .../userInterface/PropertyControl.svelte | 1 + .../userInterface/propertyCategories.js | 144 +++++++++++++++--- packages/builder/src/helpers.js | 3 +- 8 files changed, 179 insertions(+), 94 deletions(-) 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 From 787caa95e5558463df75f7a006d3990c07e5d137 Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Mon, 1 Jun 2020 16:31:58 +0100 Subject: [PATCH 5/8] Property panel updates --- .../builder/src/builderStore/generate_css.js | 90 +- .../builder/src/builderStore/store/index.js | 940 +++++++++--------- .../src/components/common/Input.svelte | 16 +- .../common/Inputs/InputGroup.svelte | 29 +- .../userInterface/FlatButton.svelte | 2 +- .../userInterface/FlatButtonGroup.svelte | 4 +- .../userInterface/OptionSelect.svelte | 2 + .../userInterface/propertyCategories.js | 708 ++++++------- 8 files changed, 888 insertions(+), 903 deletions(-) diff --git a/packages/builder/src/builderStore/generate_css.js b/packages/builder/src/builderStore/generate_css.js index 5826d4f824..cd284994f9 100644 --- a/packages/builder/src/builderStore/generate_css.js +++ b/packages/builder/src/builderStore/generate_css.js @@ -1,54 +1,42 @@ -export const generate_screen_css = component_arr => { - let styles = "" - for (const { _styles, _id, _children, _component } of component_arr) { - let [componentName] = _component.match(/[a-z]*$/) - Object.keys(_styles).forEach(selector => { - const cssString = generate_css(_styles[selector]) - if (cssString) { - styles += apply_class(_id, componentName, cssString, selector) - } - }) - if (_children && _children.length) { - styles += generate_screen_css(_children) + "\n" - } - } - return styles.trim() -} +export const generate_screen_css = (component_arr) => { + let styles = ''; + for (const { _styles, _id, _children, _component } of component_arr) { + let [ componentName ] = _component.match(/[a-z]*$/); + Object.keys(_styles).forEach((selector) => { + const cssString = generate_css(_styles[selector]); + if (cssString) { + styles += apply_class(_id, componentName, cssString, selector); + } + }); + if (_children && _children.length) { + styles += generate_screen_css(_children) + '\n'; + } + } + return styles.trim(); +}; -export const generate_css = style => { - let cssString = Object.entries(style).reduce((str, [key, value]) => { - //TODO Handle arrays and objects here also - if (typeof value === "string") { - if (value) { - return (str += `${key}: ${value};\n`) - } - } else if (Array.isArray(value)) { - if (value.length > 0 && !value.every(v => v === "")) { - return (str += `${key}: ${value - .map(generate_array_styles) - .join(" ")};\n`) - } - } - }, "") +export const generate_css = (style) => { + let cssString = Object.entries(style).reduce((str, [ key, value ]) => { + //TODO Handle arrays and objects here also + if (typeof value === 'string') { + if (value) { + return (str += `${key}: ${value};\n`); + } + } else if (Array.isArray(value)) { + if (value.length > 0 && !value.every((v) => v === '')) { + return (str += `${key}: ${value.join(' ')};\n`); + } + } + }, ''); - return (cssString || "").trim() -} + return (cssString || '').trim(); +}; -export const generate_array_styles = item => { - let safeItem = item === "" ? 0 : item - let hasPx = new RegExp("px$") - if (!hasPx.test(safeItem)) { - return `${safeItem}px` - } else { - return safeItem - } -} - -export const apply_class = (id, name = "element", styles, selector) => { - if (selector === "normal") { - return `.${name}-${id} {\n${styles}\n}` - } else { - let sel = selector === "selected" ? "::selection" : `:${selector}` - return `.${name}-${id}${sel} {\n${styles}\n}` - } -} +export const apply_class = (id, name = 'element', styles, selector) => { + if (selector === 'normal') { + return `.${name}-${id} {\n${styles}\n}`; + } else { + let sel = selector === 'selected' ? '::selection' : `:${selector}`; + return `.${name}-${id}${sel} {\n${styles}\n}`; + } +}; diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js index f4d47064be..2943667033 100644 --- a/packages/builder/src/builderStore/store/index.js +++ b/packages/builder/src/builderStore/store/index.js @@ -1,321 +1,288 @@ -import { cloneDeep, values } from "lodash/fp" -import { backendUiStore } from "builderStore" -import * as backendStoreActions from "./backend" -import { writable, get } from "svelte/store" -import api from "../api" -import { DEFAULT_PAGES_OBJECT } from "../../constants" -import { getExactComponent } from "components/userInterface/pagesParsing/searchComponents" -import { rename } from "components/userInterface/pagesParsing/renameScreen" -import { - createProps, - makePropsSafe, - getBuiltin, -} from "components/userInterface/pagesParsing/createProps" -import { fetchComponentLibDefinitions } from "../loadComponentLibraries" -import { buildCodeForScreens } from "../buildCodeForScreens" -import { generate_screen_css } from "../generate_css" -import { insertCodeMetadata } from "../insertCodeMetadata" -import { uuid } from "../uuid" +import { cloneDeep, values } from 'lodash/fp'; +import { backendUiStore } from 'builderStore'; +import * as backendStoreActions from './backend'; +import { writable, get } from 'svelte/store'; +import api from '../api'; +import { DEFAULT_PAGES_OBJECT } from '../../constants'; +import { getExactComponent } from 'components/userInterface/pagesParsing/searchComponents'; +import { rename } from 'components/userInterface/pagesParsing/renameScreen'; +import { createProps, makePropsSafe, getBuiltin } from 'components/userInterface/pagesParsing/createProps'; +import { fetchComponentLibDefinitions } from '../loadComponentLibraries'; +import { buildCodeForScreens } from '../buildCodeForScreens'; +import { generate_screen_css } from '../generate_css'; +import { insertCodeMetadata } from '../insertCodeMetadata'; +import { uuid } from '../uuid'; export const getStore = () => { - const initial = { - apps: [], - appname: "", - pages: DEFAULT_PAGES_OBJECT, - mainUi: {}, - unauthenticatedUi: {}, - components: [], - currentPreviewItem: null, - currentComponentInfo: null, - currentFrontEndType: "none", - currentPageName: "", - currentComponentProps: null, - errors: [], - hasAppPackage: false, - libraries: null, - appId: "", - } + const initial = { + apps: [], + appname: '', + pages: DEFAULT_PAGES_OBJECT, + mainUi: {}, + unauthenticatedUi: {}, + components: [], + currentPreviewItem: null, + currentComponentInfo: null, + currentFrontEndType: 'none', + currentPageName: '', + currentComponentProps: null, + errors: [], + hasAppPackage: false, + libraries: null, + appId: '' + }; - const store = writable(initial) + const store = writable(initial); - store.setPackage = setPackage(store, initial) + store.setPackage = setPackage(store, initial); - store.createDatabaseForApp = backendStoreActions.createDatabaseForApp(store) + store.createDatabaseForApp = backendStoreActions.createDatabaseForApp(store); - store.saveScreen = saveScreen(store) - store.renameScreen = renameScreen(store) - store.deleteScreen = deleteScreen(store) - store.setCurrentScreen = setCurrentScreen(store) - store.setCurrentPage = setCurrentPage(store) - store.createScreen = createScreen(store) - store.addStylesheet = addStylesheet(store) - store.removeStylesheet = removeStylesheet(store) - store.savePage = savePage(store) - store.addChildComponent = addChildComponent(store) - store.selectComponent = selectComponent(store) - store.setComponentProp = setComponentProp(store) - store.setComponentStyle = setComponentStyle(store) - store.setComponentCode = setComponentCode(store) - store.setScreenType = setScreenType(store) - store.deleteComponent = deleteComponent(store) - store.moveUpComponent = moveUpComponent(store) - store.moveDownComponent = moveDownComponent(store) - store.copyComponent = copyComponent(store) - store.getPathToComponent = getPathToComponent(store) - store.addTemplatedComponent = addTemplatedComponent(store) - store.setMetadataProp = setMetadataProp(store) - return store -} + store.saveScreen = saveScreen(store); + store.renameScreen = renameScreen(store); + store.deleteScreen = deleteScreen(store); + store.setCurrentScreen = setCurrentScreen(store); + store.setCurrentPage = setCurrentPage(store); + store.createScreen = createScreen(store); + store.addStylesheet = addStylesheet(store); + store.removeStylesheet = removeStylesheet(store); + store.savePage = savePage(store); + store.addChildComponent = addChildComponent(store); + store.selectComponent = selectComponent(store); + store.setComponentProp = setComponentProp(store); + store.setComponentStyle = setComponentStyle(store); + store.setComponentCode = setComponentCode(store); + store.setScreenType = setScreenType(store); + store.deleteComponent = deleteComponent(store); + store.moveUpComponent = moveUpComponent(store); + store.moveDownComponent = moveDownComponent(store); + store.copyComponent = copyComponent(store); + store.getPathToComponent = getPathToComponent(store); + store.addTemplatedComponent = addTemplatedComponent(store); + store.setMetadataProp = setMetadataProp(store); + return store; +}; -export default getStore +export default getStore; -const setPackage = (store, initial) => async pkg => { - const [main_screens, unauth_screens] = await Promise.all([ - api - .get(`/_builder/api/${pkg.application._id}/pages/main/screens`) - .then(r => r.json()), - api - .get(`/_builder/api/${pkg.application._id}/pages/unauthenticated/screens`) - .then(r => r.json()), - ]) +const setPackage = (store, initial) => async (pkg) => { + const [ main_screens, unauth_screens ] = await Promise.all([ + api.get(`/_builder/api/${pkg.application._id}/pages/main/screens`).then((r) => r.json()), + api.get(`/_builder/api/${pkg.application._id}/pages/unauthenticated/screens`).then((r) => r.json()) + ]); - pkg.pages = { - main: { - ...pkg.pages.main, - _screens: Object.values(main_screens), - }, - unauthenticated: { - ...pkg.pages.unauthenticated, - _screens: Object.values(unauth_screens), - }, - } + pkg.pages = { + main: { + ...pkg.pages.main, + _screens: Object.values(main_screens) + }, + unauthenticated: { + ...pkg.pages.unauthenticated, + _screens: Object.values(unauth_screens) + } + }; - initial.libraries = pkg.application.componentLibraries - initial.components = await fetchComponentLibDefinitions(pkg.application._id) - initial.appname = pkg.application.name - initial.appId = pkg.application._id - initial.pages = pkg.pages - initial.hasAppPackage = true - initial.screens = values(pkg.screens) - initial.builtins = [getBuiltin("##builtin/screenslot")] - initial.appInstances = pkg.application.instances - initial.appId = pkg.application._id + initial.libraries = pkg.application.componentLibraries; + initial.components = await fetchComponentLibDefinitions(pkg.application._id); + initial.appname = pkg.application.name; + initial.appId = pkg.application._id; + initial.pages = pkg.pages; + initial.hasAppPackage = true; + initial.screens = values(pkg.screens); + initial.builtins = [ getBuiltin('##builtin/screenslot') ]; + initial.appInstances = pkg.application.instances; + initial.appId = pkg.application._id; - store.set(initial) - return initial -} + store.set(initial); + return initial; +}; -const saveScreen = store => screen => { - store.update(state => { - return _saveScreen(store, state, screen) - }) -} +const saveScreen = (store) => (screen) => { + store.update((state) => { + return _saveScreen(store, state, screen); + }); +}; const _saveScreen = async (store, s, screen) => { - const currentPageScreens = s.pages[s.currentPageName]._screens + const currentPageScreens = s.pages[s.currentPageName]._screens; - await api - .post(`/_builder/api/${s.appId}/pages/${s.currentPageName}/screen`, screen) - .then(() => { - if (currentPageScreens.includes(screen)) return + await api.post(`/_builder/api/${s.appId}/pages/${s.currentPageName}/screen`, screen).then(() => { + if (currentPageScreens.includes(screen)) return; - const screens = [...currentPageScreens, screen] + const screens = [ ...currentPageScreens, screen ]; - store.update(innerState => { - innerState.pages[s.currentPageName]._screens = screens - innerState.screens = screens - innerState.currentPreviewItem = screen - const safeProps = makePropsSafe( - innerState.components[screen.props._component], - screen.props - ) - innerState.currentComponentInfo = safeProps - screen.props = safeProps + store.update((innerState) => { + innerState.pages[s.currentPageName]._screens = screens; + innerState.screens = screens; + innerState.currentPreviewItem = screen; + const safeProps = makePropsSafe(innerState.components[screen.props._component], screen.props); + innerState.currentComponentInfo = safeProps; + screen.props = safeProps; - _savePage(innerState) - return innerState - }) - }) + _savePage(innerState); + return innerState; + }); + }); - return s -} + return s; +}; const _saveScreenApi = (screen, s) => { - api - .post(`/_builder/api/${s.appId}/pages/${s.currentPageName}/screen`, screen) - .then(() => _savePage(s)) -} + api.post(`/_builder/api/${s.appId}/pages/${s.currentPageName}/screen`, screen).then(() => _savePage(s)); +}; -const createScreen = store => (screenName, route, layoutComponentName) => { - store.update(state => { - const rootComponent = state.components[layoutComponentName] +const createScreen = (store) => (screenName, route, layoutComponentName) => { + store.update((state) => { + const rootComponent = state.components[layoutComponentName]; - const newScreen = { - name: screenName || "", - description: "", - url: "", - _css: "", - uiFunctions: "", - props: createProps(rootComponent).props, - } + const newScreen = { + name: screenName || '', + description: '', + url: '', + _css: '', + uiFunctions: '', + props: createProps(rootComponent).props + }; - newScreen.route = route - state.currentPreviewItem = newScreen - state.currentComponentInfo = newScreen.props - state.currentFrontEndType = "screen" + newScreen.route = route; + state.currentPreviewItem = newScreen; + state.currentComponentInfo = newScreen.props; + state.currentFrontEndType = 'screen'; - _saveScreen(store, state, newScreen) + _saveScreen(store, state, newScreen); - return state - }) -} + return state; + }); +}; -const setCurrentScreen = store => screenName => { - store.update(s => { - const screen = getExactComponent(s.screens, screenName) - screen._css = generate_screen_css([screen.props]) - s.currentPreviewItem = screen - s.currentFrontEndType = "screen" - s.currentView = "detail" +const setCurrentScreen = (store) => (screenName) => { + store.update((s) => { + const screen = getExactComponent(s.screens, screenName); + screen._css = generate_screen_css([ screen.props ]); + s.currentPreviewItem = screen; + s.currentFrontEndType = 'screen'; + s.currentView = 'detail'; - const safeProps = makePropsSafe( - s.components[screen.props._component], - screen.props - ) - screen.props = safeProps - s.currentComponentInfo = safeProps - setCurrentPageFunctions(s) - return s - }) -} + const safeProps = makePropsSafe(s.components[screen.props._component], screen.props); + screen.props = safeProps; + s.currentComponentInfo = safeProps; + setCurrentPageFunctions(s); + return s; + }); +}; -const deleteScreen = store => name => { - store.update(s => { - const components = s.components.filter(c => c.name !== name) - const screens = s.screens.filter(c => c.name !== name) +const deleteScreen = (store) => (name) => { + store.update((s) => { + const components = s.components.filter((c) => c.name !== name); + const screens = s.screens.filter((c) => c.name !== name); - s.components = components - s.screens = screens - if (s.currentPreviewItem.name === name) { - s.currentPreviewItem = null - s.currentFrontEndType = "" - } + s.components = components; + s.screens = screens; + if (s.currentPreviewItem.name === name) { + s.currentPreviewItem = null; + s.currentFrontEndType = ''; + } - api.delete(`/_builder/api/${s.appId}/screen/${name}`) + api.delete(`/_builder/api/${s.appId}/screen/${name}`); - return s - }) -} + return s; + }); +}; -const renameScreen = store => (oldname, newname) => { - store.update(s => { - const { screens, pages, error, changedScreens } = rename( - s.pages, - s.screens, - oldname, - newname - ) +const renameScreen = (store) => (oldname, newname) => { + store.update((s) => { + const { screens, pages, error, changedScreens } = rename(s.pages, s.screens, oldname, newname); - if (error) { - // should really do something with this - return s - } + if (error) { + // should really do something with this + return s; + } - s.screens = screens - s.pages = pages - if (s.currentPreviewItem.name === oldname) - s.currentPreviewItem.name = newname + s.screens = screens; + s.pages = pages; + if (s.currentPreviewItem.name === oldname) s.currentPreviewItem.name = newname; - const saveAllChanged = async () => { - for (let screenName of changedScreens) { - const changedScreen = getExactComponent(screens, screenName) - await api.post(`/_builder/api/${s.appId}/screen`, changedScreen) - } - } + const saveAllChanged = async () => { + for (let screenName of changedScreens) { + const changedScreen = getExactComponent(screens, screenName); + await api.post(`/_builder/api/${s.appId}/screen`, changedScreen); + } + }; - api - .patch(`/_builder/api/${s.appId}/screen`, { - oldname, - newname, - }) - .then(() => saveAllChanged()) - .then(() => { - _savePage(s) - }) + api + .patch(`/_builder/api/${s.appId}/screen`, { + oldname, + newname + }) + .then(() => saveAllChanged()) + .then(() => { + _savePage(s); + }); - return s - }) -} + return s; + }); +}; -const savePage = store => async page => { - store.update(state => { - if (state.currentFrontEndType !== "page" || !state.currentPageName) { - return state - } +const savePage = (store) => async (page) => { + store.update((state) => { + if (state.currentFrontEndType !== 'page' || !state.currentPageName) { + return state; + } - state.pages[state.currentPageName] = page - _savePage(state) - return state - }) -} + state.pages[state.currentPageName] = page; + _savePage(state); + return state; + }); +}; -const addStylesheet = store => stylesheet => { - store.update(s => { - s.pages.stylesheets.push(stylesheet) - _savePage(s) - return s - }) -} +const addStylesheet = (store) => (stylesheet) => { + store.update((s) => { + s.pages.stylesheets.push(stylesheet); + _savePage(s); + return s; + }); +}; -const removeStylesheet = store => stylesheet => { - store.update(state => { - state.pages.stylesheets = state.pages.stylesheets.filter( - s => s !== stylesheet - ) - _savePage(state) - return state - }) -} +const removeStylesheet = (store) => (stylesheet) => { + store.update((state) => { + state.pages.stylesheets = state.pages.stylesheets.filter((s) => s !== stylesheet); + _savePage(state); + return state; + }); +}; -const _savePage = async s => { - const page = s.pages[s.currentPageName] - await api.post(`/_builder/api/${s.appId}/pages/${s.currentPageName}`, { - page: { componentLibraries: s.pages.componentLibraries, ...page }, - uiFunctions: s.currentPageFunctions, - screens: page._screens, - }) -} +const _savePage = async (s) => { + const page = s.pages[s.currentPageName]; + await api.post(`/_builder/api/${s.appId}/pages/${s.currentPageName}`, { + page: { componentLibraries: s.pages.componentLibraries, ...page }, + uiFunctions: s.currentPageFunctions, + screens: page._screens + }); +}; -const setCurrentPage = store => pageName => { - store.update(state => { - const current_screens = state.pages[pageName]._screens +const setCurrentPage = (store) => (pageName) => { + store.update((state) => { + const current_screens = state.pages[pageName]._screens; - const currentPage = state.pages[pageName] + const currentPage = state.pages[pageName]; - state.currentFrontEndType = "page" - state.currentPageName = pageName - state.screens = Array.isArray(current_screens) - ? current_screens - : Object.values(current_screens) - const safeProps = makePropsSafe( - state.components[currentPage.props._component], - currentPage.props - ) - state.currentComponentInfo = safeProps - currentPage.props = safeProps - state.currentPreviewItem = state.pages[pageName] - state.currentPreviewItem._css = generate_screen_css([ - state.currentPreviewItem.props, - ]) + state.currentFrontEndType = 'page'; + state.currentPageName = pageName; + state.screens = Array.isArray(current_screens) ? current_screens : Object.values(current_screens); + const safeProps = makePropsSafe(state.components[currentPage.props._component], currentPage.props); + state.currentComponentInfo = safeProps; + currentPage.props = safeProps; + state.currentPreviewItem = state.pages[pageName]; + state.currentPreviewItem._css = generate_screen_css([ state.currentPreviewItem.props ]); - for (let screen of state.screens) { - screen._css = generate_screen_css([screen.props]) - } + for (let screen of state.screens) { + screen._css = generate_screen_css([ screen.props ]); + } - setCurrentPageFunctions(state) - return state - }) -} + setCurrentPageFunctions(state); + return state; + }); +}; // const getComponentDefinition = (components, name) => components.find(c => c.name === name) @@ -323,288 +290,267 @@ const setCurrentPage = store => pageName => { * @param {string} componentToAdd - name of the component to add to the application * @param {string} presetName - name of the component preset if defined */ -const addChildComponent = store => (componentToAdd, presetName) => { - store.update(state => { - function findSlot(component_array) { - for (let i = 0; i < component_array.length; i += 1) { - if (component_array[i]._component === "##builtin/screenslot") { - return true - } +const addChildComponent = (store) => (componentToAdd, presetName) => { + store.update((state) => { + function findSlot(component_array) { + for (let i = 0; i < component_array.length; i += 1) { + if (component_array[i]._component === '##builtin/screenslot') { + return true; + } - if (component_array[i]._children) findSlot(component_array[i]) - } + if (component_array[i]._children) findSlot(component_array[i]); + } - return false - } + return false; + } - if ( - componentToAdd.startsWith("##") && - findSlot(state.pages[state.currentPageName].props._children) - ) { - return state - } + if (componentToAdd.startsWith('##') && findSlot(state.pages[state.currentPageName].props._children)) { + return state; + } - const component = componentToAdd.startsWith("##") - ? getBuiltin(componentToAdd) - : state.components[componentToAdd] + const component = componentToAdd.startsWith('##') + ? getBuiltin(componentToAdd) + : state.components[componentToAdd]; - const presetProps = presetName ? component.presets[presetName] : {} + const presetProps = presetName ? component.presets[presetName] : {}; - const instanceId = get(backendUiStore).selectedDatabase._id + const instanceId = get(backendUiStore).selectedDatabase._id; - const newComponent = createProps( - component, - { - ...presetProps, - _instanceId: instanceId, - }, - state - ) + const newComponent = createProps( + component, + { + ...presetProps, + _instanceId: instanceId + }, + state + ); - state.currentComponentInfo._children = state.currentComponentInfo._children.concat( - newComponent.props - ) + state.currentComponentInfo._children = state.currentComponentInfo._children.concat(newComponent.props); - state.currentFrontEndType === "page" - ? _savePage(state) - : _saveScreenApi(state.currentPreviewItem, state) + state.currentFrontEndType === 'page' ? _savePage(state) : _saveScreenApi(state.currentPreviewItem, state); - state.currentView = "component" - state.currentComponentInfo = newComponent.props + state.currentView = 'component'; + state.currentComponentInfo = newComponent.props; - return state - }) -} + return state; + }); +}; /** * @param {string} props - props to add, as child of current component */ -const addTemplatedComponent = store => props => { - store.update(state => { - walkProps(props, p => { - p._id = uuid() - }) - state.currentComponentInfo._children = state.currentComponentInfo._children.concat( - props - ) - state.currentPreviewItem._css = generate_screen_css([ - state.currentPreviewItem.props, - ]) +const addTemplatedComponent = (store) => (props) => { + store.update((state) => { + walkProps(props, (p) => { + p._id = uuid(); + }); + state.currentComponentInfo._children = state.currentComponentInfo._children.concat(props); + state.currentPreviewItem._css = generate_screen_css([ state.currentPreviewItem.props ]); - setCurrentPageFunctions(state) - _saveCurrentPreviewItem(state) + setCurrentPageFunctions(state); + _saveCurrentPreviewItem(state); - return state - }) -} + return state; + }); +}; -const selectComponent = store => component => { - store.update(state => { - const componentDef = component._component.startsWith("##") - ? component - : state.components[component._component] - state.currentComponentInfo = makePropsSafe(componentDef, component) - state.currentView = "component" - return state - }) -} +const selectComponent = (store) => (component) => { + store.update((state) => { + const componentDef = component._component.startsWith('##') ? component : state.components[component._component]; + state.currentComponentInfo = makePropsSafe(componentDef, component); + state.currentView = 'component'; + return state; + }); +}; -const setComponentProp = store => (name, value) => { - store.update(state => { - const current_component = state.currentComponentInfo - state.currentComponentInfo[name] = value +const setComponentProp = (store) => (name, value) => { + store.update((state) => { + const current_component = state.currentComponentInfo; + state.currentComponentInfo[name] = value; - _saveCurrentPreviewItem(state) + _saveCurrentPreviewItem(state); - state.currentComponentInfo = current_component - return state - }) -} + state.currentComponentInfo = current_component; + return state; + }); +}; -const setComponentStyle = store => (type, name, value) => { - store.update(state => { - if (!state.currentComponentInfo._styles) { - state.currentComponentInfo._styles = {} - } - state.currentComponentInfo._styles[type][name] = value +const setComponentStyle = (store) => (type, name, value) => { + store.update((state) => { + if (!state.currentComponentInfo._styles) { + state.currentComponentInfo._styles = {}; + } + state.currentComponentInfo._styles[type][name] = value; - state.currentPreviewItem._css = generate_screen_css([ - state.currentPreviewItem.props, - ]) + state.currentPreviewItem._css = generate_screen_css([ state.currentPreviewItem.props ]); - // save without messing with the store - _saveCurrentPreviewItem(state) - return state - }) -} + // save without messing with the store + _saveCurrentPreviewItem(state); + return state; + }); +}; -const setComponentCode = store => code => { - store.update(state => { - state.currentComponentInfo._code = code +const setComponentCode = (store) => (code) => { + store.update((state) => { + state.currentComponentInfo._code = code; - setCurrentPageFunctions(state) - // save without messing with the store - _saveScreenApi(state.currentPreviewItem, state) + setCurrentPageFunctions(state); + // save without messing with the store + _saveScreenApi(state.currentPreviewItem, state); - return state - }) -} + return state; + }); +}; -const setCurrentPageFunctions = s => { - s.currentPageFunctions = buildPageCode(s.screens, s.pages[s.currentPageName]) - insertCodeMetadata(s.currentPreviewItem.props) -} +const setCurrentPageFunctions = (s) => { + s.currentPageFunctions = buildPageCode(s.screens, s.pages[s.currentPageName]); + insertCodeMetadata(s.currentPreviewItem.props); +}; -const buildPageCode = (screens, page) => buildCodeForScreens([page, ...screens]) +const buildPageCode = (screens, page) => buildCodeForScreens([ page, ...screens ]); -const setScreenType = store => type => { - store.update(state => { - state.currentFrontEndType = type +const setScreenType = (store) => (type) => { + store.update((state) => { + state.currentFrontEndType = type; - const pageOrScreen = - type === "page" - ? state.pages[state.currentPageName] - : state.pages[state.currentPageName]._screens[0] + const pageOrScreen = + type === 'page' ? state.pages[state.currentPageName] : state.pages[state.currentPageName]._screens[0]; - state.currentComponentInfo = pageOrScreen ? pageOrScreen.props : null - state.currentPreviewItem = pageOrScreen - return state - }) -} + state.currentComponentInfo = pageOrScreen ? pageOrScreen.props : null; + state.currentPreviewItem = pageOrScreen; + return state; + }); +}; -const deleteComponent = store => componentName => { - store.update(state => { - const parent = getParent(state.currentPreviewItem.props, componentName) +const deleteComponent = (store) => (componentName) => { + store.update((state) => { + const parent = getParent(state.currentPreviewItem.props, componentName); - if (parent) { - parent._children = parent._children.filter( - component => component !== componentName - ) - } + if (parent) { + parent._children = parent._children.filter((component) => component !== componentName); + } - _saveCurrentPreviewItem(state) + _saveCurrentPreviewItem(state); - return state - }) -} + return state; + }); +}; -const moveUpComponent = store => component => { - store.update(s => { - const parent = getParent(s.currentPreviewItem.props, component) +const moveUpComponent = (store) => (component) => { + store.update((s) => { + const parent = getParent(s.currentPreviewItem.props, component); - if (parent) { - const currentIndex = parent._children.indexOf(component) - if (currentIndex === 0) return s + if (parent) { + const currentIndex = parent._children.indexOf(component); + if (currentIndex === 0) return s; - const newChildren = parent._children.filter(c => c !== component) - newChildren.splice(currentIndex - 1, 0, component) - parent._children = newChildren - } - s.currentComponentInfo = component - _saveCurrentPreviewItem(s) + const newChildren = parent._children.filter((c) => c !== component); + newChildren.splice(currentIndex - 1, 0, component); + parent._children = newChildren; + } + s.currentComponentInfo = component; + _saveCurrentPreviewItem(s); - return s - }) -} + return s; + }); +}; -const moveDownComponent = store => component => { - store.update(s => { - const parent = getParent(s.currentPreviewItem.props, component) +const moveDownComponent = (store) => (component) => { + store.update((s) => { + const parent = getParent(s.currentPreviewItem.props, component); - if (parent) { - const currentIndex = parent._children.indexOf(component) - if (currentIndex === parent._children.length - 1) return s + if (parent) { + const currentIndex = parent._children.indexOf(component); + if (currentIndex === parent._children.length - 1) return s; - const newChildren = parent._children.filter(c => c !== component) - newChildren.splice(currentIndex + 1, 0, component) - parent._children = newChildren - } - s.currentComponentInfo = component - _saveCurrentPreviewItem(s) + const newChildren = parent._children.filter((c) => c !== component); + newChildren.splice(currentIndex + 1, 0, component); + parent._children = newChildren; + } + s.currentComponentInfo = component; + _saveCurrentPreviewItem(s); - return s - }) -} + return s; + }); +}; -const copyComponent = store => component => { - store.update(s => { - const parent = getParent(s.currentPreviewItem.props, component) - const copiedComponent = cloneDeep(component) - walkProps(copiedComponent, p => { - p._id = uuid() - }) - parent._children = [...parent._children, copiedComponent] - s.curren - _saveCurrentPreviewItem(s) - s.currentComponentInfo = copiedComponent - return s - }) -} +const copyComponent = (store) => (component) => { + store.update((s) => { + const parent = getParent(s.currentPreviewItem.props, component); + const copiedComponent = cloneDeep(component); + walkProps(copiedComponent, (p) => { + p._id = uuid(); + }); + parent._children = [ ...parent._children, copiedComponent ]; + s.curren; + _saveCurrentPreviewItem(s); + s.currentComponentInfo = copiedComponent; + return s; + }); +}; -const getPathToComponent = store => component => { - // Gets all the components to needed to construct a path. - const tempStore = get(store) - let pathComponents = [] - let parent = component - let root = false - while (!root) { - parent = getParent(tempStore.currentPreviewItem.props, parent) - if (!parent) { - root = true - } else { - pathComponents.push(parent) - } - } +const getPathToComponent = (store) => (component) => { + // Gets all the components to needed to construct a path. + const tempStore = get(store); + let pathComponents = []; + let parent = component; + let root = false; + while (!root) { + parent = getParent(tempStore.currentPreviewItem.props, parent); + if (!parent) { + root = true; + } else { + pathComponents.push(parent); + } + } - // Remove root entry since it's the screen or page layout. - // Reverse array since we need the correct order of the IDs - const reversedComponents = pathComponents.reverse().slice(1) + // Remove root entry since it's the screen or page layout. + // Reverse array since we need the correct order of the IDs + const reversedComponents = pathComponents.reverse().slice(1); - // Add component - const allComponents = [...reversedComponents, component] + // Add component + const allComponents = [ ...reversedComponents, component ]; - // Map IDs - const IdList = allComponents.map(c => c._id) + // Map IDs + const IdList = allComponents.map((c) => c._id); - // Construct ID Path: - const path = IdList.join("/") + // Construct ID Path: + const path = IdList.join('/'); - return path -} + return path; +}; const getParent = (rootProps, child) => { - let parent - walkProps(rootProps, (p, breakWalk) => { - if (p._children && p._children.includes(child)) { - parent = p - breakWalk() - } - }) - return parent -} + let parent; + walkProps(rootProps, (p, breakWalk) => { + if (p._children && p._children.includes(child)) { + parent = p; + breakWalk(); + } + }); + return parent; +}; const walkProps = (props, action, cancelToken = null) => { - cancelToken = cancelToken || { cancelled: false } - action(props, () => { - cancelToken.cancelled = true - }) + cancelToken = cancelToken || { cancelled: false }; + action(props, () => { + cancelToken.cancelled = true; + }); - if (props._children) { - for (let child of props._children) { - if (cancelToken.cancelled) return - walkProps(child, action, cancelToken) - } - } -} + if (props._children) { + for (let child of props._children) { + if (cancelToken.cancelled) return; + walkProps(child, action, cancelToken); + } + } +}; -const setMetadataProp = store => (name, prop) => { - store.update(s => { - s.currentPreviewItem[name] = prop - return s - }) -} +const setMetadataProp = (store) => (name, prop) => { + store.update((s) => { + s.currentPreviewItem[name] = prop; + return s; + }); +}; -const _saveCurrentPreviewItem = s => - s.currentFrontEndType === "page" - ? _savePage(s) - : _saveScreenApi(s.currentPreviewItem, s) +const _saveCurrentPreviewItem = (s) => + s.currentFrontEndType === 'page' ? _savePage(s) : _saveScreenApi(s.currentPreviewItem, s); diff --git a/packages/builder/src/components/common/Input.svelte b/packages/builder/src/components/common/Input.svelte index 442be58735..d53c0e9b1b 100644 --- a/packages/builder/src/components/common/Input.svelte +++ b/packages/builder/src/components/common/Input.svelte @@ -1,17 +1,20 @@ - + diff --git a/packages/builder/src/components/common/Inputs/InputGroup.svelte b/packages/builder/src/components/common/Inputs/InputGroup.svelte index 3b747b47a0..56c4cf365e 100644 --- a/packages/builder/src/components/common/Inputs/InputGroup.svelte +++ b/packages/builder/src/components/common/Inputs/InputGroup.svelte @@ -5,40 +5,41 @@ export let meta = [] export let label = "" export let value = ["0", "0", "0", "0"] - export let type = "number" + export let suffix = "" export let onChange = () => {} function handleChange(val, idx) { - value.splice(idx, 1, val) + value.splice(idx, 1, suffix ? val + suffix : val) value = value - console.log("IDX",idx) - let _value = value.map(v => !/px$/.test(v) ? `${v}px` : v) + let _value = value.map(v => (!v.endsWith(suffix) ? v + suffix : v)) onChange(_value) } - $: displayValues = value.map(v => v.toString().replace(/px$/, "")) + $: displayValues = value + ? value.map(v => v.replace(new RegExp(`${suffix}$`), "")) + : []
{label}
-
- {#each meta as { placeholder }, i} - - handleChange(e.target.value || 0, i)} /> - +
+ {#each meta as m, 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 7cd8b2bac7..e9798fc89c 100644 --- a/packages/builder/src/components/userInterface/FlatButton.svelte +++ b/packages/builder/src/components/userInterface/FlatButton.svelte @@ -3,7 +3,7 @@ export let value = "" export let text = "" export let icon = "" - export let padding = "8px 2px;" + export let padding = "8px 5px;" export let onClick = value => {} export let selected = false export let fontWeight = "" diff --git a/packages/builder/src/components/userInterface/FlatButtonGroup.svelte b/packages/builder/src/components/userInterface/FlatButtonGroup.svelte index ba49128716..26c0662f18 100644 --- a/packages/builder/src/components/userInterface/FlatButtonGroup.svelte +++ b/packages/builder/src/components/userInterface/FlatButtonGroup.svelte @@ -28,9 +28,9 @@ onChange(val) } - const checkSelected = val => isMultiSelect ? value.includes(val) : value === val + const checkSelected = val => + isMultiSelect ? value.includes(val) : value === val - $: console.log("VALUE",value)
diff --git a/packages/builder/src/components/userInterface/OptionSelect.svelte b/packages/builder/src/components/userInterface/OptionSelect.svelte index 841d413125..d226e6129c 100644 --- a/packages/builder/src/components/userInterface/OptionSelect.svelte +++ b/packages/builder/src/components/userInterface/OptionSelect.svelte @@ -144,6 +144,7 @@ width: 160px; height: 32px; cursor: pointer; + font-size: 12px; } .bb-select-anchor { @@ -153,6 +154,7 @@ background-color: #f2f2f2; border-radius: 2px; border: 1px solid var(--grey-dark); + align-items: center; } .bb-select-anchor > span { diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js index 676a8bb0bd..b731c5ecd5 100644 --- a/packages/builder/src/components/userInterface/propertyCategories.js +++ b/packages/builder/src/components/userInterface/propertyCategories.js @@ -1,365 +1,407 @@ -import Input from "../common/Input.svelte" -import OptionSelect from "./OptionSelect.svelte" -import InputGroup from "../common/Inputs/InputGroup.svelte" -import FlatButtonGroup from "./FlatButtonGroup.svelte" +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 */ export const layout = [ - { - label: "Display", - key: "display", - control: OptionSelect, - initialValue: "Flex", - options: [ - { label: "Flex", value: "flex" }, - { label: "Inline Flex", value: "inline-flex" }, - ], - }, - { - label: "Direction", - key: "flex-direction", - 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", - }, - ], - }, - { - label: "Justify", - key: "justify-content", - control: OptionSelect, - initialValue: "Flex Start", - options: [ - { label: "Flex Start", value: "flex-start" }, - { label: "Flex End", value: "flex-end" }, - { label: "Center", value: "center" }, - { label: "Space Between", value: "space-between" }, - { label: "Space Around", value: "space-around" }, - { label: "Space Evenly", value: "space-evenly" }, - ], - }, - { - label: "Align", - key: "align-items", - control: OptionSelect, - initialValue: "Flex Start", - options: [ - { label: "Flex Start", value: "flex-start" }, - { label: "Flex End", value: "flex-end" }, - { label: "Center", value: "center" }, - { label: "Baseline", value: "baseline" }, - { label: "Stretch", value: "stretch" }, - ], - }, - { - label: "Wrap", - key: "flex-wrap", - control: OptionSelect, - options: [ - { label: "wrap", value: "wrap" }, - { label: "no wrap", value: "noWrap" }, - ], - }, -] + { + label: 'Display', + key: 'display', + control: OptionSelect, + initialValue: 'Flex', + options: [ { label: 'Flex', value: 'flex' }, { label: 'Inline Flex', value: 'inline-flex' } ] + }, + { + label: 'Direction', + key: 'flex-direction', + control: FlatButtonGroup, + buttonProps: [ + { icon: 'ri-arrow-right-line', padding: '0px 5px', value: 'row' }, + { icon: 'ri-arrow-left-line', padding: '0px 5px', value: 'rowReverse' }, + { icon: 'ri-arrow-down-line', padding: '0px 5px', value: 'column' }, + { + icon: 'ri-arrow-up-line', + padding: '0px 5px', + value: 'columnReverse' + } + ] + }, + { + label: 'Justify', + key: 'justify-content', + control: OptionSelect, + initialValue: 'Flex Start', + options: [ + { label: 'Flex Start', value: 'flex-start' }, + { label: 'Flex End', value: 'flex-end' }, + { label: 'Center', value: 'center' }, + { label: 'Space Between', value: 'space-between' }, + { label: 'Space Around', value: 'space-around' }, + { label: 'Space Evenly', value: 'space-evenly' } + ] + }, + { + label: 'Align', + key: 'align-items', + control: OptionSelect, + initialValue: 'Flex Start', + options: [ + { label: 'Flex Start', value: 'flex-start' }, + { label: 'Flex End', value: 'flex-end' }, + { label: 'Center', value: 'center' }, + { label: 'Baseline', value: 'baseline' }, + { label: 'Stretch', value: 'stretch' } + ] + }, + { + label: 'Wrap', + key: 'flex-wrap', + control: OptionSelect, + options: [ { label: 'wrap', value: 'wrap' }, { label: 'no wrap', value: 'noWrap' } ] + } +]; -const spacingMeta = [ - { placeholder: "↑" }, - { placeholder: "→" }, - { placeholder: "↓" }, - { placeholder: "←" }, -] +const spacingMeta = [ { placeholder: 'T' }, { placeholder: 'R' }, { placeholder: 'B' }, { placeholder: 'L' } ]; export const spacing = [ - { label: "Margin", key: "margin", control: InputGroup, meta: spacingMeta }, - { - label: "Padding", - key: "padding", - control: InputGroup, - meta: spacingMeta, - }, -] + { + label: 'Margin', + key: 'margin', + control: InputGroup, + meta: spacingMeta, + suffix: 'px', + defaultValue: [ '0', '0', '0', '0' ] + }, + { + label: 'Padding', + key: 'padding', + control: InputGroup, + meta: spacingMeta, + suffix: 'px', + defaultValue: [ '0', '0', '0', '0' ] + } +]; export const size = [ - { - 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", - }, -] + { + 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 = [ - { - label: "Position", - key: "position", - control: OptionSelect, - initialValue: "Wrap", - options: [ - { label: "Static", value: "static" }, - { label: "Relative", value: "relative" }, - { label: "Fixed", value: "fixed" }, - { label: "Absolute", value: "absolute" }, - { label: "Sticky", value: "sticky" }, - ], - }, - { - 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", - }, -] + { + label: 'Position', + key: 'position', + control: OptionSelect, + initialValue: 'Wrap', + options: [ + { label: 'Static', value: 'static' }, + { label: 'Relative', value: 'relative' }, + { label: 'Fixed', value: 'fixed' }, + { label: 'Absolute', value: 'absolute' }, + { label: 'Sticky', value: 'sticky' } + ] + }, + { + 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' + } +]; export const typography = [ - { - label: "Font", - key: "font-family", - control: OptionSelect, - defaultValue: "initial", - options: [ - "initial", - "Arial", - "Arial Black", - "Cursive", - "Courier", - "Comic Sans MS", - "Helvetica", - "Impact", - "Inter", - "Lucida Sans Unicode", - "Open Sans", - "Playfair", - "Roboto", - "Roboto Mono", - "Times New Roman", - "Verdana", - ], - styleBindingProperty: "font-family", - }, - { - label: "Weight", - key: "font-weight", - control: OptionSelect, - options: ["normal", "bold", "bolder", "lighter"], - }, - { - 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", - control: Input, - }, - { - label: "align", - key: "text-align", - 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 }, -] + { + label: 'Font', + key: 'font-family', + control: OptionSelect, + defaultValue: 'initial', + options: [ + 'initial', + 'Arial', + 'Arial Black', + 'Cursive', + 'Courier', + 'Comic Sans MS', + 'Helvetica', + 'Impact', + 'Inter', + 'Lucida Sans Unicode', + 'Open Sans', + 'Playfair', + 'Roboto', + 'Roboto Mono', + 'Times New Roman', + 'Verdana' + ], + styleBindingProperty: 'font-family' + }, + { + label: 'Weight', + key: 'font-weight', + control: OptionSelect, + options: [ 'normal', 'bold', 'bolder', 'lighter' ] + }, + { + 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', + control: Input, + placeholder: "hex", + }, + { + label: 'align', + key: 'text-align', + control: FlatButtonGroup, + buttonProps: [ + { icon: 'ri-align-left', padding: '0px 5px', value: 'left' }, + { icon: 'ri-align-center', padding: '0px 5px', value: 'center' }, + { icon: 'ri-align-right', padding: '0px 5px', value: 'right' }, + { icon: 'ri-align-justify', padding: '0px 5px', value: 'justify' } + ] + }, + { + label: 'transform', + key: 'text-transform', + control: FlatButtonGroup, + buttonProps: [ + { text: 'BB', padding: '0px 5px', fontWeight: 500, value: 'uppercase' }, + { text: 'Bb', padding: '0px 5px', fontWeight: 500, value: 'capitalize' }, + { text: 'bb', padding: '0px 5px', fontWeight: 500, value: 'lowercase' }, + { + text: '×', + padding: '0px 5px', + fontWeight: 500, + value: 'none' + } + ] + }, + { label: 'style', key: 'font-style', control: Input } +]; export const background = [ + { + label: 'Background', + key: 'background', + control: Input, + }, { - label: "Background", - key: "background", + label: "Image", + key: "background-image", control: Input, + placeholder: "src", }, - { label: "Image", key: "image", control: Input }, //custom -] +]; export const border = [ - { label: "Radius", key: "border-radius", control: Input }, - { label: "Width", key: "border-width", control: Input }, //custom - { - label: "Color", - key: "border-color", - control: Input, - }, - { - label: "Style", - key: "border-style", - control: OptionSelect, - options: [ - "none", - "hidden", - "dotted", - "dashed", - "solid", - "double", - "groove", - "ridge", - "inset", - "outset", - ], - }, -] + { + label: 'Radius', + key: 'border-radius', + control: Input, + width: '48px', + placeholder: 'px', + textAlign: 'center' + }, + { + label: 'Width', + key: 'border-width', + control: Input, + width: '48px', + placeholder: 'px', + textAlign: 'center' + }, //custom + { + label: 'Color', + key: 'border-color', + control: Input + }, + { + label: 'Style', + key: 'border-style', + control: OptionSelect, + options: [ 'none', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset' ] + } +]; export const effects = [ - { label: "Opacity", key: "opacity", control: Input }, + { + label: 'Opacity', + key: 'opacity', + control: Input, + width: '48px', + textAlign: 'center', + placeholder: '%' + }, + { + label: 'Rotate', + key: 'transform', + control: Input, + width: '48px', + textAlign: 'center', + placeholder: 'deg' + }, //needs special control { - label: "Rotate", - key: "transform", - control: OptionSelect, - options: [ - { label: "None", value: "rotate(0deg)" }, - { label: "45 degrees", value: "rotate(45deg)" }, - { label: "90 degrees", value: "rotate(90deg)" }, - { label: "135 degrees", value: "rotate(135deg)" }, - { label: "180 degrees", value: "rotate(180deg)" }, - { label: "225 degrees", value: "rotate(225deg)" }, - { label: "270 degrees", value: "rotate(270deg)" }, - { label: "315 degrees", value: "rotate(315deg)" }, - { label: "360 degrees", value: "rotate(360deg)" }, - ], - }, //needs special control - { label: "Shadow", key: "box-shadow", control: Input }, -] + label: "Shadow", + key: "box-shadow", + control: InputGroup, + meta: [{ placeholder: "X" }, { placeholder: "Y" }, { placeholder: "B" }], + }, +]; export const transitions = [ - { label: "Property", key: "transition-property", control: Input }, - { label: "Duration", key: "transition-timing-function", control: Input }, - { label: "Ease", key: "transition-ease", control: Input }, -] + { + label: 'Property', + key: 'transition-property', + control: OptionSelect, + options: [ + 'None', + 'All', + 'Background Color', + 'Color', + 'Font Size', + 'Font Weight', + 'Height', + 'Margin', + 'Opacity', + 'Padding', + 'Rotate', + 'Shadow', + 'Width' + ] + }, + { + label: 'Duration', + key: 'transition-timing-function', + control: Input, + width: '48px', + textAlign: 'center', + placeholder: 'sec' + }, + { + label: 'Ease', + key: 'transition-ease', + control: OptionSelect, + options: [ 'linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out' ] + } +]; export const all = { - layout, - spacing, - size, - position, - typography, - background, - border, - effects, - transitions, -} + layout, + spacing, + size, + position, + typography, + background, + border, + effects, + transitions +}; export function excludeProps(props, propsToExclude) { - const modifiedProps = {} - for (const prop in props) { - if (!propsToExclude.includes(prop)) { - modifiedProps[prop] = props[prop] - } - } - return modifiedProps + const modifiedProps = {}; + for (const prop in props) { + if (!propsToExclude.includes(prop)) { + modifiedProps[prop] = props[prop]; + } + } + return modifiedProps; } From e6915b655f88e889429d262541c48622c16a3f4e Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Mon, 1 Jun 2020 17:14:54 +0100 Subject: [PATCH 6/8] Properties panel scrolling fix --- .../components/userInterface/ComponentPropertiesPanel.svelte | 1 - .../components/userInterface/ComponentsPaneSwitcher.svelte | 2 +- .../builder/src/components/userInterface/DesignView.svelte | 3 +++ .../builder/src/pages/[application]/frontend/_layout.svelte | 4 +++- 4 files changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte index 726fb35aae..fb4f01578c 100644 --- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte +++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte @@ -104,7 +104,6 @@ height: 100%; display: flex; flex-direction: column; - overflow-x: hidden; } .title > div:nth-child(1) { diff --git a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte index ecc7dd1d6d..9df2a928ca 100644 --- a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte +++ b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte @@ -54,7 +54,7 @@ height: 100%; display: flex; flex-direction: column; - padding: 20px 20px; + padding: 20px 5px 20px 10px; border-left: solid 1px var(--grey); } diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte index 9e005ee3bb..f13f62663e 100644 --- a/packages/builder/src/components/userInterface/DesignView.svelte +++ b/packages/builder/src/components/userInterface/DesignView.svelte @@ -64,6 +64,9 @@ .design-view-property-groups { flex: 1; + overflow-y: auto; + overflow-x: hidden; + max-height: 500px; } .no-design { diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte index 572ffe42ec..7847de710c 100644 --- a/packages/builder/src/pages/[application]/frontend/_layout.svelte +++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte @@ -143,7 +143,7 @@ .ui-nav { grid-column: 1; background-color: var(--white); - height: calc(100vh - 49px); + height: calc(100vh - 69px); padding: 0; overflow: scroll; display: flex; @@ -161,6 +161,8 @@ grid-column: 3; background-color: var(--white); min-height: 0px; + height: calc(100vh - 69px); + overflow-y: hidden; } .components-nav-page { From e7a1419740784797f29401a7b792296cb8c48993 Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Mon, 1 Jun 2020 18:04:45 +0100 Subject: [PATCH 7/8] CSS Element State Button Fix --- .../src/components/userInterface/FlatButtonGroup.svelte | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/builder/src/components/userInterface/FlatButtonGroup.svelte b/packages/builder/src/components/userInterface/FlatButtonGroup.svelte index 26c0662f18..ad1107b1f1 100644 --- a/packages/builder/src/components/userInterface/FlatButtonGroup.svelte +++ b/packages/builder/src/components/userInterface/FlatButtonGroup.svelte @@ -28,6 +28,7 @@ onChange(val) } + const checkSelected = val => isMultiSelect ? value.includes(val) : value === val @@ -37,7 +38,7 @@ {#each buttonProps as props}
From fa2fcb0632c40b14b8a2831c5f5c530e0de3c96d Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Tue, 2 Jun 2020 11:19:22 +0100 Subject: [PATCH 8/8] Lint and testing --- .../builder/src/builderStore/store/index.js | 40 ++++++++++--------- 1 file changed, 22 insertions(+), 18 deletions(-) diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js index 9ac06a0a0d..9762ca4e27 100644 --- a/packages/builder/src/builderStore/store/index.js +++ b/packages/builder/src/builderStore/store/index.js @@ -1,4 +1,3 @@ - import { values } from "lodash/fp" import { backendUiStore } from "builderStore" import * as backendStoreActions from "./backend" @@ -120,28 +119,33 @@ const saveScreen = store => screen => { } const _saveScreen = async (store, s, screen) => { - const currentPageScreens = s.pages[s.currentPageName]._screens; + const currentPageScreens = s.pages[s.currentPageName]._screens - await api.post(`/_builder/api/${s.appId}/pages/${s.currentPageName}/screen`, screen).then(() => { - if (currentPageScreens.includes(screen)) return; + await api + .post(`/_builder/api/${s.appId}/pages/${s.currentPageName}/screen`, screen) + .then(() => { + if (currentPageScreens.includes(screen)) return - const screens = [ ...currentPageScreens, screen ]; + const screens = [...currentPageScreens, screen] - store.update((innerState) => { - innerState.pages[s.currentPageName]._screens = screens; - innerState.screens = screens; - innerState.currentPreviewItem = screen; - const safeProps = makePropsSafe(innerState.components[screen.props._component], screen.props); - innerState.currentComponentInfo = safeProps; - screen.props = safeProps; + store.update(innerState => { + innerState.pages[s.currentPageName]._screens = screens + innerState.screens = screens + innerState.currentPreviewItem = screen + const safeProps = makePropsSafe( + innerState.components[screen.props._component], + screen.props + ) + innerState.currentComponentInfo = safeProps + screen.props = safeProps - _savePage(innerState); - return innerState; - }); - }); + _savePage(innerState) + return innerState + }) + }) - return s; -}; + return s +} const createScreen = store => (screenName, route, layoutComponentName) => { store.update(state => {