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

Property panel updates

This commit is contained in:
Conor_Mack 2020-06-01 16:31:58 +01:00
parent 91b88ecad7
commit 93ab8659ed
8 changed files with 888 additions and 903 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
packages/builder/src/builderStore/generate_css.js
View File

@ -1,54 +1,42 @@
export const generate_screen_css = component_arr => {
let styles = ""
for (const { _styles, _id, _children, _component } of component_arr) {
let [componentName] = _component.match(/[a-z]*$/)
Object.keys(_styles).forEach(selector => {
const cssString = generate_css(_styles[selector])
if (cssString) {
styles += apply_class(_id, componentName, cssString, selector)
}
})
if (_children && _children.length) {
styles += generate_screen_css(_children) + "\n"
}
}
return styles.trim()
}
export const generate_screen_css = (component_arr) => {
let styles = '';
for (const { _styles, _id, _children, _component } of component_arr) {
let [ componentName ] = _component.match(/[a-z]*$/);
Object.keys(_styles).forEach((selector) => {
const cssString = generate_css(_styles[selector]);
if (cssString) {
styles += apply_class(_id, componentName, cssString, selector);
}
});
if (_children && _children.length) {
styles += generate_screen_css(_children) + '\n';
}
}
return styles.trim();
};
export const generate_css = style => {
let cssString = Object.entries(style).reduce((str, [key, value]) => {
//TODO Handle arrays and objects here also
if (typeof value === "string") {
if (value) {
return (str += `${key}: ${value};\n`)
}
} else if (Array.isArray(value)) {
if (value.length > 0 && !value.every(v => v === "")) {
return (str += `${key}: ${value
.map(generate_array_styles)
.join(" ")};\n`)
}
}
}, "")
export const generate_css = (style) => {
let cssString = Object.entries(style).reduce((str, [ key, value ]) => {
//TODO Handle arrays and objects here also
if (typeof value === 'string') {
if (value) {
return (str += `${key}: ${value};\n`);
}
} else if (Array.isArray(value)) {
if (value.length > 0 && !value.every((v) => v === '')) {
return (str += `${key}: ${value.join(' ')};\n`);
}
}
}, '');
return (cssString || "").trim()
}
return (cssString || '').trim();
};
export const generate_array_styles = item => {
let safeItem = item === "" ? 0 : item
let hasPx = new RegExp("px$")
if (!hasPx.test(safeItem)) {
return `${safeItem}px`
} else {
return safeItem
}
}
export const apply_class = (id, name = "element", styles, selector) => {
if (selector === "normal") {
return `.${name}-${id} {\n${styles}\n}`
} else {
let sel = selector === "selected" ? "::selection" : `:${selector}`
return `.${name}-${id}${sel} {\n${styles}\n}`
}
}
export const apply_class = (id, name = 'element', styles, selector) => {
if (selector === 'normal') {
return `.${name}-${id} {\n${styles}\n}`;
} else {
let sel = selector === 'selected' ? '::selection' : `:${selector}`;
return `.${name}-${id}${sel} {\n${styles}\n}`;
}
};

940
packages/builder/src/builderStore/store/index.js
View File

File diff suppressed because it is too large Load Diff

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

