From 8f731286219f51ce75cfac6cc90e281d080fa31f Mon Sep 17 00:00:00 2001 From: Joe <49767913+joebudi@users.noreply.github.com> Date: Thu, 28 May 2020 19:41:07 +0100 Subject: [PATCH] Update propertyCategories.js New fonts added Z-index added initial values changed Position fixed New position props added Background color changed to an input --- .../userInterface/propertyCategories.js | 98 ++++++++++++++----- 1 file changed, 75 insertions(+), 23 deletions(-) diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js index 26e2365332..a0ca139459 100644 --- a/packages/builder/src/components/userInterface/propertyCategories.js +++ b/packages/builder/src/components/userInterface/propertyCategories.js @@ -11,9 +11,8 @@ export const layout = [ label: "Display", key: "display", control: OptionSelect, - initialValue: "Select Option", + initialValue: "Flex", options: [ - { label: "Select Option", value: "Na" }, { label: "Flex", value: "flex" }, { label: "Inline Flex", value: "inline-flex" }, ], @@ -22,9 +21,8 @@ export const layout = [ label: "Direction", key: "flex-direction", control: OptionSelect, - initialValue: "Select Option", + initialValue: "Row", options: [ - { label: "Select Option", value: "Na" }, { label: "Row", value: "row" }, { label: "Row Reverse", value: "rowReverse" }, { label: "column", value: "column" }, @@ -35,9 +33,8 @@ export const layout = [ label: "Justify", key: "justify-content", control: OptionSelect, - initialValue: "Select Option", + initialValue: "Flex Start", options: [ - { label: "Select Option", value: "Na" }, { label: "Flex Start", value: "flex-start" }, { label: "Flex End", value: "flex-end" }, { label: "Center", value: "center" }, @@ -50,9 +47,8 @@ export const layout = [ label: "Align", key: "align-items", control: OptionSelect, - initialValue: "Select Option", + initialValue: "Flex Start", options: [ - { label: "Select Option", value: "Na" }, { label: "Flex Start", value: "flex-start" }, { label: "Flex End", value: "flex-end" }, { label: "Center", value: "center" }, @@ -66,7 +62,6 @@ export const layout = [ control: OptionSelect, initialValue: "Wrap", options: [ - { label: "Select Option", value: "Na" }, { label: "Wrap", value: "wrap" }, { label: "No Wrap", value: "nowrap" }, { label: "Wrap Reverse", value: "wrap-reverse" }, @@ -80,8 +75,13 @@ const spacingMeta = [ { placeholder: "R" }, { 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", @@ -104,14 +104,40 @@ export const position = [ label: "Position", key: "position", control: OptionSelect, + initialValue: "Wrap", options: [ - { label: "static" }, - { label: "relative" }, - { label: "fixed" }, - { label: "absolute" }, - { label: "sticky" }, + { 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, + }, + { + label: "Right", + key: "right", + control: Input, + }, + { + label: "Bottom", + key: "bottom", + control: Input, + }, + { + label: "Left", + key: "left", + control: Input, + }, + { + label: "Z-index", + key: "z-index", + control: Input, + }, ] export const typography = [ @@ -122,13 +148,21 @@ export const typography = [ defaultValue: "initial", options: [ "initial", - "Times New Roman", - "Georgia", "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", }, @@ -164,8 +198,7 @@ export const background = [ { label: "Background", key: "background", - control: OptionSelect, - options: ["black", "white", "red", "blue", "green"], + control: Input, }, { label: "Image", key: "image", control: Input }, //custom ] @@ -176,15 +209,34 @@ export const border = [ { label: "Color", key: "border-color", - control: OptionSelect, - options: ["black", "white", "red", "blue", "green"], + control: Input, }, - { label: "Style", key: "border-style", 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: "Rotate", key: "transform", control: Input }, //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 }, ]