Migrate dialogs to Rust and add a New File dialog (#623)

* Migrate coming soon and about dialog to Rust * Migrate confirm close and close all * Migrate dialog error * Improve keyboard navigation throughout UI * Cleanup and fix panic dialog * Reduce css spacing to better match old dialogs * Add new document modal * Fix crash when generating default name * Populate rust about graphite data on startup * Code review changes * Move one more :focus CSS rule into App.vue * Add a dialog message and move dialogs * Split out keyboard input navigation from this branch * Improvements including simplifying panic dialog code Co-authored-by: Keavon Chambers <keavon@keavon.com>
2026-09-20 03:18:06 +08:00 · 2022-05-07 09:59:52 +01:00
parent 7729b6219e
commit f177f63217
44 changed files with 1017 additions and 390 deletions
--- a/frontend/src/components/panels/Document.vue
+++ b/frontend/src/components/panels/Document.vue
@@ -288,7 +288,8 @@ import {
 	DisplayRemoveEditableTextbox,
 	DisplayEditableTextbox,
 	TriggerFontLoad,
-	TriggerDefaultFontLoad,
+	TriggerFontLoadDefault,
+	TriggerVisitLink,
 } from "@/dispatcher/js-messages";

 import { textInputCleanup } from "@/lifetime/input";
@@ -466,7 +467,10 @@ export default defineComponent({
 			const responseBuffer = await response.arrayBuffer();
 			this.editor.instance.on_font_load(triggerFontLoad.font, new Uint8Array(responseBuffer), false);
 		});
-		this.editor.dispatcher.subscribeJsMessage(TriggerDefaultFontLoad, loadDefaultFont);
+		this.editor.dispatcher.subscribeJsMessage(TriggerFontLoadDefault, loadDefaultFont);
+		this.editor.dispatcher.subscribeJsMessage(TriggerVisitLink, async (triggerOpenLink) => {
+			window.open(triggerOpenLink.url, "_blank");
+		});
 		this.editor.dispatcher.subscribeJsMessage(TriggerTextCopy, (triggerTextCopy) => {
 			// If the Clipboard API is supported in the browser, copy text to the clipboard
 			navigator.clipboard?.writeText?.(triggerTextCopy.copy_text);
@@ -520,10 +524,31 @@ export default defineComponent({
 			});
 		});

+		// Gets metadat populated in `frontend/vue.config.js`. We could potentially move this functionality in a build.rs file.
+		const loadBuildMetadata = (): void => {
+			const release = process.env.VUE_APP_RELEASE_SERIES;
+			let timestamp = "";
+			const hash = (process.env.VUE_APP_COMMIT_HASH || "").substring(0, 8);
+			const branch = process.env.VUE_APP_COMMIT_BRANCH;
+			{
+				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?.value;
+				timestamp = `${dateString} ${timeString} ${timezoneNameString}`;
+			}
+
+			this.editor.instance.populate_build_metadata(release || "", timestamp, hash, branch || "");
+		};
+
 		// TODO(mfish33): Replace with initialization system Issue:#524
 		// Get initial Document Bar
 		this.editor.instance.init_document_bar();
 		setLoadDefaultFontCallback((font: string, data: Uint8Array) => this.editor.instance.on_font_load(font, data, true));
+		loadBuildMetadata();
 	},
 	data() {
 		const documentModeEntries: SectionsOfMenuListEntries = [
--- a/frontend/src/components/panels/LayerTree.vue
+++ b/frontend/src/components/panels/LayerTree.vue
@@ -67,7 +67,7 @@
 						:data-index="index"
 						:draggable="draggable"
 						@dragstart="(e) => draggable && dragStart(e, listing.entry)"
-						:title="`${listing.entry.name}\n${devMode ? 'Layer Path: ' + listing.entry.path.join(' / ') : ''}`"
+						:title="`${listing.entry.name}\n${devMode ? 'Layer Path: ' + listing.entry.path.join(' / ') : ''}`.trim() || null"
 					>
 						<LayoutRow class="layer-type-icon">
 							<IconLabel v-if="listing.entry.layer_type === 'Folder'" :icon="'NodeFolder'" title="Folder" />
--- a/frontend/src/components/panels/Properties.vue
+++ b/frontend/src/components/panels/Properties.vue
@@ -1,10 +1,10 @@
 <template>
 	<LayoutCol class="properties">
 		<LayoutRow class="options-bar">
-			<WidgetLayout :layout="propertiesOptionsLayout"></WidgetLayout>
+			<WidgetLayout :layout="propertiesOptionsLayout" />
 		</LayoutRow>
 		<LayoutRow class="sections" :scrollableY="true">
-			<WidgetLayout :layout="propertiesSectionsLayout"></WidgetLayout>
+			<WidgetLayout :layout="propertiesSectionsLayout" />
 		</LayoutRow>
 	</LayoutCol>
 </template>
--- a/frontend/src/components/widgets/WidgetRow.vue
+++ b/frontend/src/components/widgets/WidgetRow.vue
@@ -2,19 +2,7 @@
 	<div class="widget-row">
 		<template v-for="(component, index) in widgetData.widgets" :key="index">
 			<!-- TODO: Use `<component :is="" v-bind="attributesObject"></component>` to avoid all the separate components with `v-if` -->
-			<PopoverButton v-if="component.kind === 'PopoverButton'">
-				<h3>{{ component.props.title }}</h3>
-				<p>{{ component.props.text }}</p>
-			</PopoverButton>
-			<NumberInput
-				v-if="component.kind === 'NumberInput'"
-				v-bind="component.props"
-				@update:value="(value: number) => updateLayout(component.widget_id, value)"
-				:incrementCallbackIncrease="() => updateLayout(component.widget_id, 'Increment')"
-				:incrementCallbackDecrease="() => updateLayout(component.widget_id, 'Decrement')"
-			/>
-			<TextInput v-if="component.kind === 'TextInput'" v-bind="component.props" @commitText="(value: string) => updateLayout(component.widget_id, value)" />
-			<TextAreaInput v-if="component.kind === 'TextAreaInput'" v-bind="component.props" @commitText="(value: string) => updateLayout(component.widget_id, value)" />
+			<CheckboxInput v-if="component.kind === 'CheckboxInput'" v-bind="component.props" @update:checked="(value: boolean) => updateLayout(component.widget_id, value)" />
 			<ColorInput v-if="component.kind === 'ColorInput'" v-bind="component.props" @update:value="(value: string) => updateLayout(component.widget_id, value)" />
 			<FontInput
 				v-if="component.kind === 'FontInput'"
@@ -22,26 +10,43 @@
 				@changeFont="(value: { name: string, style: string, file: string }) => updateLayout(component.widget_id, value)"
 			/>
 			<IconButton v-if="component.kind === 'IconButton'" v-bind="component.props" :action="() => updateLayout(component.widget_id, null)" />
+			<IconLabel v-if="component.kind === 'IconLabel'" v-bind="component.props" />
+			<NumberInput
+				v-if="component.kind === 'NumberInput'"
+				v-bind="component.props"
+				@update:value="(value: number) => updateLayout(component.widget_id, value)"
+				:incrementCallbackIncrease="() => updateLayout(component.widget_id, 'Increment')"
+				:incrementCallbackDecrease="() => updateLayout(component.widget_id, 'Decrement')"
+			/>
 			<OptionalInput v-if="component.kind === 'OptionalInput'" v-bind="component.props" @update:checked="(value: boolean) => updateLayout(component.widget_id, value)" />
+			<PopoverButton v-if="component.kind === 'PopoverButton'">
+				<h3>{{ component.props.title }}</h3>
+				<p>{{ component.props.text }}</p>
+			</PopoverButton>
 			<RadioInput v-if="component.kind === 'RadioInput'" v-bind="component.props" @update:selectedIndex="(value: number) => updateLayout(component.widget_id, value)" />
 			<Separator v-if="component.kind === 'Separator'" v-bind="component.props" />
-			<TextLabel v-if="component.kind === 'TextLabel'" v-bind="component.props">{{ component.props.value }}</TextLabel>
-			<IconLabel v-if="component.kind === 'IconLabel'" v-bind="component.props" />
+			<TextAreaInput v-if="component.kind === 'TextAreaInput'" v-bind="component.props" @commitText="(value: string) => updateLayout(component.widget_id, value)" />
+			<TextButton v-if="component.kind === 'TextButton'" v-bind="component.props" :action="() => updateLayout(component.widget_id, null)" />
+			<TextInput v-if="component.kind === 'TextInput'" v-bind="component.props" @commitText="(value: string) => updateLayout(component.widget_id, value)" />
+			<TextLabel v-if="component.kind === 'TextLabel'" v-bind="withoutValue(component.props)">{{ component.props.value }}</TextLabel>
 		</template>
 	</div>
 </template>

 <style lang="scss">
 .widget-row {
-	min-height: 32px;
 	flex: 0 0 auto;
 	display: flex;
+	min-height: 32px;

 	> * {
 		--widget-height: 24px;
-		min-height: var(--widget-height);
-		line-height: var(--widget-height);
 		margin: calc((24px - var(--widget-height)) / 2 + 4px) 0;
+		min-height: var(--widget-height);
+
+		&:not(.multiline) {
+			line-height: var(--widget-height);
+		}

 		&.icon-label.size-12 {
 			--widget-height: 12px;
@@ -61,6 +66,8 @@ import { WidgetRow } from "@/dispatcher/js-messages";

 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 CheckboxInput from "@/components/widgets/inputs/CheckboxInput.vue";
 import ColorInput from "@/components/widgets/inputs/ColorInput.vue";
 import FontInput from "@/components/widgets/inputs/FontInput.vue";
 import NumberInput from "@/components/widgets/inputs/NumberInput.vue";
@@ -82,10 +89,16 @@ export default defineComponent({
 		updateLayout(widgetId: BigInt, value: unknown) {
 			this.editor.instance.update_layout(this.layoutTarget, widgetId, value);
 		},
+		withoutValue(props: Record<string, unknown>): Record<string, unknown> {
+			const { value: _, ...rest } = props;
+			return rest;
+		},
 	},
 	components: {
 		Separator,
 		PopoverButton,
+		TextButton,
+		CheckboxInput,
 		NumberInput,
 		TextInput,
 		IconButton,
--- a/frontend/src/components/widgets/buttons/TextButton.vue
+++ b/frontend/src/components/widgets/buttons/TextButton.vue
@@ -1,5 +1,12 @@
 <template>
-	<button class="text-button" :class="{ emphasized, disabled }" :style="minWidth > 0 ? `min-width: ${minWidth}px` : ''" @click="(e: MouseEvent) => action(e)">
+	<button
+		class="text-button"
+		:class="{ emphasized, disabled }"
+		:data-emphasized="emphasized || null"
+		:data-disabled="disabled || null"
+		:style="minWidth > 0 ? `min-width: ${minWidth}px` : ''"
+		@click="(e: MouseEvent) => action(e)"
+	>
 		<TextLabel>{{ label }}</TextLabel>
 	</button>
 </template>
--- a/frontend/src/components/widgets/floating-menus/DialogModal.vue
+++ b/frontend/src/components/widgets/floating-menus/DialogModal.vue
@@ -1,15 +1,14 @@
 <template>
 	<FloatingMenu class="dialog-modal" :type="'Dialog'" :direction="'Center'" data-dialog-modal>
-		<LayoutRow>
+		<LayoutRow ref="main">
 			<LayoutCol class="icon-column">
 				<!-- `dialog.state.icon` class exists to provide special sizing in CSS to specific icons -->
 				<IconLabel :icon="dialog.state.icon" :class="dialog.state.icon.toLowerCase()" />
 			</LayoutCol>
 			<LayoutCol class="main-column">
-				<TextLabel :bold="true" class="heading">{{ dialog.state.heading }}</TextLabel>
-				<TextLabel class="details">{{ dialog.state.details }}</TextLabel>
-				<LayoutRow class="buttons-row" v-if="dialog.state.buttons.length > 0">
-					<TextButton v-for="(button, index) in dialog.state.buttons" :key="index" :title="button.tooltip" :action="() => button.callback?.()" v-bind="button.props" />
+				<WidgetLayout v-if="dialog.state.widgets.layout.length > 0" :layout="dialog.state.widgets" class="details" />
+				<LayoutRow v-if="dialog.state.jsCallbackBasedButtons?.length > 0" class="panic-buttons-row">
+					<TextButton v-for="(button, index) in dialog.state.jsCallbackBasedButtons" :key="index" :action="() => button.callback?.()" v-bind="button.props" />
 				</LayoutRow>
 			</LayoutCol>
 		</LayoutRow>
@@ -49,21 +48,18 @@
 	}

 	.main-column {
-		.heading {
-			user-select: text;
-			white-space: pre-wrap;
-			max-width: 400px;
-			margin-bottom: 4px;
-		}
+		margin: -4px 0;

 		.details {
 			user-select: text;
 			white-space: pre-wrap;
 			max-width: 400px;
+			height: auto;
 		}

-		.buttons-row {
-			margin-top: 16px;
+		.panic-buttons-row {
+			height: 32px;
+			align-items: center;
 		}
 	}
 }
@@ -77,7 +73,7 @@ import LayoutRow from "@/components/layout/LayoutRow.vue";
 import TextButton from "@/components/widgets/buttons/TextButton.vue";
 import FloatingMenu from "@/components/widgets/floating-menus/FloatingMenu.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
-import TextLabel from "@/components/widgets/labels/TextLabel.vue";
+import WidgetLayout from "@/components/widgets/WidgetLayout.vue";

 export default defineComponent({
 	inject: ["dialog"],
@@ -86,8 +82,8 @@ export default defineComponent({
 		LayoutCol,
 		FloatingMenu,
 		IconLabel,
-		TextLabel,
 		TextButton,
+		WidgetLayout,
 	},
 	methods: {
 		dismiss() {
--- a/frontend/src/components/widgets/floating-menus/MenuList.vue
+++ b/frontend/src/components/widgets/floating-menus/MenuList.vue
@@ -224,6 +224,8 @@ const MenuList = defineComponent({

 			const floatingMenu = this.$refs.floatingMenu as typeof FloatingMenu;

+			if (!floatingMenu) return;
+
 			// Save open/closed state before forcing open, if necessary, for measurement
 			const initiallyOpen = floatingMenu.isOpen();
 			if (!initiallyOpen) floatingMenu.setOpen();
@@ -265,7 +267,9 @@ const MenuList = defineComponent({
 		},
 	},
 	data() {
-		return { keyboardLockInfoMessage: this.fullscreen.keyboardLockApiSupported ? KEYBOARD_LOCK_USE_FULLSCREEN : KEYBOARD_LOCK_SWITCH_BROWSER };
+		return {
+			keyboardLockInfoMessage: this.fullscreen.keyboardLockApiSupported ? KEYBOARD_LOCK_USE_FULLSCREEN : KEYBOARD_LOCK_SWITCH_BROWSER,
+		};
 	},
 	components: {
 		FloatingMenu,
--- a/frontend/src/components/widgets/inputs/CheckboxInput.vue
+++ b/frontend/src/components/widgets/inputs/CheckboxInput.vue
@@ -1,6 +1,6 @@
 <template>
 	<LayoutRow class="checkbox-input" :class="{ 'outline-style': outlineStyle }">
-		<input type="checkbox" :id="`checkbox-input-${id}`" :checked="checked" @input="(e) => $emit('update:checked', (e.target as HTMLInputElement).checked)" />
+		<input type="checkbox" :id="`checkbox-input-${id}`" :checked="checked" @change="(e) => $emit('update:checked', (e.target as HTMLInputElement).checked)" />
 		<label :for="`checkbox-input-${id}`">
 			<LayoutRow class="checkbox-box">
 				<IconLabel :icon="icon" />
@@ -12,6 +12,7 @@
 <style lang="scss">
 .checkbox-input {
 	flex: 0 0 auto;
+	align-items: center;

 	input {
 		display: none;
@@ -19,6 +20,7 @@

 	label {
 		display: flex;
+		height: 16px;

 		.checkbox-box {
 			flex: 0 0 auto;
--- a/frontend/src/components/widgets/inputs/FontInput.vue
+++ b/frontend/src/components/widgets/inputs/FontInput.vue
@@ -1,5 +1,5 @@
 <template>
-	<LayoutRow class="dropdown-input">
+	<LayoutRow class="font-input">
 		<LayoutRow class="dropdown-box" :class="{ disabled }" :style="{ minWidth: `${minWidth}px` }" @click="() => clickDropdownBox()" data-hover-menu-spawner>
 			<span>{{ activeEntry.label }}</span>
 			<IconLabel class="dropdown-arrow" :icon="'DropdownArrow'" />
@@ -16,7 +16,7 @@
 </template>

 <style lang="scss">
-.dropdown-input {
+.font-input {
 	position: relative;

 	.dropdown-box {
--- a/frontend/src/components/widgets/inputs/MenuBarInput.vue
+++ b/frontend/src/components/widgets/inputs/MenuBarInput.vue
@@ -65,15 +65,7 @@ function makeMenuEntries(editor: EditorState): MenuListEntries {
 			ref: undefined,
 			children: [
 				[
-					{ label: "New", icon: "File", shortcut: ["KeyControl", "KeyN"], shortcutRequiresLock: true, action: (): void => editor.instance.new_document() },
-					{
-						label: "New 1920x1080",
-						icon: "File",
-						action: (): void => {
-							editor.instance.new_document();
-							editor.instance.create_artboard_and_fit_to_viewport(0, 0, 1920, 1080);
-						},
-					},
+					{ label: "New…", icon: "File", shortcut: ["KeyControl", "KeyN"], shortcutRequiresLock: true, action: (): void => editor.instance.request_new_document_dialog() },
 					{ label: "Open…", shortcut: ["KeyControl", "KeyO"], action: (): void => editor.instance.open_document() },
 					{
 						label: "Open Recent",
@@ -168,7 +160,12 @@ function makeMenuEntries(editor: EditorState): MenuListEntries {
 			label: "Help",
 			ref: undefined,
 			children: [
-				[{ label: "About Graphite", action: async (): Promise<void> => editor.instance.request_about_graphite_dialog() }],
+				[
+					{
+						label: "About Graphite",
+						action: async (): Promise<void> => editor.instance.request_about_graphite_dialog(),
+					},
+				],
 				[
 					{ label: "Report a Bug", action: (): unknown => window.open("https://github.com/GraphiteEditor/Graphite/issues/new", "_blank") },
 					{ label: "Visit on GitHub", action: (): unknown => window.open("https://github.com/GraphiteEditor/Graphite", "_blank") },
--- a/frontend/src/components/widgets/labels/TextLabel.vue
+++ b/frontend/src/components/widgets/labels/TextLabel.vue
@@ -1,13 +1,13 @@
 <template>
-	<span class="text-label" :class="{ bold, italic }">
+	<span class="text-label" :class="{ bold, italic, multiline, 'table-align': tableAlign }">
 		<slot></slot>
 	</span>
 </template>

 <style lang="scss">
 .text-label {
-	white-space: nowrap;
 	line-height: 18px;
+	white-space: nowrap;

 	&.bold {
 		font-weight: 700;
@@ -16,6 +16,16 @@
 	&.italic {
 		font-style: italic;
 	}
+
+	&.multiline {
+		white-space: pre-wrap;
+		margin: 4px 0;
+	}
+
+	&.table-align {
+		flex: 0 0 30%;
+		text-align: right;
+	}
 }
 </style>

@@ -26,6 +36,8 @@ export default defineComponent({
 	props: {
 		bold: { type: Boolean as PropType<boolean>, default: false },
 		italic: { type: Boolean as PropType<boolean>, default: false },
+		tableAlign: { type: Boolean as PropType<boolean>, default: false },
+		multiline: { type: Boolean as PropType<boolean>, default: false },
 	},
 });
 </script>
--- a/frontend/src/components/window/title-bar/TitleBar.vue
+++ b/frontend/src/components/window/title-bar/TitleBar.vue
@@ -5,7 +5,7 @@
 			<MenuBarInput v-if="platform !== 'Mac'" />
 		</LayoutRow>
 		<LayoutRow class="header-part">
-			<WindowTitle :title="`${activeDocumentDisplayName} - Graphite`" />
+			<WindowTitle :text="`${activeDocumentDisplayName} - Graphite`" />
 		</LayoutRow>
 		<LayoutRow class="header-part">
 			<WindowButtonsWindows :maximized="maximized" v-if="platform === 'Windows' || platform === 'Linux'" />
--- a/frontend/src/components/window/title-bar/WindowTitle.vue
+++ b/frontend/src/components/window/title-bar/WindowTitle.vue
@@ -1,6 +1,6 @@
 <template>
 	<LayoutRow class="window-title">
-		<span>{{ title }}</span>
+		<span>{{ text }}</span>
 	</LayoutRow>
 </template>

@@ -20,7 +20,7 @@ import LayoutRow from "@/components/layout/LayoutRow.vue";

 export default defineComponent({
 	props: {
-		title: { type: String as PropType<string>, required: true },
+		text: { type: String as PropType<string>, required: true },
 	},
 	components: { LayoutRow },
 });