From 660872abc04b3d859e5760ab3dca4a92b4f18b87 Mon Sep 17 00:00:00 2001 From: Martin McKeaveney Date: Fri, 6 Mar 2020 17:00:54 +0000 Subject: [PATCH 1/4] icons instead of text --- .../builder/src/builderStore/generate_css.js | 22 ++++- packages/builder/src/builderStore/index.js | 1 - packages/builder/src/index.html | 1 + .../ComponentPropertiesPanel.svelte | 2 +- .../src/userInterface/LayoutEditor.svelte | 29 ++++--- .../LayoutTemplateControls.svelte | 81 +++++++++++++++++++ 6 files changed, 123 insertions(+), 13 deletions(-) create mode 100644 packages/builder/src/userInterface/LayoutTemplateControls.svelte diff --git a/packages/builder/src/builderStore/generate_css.js b/packages/builder/src/builderStore/generate_css.js index 2c0fa48406..53a7b22c12 100644 --- a/packages/builder/src/builderStore/generate_css.js +++ b/packages/builder/src/builderStore/generate_css.js @@ -29,6 +29,18 @@ const css_map = { name: "grid-template-columns", generate: self, }, + align: { + name: "align-items", + generate: self, + }, + justify: { + name: "justify-content", + generate: self, + }, + direction: { + name: "flex-direction", + generate: self + }, gridarea: { name: "grid-area", generate: make_margin, @@ -90,6 +102,12 @@ const handle_grid = (acc, [name, value]) => { return acc.concat([[name, value]]) } +// const handleFlex = (acc, [name, value]) => { +// if (name === "align-items" || name === "justify-content") { +// return acc.concat([name, value]) +// } +// }; + const object_to_css_string = [ toPairs, reduce(handle_grid, []), @@ -100,7 +118,9 @@ const object_to_css_string = [ export const generate_css = ({ layout, position }) => { let _layout = pipe(layout, object_to_css_string) - _layout = _layout.length ? _layout + "\ndisplay: grid;" : _layout + if (_layout.length) { + _layout += `\ndisplay: ${_layout.includes("flex") ? "flex" : "grid"};`; + } return { layout: _layout, diff --git a/packages/builder/src/builderStore/index.js b/packages/builder/src/builderStore/index.js index dacb186952..e3bc0b089c 100644 --- a/packages/builder/src/builderStore/index.js +++ b/packages/builder/src/builderStore/index.js @@ -5,7 +5,6 @@ export const store = getStore() export const initialise = async () => { try { - console.log(process.env.NODE_ENV); if (process.env.NODE_ENV === "production") { LogRocket.init("knlald/budibase"); } diff --git a/packages/builder/src/index.html b/packages/builder/src/index.html index 8ce642e160..94a1f16944 100644 --- a/packages/builder/src/index.html +++ b/packages/builder/src/index.html @@ -6,6 +6,7 @@ Budibase Builder + diff --git a/packages/builder/src/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/userInterface/ComponentPropertiesPanel.svelte index 6b39d7b5ee..4fa7b092bd 100644 --- a/packages/builder/src/userInterface/ComponentPropertiesPanel.svelte +++ b/packages/builder/src/userInterface/ComponentPropertiesPanel.svelte @@ -29,7 +29,7 @@ $store.currentFrontEndType === "page" ? getProps($store.currentPreviewItem, ["name", "favicon"]) : getProps($store.currentPreviewItem, ["name", "description", "route"]) - $: console.log(screen_props) + const onPropChanged = store.setComponentProp const onStyleChanged = store.setComponentStyle diff --git a/packages/builder/src/userInterface/LayoutEditor.svelte b/packages/builder/src/userInterface/LayoutEditor.svelte index 98f43fd59e..44ae3c0d40 100644 --- a/packages/builder/src/userInterface/LayoutEditor.svelte +++ b/packages/builder/src/userInterface/LayoutEditor.svelte @@ -1,5 +1,6 @@ + +
+ {#each meta as { placeholder }, i} + {#each propertyChoices as [displayName, [cssPropValue, icon]]} + + {/each} + {/each} +
+ + From ec6a523fe126407443d09720c72e001722ebe818 Mon Sep 17 00:00:00 2001 From: Martin McKeaveney Date: Sat, 7 Mar 2020 23:50:43 +0000 Subject: [PATCH 2/4] better icons --- .../LayoutTemplateControls.svelte | 23 +++++++++---------- 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/packages/builder/src/userInterface/LayoutTemplateControls.svelte b/packages/builder/src/userInterface/LayoutTemplateControls.svelte index b2c1589036..8ba0ffdae6 100644 --- a/packages/builder/src/userInterface/LayoutTemplateControls.svelte +++ b/packages/builder/src/userInterface/LayoutTemplateControls.svelte @@ -13,19 +13,19 @@ const PROPERTY_OPTIONS = { Direction: { - vertical: ["column", "ri-layout-column-line"], - horizontal: ["row", "ri-layout-row-line"], + vertical: ["column", "ri-arrow-up-down-line"], + horizontal: ["row", "ri-arrow-left-right-line"], }, Align: { - left: ["flex-start", "ri-align-left"], - center: ["center", "ri-align-center"], - right: ["flex-end", "ri-align-right"], + left: ["flex-start", "ri-layout-bottom-line"], + center: ["center", "ri-layout-row-line"], + right: ["flex-end", "ri-layout-top-line"], space: ["space-between", "ri-space"], }, Justify: { - left: ["flex-start", "ri-align-left"], - center: ["center", "ri-align-center"], - right: ["flex-end", "ri-align-right"], + left: ["flex-start", "ri-layout-left-line"], + center: ["center", "ri-layout-column-line"], + right: ["flex-end", "ri-layout-right-line"], space: ["space-between", "ri-space"], }, } @@ -61,16 +61,15 @@ border-radius: 5px; background: rgba(249, 249, 249, 1); - min-width: 1.8rem; - min-height: 1.8rem; - padding-bottom: 10px; + min-width: 1.6rem; + min-height: 1.6rem; display: flex; justify-content: center; align-items: center; font-size: 1.2rem; - font-weight: 700; + font-weight: 500; color: rgba(22, 48, 87, 1); } From 0a81d5b6dfe766dc3a005ee6ee2821dd3d4a48bf Mon Sep 17 00:00:00 2001 From: Martin McKeaveney Date: Sat, 7 Mar 2020 23:52:47 +0000 Subject: [PATCH 3/4] remove commented code --- packages/builder/src/builderStore/generate_css.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/packages/builder/src/builderStore/generate_css.js b/packages/builder/src/builderStore/generate_css.js index 53a7b22c12..dbca389aa4 100644 --- a/packages/builder/src/builderStore/generate_css.js +++ b/packages/builder/src/builderStore/generate_css.js @@ -102,12 +102,6 @@ const handle_grid = (acc, [name, value]) => { return acc.concat([[name, value]]) } -// const handleFlex = (acc, [name, value]) => { -// if (name === "align-items" || name === "justify-content") { -// return acc.concat([name, value]) -// } -// }; - const object_to_css_string = [ toPairs, reduce(handle_grid, []), From b5b526fab2dbb9afbc0667b8504518b8c47715d5 Mon Sep 17 00:00:00 2001 From: Martin McKeaveney Date: Sat, 7 Mar 2020 23:57:19 +0000 Subject: [PATCH 4/4] better variable naming --- .../src/userInterface/LayoutTemplateControls.svelte | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/builder/src/userInterface/LayoutTemplateControls.svelte b/packages/builder/src/userInterface/LayoutTemplateControls.svelte index 8ba0ffdae6..21c375abcc 100644 --- a/packages/builder/src/userInterface/LayoutTemplateControls.svelte +++ b/packages/builder/src/userInterface/LayoutTemplateControls.svelte @@ -7,9 +7,9 @@ export let propertyName export let onStyleChanged = () => {} - let _values = values.map(v => v) + let selectedLayoutValues = values.map(v => v) - $: onStyleChanged(_values) + $: onStyleChanged(selectedLayoutValues) const PROPERTY_OPTIONS = { Direction: { @@ -37,10 +37,10 @@ {#each meta as { placeholder }, i} {#each propertyChoices as [displayName, [cssPropValue, icon]]}