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

Props panel updated 

All design props tested
SImplification of design props completed, with, in some cases, the replacement of units with general terminology.
This commit is contained in:
Joe 2020-06-24 15:06:28 +01:00
parent d95c4c7a54
commit 85b0d790a6
12 changed files with 264 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/builder/package.json
View File

@ -39,7 +39,7 @@
}, },
"dependencies": { "dependencies": {
"@beyonk/svelte-notifications": "^2.0.3", "@beyonk/svelte-notifications": "^2.0.3",
"@budibase/bbui": "^1.9.0", "@budibase/bbui": "^1.10.1",
"@budibase/client": "^0.0.32", "@budibase/client": "^0.0.32",
"@nx-js/compiler-util": "^2.0.0", "@nx-js/compiler-util": "^2.0.0",
"codemirror": "^5.51.0", "codemirror": "^5.51.0",

5
packages/builder/src/budibase.css
View File

@ -57,13 +57,14 @@
.budibase__nav-item { .budibase__nav-item {
cursor: pointer; cursor: pointer;
padding: 0 4px 0 2px; padding: 0 4px 0 2px;
height: 40px; height: 36px;
margin: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
border-radius: 5px; border-radius: 5px;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 14px; font-size: 14px;
transition: 0.2s; transition: 0.2s;
border-top: var(--grey-1) .5px solid;
} }
.budibase__nav-item.selected { .budibase__nav-item.selected {
@ -76,7 +77,7 @@
} }
.budibase__input { .budibase__input {
height: 35px; height: 36px;
width: 220px; width: 220px;
border-radius: 3px; border-radius: 3px;
border: 1px solid var(--grey-4); border: 1px solid var(--grey-4);

15
packages/builder/src/components/common/Input.svelte
View File

@ -35,19 +35,18 @@
<style> <style>
input { input {
/* width: 32px; */ /* width: 32px; */
height: 32px; height: 36px;
font-size: 12px; font-size: 14px;
font-weight: 500; font-weight: 400;
margin: 0px 0px 0px 2px; margin: 0px 0px 0px 2px;
color: var(--ink); color: var(--ink);
opacity: 0.7; padding: 0px 8px;
padding: 0px 4px; font-family: inter;
line-height: 1.3;
width: 164px; width: 164px;
box-sizing: border-box; box-sizing: border-box;
background-color: var(--grey-3); background-color: var(--grey-2);
border-radius: 4px; border-radius: 4px;
border: 1px solid var(--grey-3); border: 1px solid var(--grey-2);
outline: none; outline: none;
} }

1
packages/builder/src/components/nav/UsersList.svelte
View File

@ -65,7 +65,6 @@
margin: 0 0 0 6px; margin: 0 0 0 6px;
padding: 0; padding: 0;
border: none; border: none;
font-family: Roboto;
font-size: 13px; font-size: 13px;
outline: none; outline: none;
cursor: pointer; cursor: pointer;

4
packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
View File

@ -39,7 +39,7 @@
<div <div
class="budibase__nav-item item" class="budibase__nav-item item"
class:selected={currentComponent === component} class:selected={currentComponent === component}
style="padding-left: {level * 16 + 32}px"> style="padding-left: {level * 20 + 40}px">
<div class="nav-item"> <div class="nav-item">
<i class="icon ri-arrow-right-circle-fill" /> <i class="icon ri-arrow-right-circle-fill" />
{get_capitalised_name(component._component)} {get_capitalised_name(component._component)}
@ -73,7 +73,7 @@
padding: 0px 5px 0px 15px; padding: 0px 5px 0px 15px;
margin: auto 0px; margin: auto 0px;
border-radius: 3px; border-radius: 3px;
height: 35px; height: 36px;
align-items: center; align-items: center;
} }

2
packages/builder/src/components/userInterface/FlatButton.svelte
View File

@ -46,6 +46,6 @@
} }
i { i {
font-size: 20px; font-size: 16px;
} }
</style> </style>

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

