From 1a8cc9654a47edfa52d365d316b27eb0da0c5c63 Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Fri, 6 May 2022 12:44:38 -0700
Subject: [PATCH] Move the Layer Tree panel's New Folder and Delete icons into
 the options bar

---
 frontend/src/components/panels/LayerTree.vue | 35 +++++---------------
 1 file changed, 8 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/panels/LayerTree.vue b/frontend/src/components/panels/LayerTree.vue
index 984e6633..783b8e8d 100644
--- a/frontend/src/components/panels/LayerTree.vue
+++ b/frontend/src/components/panels/LayerTree.vue
@@ -21,20 +21,16 @@
 				:disabled="opacityNumberInputDisabled"
 			/>
 
-			<Separator :type="'Related'" />
-
-			<PopoverButton>
+			<!-- <PopoverButton>
 				<h3>Compositing Options</h3>
 				<p>The contents of this popover menu are coming soon</p>
-			</PopoverButton>
-		</LayoutRow>
-		<LayoutRow class="button-bar">
-			<LayoutRow></LayoutRow>
-			<LayoutRow>
-				<!-- TODO: Remember to make these tooltip input hints customized to macOS also -->
-				<IconButton :action="createEmptyFolder" :icon="'NodeFolder'" title="New Folder (Ctrl+Shift+N)" :size="16" />
-				<IconButton :action="deleteSelectedLayers" :icon="'Trash'" title="Delete Selected (Del)" :size="16" />
-			</LayoutRow>
+			</PopoverButton> -->
+
+			<Separator :type="'Section'" />
+
+			<!-- TODO: Remember to make these tooltip input hints customized to macOS also -->
+			<IconButton :action="createEmptyFolder" :icon="'NodeFolder'" title="New Folder (Ctrl+Shift+N)" :size="24" />
+			<IconButton :action="deleteSelectedLayers" :icon="'Trash'" title="Delete Selected (Del)" :size="24" />
 		</LayoutRow>
 		<LayoutRow class="layer-tree" :scrollableY="true">
 			<LayoutCol class="list" ref="layerTreeList" @click="() => deselectAllLayers()" @dragover="(e) => draggable && updateInsertLine(e)" @dragend="() => draggable && drop()">
@@ -121,19 +117,6 @@
 		}
 	}
 
-	.button-bar {
-		height: 24px;
-		flex: 0 0 auto;
-		justify-content: space-between;
-		align-items: center;
-		margin: 0 4px;
-
-		.layout-row {
-			flex: 0 0 auto;
-			gap: 4px;
-		}
-	}
-
 	.layer-tree {
 		margin-top: 4px;
 		// Crop away the 1px border below the bottom layer entry when it uses the full space of this panel
@@ -311,7 +294,6 @@ import { BlendMode, DisplayDocumentLayerTreeStructure, UpdateDocumentLayer, Laye
 import LayoutCol from "@/components/layout/LayoutCol.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import IconButton from "@/components/widgets/buttons/IconButton.vue";
-import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
 import { SectionsOfMenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue";
 import DropdownInput from "@/components/widgets/inputs/DropdownInput.vue";
 import NumberInput from "@/components/widgets/inputs/NumberInput.vue";
@@ -643,7 +625,6 @@ export default defineComponent({
 		LayoutRow,
 		LayoutCol,
 		Separator,
-		PopoverButton,
 		NumberInput,
 		IconButton,
 		IconLabel,