Implement menu bar floating list menus (#163)

Progress towards #135

client/web/src/components/widgets/labels/Icon.vue

@@ -74,6 +74,7 @@ import ViewModePixels from "../../../../assets/16px-solid/view-mode-pixels.svg";
 import EyeVisible from "../../../../assets/16px-solid/visibility-eye-visible.svg";
 import EyeHidden from "../../../../assets/16px-solid/visibility-eye-hidden.svg";
 import GraphiteLogo from "../../../../assets/16px-solid/graphite-logo.svg";
+import FileNew from "../../../../assets/16px-solid/file-new.svg";
 
 import SwapButton from "../../../../assets/12px-solid/swap.svg";
 import ResetColorsButton from "../../../../assets/12px-solid/reset-colors.svg";
@@ -142,6 +143,7 @@ const icons = {
 	EyeVisible: { component: EyeVisible, size: 16 },
 	EyeHidden: { component: EyeHidden, size: 16 },
 	GraphiteLogo: { component: GraphiteLogo, size: 16 },
+	FileNew: { component: FileNew, size: 16 },
 	SwapButton: { component: SwapButton, size: 12 },
 	ResetColorsButton: { component: ResetColorsButton, size: 12 },
 	DropdownArrow: { component: DropdownArrow, size: 12 },

client/web/src/components/widgets/labels/UserInputLabel.vue

@@ -1,12 +1,15 @@
 <template>
 	<div class="user-input-label">
-		<span class="input-key" v-for="inputKey in inputKeys" :key="inputKey" :class="keyCapWidth(inputKey)">
-			{{ inputKey }}
-		</span>
+		<template v-for="(keyGroup, keyGroupIndex) in inputKeys" :key="keyGroupIndex">
+			<span class="group-gap" v-if="keyGroupIndex > 0"></span>
+			<span class="input-key" v-for="inputKey in keyGroup" :key="inputKey" :class="keyCapWidth(inputKey)">
+				{{ inputKey }}
+			</span>
+		</template>
 		<span class="input-mouse" v-if="inputMouse">
 			<Icon :icon="mouseInputInteractionToIcon(inputMouse)" />
 		</span>
-		<span class="hint-text">
+		<span class="hint-text" v-if="hasSlotContent">
 			<slot></slot>
 		</span>
 	</div>
@@ -20,17 +23,22 @@
 	align-items: center;
 	white-space: nowrap;
 
+	.group-gap {
+		width: 4px;
+	}
+
 	.input-key,
 	.input-mouse {
-		margin-right: 4px;
+		& + .input-key,
+		& + .input-mouse {
+			margin-left: 2px;
+		}
 	}
 
 	.input-key {
 		font-family: "Inconsolata", monospace;
-		font-weight: bold;
 		text-align: center;
-		color: var(--color-2-mildblack);
-		background: var(--color-e-nearwhite);
+		color: var(--color-e-nearwhite);
 		border: 1px;
 		box-sizing: border-box;
 		border-style: solid;
@@ -73,6 +81,10 @@
 			vertical-align: top;
 		}
 	}
+
+	.hint-text {
+		margin-left: 4px;
+	}
 }
 </style>
 
@@ -99,6 +111,11 @@ export default defineComponent({
 		inputKeys: { type: Array, default: () => [] },
 		inputMouse: { type: String },
 	},
+	computed: {
+		hasSlotContent(): boolean {
+			return Boolean(this.$slots.default);
+		},
+	},
 	methods: {
 		keyCapWidth(keyText: string) {
 			return `width-${keyText.length * 8 + 8}`;