Initial implementation of props editor.

packages/builder/src/userInterface/ComponentPanel.svelte

@@ -53,38 +53,38 @@ store.subscribe(s => {
     components = s.components;
 });
 
-// const save = () => {
-
-//     ignoreStore = true;
-//     if(!validate()) {
-//         ignoreStore = false;
-//         return;
-//     }
-
-//     component.name = originalName || name;
-//     component.description = description;
-//     component.tags = pipe(tagsString, [
-//         split(","),
-//         map(s => s.trim())
-//     ]);
-
-//     store.saveScreen(component);
-
-//     ignoreStore = false;
-//     // now do the rename
-//     if(name !== originalName) {
-//         store.renameScreen(originalName, name);
-//     }
-// }
+const save = () => {
+
+    ignoreStore = true;
+    if(!validate()) {
+        ignoreStore = false;
+        return;
+    }
+
+    component.name = originalName || name;
+    component.description = description;
+    component.tags = pipe(tagsString, [
+        split(","),
+        map(s => s.trim())
+    ]);
+
+    store.saveScreen(component);
+
+    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();
 
 }
 

packages/builder/src/userInterface/PropControl.svelte

@@ -27,14 +27,14 @@ const setComponentProp = (props) => {
 
     {#if propDef.type === "event"}
 
-    <div class="prop-label">{propDef.____name}</div>
+    <h5>{propDef.____name}</h5>
     <EventListSelector parentProps={props}
                        {propDef}
                        onValueChanged={setComponentProp} />
 
     {:else }
 
-    <div class="prop-label">{propDef.____name}</div>
+    <h5>{propDef.____name}</h5>
     <StateBindingControl value={props[propDef.____name]}
                          type={propDef.type}
                          options={propDef.options}
@@ -47,13 +47,21 @@ const setComponentProp = (props) => {
 <style>
 
 .root {
-    padding: 1rem 0 0rem 0;
+    height: 40px;
+    margin-bottom: 15px;
+    display: grid;
+    grid-template-rows: 1fr;
+    grid-template-columns: 70px 1fr;
+    grid-gap: 10px;
 }
 
-.prop-label {
-    font-size: 0.8rem;
-    color: var(--secondary100);
-    font-weight: bold;
-}
+h5 {
+    font-size: 12px;
+    font-weight: 700;
+    color: #163057;
+    opacity: 0.6;
+    padding-top: 12px;
+    margin-bottom: 0;
+  }
 
 </style>

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;
+// }
 
 </script>
 
@@ -77,11 +77,11 @@ const makeBinding = () => {
 <div>
     <div class="bound-header">
         <div>{isExpanded ? "" : bindingPath}</div>
-        <IconButton icon={isExpanded ? "chevron-up" : "chevron-down"} 
+        <IconButton icon={isExpanded ? "chevron-up" : "chevron-down"}
                     size="12"
                     on:click={() => isExpanded=!isExpanded}/>
         {#if !canOnlyBind}
-        <IconButton icon="trash" 
+        <IconButton icon="trash"
                     size="12"
                     on:click={clearBinding}/>
         {/if}
@@ -97,8 +97,8 @@ const makeBinding = () => {
                value={bindingFallbackValue}
                on:change={setBindingFallback} >
         <div class="binding-prop-label">Binding Source</div>
-        <select class="uk-select uk-form-small" 
-            value={bindingSource} 
+        <select class="uk-select uk-form-small"
+            value={bindingSource}
             on:change={setBindingSource}>
 
             <option>store</option>
@@ -117,13 +117,13 @@ const makeBinding = () => {
     <div>
         <IconButton icon={value == true ? "check-square" : "square"}
                     size="19"
-                    on:click={() => onChanged(!value)}/>
+                    on:click={() => onChanged(!value)} />
     </div>
 
     {:else if type === "options"}
 
-    <select class="uk-select uk-form-small" 
-            value={value} 
+    <select class="uk-select uk-form-small"
+            value={value}
             on:change={ev => onChanged(ev.target.value)}>
         {#each options as option}
         <option value={option}>{option}</option>
@@ -132,49 +132,46 @@ const makeBinding = () => {
 
     {:else}
 
-    <input class="uk-input uk-form-small"
-            on:change={ev => onChanged(ev.target.value)}
-            bind:value={value}
-            style="flex: 1 0 auto;" > 
+    <input on:change={ev => onChanged(ev.target.value)}
+           bind:value={value}
+           style="flex: 1 0 auto;" />
 
 
     {/if}
-    <IconButton icon="link" 
-                size="12"
-                on:click={makeBinding} />
+
 </div>
 {/if}
 
 
 <style>
+    .unbound-container {
+        display:flex;
+    }
 
-.unbound-container {
-    display:flex;
-    margin: .5rem 0rem .5rem 0rem;
-}
-
-.unbound-container > *:nth-child(1) {
-    width:auto;
-    flex: 1 0 auto;
-    font-size: 0.8rem;
-    color: var(--secondary100);
-    border-radius: .2rem;
-}
-
-.bound-header {
-    display: flex;
-}
-
-.bound-header > div:nth-child(1) {
-    flex: 1 0 auto;
-    width: 30px;
-    color: var(--secondary50);
-    padding-left: 5px;
-}
+    .bound-header {
+        display: flex;
+    }
 
-.binding-prop-label {
-    color: var(--secondary50);
-}
+    .bound-header > div:nth-child(1) {
+        flex: 1 0 auto;
+        width: 30px;
+        color: var(--secondary50);
+        padding-left: 5px;
+    }
 
+    .binding-prop-label {
+        color: var(--secondary50);
+    }
 
-</style>
+    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;
+    }
+</style>