From a7395a40cfd8a14a3abf9348850b436695046a94 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 13 May 2022 12:05:55 +0100
Subject: [PATCH] Allow pasting inside screens on screens tab and fix icon
 overflow in nav items

---
 .../builder/src/components/common/NavItem.svelte |  9 +++++----
 .../_components/ScreenDropdownMenu.svelte        | 16 ++++++++++++++++
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte
index 8f9813c9af..e7b9b33471 100644
--- a/packages/builder/src/components/common/NavItem.svelte
+++ b/packages/builder/src/components/common/NavItem.svelte
@@ -135,8 +135,12 @@
     padding-left: var(--spacing-l);
   }
 
+  /* Needed to fully display the actions icon */
+  .nav-item.scrollable .nav-item-content {
+    padding-right: 1px;
+  }
+
   .icon {
-    font-size: 16px;
     flex: 0 0 24px;
     display: flex;
     flex-direction: row;
@@ -164,9 +168,6 @@
   .icon.arrow.opened {
     transform: rotate(90deg);
   }
-  .icon + .icon {
-    /*margin-left: -4px;*/
-  }
   .iconText {
     margin-top: 1px;
     font-size: var(--spectrum-global-dimension-font-size-50);
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDropdownMenu.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDropdownMenu.svelte
index d99b72beef..2f14766d8e 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDropdownMenu.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDropdownMenu.svelte
@@ -21,6 +21,15 @@
   let screenDetailsModal
 
   $: screen = $store.screens.find(screen => screen._id === screenId)
+  $: noPaste = !$store.componentToPaste
+
+  const pasteComponent = mode => {
+    try {
+      store.actions.components.paste(screen.props, mode)
+    } catch (error) {
+      notifications.error("Error saving component")
+    }
+  }
 
   const duplicateScreen = () => {
     screenDetailsModal.show()
@@ -69,6 +78,13 @@
   <div slot="control" class="icon">
     <Icon size="S" hoverable name="MoreSmallList" />
   </div>
+  <MenuItem
+    icon="ShowOneLayer"
+    on:click={() => pasteComponent("inside")}
+    disabled={noPaste}
+  >
+    Paste inside
+  </MenuItem>
   <MenuItem icon="Duplicate" on:click={duplicateScreen}>Duplicate</MenuItem>
   <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
 </ActionMenu>