@ -14,7 +14,7 @@ export const layout = [
control: OptionSelect, control: OptionSelect,
initialValue: "", initialValue: "",
options: [ options: [
{ label: " ", value: " " }, { label: "N/A ", value: "N/A" },
{ label: "Flex", value: "flex" }, { label: "Flex", value: "flex" },
{ label: "Inline Flex", value: "inline-flex" }, { label: "Inline Flex", value: "inline-flex" },
], ],
@ -80,20 +80,169 @@ const spacingMeta = [
{ placeholder: "L" }, { placeholder: "L" },
] ]
export const spacing = [ export const margin = [
{ {
label: "Margin", label: "All sides",
key: "margin", key: "margin",
control: InputGroup, control: OptionSelect,
meta: spacingMeta, options: [
defaultValue: ["0", "0", "0", "0"], { label: "None", value: "0px" },
{ label: "4px", value: "4px" },
{ label: "8px", value: "8px" },
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
{ label: "64px", value: "64px" },
{ label: "Auto", value: "auto" },
{ label: "100%", value: "100%" },
],
}, },
{ {
label: "Padding", label: "Top",
key: "margin-top",
control: OptionSelect,
options: [
{ label: "None", value: "0px" },
{ label: "4px", value: "4px" },
{ label: "8px", value: "8px" },
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
{ label: "64px", value: "64px" },
{ label: "Auto", value: "auto" },
{ label: "100%", value: "100%" },
],
},
{
label: "Right",
key: "margin-right",
control: OptionSelect,
options: [
{ label: "None", value: "0px" },
{ label: "4px", value: "4px" },
{ label: "8px", value: "8px" },
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
{ label: "64px", value: "64px" },
{ label: "Auto", value: "auto" },
{ label: "100%", value: "100%" },
],
},
{
label: "Bottom",
key: "padding-bottom",
control: OptionSelect,
options: [
{ label: "None", value: "0px" },
{ label: "4px", value: "4px" },
{ label: "8px", value: "8px" },
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
{ label: "64px", value: "64px" },
{ label: "Auto", value: "auto" },
{ label: "100%", value: "100%" },
],
},
{
label: "Left",
key: "margin-left",
control: OptionSelect,
options: [
{ label: "None", value: "0px" },
{ label: "4px", value: "4px" },
{ label: "8px", value: "8px" },
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
{ label: "64px", value: "64px" },
{ label: "Auto", value: "auto" },
{ label: "100%", value: "100%" },
],
},
]
export const padding = [
{
label: "All sides",
key: "padding", key: "padding",
control: InputGroup, control: OptionSelect,
meta: spacingMeta, options: [
defaultValue: ["0", "0", "0", "0"], { label: "None", value: "0px" },
{ label: "4px", value: "4px" },
{ label: "8px", value: "8px" },
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
{ label: "64px", value: "64px" },
{ label: "Auto", value: "auto" },
{ label: "100%", value: "100%" },
],
},
{
label: "Top",
key: "padding-top",
control: OptionSelect,
options: [
{ label: "None", value: "0px" },
{ label: "4px", value: "4px" },
{ label: "8px", value: "8px" },
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
{ label: "64px", value: "64px" },
{ label: "Auto", value: "auto" },
{ label: "100%", value: "100%" },
],
},
{
label: "Right",
key: "padding-right",
control: OptionSelect,
options: [
{ label: "None", value: "0px" },
{ label: "4px", value: "4px" },
{ label: "8px", value: "8px" },
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
{ label: "64px", value: "64px" },
{ label: "Auto", value: "auto" },
{ label: "100%", value: "100%" },
],
},
{
label: "Bottom",
key: "padding-bottom",
control: OptionSelect,
options: [
{ label: "None", value: "0px" },
{ label: "4px", value: "4px" },
{ label: "8px", value: "8px" },
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
{ label: "64px", value: "64px" },
{ label: "Auto", value: "auto" },
{ label: "100%", value: "100%" },
],
},
{
label: "Left",
key: "padding-left",
control: OptionSelect,
options: [
{ label: "None", value: "0px" },
{ label: "4px", value: "4px" },
{ label: "8px", value: "8px" },
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
{ label: "64px", value: "64px" },
{ label: "Auto", value: "auto" },
{ label: "100%", value: "100%" },
],
}, },
] ]
@ -113,28 +262,28 @@ export const size = [
textAlign: "center", textAlign: "center",
}, },
{ {
label: "Min W", label: "Min Width",
key: "min-width", key: "min-width",
control: Input, control: Input,
placeholder: "px", placeholder: "px",
textAlign: "center", textAlign: "center",
}, },
{ {
label: "Min H", label: "Max Width",
key: "min-height",
control: Input,
placeholder: "px",
textAlign: "center",
},
{
label: "Max W",
key: "max-width", key: "max-width",
control: Input, control: Input,
placeholder: "px", placeholder: "px",
textAlign: "center", textAlign: "center",
}, },
{ {
label: "Max H", label: "Min Height",
key: "min-height",
control: Input,
placeholder: "px",
textAlign: "center",
},
{
label: "Max Height",
key: "max-height", key: "max-height",
control: Input, control: Input,
placeholder: "px", placeholder: "px",
@ -147,8 +296,9 @@ export const position = [
label: "Position", label: "Position",
key: "position", key: "position",
control: OptionSelect, control: OptionSelect,
initialValue: "Wrap", initialValue: "None",
options: [ options: [
{ label: "None", value: "none" },
{ label: "Static", value: "static" }, { label: "Static", value: "static" },
{ label: "Relative", value: "relative" }, { label: "Relative", value: "relative" },
{ label: "Fixed", value: "fixed" }, { label: "Fixed", value: "fixed" },
@ -187,9 +337,8 @@ export const position = [
{ {
label: "Z-index", label: "Z-index",
key: "z-index", key: "z-index",
control: Input, control: OptionSelect,
placeholder: "num", options: ["-9999", "-3", "-2", "-1", "0", "1", "2", "3", "9999"],
textAlign: "center",
}, },
] ]
@ -228,17 +377,15 @@ export const typography = [
{ {
label: "size", label: "size",
key: "font-size", key: "font-size",
defaultValue: "", control: OptionSelect,
control: Input, options: ["8px", "10px", "12px", "14px", "16px", "18px", "20px", "24px", "32px", "48px", "60px", "72px"],
placeholder: "px",
textAlign: "center", textAlign: "center",
}, },
{ {
label: "Line H", label: "Line H",
key: "line-height", key: "line-height",
control: Input, control: OptionSelect,
placeholder: "lh", options: ["1", "1.25", "1.5", "1.75", "2", "4"],
textAlign: "center",
}, },
{ {
label: "Color", label: "Color",
@ -272,10 +419,10 @@ export const typography = [
label: "Decoration", label: "Decoration",
key: "text-decoration-line", key: "text-decoration-line",
control: OptionSelect, control: OptionSelect,
defaultValue: "Underline", defaultValue: "None",
options: [ options: [
{ label: "Underline", value: "underline" },
{ label: "None", value: "none" }, { label: "None", value: "none" },
{ label: "Underline", value: "underline" },
{ label: "Overline", value: "overline" }, { label: "Overline", value: "overline" },
{ label: "Line-through", value: "line-through" }, { label: "Line-through", value: "line-through" },
{ label: "Under Over", value: "underline overline" }, { label: "Under Over", value: "underline overline" },
@ -290,11 +437,31 @@ export const background = [
control: Colorpicker, control: Colorpicker,
defaultValue: "#000", defaultValue: "#000",
}, },
{
label: "Gradient",
key: "background-image",
control: OptionSelect,
defaultValue: "None",
options: [
{ label: "None", value: "None" },
{ label: "Warm Flame", value: "linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);" },
{ label: "Night Fade", value: "linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);" },
{ label: "Spring Warmth", value: "linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);" },
{ label: "Sunny Morning", value: "linear-gradient(120deg, #f6d365 0%, #fda085 100%);" },
{ label: "Winter Neva", value: "linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);" },
{ label: "Tempting Azure", value: "linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);" },
{ label: "Heavy Rain", value: "linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);" },
{ label: "Deep Blue", value: "linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);" },
{ label: "Near Moon", value: "linear-gradient(to top, #5ee7df 0%, #b490ca 100%);" },
{ label: "Wild Apple", value: "linear-gradient(to top, #d299c2 0%, #fef9d7 100%);" },
{ label: "Plum Plate", value: "linear-gradient(135deg, #667eea 0%, #764ba2 100%);" },
],
},
{ {
label: "Image", label: "Image",
key: "background-image", key: "background-image",
control: Input, control: Input,
placeholder: "src", placeholder: "Src",
}, },
] ]
@ -306,11 +473,13 @@ export const border = [
defaultValue: "None", defaultValue: "None",
options: [ options: [
{ label: "None", value: "0" }, { label: "None", value: "0" },
{ label: "small", value: "0.125rem" }, { label: "X Small", value: "0.125rem" },
{ label: "Medium", value: "0.25rem;" }, { label: "Small", value: "0.25rem" },
{ label: "Large", value: "0.375rem" }, { label: "Medium", value: "0.5rem" },
{ label: "Extra large", value: "0.5rem" }, { label: "Large", value: "1rem" },
{ label: "Full", value: "5678px" }, { label: "X Large", value: "2rem" },
{ label: "XX Large", value: "4rem" },
{ label: "Round", value: "5678px" },
], ],
}, },
{ {
@ -320,11 +489,11 @@ export const border = [
defaultValue: "None", defaultValue: "None",
options: [ options: [
{ label: "None", value: "0" }, { label: "None", value: "0" },
{ label: "Extra small", value: "0.5px" }, { label: "X Small", value: "0.5px" },
{ label: "Small", value: "1px" }, { label: "Small", value: "1px" },
{ label: "Medium", value: "2px" }, { label: "Medium", value: "2px" },
{ label: "Large", value: "4px" }, { label: "Large", value: "4px" },
{ label: "Extra large", value: "8px" }, { label: "X large", value: "8px" },
], ],
}, },
{ {
@ -339,16 +508,16 @@ export const border = [
control: OptionSelect, control: OptionSelect,
defaultValue: "None", defaultValue: "None",
options: [ options: [
"none", "None",
"hidden", "Hidden",
"dotted", "Dotted",
"dashed", "Dashed",
"solid", "Solid",
"double", "Double",
"groove", "Groove",
"ridge", "Ridge",
"inset", "Inset",
"outset", "Outset",
], ],
}, },
] ]
@ -357,28 +526,34 @@ export const effects = [
{ {
label: "Opacity", label: "Opacity",
key: "opacity", key: "opacity",
control: Input, control: OptionSelect,
width: "48px",
textAlign: "center", textAlign: "center",
placeholder: "%", options: [
"0",
"0.2",
"0.4",
"0.6",
"0.8",
"1",
],
}, },
{ {
label: "Rotate", label: "Rotate",
key: "transform-rotate", key: "transform",
control: OptionSelect, control: OptionSelect,
defaultValue: "0", defaultValue: "0",
options: [ options: [
"0", { label: "None", value: "0" },
"45deg", { label: "45 deg", value:"rotate(45deg)" },
"90deg", { label: "90 deg", value:"rotate(90deg)" },
"90deg", { label: "135 deg", value:"rotate(135deg)" },
"135deg", { label: "180 deg", value:"rotate(180deg)" },
"180deg", { label: "225 deg", value:"rotate(225deg)" },
"225deg", { label: "270 deg", value:"rotate(270deg)" },
"270deg", { label: "315 deg", value:"rotate(315deg)" },
"315dev", { label: "360 deg", value:"rotate(360deg)" },
], ],
}, //needs special control },
{ {
label: "Shadow", label: "Shadow",
key: "box-shadow", key: "box-shadow",
@ -386,7 +561,7 @@ export const effects = [
defaultValue: "None", defaultValue: "None",
options: [ options: [
{ label: "None", value: "none" }, { label: "None", value: "none" },
{ label: "Extra 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)" },
{ {
label: "Small", label: "Small",
value: value:
@ -403,7 +578,7 @@ export const effects = [
"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)", "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
}, },
{ {
label: "Extra large", label: "X Large",
value: value:
"0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)", "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
}, },
@ -435,10 +610,10 @@ export const transitions = [
{ {
label: "Duration", label: "Duration",
key: "transition-duration", key: "transition-duration",
control: Input, control: OptionSelect,
width: "48px",
textAlign: "center", textAlign: "center",
placeholder: "sec", placeholder: "sec",
options: ["0.2ms", "0.4ms", "0.8ms", "1s", "2s", "4s",],
}, },
{ {
label: "Ease", label: "Ease",
@ -450,7 +625,8 @@ export const transitions = [
export const all = { export const all = {
layout, layout,
spacing, margin,
padding,
size, size,
position, position,
typography, typography,

2
packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
View File

@ -184,7 +184,7 @@
} }
.budibase_input { .budibase_input {
height: 35px; height: 36px;
width: 244px; width: 244px;
border-radius: 3px; border-radius: 3px;
background-color: var(--grey-2); background-color: var(--grey-2);

2
packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
View File

@ -73,7 +73,7 @@
} }
.budibase_input { .budibase_input {
height: 35px; height: 36px;
width: 220px; width: 220px;
border-radius: 3px; border-radius: 3px;
border: 1px solid var(--grey-4); border: 1px solid var(--grey-4);

2
packages/builder/src/global.css
View File

@ -39,7 +39,7 @@
html, body { html, body {
display: grid; display: grid;
font-family: var(--font-normal); font-family: inter;
color: var(--ink); color: var(--ink);
padding: 0; padding: 0;
margin: 0; margin: 0;

2
packages/standard-components/public/global.css
View File

@ -9,7 +9,7 @@ body {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
} }
a { a {

2
packages/standard-components/src/DataList.svelte
View File

@ -53,7 +53,7 @@
.list { .list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-family: Roboto; font-family: Inter;
} }
.grid { .grid {