From 05a32f25f0cdcf1ab7fdce7c97809b5ffb18853c Mon Sep 17 00:00:00 2001 From: pngwn Date: Wed, 22 Jan 2020 15:18:28 +0000 Subject: [PATCH] Initial implementation of props editor. --- .../src/userInterface/ComponentPanel.svelte | 53 +++++------ .../src/userInterface/PropControl.svelte | 24 +++-- .../userInterface/StateBindingControl.svelte | 87 +++++++++---------- 3 files changed, 85 insertions(+), 79 deletions(-) diff --git a/packages/builder/src/userInterface/ComponentPanel.svelte b/packages/builder/src/userInterface/ComponentPanel.svelte index fab9f7699d..2ab2ebf4c7 100644 --- a/packages/builder/src/userInterface/ComponentPanel.svelte +++ b/packages/builder/src/userInterface/ComponentPanel.svelte @@ -53,38 +53,38 @@ store.subscribe(s => { components = s.components; }); -// const save = () => { +const save = () => { -// ignoreStore = true; -// if(!validate()) { -// ignoreStore = false; -// return; -// } + ignoreStore = true; + if(!validate()) { + ignoreStore = false; + return; + } -// component.name = originalName || name; -// component.description = description; -// component.tags = pipe(tagsString, [ -// split(","), -// map(s => s.trim()) -// ]); + component.name = originalName || name; + component.description = description; + component.tags = pipe(tagsString, [ + split(","), + map(s => s.trim()) + ]); -// store.saveScreen(component); + store.saveScreen(component); -// ignoreStore = false; -// // now do the rename -// if(name !== originalName) { -// store.renameScreen(originalName, name); -// } -// } + ignoreStore = false; + // now do the rename + if(name !== originalName) { + store.renameScreen(originalName, name); + } +} -// const deleteComponent = () => { -// showDialog(); -// } +const deleteComponent = () => { + showDialog(); +} -// const confirmDeleteComponent = () => { -// store.deleteScreen(component.name); -// hideDialog(); -// } +const confirmDeleteComponent = () => { + store.deleteScreen(component.name); + hideDialog(); +} const onPropsValidate = result => { propsValidationErrors = result; @@ -100,6 +100,7 @@ const updateComponent = doChange => { const onPropsChanged = newProps => { updateComponent(newComponent => assign(newComponent.props, newProps)); + save(); } diff --git a/packages/builder/src/userInterface/PropControl.svelte b/packages/builder/src/userInterface/PropControl.svelte index 194c1314a6..145042e97b 100644 --- a/packages/builder/src/userInterface/PropControl.svelte +++ b/packages/builder/src/userInterface/PropControl.svelte @@ -27,14 +27,14 @@ const setComponentProp = (props) => { {#if propDef.type === "event"} -
{propDef.____name}
+
{propDef.____name}
{:else } -
{propDef.____name}
+
{propDef.____name}
{ diff --git a/packages/builder/src/userInterface/StateBindingControl.svelte b/packages/builder/src/userInterface/StateBindingControl.svelte index 22108e2f99..bbc81ef535 100644 --- a/packages/builder/src/userInterface/StateBindingControl.svelte +++ b/packages/builder/src/userInterface/StateBindingControl.svelte @@ -66,10 +66,10 @@ const setBindingSource = ev => { bind(bindingPath, bindingFallbackValue, ev.target.value); } -const makeBinding = () => { - forceIsBound=true; - isExpanded=true; -} +// const makeBinding = () => { +// forceIsBound=true; +// isExpanded=true; +// } @@ -77,11 +77,11 @@ const makeBinding = () => {
{isExpanded ? "" : bindingPath}
- isExpanded=!isExpanded}/> {#if !canOnlyBind} - {/if} @@ -97,8 +97,8 @@ const makeBinding = () => { value={bindingFallbackValue} on:change={setBindingFallback} >
Binding Source
- onChanged(ev.target.value)}> {#each options as option} @@ -132,49 +132,46 @@ const makeBinding = () => { {:else} - onChanged(ev.target.value)} - bind:value={value} - style="flex: 1 0 auto;" > + onChanged(ev.target.value)} + bind:value={value} + style="flex: 1 0 auto;" /> {/if} - +
{/if} \ No newline at end of file + input { + font-size: 12px; + font-weight: 700; + color: #163057; + opacity: 0.7; + padding: 5px 10px; + box-sizing: border-box; + border: 1px solid #DBDBDB; + border-radius: 2px; + outline: none; + } +