From a3135a9cee10d572256f8e8838254f345bb79ea9 Mon Sep 17 00:00:00 2001 From: Joe <49767913+joebudi@users.noreply.github.com> Date: Wed, 27 May 2020 14:27:25 +0100 Subject: [PATCH 1/3] Props panel flex fix --- .../userInterface/propertyCategories.js | 72 +++++++++++++++---- 1 file changed, 60 insertions(+), 12 deletions(-) diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js index 07101779a5..8303dbb6e7 100644 --- a/packages/builder/src/components/userInterface/propertyCategories.js +++ b/packages/builder/src/components/userInterface/propertyCategories.js @@ -1,48 +1,96 @@ import Input from "../common/Input.svelte" import OptionSelect from "./OptionSelect.svelte" import InputGroup from "../common/Inputs/InputGroup.svelte" +const newLocal = "display" // import Colorpicker from "../common/Colorpicker.svelte" /* TODO: Allow for default values for all properties */ export const layout = [ + { + label: "Display", + key: "display", + control: OptionSelect, + initialValue: "Select Option", + options: [ + { label: "Select Option", value: "Na" }, + { label: "Flex", value: "flex" }, + { label: "Inline Flex", value: "inline-flex" } + ], + }, { label: "Direction", key: "flex-direction", control: OptionSelect, - initialValue: "columnReverse", + initialValue: "Select Option", options: [ - { label: "row" }, - { label: "row-reverse", value: "rowReverse" }, - { label: "column" }, - { label: "column-reverse", value: "columnReverse" }, + { label: "Select Option", value: "Na" }, + { label: "Row", value: "row" }, + { label: "Row Reverse", value: "rowReverse" }, + { label: "column", value: "column" }, + { label: "Column Reverse", value: "columnReverse" }, ], }, - { label: "Justify", key: "justify-content", control: Input }, - { label: "Align", key: "align-items", control: Input }, + { label: "Justify", + key: "justify-content", + control: OptionSelect, + initialValue: "Select Option", + options: [ + { label: "Select Option", value: "Na" }, + { 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: "Select Option", + options: [ + { label: "Select Option", value: "Na" }, + { 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" }, { label: "no wrap", value: "noWrap" }], + initialValue: "Wrap", + options: [ + { label: "Select Option", value: "Na" }, + { label: "Wrap", value: "wrap" }, + { label: "No Wrap", value: "nowrap" }, + { label: "Wrap Reverse", value: "wrap-reverse" } + ], }, ] const spacingMeta = [ - { placeholder: "T" }, - { placeholder: "R" }, - { placeholder: "B" }, { placeholder: "L" }, + { placeholder: "B" }, + { placeholder: "R" }, + { placeholder: "T" }, ] 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 }, ] export const size = [ From 6a920ddbfbe2fe7b5801f9b3c5b0063e8f7f059a Mon Sep 17 00:00:00 2001 From: Joe <49767913+joebudi@users.noreply.github.com> Date: Wed, 27 May 2020 14:28:05 +0100 Subject: [PATCH 2/3] Format and lint --- .../userInterface/propertyCategories.js | 46 +++++++++---------- 1 file changed, 22 insertions(+), 24 deletions(-) diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js index 8303dbb6e7..b871962b92 100644 --- a/packages/builder/src/components/userInterface/propertyCategories.js +++ b/packages/builder/src/components/userInterface/propertyCategories.js @@ -16,7 +16,7 @@ export const layout = [ options: [ { label: "Select Option", value: "Na" }, { label: "Flex", value: "flex" }, - { label: "Inline Flex", value: "inline-flex" } + { label: "Inline Flex", value: "inline-flex" }, ], }, { @@ -32,32 +32,34 @@ export const layout = [ { label: "Column Reverse", value: "columnReverse" }, ], }, - { label: "Justify", - key: "justify-content", + { + label: "Justify", + key: "justify-content", control: OptionSelect, initialValue: "Select Option", options: [ { label: "Select Option", value: "Na" }, - { 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: "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", + { + label: "Align", + key: "align-items", control: OptionSelect, initialValue: "Select Option", options: [ { label: "Select Option", value: "Na" }, - { 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: "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", @@ -66,9 +68,9 @@ export const layout = [ initialValue: "Wrap", options: [ { label: "Select Option", value: "Na" }, - { label: "Wrap", value: "wrap" }, + { label: "Wrap", value: "wrap" }, { label: "No Wrap", value: "nowrap" }, - { label: "Wrap Reverse", value: "wrap-reverse" } + { label: "Wrap Reverse", value: "wrap-reverse" }, ], }, ] @@ -80,11 +82,7 @@ const spacingMeta = [ { placeholder: "T" }, ] export const spacing = [ - { label: "Margin", - key: "margin", - control: InputGroup, - meta: spacingMeta - }, + { label: "Margin", key: "margin", control: InputGroup, meta: spacingMeta }, { label: "Padding", key: "padding", From 820de937e4e5ad6b80261839fe0f1e6c8ae99177 Mon Sep 17 00:00:00 2001 From: Joe <49767913+joebudi@users.noreply.github.com> Date: Wed, 27 May 2020 14:39:48 +0100 Subject: [PATCH 3/3] Update propertyCategories.js --- .../builder/src/components/userInterface/propertyCategories.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js index b871962b92..96c11bec38 100644 --- a/packages/builder/src/components/userInterface/propertyCategories.js +++ b/packages/builder/src/components/userInterface/propertyCategories.js @@ -1,7 +1,6 @@ import Input from "../common/Input.svelte" import OptionSelect from "./OptionSelect.svelte" import InputGroup from "../common/Inputs/InputGroup.svelte" -const newLocal = "display" // import Colorpicker from "../common/Colorpicker.svelte" /* TODO: Allow for default values for all properties