diff --git a/packages/builder/src/builderStore/generate_css.js b/packages/builder/src/builderStore/generate_css.js index 212a032a6f..2c0fa48406 100644 --- a/packages/builder/src/builderStore/generate_css.js +++ b/packages/builder/src/builderStore/generate_css.js @@ -4,22 +4,29 @@ import { pipe } from "../common/core" const self = n => n const join_with = delimiter => a => a.join(delimiter) const empty_string_to_unset = s => (s.length ? s : "0") -const add_suffix = suffix => s => s + suffix +const add_suffix_if_number = suffix => s => { + try { + if (isNaN(s) || isNaN(parseFloat(s))) return s + } catch (_) { + return s + } + return s + suffix +} export const make_margin = values => pipe(values, [ map(empty_string_to_unset), - map(add_suffix("px")), + map(add_suffix_if_number("px")), join_with(" "), ]) const css_map = { templaterows: { - name: "grid-template-columns", + name: "grid-template-rows", generate: self, }, templatecolumns: { - name: "grid-template-rows", + name: "grid-template-columns", generate: self, }, gridarea: { @@ -58,6 +65,14 @@ const css_map = { name: "z-index", generate: self, }, + height: { + name: "height", + generate: self, + }, + width: { + name: "width", + generate: self, + }, } export const generate_rule = ([name, values]) => @@ -97,10 +112,11 @@ const apply_class = (id, name, styles) => `.${name}-${id} {\n${styles}\n}` export const generate_screen_css = component_array => { let styles = "" + let emptyStyles = { layout: {}, position: {} } for (let i = 0; i < component_array.length; i += 1) { const { _styles, _id, _children } = component_array[i] - const { layout, position } = generate_css(_styles) + const { layout, position } = generate_css(_styles || emptyStyles) styles += apply_class(_id, "pos", position) + "\n" styles += apply_class(_id, "lay", layout) + "\n" diff --git a/packages/builder/src/userInterface/LayoutEditor.svelte b/packages/builder/src/userInterface/LayoutEditor.svelte index b77b47523d..98f43fd59e 100644 --- a/packages/builder/src/userInterface/LayoutEditor.svelte +++ b/packages/builder/src/userInterface/LayoutEditor.svelte @@ -35,6 +35,11 @@ padding: ["Padding", tbrl, "small"], } + $: size = { + height: ["Height", single], + width: ["Width", single], + } + $: zindex = { zindex: ["Z-Index", single], } @@ -82,6 +87,22 @@ onStyleChanged={_value => onStyleChanged('position', key, _value)} values={layout[key] || newValue(meta.length)} {meta} + {size} + type="text" /> + + {/each} + + +

Size

+
+ {#each Object.entries(size) as [key, [name, meta, size]] (component._id + key)} +
+
{name}:
+ onStyleChanged('position', key, _value)} + values={layout[key] || newValue(meta.length)} + type="text" + {meta} {size} />
{/each}