Extend welcome screen button click area to labels

Closes #738

frontend/src/components/floating-menus/MenuList.vue

@@ -105,7 +105,6 @@
 			}
 
 			.user-input-label {
-				margin: 0;
 				margin-left: 16px;
 			}
 

frontend/src/components/widgets/buttons/TextButton.ts

@@ -7,6 +7,7 @@ export interface TextButtonWidget {
 	props: {
 		kind: "TextButton";
 		label: string;
+		icon?: string;
 		emphasized?: boolean;
 		minWidth?: number;
 		disabled?: boolean;

frontend/src/components/widgets/buttons/TextButton.vue

@@ -8,12 +8,14 @@
 		:style="minWidth > 0 ? `min-width: ${minWidth}px` : ''"
 		@click="(e: MouseEvent) => action(e)"
 	>
+		<IconLabel v-if="icon" :icon="icon" />
 		<TextLabel>{{ label }}</TextLabel>
 	</button>
 </template>
 
 <style lang="scss">
 .text-button {
+	display: flex;
 	justify-content: center;
 	align-items: center;
 	flex: 0 0 auto;
@@ -52,17 +54,26 @@
 	& + .text-button {
 		margin-left: 8px;
 	}
+
+	.icon-label {
+		position: relative;
+		left: -4px;
+	}
 }
 </style>
 
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
+import { IconName } from "@/utility-functions/icons";
+
+import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 import TextLabel from "@/components/widgets/labels/TextLabel.vue";
 
 export default defineComponent({
 	props: {
 		label: { type: String as PropType<string>, required: true },
+		icon: { type: String as PropType<IconName | undefined>, required: false },
 		emphasized: { type: Boolean as PropType<boolean>, default: false },
 		minWidth: { type: Number as PropType<number>, default: 0 },
 		disabled: { type: Boolean as PropType<boolean>, default: false },
@@ -70,6 +81,9 @@ export default defineComponent({
 		// Callbacks
 		action: { type: Function as PropType<(e: MouseEvent) => void>, required: true },
 	},
-	components: { TextLabel },
+	components: {
+		IconLabel,
+		TextLabel,
+	},
 });
 </script>

frontend/src/components/widgets/inputs/MenuBarInput.vue

@@ -72,15 +72,18 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
+import { operatingSystemIsMac } from "@/utility-functions/platform";
 import { MenuEntry, UpdateMenuBarLayout, MenuListEntry } from "@/wasm-communication/messages";
 
 import MenuList from "@/components/floating-menus/MenuList.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
+// TODO: Apparently, Safari does not support the Keyboard.lock() API but does relax its authority over certain keyboard shortcuts in fullscreen mode, which we should handle correctly
+const controlOrCommand = operatingSystemIsMac() ? "KeyCommand" : "KeyControl";
 const LOCK_REQUIRING_SHORTCUTS = [
-	["KeyControl", "KeyN"],
-	["KeyControl", "KeyShift", "KeyT"],
-	["KeyControl", "KeyW"],
+	[controlOrCommand, "KeyN"],
+	[controlOrCommand, "KeyShift", "KeyT"],
+	[controlOrCommand, "KeyW"],
 ];
 
 type FrontendMenuColumn = {

frontend/src/components/widgets/labels/UserInputLabel.vue

@@ -23,7 +23,6 @@
 .user-input-label {
 	flex: 0 0 auto;
 	height: 100%;
-	margin: 0 8px;
 	align-items: center;
 	white-space: nowrap;
 
@@ -188,10 +187,15 @@ export default defineComponent({
 			return Boolean(this.$slots.default);
 		},
 		keyboardLockInfoMessage(): string {
-			const USE_FULLSCREEN = "This hotkey is reserved by the browser, but becomes available in fullscreen mode";
-			const SWITCH_BROWSER = "This hotkey is reserved by the browser, but becomes available in Chrome, Edge, and Opera which support the Keyboard.lock() API";
+			const RESERVED = "This hotkey is reserved by the browser. ";
+			const USE_FULLSCREEN = "It is made available in fullscreen mode.";
+			const USE_SECURE_CTX = "It is made available in fullscreen mode when this website is served from a secure context (https or localhost).";
+			const SWITCH_BROWSER = "Use a Chromium-based browser (like Chrome or Edge) in fullscreen mode to directly use the shortcut.";
 
-			return this.fullscreen.keyboardLockApiSupported ? USE_FULLSCREEN : SWITCH_BROWSER;
+			if (this.fullscreen.keyboardLockApiSupported) return `${RESERVED} ${USE_FULLSCREEN}`;
+			if (!("chrome" in window)) return `${RESERVED} ${SWITCH_BROWSER}`;
+			if (!window.isSecureContext) return `${RESERVED} ${USE_SECURE_CTX}`;
+			return RESERVED;
 		},
 		displayKeyboardLockNotice(): boolean {
 			return this.requiresLock && !this.fullscreen.state.keyboardLocked;

frontend/src/components/window/status-bar/StatusBar.vue

@@ -34,8 +34,12 @@
 			font-weight: 700;
 		}
 
-		.user-input-label + .user-input-label {
-			margin-left: 0;
+		.user-input-label {
+			margin: 0 8px;
+
+			& + .user-input-label {
+				margin-left: 0;
+			}
 		}
 	}
 }

frontend/src/components/window/workspace/Panel.vue

@@ -28,26 +28,24 @@
 						<IconLabel :icon="'GraphiteLogotypeSolid'" />
 					</LayoutRow>
 					<LayoutRow class="actions">
-						<LayoutCol>
-							<IconButton :action="() => newDocument()" :icon="'File'" :size="24" />
-							<IconButton :action="() => openDocument()" :icon="'Folder'" :size="24" />
-						</LayoutCol>
-						<LayoutCol>
-							<Separator :type="'Related'" />
-							<Separator :type="'Related'" />
-						</LayoutCol>
-						<LayoutCol>
-							<TextLabel>New Document:</TextLabel>
-							<TextLabel>Open Document:</TextLabel>
-						</LayoutCol>
-						<LayoutCol>
-							<Separator :type="'Unrelated'" />
-							<Separator :type="'Unrelated'" />
-						</LayoutCol>
-						<LayoutCol>
-							<UserInputLabel :inputKeys="[[controlOrCommandKey(), 'KeyN']]" />
-							<UserInputLabel :inputKeys="[[controlOrCommandKey(), 'KeyO']]" />
-						</LayoutCol>
+						<table>
+							<tr>
+								<td>
+									<TextButton :label="'New Document:'" :icon="'File'" :action="() => newDocument()" />
+								</td>
+								<td>
+									<UserInputLabel :inputKeys="[[...platformModifiers(true), 'KeyN']]" />
+								</td>
+							</tr>
+							<tr>
+								<td>
+									<TextButton :label="'Open Document:'" :icon="'Folder'" :action="() => openDocument()" />
+								</td>
+								<td>
+									<UserInputLabel :inputKeys="[[...platformModifiers(false), 'KeyO']]" />
+								</td>
+							</tr>
+						</table>
 					</LayoutRow>
 				</LayoutCol>
 			</LayoutCol>
@@ -191,19 +189,16 @@
 				}
 
 				.actions {
-					> div {
-						gap: 8px;
+					table {
+						border-spacing: 8px;
+						margin: -8px;
 
-						> * {
-							height: 24px;
+						td {
+							padding: 0;
 						}
 
-						.text-label {
-							line-height: 24px;
-						}
-
-						.user-input-label {
-							margin: 0;
+						.text-button:not(:hover) {
+							background: none;
 						}
 					}
 				}
@@ -226,18 +221,19 @@ import NodeGraph from "@/components/panels/NodeGraph.vue";
 import Properties from "@/components/panels/Properties.vue";
 import IconButton from "@/components/widgets/buttons/IconButton.vue";
 import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
+import TextButton from "@/components/widgets/buttons/TextButton.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
-import Separator from "@/components/widgets/labels/Separator.vue";
 import TextLabel from "@/components/widgets/labels/TextLabel.vue";
 import UserInputLabel from "@/components/widgets/labels/UserInputLabel.vue";
 
 const panelComponents = {
 	Document,
-	Properties,
+	IconButton,
 	LayerTree,
 	NodeGraph,
-	IconButton,
 	PopoverButton,
+	Properties,
+	TextButton,
 };
 type PanelTypes = keyof typeof panelComponents;
 
@@ -259,9 +255,14 @@ export default defineComponent({
 		openDocument() {
 			this.editor.instance.document_open();
 		},
-		controlOrCommandKey() {
+		platformModifiers(reservedKey: boolean) {
 			// TODO: Remove this by properly feeding these keys from a layout provided by the backend
-			return operatingSystemIsMac() ? "KeyCommand" : "KeyControl";
+
+			if (operatingSystemIsMac()) {
+				return reservedKey ? ["KeyControl", "KeyCommand"] : ["KeyCommand"]; // TODO: Change Mac from Control+Command to Alt+Command when we can read Alt+letter modifiers
+			}
+
+			return reservedKey ? ["KeyControl", "KeyAlt"] : ["KeyControl"];
 		},
 	},
 	components: {
@@ -270,7 +271,6 @@ export default defineComponent({
 		IconLabel,
 		TextLabel,
 		UserInputLabel,
-		Separator,
 		...panelComponents,
 	},
 });

frontend/src/wasm-communication/messages.ts

@@ -549,6 +549,8 @@ export class TextAreaInput extends WidgetProps {
 export class TextButton extends WidgetProps {
 	label!: string;
 
+	icon!: string | undefined;
+
 	emphasized!: boolean;
 
 	minWidth!: number;