CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-07 23:35:49 +12:00
Code Issues Projects Releases Wiki Activity

Add placeholders for all style options, add pretty labels for all style options

Browse source
This commit is contained in:
Andrew Kingston 2021-01-05 11:45:50 +00:00
parent faa090f6f1
commit 2a478f7f03
1 changed files with 153 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

233
packages/builder/src/components/userInterface/propertyCategories.js
View file

@ -11,9 +11,10 @@ export const layout = [
label: "Display", label: "Display",
key: "display", key: "display",
control: OptionSelect, control: OptionSelect,
initialValue: "",
options: [ 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: "Flex", value: "flex" },
{ label: "Inline Flex", value: "inline-flex" }, { label: "Inline Flex", value: "inline-flex" },
], ],
@ -31,15 +32,15 @@ export const layout = [
padding: "0px 5px", padding: "0px 5px",
value: "columnReverse", value: "columnReverse",
}, },
{ icon: "ri-close-line", value: "" },
], ],
}, },
{ {
label: "Justify", label: "Justify",
key: "justify-content", key: "justify-content",
control: OptionSelect, control: OptionSelect,
initialValue: "Flex Start",
options: [ options: [
{ label: "", value: "" }, { label: "Choose option", value: "" },
{ label: "Flex Start", value: "flex-start" }, { label: "Flex Start", value: "flex-start" },
{ label: "Flex End", value: "flex-end" }, { label: "Flex End", value: "flex-end" },
{ label: "Center", value: "center" }, { label: "Center", value: "center" },
@ -52,8 +53,8 @@ export const layout = [
label: "Align", label: "Align",
key: "align-items", key: "align-items",
control: OptionSelect, control: OptionSelect,
initialValue: "Flex Start",
options: [ options: [
{ label: "Choose option", value: "" },
{ label: "Flex Start", value: "flex-start" }, { label: "Flex Start", value: "flex-start" },
{ label: "Flex End", value: "flex-end" }, { label: "Flex End", value: "flex-end" },
{ label: "Center", value: "center" }, { label: "Center", value: "center" },
@ -66,8 +67,9 @@ export const layout = [
key: "flex-wrap", key: "flex-wrap",
control: OptionSelect, control: OptionSelect,
options: [ options: [
{ label: "wrap", value: "wrap" }, { label: "Choose option", value: "" },
{ label: "no wrap", value: "noWrap" }, { label: "Wrap", value: "wrap" },
{ label: "No wrap", value: "nowrap" },
], ],
}, },
{ {
@ -75,6 +77,7 @@ export const layout = [
key: "gap", key: "gap",
control: OptionSelect, control: OptionSelect,
options: [ options: [
{ label: "Choose option", value: "" },
{ label: "None", value: "0px" }, { label: "None", value: "0px" },
{ label: "4px", value: "4px" }, { label: "4px", value: "4px" },
{ label: "8px", value: "8px" }, { label: "8px", value: "8px" },
@ -93,6 +96,7 @@ export const margin = [
key: "margin", key: "margin",
control: OptionSelect, control: OptionSelect,
options: [ options: [
{ label: "Choose option", value: "" },
{ label: "None", value: "0px" }, { label: "None", value: "0px" },
{ label: "4px", value: "4px" }, { label: "4px", value: "4px" },
{ label: "8px", value: "8px" }, { label: "8px", value: "8px" },
@ -112,6 +116,7 @@ export const margin = [
key: "margin-top", key: "margin-top",
control: OptionSelect, control: OptionSelect,
options: [ options: [
{ label: "Choose option", value: "" },
{ label: "None", value: "0px" }, { label: "None", value: "0px" },
{ label: "4px", value: "4px" }, { label: "4px", value: "4px" },
{ label: "8px", value: "8px" }, { label: "8px", value: "8px" },
@ -131,6 +136,7 @@ export const margin = [
key: "margin-right", key: "margin-right",
control: OptionSelect, control: OptionSelect,
options: [ options: [
{ label: "Choose option", value: "" },
{ label: "None", value: "0px" }, { label: "None", value: "0px" },
{ label: "4px", value: "4px" }, { label: "4px", value: "4px" },
{ label: "8px", value: "8px" }, { label: "8px", value: "8px" },
@ -150,6 +156,7 @@ export const margin = [
key: "margin-bottom", key: "margin-bottom",
control: OptionSelect, control: OptionSelect,
options: [ options: [
{ label: "Choose option", value: "" },
{ label: "None", value: "0px" }, { label: "None", value: "0px" },
{ label: "4px", value: "4px" }, { label: "4px", value: "4px" },
{ label: "8px", value: "8px" }, { label: "8px", value: "8px" },
@ -169,6 +176,7 @@ export const margin = [
key: "margin-left", key: "margin-left",
control: OptionSelect, control: OptionSelect,
options: [ options: [
{ label: "Choose option", value: "" },
{ label: "None", value: "0px" }, { label: "None", value: "0px" },
{ label: "4px", value: "4px" }, { label: "4px", value: "4px" },
{ label: "8px", value: "8px" }, { label: "8px", value: "8px" },
@ -191,6 +199,7 @@ export const padding = [
key: "padding", key: "padding",
control: OptionSelect, control: OptionSelect,
options: [ options: [
{ label: "Choose option", value: "" },
{ label: "None", value: "0px" }, { label: "None", value: "0px" },
{ label: "4px", value: "4px" }, { label: "4px", value: "4px" },
{ label: "8px", value: "8px" }, { label: "8px", value: "8px" },
@ -208,6 +217,7 @@ export const padding = [
key: "padding-top", key: "padding-top",
control: OptionSelect, control: OptionSelect,
options: [ options: [
{ label: "Choose option", value: "" },
{ label: "None", value: "0px" }, { label: "None", value: "0px" },
{ label: "4px", value: "4px" }, { label: "4px", value: "4px" },
{ label: "8px", value: "8px" }, { label: "8px", value: "8px" },
@ -225,6 +235,7 @@ export const padding = [
key: "padding-right", key: "padding-right",
control: OptionSelect, control: OptionSelect,
options: [ options: [
{ label: "Choose option", value: "" },
{ label: "None", value: "0px" }, { label: "None", value: "0px" },
{ label: "4px", value: "4px" }, { label: "4px", value: "4px" },
{ label: "8px", value: "8px" }, { label: "8px", value: "8px" },
@ -242,6 +253,7 @@ export const padding = [
key: "padding-bottom", key: "padding-bottom",
control: OptionSelect, control: OptionSelect,
options: [ options: [
{ label: "Choose option", value: "" },
{ label: "None", value: "0px" }, { label: "None", value: "0px" },
{ label: "4px", value: "4px" }, { label: "4px", value: "4px" },
{ label: "8px", value: "8px" }, { label: "8px", value: "8px" },
@ -259,6 +271,7 @@ export const padding = [
key: "padding-left", key: "padding-left",
control: OptionSelect, control: OptionSelect,
options: [ options: [
{ label: "Choose option", value: "" },
{ label: "None", value: "0px" }, { label: "None", value: "0px" },
{ label: "4px", value: "4px" }, { label: "4px", value: "4px" },
{ label: "8px", value: "8px" }, { label: "8px", value: "8px" },
@ -278,8 +291,8 @@ export const size = [
label: "Flex", label: "Flex",
key: "flex", key: "flex",
control: OptionSelect, control: OptionSelect,
defaultValue: "0 1 auto",
options: [ options: [
{ label: "Choose option", value: "" },
{ label: "Shrink", value: "0 1 auto" }, { label: "Shrink", value: "0 1 auto" },
{ label: "Grow", value: "1 1 auto" }, { label: "Grow", value: "1 1 auto" },
], ],
@ -333,9 +346,8 @@ export const position = [
label: "Position", label: "Position",
key: "position", key: "position",
control: OptionSelect, control: OptionSelect,
initialValue: "None",
options: [ options: [
{ label: "None", value: "none" }, { label: "Choose option", value: "" },
{ label: "Static", value: "static" }, { label: "Static", value: "static" },
{ label: "Relative", value: "relative" }, { label: "Relative", value: "relative" },
{ label: "Fixed", value: "fixed" }, { label: "Fixed", value: "fixed" },
@ -375,7 +387,18 @@ export const position = [
label: "Z-index", label: "Z-index",
key: "z-index", key: "z-index",
control: OptionSelect, 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", label: "Font",
key: "font-family", key: "font-family",
control: OptionSelect, control: OptionSelect,
defaultValue: "Arial",
options: [ options: [
"Arial", { label: "Choose option", value: "" },
"Arial Black", { label: "Arial", value: "Arial" },
"Cursive", { label: "Arial Black", value: "Arial Black" },
"Courier", { label: "Cursive", value: "Cursive" },
"Comic Sans MS", { label: "Courier", value: "Courier" },
"Helvetica", { label: "Comic Sans MS", value: "Comic Sans MS" },
"Helvetica Neue", { label: "Helvetica", value: "Helvetica" },
"Impact", { label: "Helvetica Neue", value: "Helvetica Neue" },
"Inter", { label: "Impact", value: "Impact" },
"Lucida Sans Unicode", { label: "Inter", value: "Inter" },
"Roboto", { label: "Lucida Sans Unicode", value: "Lucida Sans Unicode" },
"Roboto Mono", { label: "Roboto", value: "Roboto" },
"Times New Roman", { label: "Roboto Mono", value: "Roboto Mono" },
"Verdana", { label: "Times New Roman", value: "Times New Roman" },
{ label: "Verdana", value: "Verdana" },
], ],
styleBindingProperty: "font-family", styleBindingProperty: "font-family",
}, },
@ -407,25 +430,36 @@ export const typography = [
label: "Weight", label: "Weight",
key: "font-weight", key: "font-weight",
control: OptionSelect, 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", label: "size",
key: "font-size", key: "font-size",
control: OptionSelect, control: OptionSelect,
options: [ options: [
"8px", { label: "Choose option", value: "" },
"10px", { label: "8px", value: "8px" },
"12px", { label: "10px", value: "10px" },
"14px", { label: "12px", value: "12px" },
"16px", { label: "14px", value: "14px" },
"18px", { label: "16px", value: "16px" },
"20px", { label: "18px", value: "18px" },
"24px", { label: "20px", value: "20px" },
"32px", { label: "24px", value: "24px" },
"48px", { label: "32px", value: "32px" },
"60px", { label: "48px", value: "48px" },
"72px", { label: "60px", value: "60px" },
{ label: "72px", value: "72px" },
], ],
textAlign: "center", textAlign: "center",
}, },
@ -433,13 +467,20 @@ export const typography = [
label: "Line H", label: "Line H",
key: "line-height", key: "line-height",
control: OptionSelect, 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", label: "Color",
key: "color", key: "color",
control: Colorpicker, control: Colorpicker,
defaultValue: "#000",
}, },
{ {
label: "align", label: "align",
@ -450,6 +491,7 @@ export const typography = [
{ icon: "ri-align-center", padding: "0px 5px", value: "center" }, { icon: "ri-align-center", padding: "0px 5px", value: "center" },
{ icon: "ri-align-right", padding: "0px 5px", value: "right" }, { icon: "ri-align-right", padding: "0px 5px", value: "right" },
{ icon: "ri-align-justify", padding: "0px 5px", value: "justify" }, { 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: "uppercase" },
{ text: "Bb", value: "capitalize" }, { text: "Bb", value: "capitalize" },
{ text: "bb", value: "lowercase" }, { text: "bb", value: "lowercase" },
{ text: "×", value: "none" }, { icon: "ri-close-line", value: "" },
], ],
}, },
{ {
label: "Decoration", label: "Decoration",
key: "text-decoration-line", key: "text-decoration-line",
control: OptionSelect, control: OptionSelect,
defaultValue: "None",
options: [ options: [
{ label: "None", value: "none" }, { label: "Choose option", value: "" },
{ label: "Underline", value: "underline" }, { label: "Underline", value: "underline" },
{ label: "Overline", value: "overline" }, { label: "Overline", value: "overline" },
{ label: "Line-through", value: "line-through" }, { label: "Line-through", value: "line-through" },
@ -483,15 +524,14 @@ export const background = [
label: "Color", label: "Color",
key: "background", key: "background",
control: Colorpicker, control: Colorpicker,
defaultValue: "#000",
}, },
{ {
label: "Gradient", label: "Gradient",
key: "background-image", key: "background-image",
control: OptionSelect, control: OptionSelect,
defaultValue: "",
options: [ options: [
{ label: "Select option", value: "" }, { label: "Select option", value: "" },
{ label: "None", value: "none" },
{ {
label: "Warm Flame", label: "Warm Flame",
value: "linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);", value: "linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);",
@ -567,7 +607,7 @@ export const background = [
label: "Image", label: "Image",
key: "background", key: "background",
control: Input, control: Input,
placeholder: "url", placeholder: "URL",
}, },
] ]
@ -576,8 +616,8 @@ export const border = [
label: "Radius", label: "Radius",
key: "border-radius", key: "border-radius",
control: OptionSelect, control: OptionSelect,
defaultValue: "None",
options: [ options: [
{ label: "Choose option", value: "" },
{ label: "None", value: "0" }, { label: "None", value: "0" },
{ label: "X Small", value: "0.125rem" }, { label: "X Small", value: "0.125rem" },
{ label: "Small", value: "0.25rem" }, { label: "Small", value: "0.25rem" },
@ -592,8 +632,8 @@ export const border = [
label: "Width", label: "Width",
key: "border-width", key: "border-width",
control: OptionSelect, control: OptionSelect,
defaultValue: "None",
options: [ options: [
{ label: "Choose option", value: "" },
{ label: "None", value: "0" }, { label: "None", value: "0" },
{ label: "X Small", value: "0.5px" }, { label: "X Small", value: "0.5px" },
{ label: "Small", value: "1px" }, { label: "Small", value: "1px" },
@ -606,24 +646,23 @@ export const border = [
label: "Color", label: "Color",
key: "border-color", key: "border-color",
control: Colorpicker, control: Colorpicker,
defaultValue: "#000",
}, },
{ {
label: "Style", label: "Style",
key: "border-style", key: "border-style",
control: OptionSelect, control: OptionSelect,
defaultValue: "None",
options: [ options: [
"None", { label: "Choose option", value: "" },
"Hidden", { label: "None", value: "none" },
"Dotted", { label: "Hidden", value: "hidden" },
"Dashed", { label: "Dotted", value: "dotted" },
"Solid", { label: "Dashed", value: "dashed" },
"Double", { label: "Solid", value: "solid" },
"Groove", { label: "Double", value: "double" },
"Ridge", { label: "Groove", value: "groove" },
"Inset", { label: "Ridge", value: "ridge" },
"Outset", { label: "Inset", value: "inset" },
{ label: "Outset", value: "outset" },
], ],
}, },
] ]
@ -634,14 +673,22 @@ export const effects = [
key: "opacity", key: "opacity",
control: OptionSelect, control: OptionSelect,
textAlign: "center", 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", label: "Rotate",
key: "transform", key: "transform",
control: OptionSelect, control: OptionSelect,
defaultValue: "0",
options: [ options: [
{ label: "Choose option", value: "" },
{ label: "None", value: "0" }, { label: "None", value: "0" },
{ label: "45 deg", value: "rotate(45deg)" }, { label: "45 deg", value: "rotate(45deg)" },
{ label: "90 deg", value: "rotate(90deg)" }, { label: "90 deg", value: "rotate(90deg)" },
@ -657,8 +704,8 @@ export const effects = [
label: "Shadow", label: "Shadow",
key: "box-shadow", key: "box-shadow",
control: OptionSelect, control: OptionSelect,
defaultValue: "None",
options: [ options: [
{ label: "Choose option", value: "" },
{ label: "None", value: "none" }, { label: "None", value: "none" },
{ label: "X Small", value: "0 1px 2px 0 rgba(0, 0, 0, 0.05)" }, { label: "X Small", value: "0 1px 2px 0 rgba(0, 0, 0, 0.05)" },
{ {
@ -691,19 +738,20 @@ export const transitions = [
key: "transition-property", key: "transition-property",
control: OptionSelect, control: OptionSelect,
options: [ options: [
"None", { label: "Choose option", value: "" },
"All", { label: "None", value: "none" },
"Background Color", { label: "All", value: "all" },
"Color", { label: "Background Color", value: "background color" },
"Font Size", { label: "Color", value: "color" },
"Font Weight", { label: "Font Size", value: "font size" },
"Height", { label: "Font Weight", value: "font weight" },
"Margin", { label: "Height", value: "height" },
"Opacity", { label: "Margin", value: "margin" },
"Padding", { label: "Opacity", value: "opacity" },
"Rotate", { label: "Padding", value: "padding" },
"Shadow", { label: "Rotate", value: "rotate" },
"Width", { label: "Shadow", value: "shadow" },
{ label: "Width", value: "width" },
], ],
}, },
{ {
@ -712,13 +760,28 @@ export const transitions = [
control: OptionSelect, control: OptionSelect,
textAlign: "center", textAlign: "center",
placeholder: "sec", 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", label: "Ease",
key: "transition-timing-function:", key: "transition-timing-function",
control: OptionSelect, 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 return modifiedProps
} }
let defaultStyles = {}
Object.values(all).forEach(category => {
category.forEach(prop => {
if (prop.initialValue) {
defaultStyles[prop.key] = prop.initialValue
}
})
})
export const defaults = defaultStyles