From b52b9fdd2f65584111646f13b57a9868729cf30a Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Tue, 5 May 2020 14:45:52 +0100 Subject: [PATCH] solution for rendering --- .../src/components/common/Colorpicker.svelte | 13 +++--- .../ComponentPropertiesPanel.svelte | 7 +++- .../userInterface/DesignView.svelte | 4 ++ .../userInterface/PropertyGroup.svelte | 42 +++++++++++++------ .../userInterface/TempSelect.svelte | 14 +++++++ .../userInterface/propertyCategories.js | 13 ++++-- .../userInterface/temporaryPanelStructure.js | 5 ++- .../standard-components/src/Heading.svelte | 1 - 8 files changed, 71 insertions(+), 28 deletions(-) create mode 100644 packages/builder/src/components/userInterface/TempSelect.svelte diff --git a/packages/builder/src/components/common/Colorpicker.svelte b/packages/builder/src/components/common/Colorpicker.svelte index 9cc3b3926a..28ca92554d 100644 --- a/packages/builder/src/components/common/Colorpicker.svelte +++ b/packages/builder/src/components/common/Colorpicker.svelte @@ -2,7 +2,7 @@ import { onMount, beforeUpdate, afterUpdate } from "svelte" export let value = null - export let onChanged = () => {} + export let onChange = () => {} export let swatches = [] let picker @@ -58,13 +58,10 @@ onMount(() => { getRecentColors() createPicker() - - picker.on("save", (colour, instance) => { - let color = colour.toHEXA().toString() - onChanged(color) - setRecentColor(color) - picker.hide() - }) + return () => { + picker.destroyAndRemove() + picker = null + } }) diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte index 84480b2d69..944862ebee 100644 --- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte +++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte @@ -86,8 +86,11 @@
{#if current_view === 'design'} - - + {/if}
diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte index f8dad08905..0aebd7b186 100644 --- a/packages/builder/src/components/userInterface/DesignView.svelte +++ b/packages/builder/src/components/userInterface/DesignView.svelte @@ -4,8 +4,11 @@ export let panelDefinition = {} export let componentInstance = {} export let componentDefinition = {} + export let onPropChanged = () => {} + const getProperties = name => panelDefinition.properties[name] + $: console.log("PDEF", panelDefinition) $: propertyGroupNames = !!panelDefinition.properties && Object.keys(panelDefinition.properties) @@ -14,6 +17,7 @@ {/each} diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte index b2b1e9c9eb..fa6dba0156 100644 --- a/packages/builder/src/components/userInterface/PropertyGroup.svelte +++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte @@ -1,20 +1,27 @@ -
(show = !show)}> + +
{}}>
@@ -22,13 +29,20 @@
{capitalize(name)}
-
    - {#each propertyKeys as key} - -
  • {properties[key].label || capitalize(key)}
  • - - {/each} -
+ + {#each propertyDefinition as [key, definition]} +
+ {#if propExistsOnComponentDef(key)} + {definition.label || capitalize(key)} + + {/if} +
+ {/each}
@@ -62,7 +76,11 @@ .property-panel { height: 0px; overflow: hidden; - /* transition: height 2s ease-in-out; */ + } + + .property-control { + display: flex; + flex-flow: row nowrap; } .show { diff --git a/packages/builder/src/components/userInterface/TempSelect.svelte b/packages/builder/src/components/userInterface/TempSelect.svelte new file mode 100644 index 0000000000..514c9b5a20 --- /dev/null +++ b/packages/builder/src/components/userInterface/TempSelect.svelte @@ -0,0 +1,14 @@ + + + diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js index 352baea93e..6246462ecb 100644 --- a/packages/builder/src/components/userInterface/propertyCategories.js +++ b/packages/builder/src/components/userInterface/propertyCategories.js @@ -1,9 +1,16 @@ -/* +import ColorPicker from "../common/Colorpicker.svelte" +import Input from "../common/Input.svelte" +import TempSelect from "./TempSelect.svelte" +/* TODO: all strings types are really inputs and could be typed as such TODO: Options types need option items TODO: Allow for default values for all properties */ +export const general = { + text: { control: Input } +} + export const layout = { flexDirection: { label: "Direction", control: "string" }, justifyContent: { label: "Justify", control: "string" }, @@ -42,8 +49,8 @@ export const typography = { } export const background = { - backgroundColor: { label: "Background Color", control: "colour" }, - image: { control: "string" }, //custom + backgroundColor: { label: "Background Color", control: ColorPicker }, + image: { control: Input }, //custom } export const border = { diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js index 7ec5988def..bc60ac2bd6 100644 --- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js +++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js @@ -1,4 +1,4 @@ -import { layout, background } from "./propertyCategories.js" +import { general, layout, background } from "./propertyCategories.js" export default { categories: [ @@ -13,7 +13,7 @@ export default { icon: 'ri-layout-row-fill', commonProps: {}, children: [], - properties: { layout, background }, + properties: { background }, }, { name: 'Text', @@ -27,6 +27,7 @@ export default { description: "A component for displaying heading text", icon: "ri-heading", properties: { + general, layout, background, }, diff --git a/packages/standard-components/src/Heading.svelte b/packages/standard-components/src/Heading.svelte index 6a3a210dc3..4bbb9d0b36 100644 --- a/packages/standard-components/src/Heading.svelte +++ b/packages/standard-components/src/Heading.svelte @@ -11,7 +11,6 @@ $: containerElement && !text && _bb.attachChildren(containerElement) $: style = buildStyle({ "font-family": fontFamily, color }) - // $: console.log("HEADING", color) {#if type === 'h1'}