CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-30 10:36:28 +12:00
Code Issues Projects Releases Wiki Activity

Props panel flex fix

Browse source
This commit is contained in:
Joe 2020-05-27 14:27:25 +01:00
parent e45c176883
commit a3135a9cee
1 changed files with 60 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,48 +1,96 @@
import Input from "../common/Input.svelte" import Input from "../common/Input.svelte"
import OptionSelect from "./OptionSelect.svelte" import OptionSelect from "./OptionSelect.svelte"
import InputGroup from "../common/Inputs/InputGroup.svelte" import InputGroup from "../common/Inputs/InputGroup.svelte"
const newLocal = "display"
// import Colorpicker from "../common/Colorpicker.svelte" // import Colorpicker from "../common/Colorpicker.svelte"
/* /*
TODO: Allow for default values for all properties TODO: Allow for default values for all properties
*/ */
export const layout = [ 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", label: "Direction",
key: "flex-direction", key: "flex-direction",
control: OptionSelect, control: OptionSelect,
initialValue: "columnReverse", initialValue: "Select Option",
options: [ options: [
{ label: "row" }, { label: "Select Option", value: "Na" },
{ label: "row-reverse", value: "rowReverse" }, { label: "Row", value: "row" },
{ label: "column" }, { label: "Row Reverse", value: "rowReverse" },
{ label: "column-reverse", value: "columnReverse" }, { label: "column", value: "column" },
{ label: "Column Reverse", value: "columnReverse" },
],
},
{ 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: "Justify", key: "justify-content", control: Input },
{ label: "Align", key: "align-items", control: Input },
{ {
label: "Wrap", label: "Wrap",
key: "flex-wrap", key: "flex-wrap",
control: OptionSelect, 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 = [ const spacingMeta = [
{ placeholder: "T" },
{ placeholder: "R" },
{ placeholder: "B" },
{ placeholder: "L" }, { placeholder: "L" },
{ placeholder: "B" },
{ placeholder: "R" },
{ placeholder: "T" },
] ]
export const spacing = [ export const spacing = [
{ label: "Margin",
key: "margin",
control: InputGroup,
meta: spacingMeta
},
{ {
label: "Padding", label: "Padding",
key: "padding", key: "padding",
control: InputGroup, control: InputGroup,
meta: spacingMeta, meta: spacingMeta,
}, },
{ label: "Margin", key: "margin", control: InputGroup, meta: spacingMeta },
] ]
export const size = [ export const size = [