Add the Help > About Graphite dialog with build info

Closes #404

editor/src/document/document_message_handler.rs

@@ -25,6 +25,7 @@ pub enum DocumentsMessage {
 	CloseActiveDocumentWithConfirmation,
 	CloseAllDocumentsWithConfirmation,
 	CloseAllDocuments,
+	RequestAboutGraphiteDialog,
 	NewDocument,
 	OpenDocument,
 	OpenDocumentFile(String, String),
@@ -124,6 +125,9 @@ impl MessageHandler<DocumentsMessage, &InputPreprocessor> for DocumentsMessageHa
 		use DocumentMessage::*;
 		use DocumentsMessage::*;
 		match message {
+			RequestAboutGraphiteDialog => {
+				responses.push_back(FrontendMessage::DisplayAboutGraphiteDialog.into());
+			}
 			Document(message) => self.active_document_mut().process_action(message, ipp, responses),
 			SelectDocument(index) => {
 				// NOTE: Potentially this will break if we ever exceed 56 bit values due to how the message parsing system works.

editor/src/frontend/frontend_message_handler.rs

@@ -15,6 +15,7 @@ pub enum FrontendMessage {
 	DisplayPanic { panic_info: String, title: String, description: String },
 	DisplayConfirmationToCloseDocument { document_index: usize },
 	DisplayConfirmationToCloseAllDocuments,
+	DisplayAboutGraphiteDialog,
 	UpdateLayer { data: LayerPanelEntry },
 	UpdateCanvas { document: String },
 	UpdateScrollbars { position: (f64, f64), size: (f64, f64), multiplier: (f64, f64) },
@@ -22,8 +23,6 @@ pub enum FrontendMessage {
 	ExportDocument { document: String, name: String },
 	SaveDocument { document: String, name: String },
 	OpenDocumentBrowse,
-	EnableTextInput,
-	DisableTextInput,
 	UpdateWorkingColors { primary: Color, secondary: Color },
 	SetCanvasZoom { new_zoom: f64 },
 	SetCanvasRotation { new_radians: f64 },

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;
 }

frontend/tsconfig.json

@@ -12,7 +12,9 @@
 		"allowSyntheticDefaultImports": true,
 		"sourceMap": true,
 		"baseUrl": ".",
-		"types": [],
+		"types": [
+			"node"
+		],
 		"paths": {
 			"@/*": [
 				"src/*"

frontend/vue.config.js

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires, no-console */
 const path = require("path");
-const { spawnSync } = require("child_process");
+const { execSync, spawnSync } = require("child_process");
 
 const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
 const LicenseCheckerWebpackPlugin = require("license-checker-webpack-plugin");
@@ -34,6 +34,11 @@ function generateRustLicenses() {
 	return eval(stdout);
 }
 
+process.env.VUE_APP_COMMIT_DATE = execSync("git log -1 --format=%cd", { encoding: "utf-8" }).trim();
+process.env.VUE_APP_COMMIT_HASH = execSync("git rev-parse HEAD", { encoding: "utf-8" }).trim();
+process.env.VUE_APP_COMMIT_BRANCH = execSync("git rev-parse --abbrev-ref HEAD", { encoding: "utf-8" }).trim();
+process.env.VUE_APP_RELEASE_SERIES = "Pre-Alpha";
+
 module.exports = {
 	lintOnSave: "warning",
 	// https://cli.vuejs.org/guide/webpack.html

frontend/wasm/src/api.rs

@@ -140,6 +140,12 @@ pub fn close_all_documents_with_confirmation() {
 	dispatch(message);
 }
 
+#[wasm_bindgen]
+pub fn request_about_graphite_dialog() {
+	let message = DocumentsMessage::RequestAboutGraphiteDialog;
+	dispatch(message);
+}
+
 /// Send new bounds when document panel viewports get resized or moved within the editor
 /// [left, top, right, bottom]...
 #[wasm_bindgen]