From 2a478f7f03fe4a834c86b10700a6ff388a8233bc Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 5 Jan 2021 11:45:50 +0000 Subject: [PATCH] Add placeholders for all style options, add pretty labels for all style options --- .../userInterface/propertyCategories.js | 233 ++++++++++++------ 1 file changed, 153 insertions(+), 80 deletions(-) diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js index bb35f2704c..71514fb209 100644 --- a/packages/builder/src/components/userInterface/propertyCategories.js +++ b/packages/builder/src/components/userInterface/propertyCategories.js @@ -11,9 +11,10 @@ export const layout = [ label: "Display", key: "display", control: OptionSelect, - initialValue: "", options: [ - { label: "N/A ", value: "N/A" }, + { label: "Choose option", value: "" }, + { label: "Block", value: "block" }, + { label: "Inline Block", value: "inline-block" }, { label: "Flex", value: "flex" }, { label: "Inline Flex", value: "inline-flex" }, ], @@ -31,15 +32,15 @@ export const layout = [ padding: "0px 5px", value: "columnReverse", }, + { icon: "ri-close-line", value: "" }, ], }, { label: "Justify", key: "justify-content", control: OptionSelect, - initialValue: "Flex Start", options: [ - { label: "", value: "" }, + { label: "Choose option", value: "" }, { label: "Flex Start", value: "flex-start" }, { label: "Flex End", value: "flex-end" }, { label: "Center", value: "center" }, @@ -52,8 +53,8 @@ export const layout = [ label: "Align", key: "align-items", control: OptionSelect, - initialValue: "Flex Start", options: [ + { label: "Choose option", value: "" }, { label: "Flex Start", value: "flex-start" }, { label: "Flex End", value: "flex-end" }, { label: "Center", value: "center" }, @@ -66,8 +67,9 @@ export const layout = [ key: "flex-wrap", control: OptionSelect, options: [ - { label: "wrap", value: "wrap" }, - { label: "no wrap", value: "noWrap" }, + { label: "Choose option", value: "" }, + { label: "Wrap", value: "wrap" }, + { label: "No wrap", value: "nowrap" }, ], }, { @@ -75,6 +77,7 @@ export const layout = [ key: "gap", control: OptionSelect, options: [ + { label: "Choose option", value: "" }, { label: "None", value: "0px" }, { label: "4px", value: "4px" }, { label: "8px", value: "8px" }, @@ -93,6 +96,7 @@ export const margin = [ key: "margin", control: OptionSelect, options: [ + { label: "Choose option", value: "" }, { label: "None", value: "0px" }, { label: "4px", value: "4px" }, { label: "8px", value: "8px" }, @@ -112,6 +116,7 @@ export const margin = [ key: "margin-top", control: OptionSelect, options: [ + { label: "Choose option", value: "" }, { label: "None", value: "0px" }, { label: "4px", value: "4px" }, { label: "8px", value: "8px" }, @@ -131,6 +136,7 @@ export const margin = [ key: "margin-right", control: OptionSelect, options: [ + { label: "Choose option", value: "" }, { label: "None", value: "0px" }, { label: "4px", value: "4px" }, { label: "8px", value: "8px" }, @@ -150,6 +156,7 @@ export const margin = [ key: "margin-bottom", control: OptionSelect, options: [ + { label: "Choose option", value: "" }, { label: "None", value: "0px" }, { label: "4px", value: "4px" }, { label: "8px", value: "8px" }, @@ -169,6 +176,7 @@ export const margin = [ key: "margin-left", control: OptionSelect, options: [ + { label: "Choose option", value: "" }, { label: "None", value: "0px" }, { label: "4px", value: "4px" }, { label: "8px", value: "8px" }, @@ -191,6 +199,7 @@ export const padding = [ key: "padding", control: OptionSelect, options: [ + { label: "Choose option", value: "" }, { label: "None", value: "0px" }, { label: "4px", value: "4px" }, { label: "8px", value: "8px" }, @@ -208,6 +217,7 @@ export const padding = [ key: "padding-top", control: OptionSelect, options: [ + { label: "Choose option", value: "" }, { label: "None", value: "0px" }, { label: "4px", value: "4px" }, { label: "8px", value: "8px" }, @@ -225,6 +235,7 @@ export const padding = [ key: "padding-right", control: OptionSelect, options: [ + { label: "Choose option", value: "" }, { label: "None", value: "0px" }, { label: "4px", value: "4px" }, { label: "8px", value: "8px" }, @@ -242,6 +253,7 @@ export const padding = [ key: "padding-bottom", control: OptionSelect, options: [ + { label: "Choose option", value: "" }, { label: "None", value: "0px" }, { label: "4px", value: "4px" }, { label: "8px", value: "8px" }, @@ -259,6 +271,7 @@ export const padding = [ key: "padding-left", control: OptionSelect, options: [ + { label: "Choose option", value: "" }, { label: "None", value: "0px" }, { label: "4px", value: "4px" }, { label: "8px", value: "8px" }, @@ -278,8 +291,8 @@ export const size = [ label: "Flex", key: "flex", control: OptionSelect, - defaultValue: "0 1 auto", options: [ + { label: "Choose option", value: "" }, { label: "Shrink", value: "0 1 auto" }, { label: "Grow", value: "1 1 auto" }, ], @@ -333,9 +346,8 @@ export const position = [ label: "Position", key: "position", control: OptionSelect, - initialValue: "None", options: [ - { label: "None", value: "none" }, + { label: "Choose option", value: "" }, { label: "Static", value: "static" }, { label: "Relative", value: "relative" }, { label: "Fixed", value: "fixed" }, @@ -375,7 +387,18 @@ export const position = [ label: "Z-index", key: "z-index", control: OptionSelect, - options: ["-9999", "-3", "-2", "-1", "0", "1", "2", "3", "9999"], + options: [ + { label: "Choose option", value: "" }, + { label: "-9999", value: "-9999" }, + { label: "-3", value: "-3" }, + { label: "-2", value: "-2" }, + { label: "-1", value: "-1" }, + { label: "0", value: "0" }, + { label: "1", value: "1" }, + { label: "2", value: "2" }, + { label: "3", value: "3" }, + { label: "9999", value: "9999" }, + ], }, ] @@ -384,22 +407,22 @@ export const typography = [ label: "Font", key: "font-family", control: OptionSelect, - defaultValue: "Arial", options: [ - "Arial", - "Arial Black", - "Cursive", - "Courier", - "Comic Sans MS", - "Helvetica", - "Helvetica Neue", - "Impact", - "Inter", - "Lucida Sans Unicode", - "Roboto", - "Roboto Mono", - "Times New Roman", - "Verdana", + { label: "Choose option", value: "" }, + { label: "Arial", value: "Arial" }, + { label: "Arial Black", value: "Arial Black" }, + { label: "Cursive", value: "Cursive" }, + { label: "Courier", value: "Courier" }, + { label: "Comic Sans MS", value: "Comic Sans MS" }, + { label: "Helvetica", value: "Helvetica" }, + { label: "Helvetica Neue", value: "Helvetica Neue" }, + { label: "Impact", value: "Impact" }, + { label: "Inter", value: "Inter" }, + { label: "Lucida Sans Unicode", value: "Lucida Sans Unicode" }, + { label: "Roboto", value: "Roboto" }, + { label: "Roboto Mono", value: "Roboto Mono" }, + { label: "Times New Roman", value: "Times New Roman" }, + { label: "Verdana", value: "Verdana" }, ], styleBindingProperty: "font-family", }, @@ -407,25 +430,36 @@ export const typography = [ label: "Weight", key: "font-weight", control: OptionSelect, - options: ["200", "300", "400", "500", "600", "700", "800", "900"], + options: [ + { label: "Choose option", value: "" }, + { label: "200", value: "200" }, + { label: "300", value: "300" }, + { label: "400", value: "400" }, + { label: "500", value: "500" }, + { label: "600", value: "600" }, + { label: "700", value: "700" }, + { label: "800", value: "800" }, + { label: "900", value: "900" }, + ], }, { label: "size", key: "font-size", control: OptionSelect, options: [ - "8px", - "10px", - "12px", - "14px", - "16px", - "18px", - "20px", - "24px", - "32px", - "48px", - "60px", - "72px", + { label: "Choose option", value: "" }, + { label: "8px", value: "8px" }, + { label: "10px", value: "10px" }, + { label: "12px", value: "12px" }, + { label: "14px", value: "14px" }, + { label: "16px", value: "16px" }, + { label: "18px", value: "18px" }, + { label: "20px", value: "20px" }, + { label: "24px", value: "24px" }, + { label: "32px", value: "32px" }, + { label: "48px", value: "48px" }, + { label: "60px", value: "60px" }, + { label: "72px", value: "72px" }, ], textAlign: "center", }, @@ -433,13 +467,20 @@ export const typography = [ label: "Line H", key: "line-height", control: OptionSelect, - options: ["1", "1.25", "1.5", "1.75", "2", "4"], + options: [ + { label: "Choose option", value: "" }, + { label: "1", value: "1" }, + { label: "1.25", value: "1.25" }, + { label: "1.5", value: "1.5" }, + { label: "1.75", value: "1.75" }, + { label: "2", value: "2" }, + { label: "4", value: "4" }, + ], }, { label: "Color", key: "color", control: Colorpicker, - defaultValue: "#000", }, { label: "align", @@ -450,6 +491,7 @@ export const typography = [ { 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" }, + { icon: "ri-close-line", value: "" }, ], }, { @@ -460,16 +502,15 @@ export const typography = [ { text: "BB", value: "uppercase" }, { text: "Bb", value: "capitalize" }, { text: "bb", value: "lowercase" }, - { text: "×", value: "none" }, + { icon: "ri-close-line", value: "" }, ], }, { label: "Decoration", key: "text-decoration-line", control: OptionSelect, - defaultValue: "None", options: [ - { label: "None", value: "none" }, + { label: "Choose option", value: "" }, { label: "Underline", value: "underline" }, { label: "Overline", value: "overline" }, { label: "Line-through", value: "line-through" }, @@ -483,15 +524,14 @@ export const background = [ label: "Color", key: "background", control: Colorpicker, - defaultValue: "#000", }, { label: "Gradient", key: "background-image", control: OptionSelect, - defaultValue: "", options: [ { label: "Select option", value: "" }, + { label: "None", value: "none" }, { label: "Warm Flame", value: "linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);", @@ -567,7 +607,7 @@ export const background = [ label: "Image", key: "background", control: Input, - placeholder: "url", + placeholder: "URL", }, ] @@ -576,8 +616,8 @@ export const border = [ label: "Radius", key: "border-radius", control: OptionSelect, - defaultValue: "None", options: [ + { label: "Choose option", value: "" }, { label: "None", value: "0" }, { label: "X Small", value: "0.125rem" }, { label: "Small", value: "0.25rem" }, @@ -592,8 +632,8 @@ export const border = [ label: "Width", key: "border-width", control: OptionSelect, - defaultValue: "None", options: [ + { label: "Choose option", value: "" }, { label: "None", value: "0" }, { label: "X Small", value: "0.5px" }, { label: "Small", value: "1px" }, @@ -606,24 +646,23 @@ export const border = [ label: "Color", key: "border-color", control: Colorpicker, - defaultValue: "#000", }, { label: "Style", key: "border-style", control: OptionSelect, - defaultValue: "None", options: [ - "None", - "Hidden", - "Dotted", - "Dashed", - "Solid", - "Double", - "Groove", - "Ridge", - "Inset", - "Outset", + { label: "Choose option", value: "" }, + { label: "None", value: "none" }, + { label: "Hidden", value: "hidden" }, + { label: "Dotted", value: "dotted" }, + { label: "Dashed", value: "dashed" }, + { label: "Solid", value: "solid" }, + { label: "Double", value: "double" }, + { label: "Groove", value: "groove" }, + { label: "Ridge", value: "ridge" }, + { label: "Inset", value: "inset" }, + { label: "Outset", value: "outset" }, ], }, ] @@ -634,14 +673,22 @@ export const effects = [ key: "opacity", control: OptionSelect, textAlign: "center", - options: ["0", "0.2", "0.4", "0.6", "0.8", "1"], + options: [ + { label: "Choose option", value: "" }, + { label: "0", value: "0" }, + { label: "0.2", value: "0.2" }, + { label: "0.4", value: "0.4" }, + { label: "0.6", value: "0.6" }, + { label: "0.8", value: "0.8" }, + { label: "1", value: "1" }, + ], }, { label: "Rotate", key: "transform", control: OptionSelect, - defaultValue: "0", options: [ + { label: "Choose option", value: "" }, { label: "None", value: "0" }, { label: "45 deg", value: "rotate(45deg)" }, { label: "90 deg", value: "rotate(90deg)" }, @@ -657,8 +704,8 @@ export const effects = [ label: "Shadow", key: "box-shadow", control: OptionSelect, - defaultValue: "None", options: [ + { label: "Choose option", value: "" }, { label: "None", value: "none" }, { label: "X Small", value: "0 1px 2px 0 rgba(0, 0, 0, 0.05)" }, { @@ -691,19 +738,20 @@ export const transitions = [ key: "transition-property", control: OptionSelect, options: [ - "None", - "All", - "Background Color", - "Color", - "Font Size", - "Font Weight", - "Height", - "Margin", - "Opacity", - "Padding", - "Rotate", - "Shadow", - "Width", + { label: "Choose option", value: "" }, + { label: "None", value: "none" }, + { label: "All", value: "all" }, + { label: "Background Color", value: "background color" }, + { label: "Color", value: "color" }, + { label: "Font Size", value: "font size" }, + { label: "Font Weight", value: "font weight" }, + { label: "Height", value: "height" }, + { label: "Margin", value: "margin" }, + { label: "Opacity", value: "opacity" }, + { label: "Padding", value: "padding" }, + { label: "Rotate", value: "rotate" }, + { label: "Shadow", value: "shadow" }, + { label: "Width", value: "width" }, ], }, { @@ -712,13 +760,28 @@ export const transitions = [ control: OptionSelect, textAlign: "center", placeholder: "sec", - options: ["0.4s", "0.6s", "0.8s", "1s", "2s", "4s"], + options: [ + { label: "Choose option", value: "" }, + { label: "0.4s", value: "0.4s" }, + { label: "0.6s", value: "0.6s" }, + { label: "0.8s", value: "0.8s" }, + { label: "1s", value: "1s" }, + { label: "2s", value: "2s" }, + { label: "4s", value: "4s" }, + ], }, { label: "Ease", - key: "transition-timing-function:", + key: "transition-timing-function", control: OptionSelect, - options: ["linear", "ease", "ease-in", "ease-out", "ease-in-out"], + options: [ + { label: "Choose option", value: "" }, + { label: "Linear", value: "linear" }, + { label: "Ease", value: "ease" }, + { label: "Ease in", value: "ease-in" }, + { label: "Ease out", value: "ease-out" }, + { label: "Ease in out", value: "ease-in-out" }, + ], }, ] @@ -744,3 +807,13 @@ export function excludeProps(props, propsToExclude) { } return modifiedProps } + +let defaultStyles = {} +Object.values(all).forEach(category => { + category.forEach(prop => { + if (prop.initialValue) { + defaultStyles[prop.key] = prop.initialValue + } + }) +}) +export const defaults = defaultStyles