Add the Help > About Graphite dialog with build info

Closes #404

frontend/src/components/widgets/floating-menus/DialogModal.vue

@@ -9,7 +9,7 @@
 				<LayoutCol :class="'main-column'">
 					<TextLabel :bold="true" :class="'heading'">{{ dialog.heading }}</TextLabel>
 					<TextLabel :class="'details'">{{ dialog.details }}</TextLabel>
-					<LayoutRow :class="'buttons-row'">
+					<LayoutRow :class="'buttons-row'" v-if="dialog.buttons.length > 0">
 						<TextButton v-for="(button, index) in dialog.buttons" :key="index" :title="button.tooltip" :action="button.callback" v-bind="button.props" />
 					</LayoutRow>
 				</LayoutCol>
@@ -57,12 +57,14 @@
 
 	.main-column {
 		.heading {
+			user-select: text;
 			white-space: pre-wrap;
 			max-width: 400px;
 			margin-bottom: 4px;
 		}
 
 		.details {
+			user-select: text;
 			white-space: pre-wrap;
 			max-width: 400px;
 		}

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

@@ -153,14 +153,11 @@ const menuEntries: MenuListEntries = [
 		label: "Help",
 		ref: undefined,
 		children: [
+			[{ label: "About Graphite", action: async () => (await wasm).request_about_graphite_dialog() }],
 			[
 				{ label: "Report a Bug", action: () => window.open("https://github.com/GraphiteEditor/Graphite/issues/new", "_blank") },
 				{ label: "Visit on GitHub", action: () => window.open("https://github.com/GraphiteEditor/Graphite", "_blank") },
 			],
-			[
-				{ label: "Graphite License", action: () => window.open("https://raw.githubusercontent.com/GraphiteEditor/Graphite/master/LICENSE.txt", "_blank") },
-				{ label: "Third-Party Licenses", action: () => window.open("/third-party-licenses.txt", "_blank") },
-			],
 			[{ label: "Debug: Panic (DANGER)", action: async () => (await wasm).intentional_panic() }],
 		],
 	},

frontend/src/components/workspace/Workspace.vue

@@ -55,6 +55,8 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
+import "@/utilities/dialogs";
+
 import Panel from "@/components/workspace/Panel.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import LayoutCol from "@/components/layout/LayoutCol.vue";

frontend/src/main.ts

@@ -1,8 +1,9 @@
-// Allows for runtime reflection of types in javascript.
+// reflect-metadata allows for runtime reflection of types in JavaScript.
 // It is needed for class-transformer to work and is imported as a side effect.
-// The library replaces the Reflect Api on the window to support more features.
+// The library replaces the Reflect API on the window to support more features.
 import "reflect-metadata";
 import { createApp } from "vue";
+
 import { fullscreenModeChanged } from "@/utilities/fullscreen";
 import { onKeyUp, onKeyDown, onMouseMove, onMouseDown, onMouseUp, onMouseScroll, onWindowResize, onBeforeUnload } from "@/utilities/input";
 import "@/utilities/errors";

frontend/src/utilities/dialogs.ts

@@ -0,0 +1,49 @@
+import { subscribeJsMessage } from "@/utilities/js-message-dispatcher";
+import { DisplayAboutGraphiteDialog } from "@/utilities/js-messages";
+import { createDialog } from "@/utilities/dialog";
+import { TextButtonWidget } from "@/components/widgets/widgets";
+
+subscribeJsMessage(DisplayAboutGraphiteDialog, () => {
+	const date = new Date(process.env.VUE_APP_COMMIT_DATE || "");
+	const dateString = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+	const timeString = `${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
+	const timezoneName = Intl.DateTimeFormat(undefined, { timeZoneName: "long" })
+		.formatToParts(new Date())
+		.find((part) => part.type === "timeZoneName");
+	const timezoneNameString = timezoneName && timezoneName.value;
+
+	const hash = (process.env.VUE_APP_COMMIT_HASH || "").substring(0, 12);
+
+	const details = `
+Release Series: ${process.env.VUE_APP_RELEASE_SERIES}
+
+Date: ${dateString} ${timeString} ${timezoneNameString}
+Hash: ${hash}
+Branch: ${process.env.VUE_APP_COMMIT_BRANCH}
+`.trim();
+
+	const buttons: TextButtonWidget[] = [
+		{
+			kind: "TextButton",
+			callback: () => window.open("https://www.graphite.design", "_blank"),
+			props: { label: "Website", emphasized: false, minWidth: 0 },
+		},
+		{
+			kind: "TextButton",
+			callback: () => window.open("https://github.com/GraphiteEditor/Graphite/graphs/contributors", "_blank"),
+			props: { label: "Credits", emphasized: false, minWidth: 0 },
+		},
+		{
+			kind: "TextButton",
+			callback: () => window.open("https://raw.githubusercontent.com/GraphiteEditor/Graphite/master/LICENSE.txt", "_blank"),
+			props: { label: "License", emphasized: false, minWidth: 0 },
+		},
+		{
+			kind: "TextButton",
+			callback: () => window.open("/third-party-licenses.txt", "_blank"),
+			props: { label: "Third-Party Licenses", emphasized: false, minWidth: 0 },
+		},
+	];
+
+	createDialog("GraphiteLogo", "Graphite", details, buttons);
+});

frontend/src/utilities/js-message-dispatcher.ts

@@ -21,6 +21,7 @@ import {
 	UpdateScrollbars,
 	UpdateWorkingColors,
 	UpdateLayer,
+	DisplayAboutGraphiteDialog,
 } from "@/utilities/js-messages";
 
 const messageConstructors = {
@@ -42,6 +43,7 @@ const messageConstructors = {
 	DisplayPanic,
 	DisplayConfirmationToCloseDocument,
 	DisplayConfirmationToCloseAllDocuments,
+	DisplayAboutGraphiteDialog,
 } as const;
 type JsMessageType = keyof typeof messageConstructors;
 

frontend/src/utilities/js-messages.ts

@@ -75,6 +75,8 @@ export class DisplayConfirmationToCloseDocument extends JsMessage {
 
 export class DisplayConfirmationToCloseAllDocuments extends JsMessage {}
 
+export class DisplayAboutGraphiteDialog extends JsMessage {}
+
 export class UpdateCanvas extends JsMessage {
 	readonly document!: string;
 }