Merge pull request #8714 from Budibase/feature/delete-and-duplicate-component-actions

Show settings bar for all components

packages/client/manifest.json

@@ -84,7 +84,6 @@
     "description": "This component contains things within itself",
     "icon": "Selection",
     "hasChildren": true,
-    "showSettingsBar": true,
     "size": {
       "width": 400,
       "height": 200
@@ -283,7 +282,6 @@
     "description": "A basic html button that is ready for styling",
     "icon": "Button",
     "editable": true,
-    "showSettingsBar": true,
     "size": {
       "width": 105,
       "height": 35
@@ -420,7 +418,6 @@
       "section"
     ],
     "hasChildren": true,
-    "showSettingsBar": true,
     "size": {
       "width": 400,
       "height": 100
@@ -683,7 +680,6 @@
     "illegalChildren": [
       "section"
     ],
-    "showSettingsBar": true,
     "editable": true,
     "size": {
       "width": 400,
@@ -809,7 +805,6 @@
     "illegalChildren": [
       "section"
     ],
-    "showSettingsBar": true,
     "editable": true,
     "size": {
       "width": 400,
@@ -931,7 +926,6 @@
   "tag": {
     "name": "Tag",
     "icon": "Label",
-    "showSettingsBar": true,
     "size": {
       "width": 100,
       "height": 25
@@ -1189,7 +1183,6 @@
     "name": "Link",
     "description": "A basic link component for internal and external links",
     "icon": "Link",
-    "showSettingsBar": true,
     "editable": true,
     "size": {
       "width": 200,
@@ -3927,7 +3920,6 @@
   "dynamicfilter": {
     "name": "Dynamic Filter",
     "icon": "Filter",
-    "showSettingsBar": true,
     "size": {
       "width": 100,
       "height": 35
@@ -4797,7 +4789,6 @@
       "section"
     ],
     "hasChildren": true,
-    "showSettingsBar": true,
     "size": {
       "width": 400,
       "height": 100
@@ -5270,4 +5261,4 @@
       "suffix": "repeater"
     }
   }
-}
+}

packages/client/src/components/preview/SettingsBar.svelte

@@ -16,13 +16,16 @@
   let measured = false
 
   $: definition = $componentStore.selectedComponentDefinition
-  $: showBar = definition?.showSettingsBar && !$dndIsDragging
+  $: showBar =
+    definition?.showSettingsBar !== false && !$dndIsDragging && definition
   $: {
     if (!showBar) {
       measured = false
     }
   }
   $: settings = getBarSettings(definition)
+  $: isScreen =
+    $builderStore.selectedComponentId === $builderStore.screen?.props?._id
 
   const getBarSettings = definition => {
     let allSettings = []
@@ -152,26 +155,30 @@
       {:else if setting.type === "color"}
         <SettingsColorPicker prop={setting.key} />
       {/if}
-      {#if setting.barSeparator !== false}
+      {#if setting.barSeparator !== false && (settings.length != idx + 1 || !isScreen)}
         <div class="divider" />
       {/if}
     {/each}
-    <SettingsButton
+    {#if !isScreen}
-      icon="Duplicate"
+      <SettingsButton
-      on:click={() => {
+        icon="Duplicate"
-        builderStore.actions.duplicateComponent(
+        on:click={() => {
-          $builderStore.selectedComponentId
+          builderStore.actions.duplicateComponent(
-        )
+            $builderStore.selectedComponentId
-      }}
+          )
-      title="Duplicate component"
+        }}
-    />
+        title="Duplicate component"
-    <SettingsButton
+      />
-      icon="Delete"
+      <SettingsButton
-      on:click={() => {
+        icon="Delete"
-        builderStore.actions.deleteComponent($builderStore.selectedComponentId)
+        on:click={() => {
-      }}
+          builderStore.actions.deleteComponent(
-      title="Delete component"
+            $builderStore.selectedComponentId
-    />
+          )
+        }}
+        title="Delete component"
+      />
+    {/if}
   </div>
 {/if}