Implement menu bar floating list menus (#163)

Progress towards #135

client/web/src/components/widgets/inputs/MenuBarInput.vue

@@ -1,11 +1,12 @@
 <template>
 	<div class="menu-bar-input">
-		<div class="entry"><Icon :icon="'GraphiteLogo'" /></div>
-		<div class="entry"><span>File</span></div>
-		<div class="entry"><span>Edit</span></div>
-		<div class="entry"><span>Document</span></div>
-		<div class="entry"><span>View</span></div>
-		<div class="entry"><span>Help</span></div>
+		<div class="entry-container" v-for="entry in menuEntries" :key="entry">
+			<div @click="handleEntryClick(entry)" class="entry" :class="{ open: entry.ref && entry.ref.isOpen() }" data-hover-menu-spawner>
+				<Icon :icon="entry.icon" v-if="entry.icon" />
+				<span v-if="entry.label">{{ entry.label }}</span>
+			</div>
+			<MenuList :menuEntries="entry.children" :direction="MenuDirection.Bottom" :ref="(ref) => setEntryRefs(entry, ref)" />
+		</div>
 	</div>
 </template>
 
@@ -13,25 +14,31 @@
 .menu-bar-input {
 	display: flex;
 
-	.entry {
+	.entry-container {
 		display: flex;
-		align-items: center;
-		white-space: nowrap;
-		padding: 0 8px;
+		position: relative;
 
-		svg {
-			fill: var(--color-e-nearwhite);
-		}
-
-		&:hover {
-			background: var(--color-6-lowergray);
+		.entry {
+			display: flex;
+			align-items: center;
+			white-space: nowrap;
+			padding: 0 8px;
 
 			svg {
-				fill: var(--color-f-white);
+				fill: var(--color-e-nearwhite);
 			}
 
-			span {
-				color: var(--color-f-white);
+			&:hover,
+			&.open {
+				background: var(--color-6-lowergray);
+
+				svg {
+					fill: var(--color-f-white);
+				}
+
+				span {
+					color: var(--color-f-white);
+				}
 			}
 		}
 	}
@@ -42,13 +49,108 @@
 import { defineComponent } from "vue";
 import Icon from "../labels/Icon.vue";
 import { ApplicationPlatform } from "../../window/MainWindow.vue";
+import MenuList, { MenuListEntry, MenuListEntries } from "../floating-menus/MenuList.vue";
+import { MenuDirection } from "../floating-menus/FloatingMenu.vue";
+
+const wasm = import("../../../../wasm/pkg");
+
+const menuEntries: MenuListEntries = [
+	{
+		icon: "GraphiteLogo",
+		ref: undefined,
+		children: [[{ label: "Visit project GitHub…", action: () => window.open("https://github.com/GraphiteEditor/Graphite", "_blank") }]],
+	},
+	{
+		label: "File",
+		ref: undefined,
+		children: [
+			[
+				{ label: "New", icon: "FileNew", shortcut: ["Ctrl", "N"] },
+				{ label: "Open…", shortcut: ["Ctrl", "O"] },
+				{
+					label: "Open Recent",
+					shortcut: ["Ctrl", "⇧", "O"],
+					children: [
+						[{ label: "Reopen Last Closed", shortcut: ["Ctrl", "⇧", "T"] }, { label: "Clear Recently Opened" }],
+						[
+							{ label: "Some Recent File.gdd" },
+							{ label: "Another Recent File.gdd" },
+							{ label: "An Older File.gdd" },
+							{ label: "Some Other Older File.gdd" },
+							{ label: "Yet Another Older File.gdd" },
+						],
+					],
+				},
+			],
+			[
+				{ label: "Close", shortcut: ["Ctrl", "W"] },
+				{ label: "Close All", shortcut: ["Ctrl", "Alt", "W"] },
+			],
+			[
+				{ label: "Save", shortcut: ["Ctrl", "S"] },
+				{ label: "Save As…", shortcut: ["Ctrl", "⇧", "S"] },
+				{ label: "Save All", shortcut: ["Ctrl", "Alt", "S"] },
+				{ label: "Auto-Save", shortcut: undefined },
+			],
+			[
+				{ label: "Import…", shortcut: ["Ctrl", "I"] },
+				{ label: "Export…", shortcut: ["Ctrl", "E"] },
+			],
+			[{ label: "Quit", shortcut: ["Ctrl", "Q"] }],
+		],
+	},
+	{
+		label: "Edit",
+		ref: undefined,
+		children: [
+			[
+				{ label: "Undo", shortcut: ["Ctrl", "Z"], action: async () => (await wasm).undo()},
+				{ label: "Redo", shortcut: ["Ctrl", "⇧", "Z"] },
+			],
+			[
+				{ label: "Cut", shortcut: ["Ctrl", "X"] },
+				{ label: "Copy", shortcut: ["Ctrl", "C"] },
+				{ label: "Paste", shortcut: ["Ctrl", "V"] },
+			],
+		],
+	},
+	{
+		label: "Document",
+		ref: undefined,
+		children: [[{ label: "Menu not yet populated" }]],
+	},
+	{
+		label: "View",
+		ref: undefined,
+		children: [[{ label: "Menu not yet populated" }]],
+	},
+	{
+		label: "Help",
+		ref: undefined,
+		children: [[{ label: "Menu not yet populated" }]],
+	},
+];
 
 export default defineComponent({
-	components: { Icon },
+	methods: {
+		setEntryRefs(menuEntry: MenuListEntry, ref: typeof MenuList) {
+			if (ref) menuEntry.ref = ref;
+		},
+		handleEntryClick(menuEntry: MenuListEntry) {
+			if (menuEntry.ref) menuEntry.ref.setOpen();
+			else throw new Error("The menu bar floating menu has no associated ref");
+		},
+	},
 	data() {
 		return {
 			ApplicationPlatform,
+			menuEntries,
+			MenuDirection,
 		};
 	},
+	components: {
+		Icon,
+		MenuList,
+	},
 });
 </script>

client/web/src/components/widgets/inputs/SwatchPairInput.vue

@@ -1,13 +1,13 @@
 <template>
 	<div class="swatch-pair">
 		<div class="secondary swatch">
-			<button @click="clickSecondarySwatch" ref="secondaryButton"></button>
+			<button @click="clickSecondarySwatch" ref="secondaryButton" data-hover-menu-spawner></button>
 			<FloatingMenu :type="MenuType.Popover" :direction="MenuDirection.Right" horizontal ref="secondarySwatchFloatingMenu">
 				<ColorPicker v-model:color="secondaryColor" />
 			</FloatingMenu>
 		</div>
 		<div class="primary swatch">
-			<button @click="clickPrimarySwatch" ref="primaryButton"></button>
+			<button @click="clickPrimarySwatch" ref="primaryButton" data-hover-menu-spawner></button>
 			<FloatingMenu :type="MenuType.Popover" :direction="MenuDirection.Right" horizontal ref="primarySwatchFloatingMenu">
 				<ColorPicker v-model:color="primaryColor" />
 			</FloatingMenu>