From 765b648704ae696bbca81e9e70e488b9131998b2 Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Mon, 8 Aug 2022 01:29:23 -0700
Subject: [PATCH] Extend welcome screen button click area to labels

Closes #738
---
 .../utility_types/widgets/button_widgets.rs   |  2 +
 .../components/floating-menus/MenuList.vue    |  1 -
 .../components/widgets/buttons/TextButton.ts  |  1 +
 .../components/widgets/buttons/TextButton.vue | 16 ++++-
 .../widgets/inputs/MenuBarInput.vue           |  9 ++-
 .../widgets/labels/UserInputLabel.vue         | 12 ++--
 .../window/status-bar/StatusBar.vue           |  8 ++-
 .../src/components/window/workspace/Panel.vue | 72 +++++++++----------
 frontend/src/wasm-communication/messages.ts   |  2 +
 frontend/wasm/src/lib.rs                      |  2 +
 10 files changed, 78 insertions(+), 47 deletions(-)

diff --git a/editor/src/messages/layout/utility_types/widgets/button_widgets.rs b/editor/src/messages/layout/utility_types/widgets/button_widgets.rs
index 97b949e6..be494094 100644
--- a/editor/src/messages/layout/utility_types/widgets/button_widgets.rs
+++ b/editor/src/messages/layout/utility_types/widgets/button_widgets.rs
@@ -41,6 +41,8 @@ pub struct PopoverButton {
 pub struct TextButton {
 	pub label: String,
 
+	pub icon: Option<String>,
+
 	pub emphasized: bool,
 
 	#[serde(rename = "minWidth")]
diff --git a/frontend/src/components/floating-menus/MenuList.vue b/frontend/src/components/floating-menus/MenuList.vue
index 26479260..a0b5cdd7 100644
--- a/frontend/src/components/floating-menus/MenuList.vue
+++ b/frontend/src/components/floating-menus/MenuList.vue
@@ -105,7 +105,6 @@
 			}
 
 			.user-input-label {
-				margin: 0;
 				margin-left: 16px;
 			}
 
diff --git a/frontend/src/components/widgets/buttons/TextButton.ts b/frontend/src/components/widgets/buttons/TextButton.ts
index a7254059..22b33540 100644
--- a/frontend/src/components/widgets/buttons/TextButton.ts
+++ b/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;
diff --git a/frontend/src/components/widgets/buttons/TextButton.vue b/frontend/src/components/widgets/buttons/TextButton.vue
index 3acd251f..368c84a7 100644
--- a/frontend/src/components/widgets/buttons/TextButton.vue
+++ b/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>
diff --git a/frontend/src/components/widgets/inputs/MenuBarInput.vue b/frontend/src/components/widgets/inputs/MenuBarInput.vue
index 42b255fe..39e2feae 100644
--- a/frontend/src/components/widgets/inputs/MenuBarInput.vue
+++ b/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 = {
diff --git a/frontend/src/components/widgets/labels/UserInputLabel.vue b/frontend/src/components/widgets/labels/UserInputLabel.vue
index 87ba1bc6..07ff2034 100644
--- a/frontend/src/components/widgets/labels/UserInputLabel.vue
+++ b/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;
diff --git a/frontend/src/components/window/status-bar/StatusBar.vue b/frontend/src/components/window/status-bar/StatusBar.vue
index fa054199..afaf1cb3 100644
--- a/frontend/src/components/window/status-bar/StatusBar.vue
+++ b/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;
+			}
 		}
 	}
 }
diff --git a/frontend/src/components/window/workspace/Panel.vue b/frontend/src/components/window/workspace/Panel.vue
index cd989a0d..f826dc51 100644
--- a/frontend/src/components/window/workspace/Panel.vue
+++ b/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,
 	},
 });
diff --git a/frontend/src/wasm-communication/messages.ts b/frontend/src/wasm-communication/messages.ts
index d90636e2..a0271778 100644
--- a/frontend/src/wasm-communication/messages.ts
+++ b/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;
diff --git a/frontend/wasm/src/lib.rs b/frontend/wasm/src/lib.rs
index 61741b8c..9ec8f597 100644
--- a/frontend/wasm/src/lib.rs
+++ b/frontend/wasm/src/lib.rs
@@ -1,3 +1,5 @@
+#![doc = include_str!("../README.md")]
+
 pub mod editor_api;
 pub mod helpers;