MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Props update, including flex, border, shadow, rotate

This commit is contained in:
Joe 2020-06-11 13:07:10 +01:00
parent f33947e501
commit a552772ccc
1 changed files with 49 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
packages/builder/src/components/userInterface/propertyCategories.js
View File

@ -12,8 +12,9 @@ export const layout = [
label: "Display", label: "Display",
key: "display", key: "display",
control: OptionSelect, control: OptionSelect,
initialValue: "Flex", initialValue: "",
options: [ options: [
{ label: "", value: "" },
{ label: "Flex", value: "flex" }, { label: "Flex", value: "flex" },
{ label: "Inline Flex", value: "inline-flex" }, { label: "Inline Flex", value: "inline-flex" },
], ],
@ -39,6 +40,7 @@ export const layout = [
control: OptionSelect, control: OptionSelect,
initialValue: "Flex Start", initialValue: "Flex Start",
options: [ options: [
{ label: "", 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" },
@ -317,19 +319,31 @@ export const border = [
{ {
label: "Radius", label: "Radius",
key: "border-radius", key: "border-radius",
control: Input, control: OptionSelect,
width: "48px", defaultValue: "None",
placeholder: "px", options: [
textAlign: "center", { label: "None", value: "0" },
{ label: "small", value: "0.125rem" },
{ label: "Medium", value: "0.25rem;" },
{ label: "Large", value: "0.375rem" },
{ label: "Extra large", value: "0.5rem" },
{ label: "Full", value: "5678px" },
],
}, },
{ {
label: "Width", label: "Width",
key: "border-width", key: "border-width",
control: Input, control: OptionSelect,
width: "48px", defaultValue: "None",
placeholder: "px", options: [
textAlign: "center", { label: "None", value: "0" },
}, //custom { label: "Extra small", value: "0.5px" },
{ label: "Small", value: "1px" },
{ label: "Medium", value: "2px" },
{ label: "Large", value: "4px" },
{ label: "Extra large", value: "8px" },
],
},
{ {
label: "Color", label: "Color",
key: "border-color", key: "border-color",
@ -339,6 +353,7 @@ export const border = [
label: "Style", label: "Style",
key: "border-style", key: "border-style",
control: OptionSelect, control: OptionSelect,
defaultValue: "None",
options: [ options: [
"none", "none",
"hidden", "hidden",
@ -365,17 +380,34 @@ export const effects = [
}, },
{ {
label: "Rotate", label: "Rotate",
key: "transform", key: "transform-rotate",
control: Input, control: OptionSelect,
width: "48px", defaultValue: "0",
textAlign: "center", options: [
placeholder: "deg", "0",
"45deg",
"90deg",
"90deg",
"135deg",
"180deg",
"225deg",
"270deg",
"315dev",
],
}, //needs special control }, //needs special control
{ {
label: "Shadow", label: "Shadow",
key: "box-shadow", key: "box-shadow",
control: InputGroup, control: OptionSelect,
meta: [{ placeholder: "X" }, { placeholder: "Y" }, { placeholder: "B" }], defaultValue: "None",
options: [
{ label: "None", value: "none" },
{ label: "Extra small", value: "0 1px 2px 0 rgba(0, 0, 0, 0.05)" },
{ label: "Small", value: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)" },
{ label: "Medium", value: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)" },
{ label: "Large", value: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)" },
{ label: "Extra large", value: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)" },
],
}, },
] ]