From 5ab71620883fb8a803abeb19ef2906534952a00f Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Wed, 12 Feb 2020 10:12:08 +0000
Subject: [PATCH] final tidy up

---
 packages/builder/src/builderStore/store.js    |  4 +--
 .../userInterface/ComponentsHierarchy.svelte  |  2 --
 .../src/userInterface/PropertyCascader.svelte | 35 ++++++++++---------
 3 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/packages/builder/src/builderStore/store.js b/packages/builder/src/builderStore/store.js
index 56a755e886..4871396ea0 100644
--- a/packages/builder/src/builderStore/store.js
+++ b/packages/builder/src/builderStore/store.js
@@ -461,10 +461,10 @@ const saveScreen = store => screen => {
   })
 }
 
-const _saveScreen = (store, s, screen) => {
+const _saveScreen = async (store, s, screen) => {
   const currentPageScreens = s.pages[s.currentPageName]._screens
 
-  api
+  await api
     .post(`/_builder/api/${s.appname}/pages/${s.currentPageName}/screen`, screen)
     .then(async savedScreen => {
       _savePage(s);
diff --git a/packages/builder/src/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/userInterface/ComponentsHierarchy.svelte
index 89dc2be358..5c5917c536 100644
--- a/packages/builder/src/userInterface/ComponentsHierarchy.svelte
+++ b/packages/builder/src/userInterface/ComponentsHierarchy.svelte
@@ -38,8 +38,6 @@
     component.component &&
     $store.currentPreviewItem &&
     component.component.name === $store.currentPreviewItem.name
-
-  $: console.log(_screens)
 </script>
 
 <div class="root">
diff --git a/packages/builder/src/userInterface/PropertyCascader.svelte b/packages/builder/src/userInterface/PropertyCascader.svelte
index bf5803d6f5..c8f6b4af6b 100644
--- a/packages/builder/src/userInterface/PropertyCascader.svelte
+++ b/packages/builder/src/userInterface/PropertyCascader.svelte
@@ -12,12 +12,11 @@
   let bindingPath = "";
   let bindingFallbackValue = "";
   let bindingSource = "store";
-
-  const clearBinding = () => onChanged("");
+  let bindingValue = "";
 
   const bind = (path, fallback, source) => {
     if (!path) {
-      clearBinding("");
+      onChanged(fallback);
       return;
     }
     const binding = setBinding({ path, fallback, source });
@@ -34,14 +33,11 @@
 
   $: {
     const binding = getBinding(value);
-    if (bindingPath !== binding.path) isOpen = false; 
+    if (bindingPath !== binding.path) isOpen = false;
     bindingPath = binding.path;
-    bindingFallbackValue = binding.fallback
-      ? binding.fallback
-      : typeof value === "object"
-      ? ""
-      : value;
-    
+    bindingValue = typeof value === "object" ? "" : value;
+    bindingFallbackValue = binding.fallback || bindingValue;
+
     const currentScreen = $store.screens.find(
       ({ name }) => name === $store.currentPreviewItem.name
     );
@@ -52,8 +48,9 @@
 <div class="cascader">
   <div class="input-box">
     <input
+      class:bold={!bindingFallbackValue && bindingPath}
       class="uk-input uk-form-small"
-      value={bindingFallbackValue}
+      value={bindingFallbackValue || bindingPath}
       on:change={e => {
         setBindingFallback(e.target.value);
         onChanged(e.target.value);
@@ -61,10 +58,8 @@
     <button on:click={() => (isOpen = !isOpen)}>
       <div
         class="icon"
-        style={`
-        transform: rotate(${isOpen ? 0 : 90}deg);
-        color: ${bindingPath ? 'rgba(0, 85, 255, 0.8);' : 'inherit;'}
-      `}>
+        class:highlighted={bindingPath}
+        style={`transform: rotate(${isOpen ? 0 : 90}deg);`}>
         <ArrowDownIcon size={36} />
       </div>
     </button>
@@ -73,7 +68,7 @@
     <ul class="options">
       {#each Object.keys(stateBindings) as stateBinding}
         <li
-          style={stateBinding === bindingPath && 'font-weight: bold;'}
+          class:bold={stateBinding === bindingPath}
           on:click={() => {
             setBindingPath(stateBinding === bindingPath ? null : stateBinding);
           }}>
@@ -85,6 +80,14 @@
 </div>
 
 <style>
+  .bold {
+    font-weight: bold;
+  }
+
+  .highlighted {
+    color: rgba(0, 85, 255, 0.8);
+  }
+
   button {
     cursor: pointer;
     outline: none;