@ -1,17 +1,20 @@
<script>
import {buildStyle} from "../../helpers.js"
import {onMount} from "svelte"
import { buildStyle } from "../../helpers.js"
export let value = ""
export let textAlign = "left"
export let width = "160px"
export let placeholder = ""
let centerPlaceholder = textAlign === "center"
let style = buildStyle({ width, textAlign })
</script>
<input type="text" {placeholder} {style} on:change bind:value />
<input class:centerPlaceholder type="text" {placeholder} {style} on:change bind:value />
<style>
input {
input {
width: 32px;
height: 32px;
font-size: 12px;
@ -24,10 +27,13 @@
border: 1px solid var(--grey);
border-radius: 2px;
outline: none;
float: right;
}
input::placeholder {
input::placeholder {
text-align: left;
}
.centerPlaceholder::placeholder {
text-align: center;
}
</style>

29
packages/builder/src/components/common/Inputs/InputGroup.svelte
View File

@ -5,40 +5,41 @@
export let meta = []
export let label = ""
export let value = ["0", "0", "0", "0"]
export let type = "number"
export let suffix = ""
export let onChange = () => {}
function handleChange(val, idx) {
value.splice(idx, 1, val)
value.splice(idx, 1, suffix ? val + suffix : val)
value = value
console.log("IDX",idx)
let _value = value.map(v => !/px$/.test(v) ? `${v}px` : v)
let _value = value.map(v => (!v.endsWith(suffix) ? v + suffix : v))
onChange(_value)
}
$: displayValues = value.map(v => v.toString().replace(/px$/, ""))
$: displayValues = value
? value.map(v => v.replace(new RegExp(`${suffix}$`), ""))
: []
</script>
<div class="input-container">
<div class="label">{label}</div>
<div class="inputs">
{#each meta as { placeholder }, i}
<Input width="32px" textAlign="center" placeholder={placeholder || ""} value={!displayValues || displayValues[i] === 0 ? '' : displayValues[i]} on:change={e => handleChange(e.target.value || 0, i)} />
<div class="inputs-group">
{#each meta as m, i}
<Input
width="32px"
textAlign="center"
placeholder={m.placeholder || ''}
value={!displayValues || displayValues[i] === '0' ? '' : displayValues[i]}
on:change={e => handleChange(e.target.value || 0, i)} />
{/each}
</div>
</div>
<style>
.label {
flex: 0;
}
.inputs {
.inputs-group {
flex: 1;
}
</style>

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

@ -3,7 +3,7 @@
export let value = ""
export let text = ""
export let icon = ""
export let padding = "8px 2px;"
export let padding = "8px 5px;"
export let onClick = value => {}
export let selected = false
export let fontWeight = ""

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

@ -28,9 +28,9 @@
onChange(val)
}
const checkSelected = val => isMultiSelect ? value.includes(val) : value === val
const checkSelected = val =>
isMultiSelect ? value.includes(val) : value === val
$: console.log("VALUE",value)
</script>
<div class="flatbutton-group">

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

@ -144,6 +144,7 @@
width: 160px;
height: 32px;
cursor: pointer;
font-size: 12px;
}
.bb-select-anchor {
@ -153,6 +154,7 @@
background-color: #f2f2f2;
border-radius: 2px;
border: 1px solid var(--grey-dark);
align-items: center;
}
.bb-select-anchor > span {

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

@ -1,365 +1,407 @@
import Input from "../common/Input.svelte"
import OptionSelect from "./OptionSelect.svelte"
import InputGroup from "../common/Inputs/InputGroup.svelte"
import FlatButtonGroup from "./FlatButtonGroup.svelte"
import Input from '../common/Input.svelte';
import OptionSelect from './OptionSelect.svelte';
import InputGroup from '../common/Inputs/InputGroup.svelte';
import FlatButtonGroup from './FlatButtonGroup.svelte';
// import Colorpicker from "../common/Colorpicker.svelte"
/*
TODO: Allow for default values for all properties
*/
export const layout = [
{
label: "Display",
key: "display",
control: OptionSelect,
initialValue: "Flex",
options: [
{ label: "Flex", value: "flex" },
{ label: "Inline Flex", value: "inline-flex" },
],
},
{
label: "Direction",
key: "flex-direction",
control: FlatButtonGroup,
buttonProps: [
{ icon: "ri-arrow-right-line", padding: "4px 8px", value: "row" },
{ icon: "ri-arrow-left-line", padding: "4px 8px", value: "rowReverse" },
{ icon: "ri-arrow-down-line", padding: "4px 8px", value: "column" },
{
icon: "ri-arrow-up-line",
padding: "4px 8px",
value: "columnReverse",
},
],
},
{
label: "Justify",
key: "justify-content",
control: OptionSelect,
initialValue: "Flex Start",
options: [
{ 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: "Flex Start",
options: [
{ 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: "Wrap",
key: "flex-wrap",
control: OptionSelect,
options: [
{ label: "wrap", value: "wrap" },
{ label: "no wrap", value: "noWrap" },
],
},
]
{
label: 'Display',
key: 'display',
control: OptionSelect,
initialValue: 'Flex',
options: [ { label: 'Flex', value: 'flex' }, { label: 'Inline Flex', value: 'inline-flex' } ]
},
{
label: 'Direction',
key: 'flex-direction',
control: FlatButtonGroup,
buttonProps: [
{ icon: 'ri-arrow-right-line', padding: '0px 5px', value: 'row' },
{ icon: 'ri-arrow-left-line', padding: '0px 5px', value: 'rowReverse' },
{ icon: 'ri-arrow-down-line', padding: '0px 5px', value: 'column' },
{
icon: 'ri-arrow-up-line',
padding: '0px 5px',
value: 'columnReverse'
}
]
},
{
label: 'Justify',
key: 'justify-content',
control: OptionSelect,
initialValue: 'Flex Start',
options: [
{ 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: 'Flex Start',
options: [
{ 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: 'Wrap',
key: 'flex-wrap',
control: OptionSelect,
options: [ { label: 'wrap', value: 'wrap' }, { label: 'no wrap', value: 'noWrap' } ]
}
];
const spacingMeta = [
{ placeholder: "&#8593;" },
{ placeholder: "&#8594;" },
{ placeholder: "&#8595;" },
{ placeholder: "&#8592;" },
]
const spacingMeta = [ { placeholder: 'T' }, { placeholder: 'R' }, { placeholder: 'B' }, { placeholder: 'L' } ];
export const spacing = [
{ label: "Margin", key: "margin", control: InputGroup, meta: spacingMeta },
{
label: "Padding",
key: "padding",
control: InputGroup,
meta: spacingMeta,
},
]
{
label: 'Margin',
key: 'margin',
control: InputGroup,
meta: spacingMeta,
suffix: 'px',
defaultValue: [ '0', '0', '0', '0' ]
},
{
label: 'Padding',
key: 'padding',
control: InputGroup,
meta: spacingMeta,
suffix: 'px',
defaultValue: [ '0', '0', '0', '0' ]
}
];
export const size = [
{
label: "Width",
key: "width",
control: Input,
placeholder: "px",
width: "48px",
textAlign: "center",
},
{
label: "Height",
key: "height",
control: Input,
placeholder: "px",
width: "48px",
textAlign: "center",
},
{
label: "Min W",
key: "min-width",
control: Input,
placeholder: "px",
width: "48px",
textAlign: "center",
},
{
label: "Min H",
key: "min-height",
control: Input,
placeholder: "px",
width: "48px",
textAlign: "center",
},
{
label: "Max W",
key: "max-width",
control: Input,
placeholder: "px",
width: "48px",
textAlign: "center",
},
{
label: "Max H",
key: "max-height",
control: Input,
placeholder: "px",
width: "48px",
textAlign: "center",
},
]
{
label: 'Width',
key: 'width',
control: Input,
placeholder: 'px',
width: '48px',
textAlign: 'center'
},
{
label: 'Height',
key: 'height',
control: Input,
placeholder: 'px',
width: '48px',
textAlign: 'center'
},
{
label: 'Min W',
key: 'min-width',
control: Input,
placeholder: 'px',
width: '48px',
textAlign: 'center'
},
{
label: 'Min H',
key: 'min-height',
control: Input,
placeholder: 'px',
width: '48px',
textAlign: 'center'
},
{
label: 'Max W',
key: 'max-width',
control: Input,
placeholder: 'px',
width: '48px',
textAlign: 'center'
},
{
label: 'Max H',
key: 'max-height',
control: Input,
placeholder: 'px',
width: '48px',
textAlign: 'center'
}
];
export const position = [
{
label: "Position",
key: "position",
control: OptionSelect,
initialValue: "Wrap",
options: [
{ label: "Static", value: "static" },
{ label: "Relative", value: "relative" },
{ label: "Fixed", value: "fixed" },
{ label: "Absolute", value: "absolute" },
{ label: "Sticky", value: "sticky" },
],
},
{
label: "Top",
key: "top",
control: Input,
placeholder: "px",
width: "48px",
textAlign: "center",
},
{
label: "Right",
key: "right",
control: Input,
placeholder: "px",
width: "48px",
textAlign: "center",
},
{
label: "Bottom",
key: "bottom",
control: Input,
placeholder: "px",
width: "48px",
textAlign: "center",
},
{
label: "Left",
key: "left",
control: Input,
placeholder: "px",
width: "48px",
textAlign: "center",
},
{
label: "Z-index",
key: "z-index",
control: Input,
placeholder: "Num",
width: "48px",
textAlign: "center",
},
]
{
label: 'Position',
key: 'position',
control: OptionSelect,
initialValue: 'Wrap',
options: [
{ label: 'Static', value: 'static' },
{ label: 'Relative', value: 'relative' },
{ label: 'Fixed', value: 'fixed' },
{ label: 'Absolute', value: 'absolute' },
{ label: 'Sticky', value: 'sticky' }
]
},
{
label: 'Top',
key: 'top',
control: Input,
placeholder: 'px',
width: '48px',
textAlign: 'center'
},
{
label: 'Right',
key: 'right',
control: Input,
placeholder: 'px',
width: '48px',
textAlign: 'center'
},
{
label: 'Bottom',
key: 'bottom',
control: Input,
placeholder: 'px',
width: '48px',
textAlign: 'center'
},
{
label: 'Left',
key: 'left',
control: Input,
placeholder: 'px',
width: '48px',
textAlign: 'center'
},
{
label: 'Z-index',
key: 'z-index',
control: Input,
placeholder: 'num',
width: '48px',
textAlign: 'center'
}
];
export const typography = [
{
label: "Font",
key: "font-family",
control: OptionSelect,
defaultValue: "initial",
options: [
"initial",
"Arial",
"Arial Black",
"Cursive",
"Courier",
"Comic Sans MS",
"Helvetica",
"Impact",
"Inter",
"Lucida Sans Unicode",
"Open Sans",
"Playfair",
"Roboto",
"Roboto Mono",
"Times New Roman",
"Verdana",
],
styleBindingProperty: "font-family",
},
{
label: "Weight",
key: "font-weight",
control: OptionSelect,
options: ["normal", "bold", "bolder", "lighter"],
},
{
label: "size",
key: "font-size",
defaultValue: "",
control: Input,
placeholder: "px",
width: "48px",
textAlign: "center",
},
{
label: "Line H",
key: "line-height",
control: Input,
placeholder: "lh",
width: "48px",
textAlign: "center",
},
{
label: "Color",
key: "color",
control: Input,
},
{
label: "align",
key: "text-align",
control: FlatButtonGroup,
buttonProps: [
{ icon: "ri-align-left", padding: "4px 8px", value: "left" },
{ icon: "ri-align-center", padding: "4px 8px", value: "center" },
{ icon: "ri-align-right", padding: "4px 8px", value: "right" },
{ icon: "ri-align-justify", padding: "4px 8px", value: "justify" },
],
},
{
label: "transform",
key: "text-transform",
control: FlatButtonGroup,
buttonProps: [
{ text: "BB", padding: "4px 8px", fontWeight: 500, value: "uppercase" },
{ text: "Bb", padding: "4px 8px", fontWeight: 500, value: "capitalize" },
{ text: "bb", padding: "4px 8px", fontWeight: 500, value: "lowercase" },
{
text: "&times;",
padding: "4px 8px",
fontWeight: 500,
value: "none",
},
],
},
{ label: "style", key: "font-style", control: Input },
]
{
label: 'Font',
key: 'font-family',
control: OptionSelect,
defaultValue: 'initial',
options: [
'initial',
'Arial',
'Arial Black',
'Cursive',
'Courier',
'Comic Sans MS',
'Helvetica',
'Impact',
'Inter',
'Lucida Sans Unicode',
'Open Sans',
'Playfair',
'Roboto',
'Roboto Mono',
'Times New Roman',
'Verdana'
],
styleBindingProperty: 'font-family'
},
{
label: 'Weight',
key: 'font-weight',
control: OptionSelect,
options: [ 'normal', 'bold', 'bolder', 'lighter' ]
},
{
label: 'size',
key: 'font-size',
defaultValue: '',
control: Input,
placeholder: 'px',
width: '48px',
textAlign: 'center'
},
{
label: 'Line H',
key: 'line-height',
control: Input,
placeholder: 'lh',
width: '48px',
textAlign: 'center'
},
{
label: 'Color',
key: 'color',
control: Input,
placeholder: "hex",
},
{
label: 'align',
key: 'text-align',
control: FlatButtonGroup,
buttonProps: [
{ icon: 'ri-align-left', padding: '0px 5px', value: 'left' },
{ 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' }
]
},
{
label: 'transform',
key: 'text-transform',
control: FlatButtonGroup,
buttonProps: [
{ text: 'BB', padding: '0px 5px', fontWeight: 500, value: 'uppercase' },
{ text: 'Bb', padding: '0px 5px', fontWeight: 500, value: 'capitalize' },
{ text: 'bb', padding: '0px 5px', fontWeight: 500, value: 'lowercase' },
{
text: '&times;',
padding: '0px 5px',
fontWeight: 500,
value: 'none'
}
]
},
{ label: 'style', key: 'font-style', control: Input }
];
export const background = [
{
label: 'Background',
key: 'background',
control: Input,
},
{
label: "Background",
key: "background",
label: "Image",
key: "background-image",
control: Input,
placeholder: "src",
},
{ label: "Image", key: "image", control: Input }, //custom
]
];
export const border = [
{ label: "Radius", key: "border-radius", control: Input },
{ label: "Width", key: "border-width", control: Input }, //custom
{
label: "Color",
key: "border-color",
control: Input,
},
{
label: "Style",
key: "border-style",
control: OptionSelect,
options: [
"none",
"hidden",
"dotted",
"dashed",
"solid",
"double",
"groove",
"ridge",
"inset",
"outset",
],
},
]
{
label: 'Radius',
key: 'border-radius',
control: Input,
width: '48px',
placeholder: 'px',
textAlign: 'center'
},
{
label: 'Width',
key: 'border-width',
control: Input,
width: '48px',
placeholder: 'px',
textAlign: 'center'
}, //custom
{
label: 'Color',
key: 'border-color',
control: Input
},
{
label: 'Style',
key: 'border-style',
control: OptionSelect,
options: [ 'none', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset' ]
}
];
export const effects = [
{ label: "Opacity", key: "opacity", control: Input },
{
label: 'Opacity',
key: 'opacity',
control: Input,
width: '48px',
textAlign: 'center',
placeholder: '%'
},
{
label: 'Rotate',
key: 'transform',
control: Input,
width: '48px',
textAlign: 'center',
placeholder: 'deg'
}, //needs special control
{
label: "Rotate",
key: "transform",
control: OptionSelect,
options: [
{ label: "None", value: "rotate(0deg)" },
{ label: "45 degrees", value: "rotate(45deg)" },
{ label: "90 degrees", value: "rotate(90deg)" },
{ label: "135 degrees", value: "rotate(135deg)" },
{ label: "180 degrees", value: "rotate(180deg)" },
{ label: "225 degrees", value: "rotate(225deg)" },
{ label: "270 degrees", value: "rotate(270deg)" },
{ label: "315 degrees", value: "rotate(315deg)" },
{ label: "360 degrees", value: "rotate(360deg)" },
],
}, //needs special control
{ label: "Shadow", key: "box-shadow", control: Input },
]
label: "Shadow",
key: "box-shadow",
control: InputGroup,
meta: [{ placeholder: "X" }, { placeholder: "Y" }, { placeholder: "B" }],
},
];
export const transitions = [
{ label: "Property", key: "transition-property", control: Input },
{ label: "Duration", key: "transition-timing-function", control: Input },
{ label: "Ease", key: "transition-ease", control: Input },
]
{
label: 'Property',
key: 'transition-property',
control: OptionSelect,
options: [
'None',
'All',
'Background Color',
'Color',
'Font Size',
'Font Weight',
'Height',
'Margin',
'Opacity',
'Padding',
'Rotate',
'Shadow',
'Width'
]
},
{
label: 'Duration',
key: 'transition-timing-function',
control: Input,
width: '48px',
textAlign: 'center',
placeholder: 'sec'
},
{
label: 'Ease',
key: 'transition-ease',
control: OptionSelect,
options: [ 'linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out' ]
}
];
export const all = {
layout,
spacing,
size,
position,
typography,
background,
border,
effects,
transitions,
}
layout,
spacing,
size,
position,
typography,
background,
border,
effects,
transitions
};
export function excludeProps(props, propsToExclude) {
const modifiedProps = {}
for (const prop in props) {
if (!propsToExclude.includes(prop)) {
modifiedProps[prop] = props[prop]
}
}
return modifiedProps
const modifiedProps = {};
for (const prop in props) {
if (!propsToExclude.includes(prop)) {
modifiedProps[prop] = props[prop];
}
}
return modifiedProps;
}