From e48be7a109d59b86d51d526123f65bd0efdc3838 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Tue, 8 Dec 2020 18:57:19 +0000
Subject: [PATCH] further tidy up

---
 .../ScreenDropdownMenu.svelte                 | 13 ++--
 .../userInterface/DesignView.svelte           |  7 +-
 .../userInterface/FlatButtonGroup.svelte      |  1 +
 .../userInterface/LayoutsList.svelte          | 64 -------------------
 .../userInterface/PropertyControl.svelte      | 12 ++--
 5 files changed, 16 insertions(+), 81 deletions(-)
 delete mode 100644 packages/builder/src/components/userInterface/LayoutsList.svelte

diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/ScreenDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentNavigationTree/ScreenDropdownMenu.svelte
index 9ccf6926fd..1e7a64b0c0 100644
--- a/packages/builder/src/components/userInterface/ComponentNavigationTree/ScreenDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ComponentNavigationTree/ScreenDropdownMenu.svelte
@@ -15,10 +15,15 @@
   $: screen = $allScreens.find(screen => screen._id === screenId)
 
   const deleteScreen = () => {
-    store.actions.screens.delete(screen)
-    store.actions.routing.fetch()
-    confirmDeleteDialog.hide()
-    $goto("../")
+    try {
+      store.actions.screens.delete(screen)
+      store.actions.routing.fetch()
+      confirmDeleteDialog.hide()
+      $goto("../")
+      notifier.success("Deleted screen successfully.")
+    } catch (err) {
+      notifier.danger("Error deleting screen")
+    }
   }
 </script>
 
diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte
index cbb532fcae..66ec1a2676 100644
--- a/packages/builder/src/components/userInterface/DesignView.svelte
+++ b/packages/builder/src/components/userInterface/DesignView.svelte
@@ -12,8 +12,6 @@
   let propGroup = null
   let currentGroup
 
-  const getProperties = name => panelDefinition[name]
-
   function onChange(category) {
     selectedCategory = category
   }
@@ -38,7 +36,7 @@
         {#each propertyGroupNames as groupName}
           <PropertyGroup
             name={groupName}
-            properties={getProperties(groupName)}
+            properties={panelDefinition[groupName]}
             styleCategory={selectedCategory}
             {onStyleChanged}
             {componentDefinition}
@@ -64,9 +62,6 @@
     gap: var(--spacing-l);
   }
 
-  .design-view-state-categories {
-  }
-
   .positioned-wrapper {
     position: relative;
     display: flex;
diff --git a/packages/builder/src/components/userInterface/FlatButtonGroup.svelte b/packages/builder/src/components/userInterface/FlatButtonGroup.svelte
index 6789ada5aa..f8c5f5cf48 100644
--- a/packages/builder/src/components/userInterface/FlatButtonGroup.svelte
+++ b/packages/builder/src/components/userInterface/FlatButtonGroup.svelte
@@ -1,6 +1,7 @@
 <script>
   import { onMount } from "svelte"
   import FlatButton from "./FlatButton.svelte"
+
   export let buttonProps = []
   export let isMultiSelect = false
   export let value = []
diff --git a/packages/builder/src/components/userInterface/LayoutsList.svelte b/packages/builder/src/components/userInterface/LayoutsList.svelte
deleted file mode 100644
index 9ba562f81c..0000000000
--- a/packages/builder/src/components/userInterface/LayoutsList.svelte
+++ /dev/null
@@ -1,64 +0,0 @@
-<script>
-  import { params, goto } from "@sveltech/routify"
-  import { store } from "builderStore"
-
-  const layouts = [
-    {
-      title: "Private",
-      id: "main",
-    },
-    {
-      title: "Public",
-      id: "unauthenticated",
-    },
-  ]
-
-  if (!$store.currentAssetId) {
-    // refactor so the right layout is chosen
-    store.actions.layouts.select($params.layout)
-  }
-
-  const changeLayout = id => {
-    store.actions.layouts.select(id)
-    $goto(`./${id}/layout`)
-  }
-</script>
-
-<div class="root">
-  {#each layouts as { title, id }}
-    <button
-      class:active={id === $params.layout}
-      on:click={() => changeLayout(id)}>
-      {title}
-    </button>
-  {/each}
-</div>
-
-<style>
-  .root {
-    display: flex;
-    flex-direction: row;
-  }
-
-  button {
-    cursor: pointer;
-    padding: 0 var(--spacing-m);
-    height: 32px;
-    text-align: center;
-    background: var(--background);
-    color: var(--grey-7);
-    border-radius: 5px;
-    font-size: var(--font-size-xs);
-    font-weight: 500;
-    transition: all 0.3s;
-    text-rendering: optimizeLegibility;
-    border: none !important;
-    outline: none;
-    font-family: var(--font-sans);
-  }
-
-  .active {
-    background: var(--grey-2);
-    color: var(--ink);
-  }
-</style>
diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index fa19d9cfd6..44e98ad7d9 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -22,16 +22,14 @@
   export let onChange = () => {}
 
   let temporaryBindableValue = value
+  let bindableProperties = []
+  let anchor
+  let dropdown
 
   function handleClose() {
     handleChange(key, temporaryBindableValue)
   }
 
-  let bindableProperties = []
-
-  let anchor
-  let dropdown
-
   function getBindableProperties() {
     // Get all bindableProperties
     bindableProperties = fetchBindableProperties({
@@ -77,7 +75,7 @@
       : temp
   }
 
-  //Incase the component has a different value key name
+  // Incase the component has a different value key name
   const handlevalueKey = value =>
     props.valueKey ? { [props.valueKey]: safeValue() } : { value: safeValue() }
 </script>
@@ -94,7 +92,7 @@
       {...props}
       name={key} />
   </div>
-  {#if bindable && control === Input && !key.startsWith('_')}
+  {#if bindable && !key.startsWith('_') && control === Input}
     <div
       class="icon"
       data-cy={`${key}-binding-button`}