Add DialogModal and use it for close confirmations and "coming soon" features (#322)

Closes #269
Closes #196

* Add DialogModal and use it for close confirmations and "coming soon" features

* Code cleanup; add Enter key to accept emphasized dialog button

client/web/src/components/widgets/floating-menus/DialogModal.vue

@@ -0,0 +1,109 @@
+<template>
+	<div class="dialog-modal">
+		<FloatingMenu :type="MenuType.Dialog" :direction="MenuDirection.Center">
+			<LayoutRow>
+				<LayoutCol :class="'icon-column'">
+					<!-- `dialog.icon` class exists to provide special sizing in CSS to specific icons -->
+					<IconLabel :icon="dialog.icon" :class="dialog.icon.toLowerCase()" />
+				</LayoutCol>
+				<LayoutCol :class="'main-column'">
+					<TextLabel :bold="true" :class="'heading'">{{ dialog.heading }}</TextLabel>
+					<TextLabel :class="'details'">{{ dialog.details }}</TextLabel>
+					<LayoutRow :class="'buttons-row'">
+						<TextButton v-for="(button, index) in dialog.buttons" :key="index" :title="button.tooltip" :action="button.callback" v-bind="button.props" />
+					</LayoutRow>
+				</LayoutCol>
+			</LayoutRow>
+		</FloatingMenu>
+	</div>
+</template>
+
+<style lang="scss">
+.dialog-modal {
+	position: absolute;
+	pointer-events: none;
+	width: 100%;
+	height: 100%;
+
+	.dialog {
+		width: 100%;
+		height: 100%;
+	}
+
+	.floating-menu-container .floating-menu-content {
+		pointer-events: auto;
+		padding: 24px;
+	}
+
+	.icon-column {
+		margin-right: 24px;
+
+		.icon-label {
+			width: 80px;
+			height: 80px;
+
+			&.file,
+			&.copy {
+				width: 60px;
+
+				svg {
+					width: 80px;
+					height: 80px;
+					margin: 0 -10px;
+				}
+			}
+		}
+	}
+
+	.main-column {
+		.heading {
+			white-space: pre;
+			margin-bottom: 4px;
+		}
+
+		.details {
+			white-space: pre;
+		}
+
+		.buttons-row {
+			margin-top: 16px;
+		}
+	}
+}
+</style>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { dismissDialog } from "@/utilities/dialog";
+
+import LayoutRow from "@/components/layout/LayoutRow.vue";
+import LayoutCol from "@/components/layout/LayoutCol.vue";
+import FloatingMenu, { MenuDirection, MenuType } from "@/components/widgets/floating-menus/FloatingMenu.vue";
+import IconLabel from "@/components/widgets/labels/IconLabel.vue";
+import TextLabel from "@/components/widgets/labels/TextLabel.vue";
+import TextButton from "@/components/widgets/buttons/TextButton.vue";
+
+export default defineComponent({
+	inject: ["dialog"],
+	components: {
+		LayoutRow,
+		LayoutCol,
+		FloatingMenu,
+		IconLabel,
+		TextLabel,
+		TextButton,
+	},
+	methods: {
+		dismiss() {
+			dismissDialog();
+		},
+	},
+	data() {
+		return {
+			MenuDirection,
+			MenuType,
+		};
+	},
+});
+</script>

client/web/src/components/widgets/floating-menus/FloatingMenu.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="floating-menu" :class="[direction.toLowerCase(), type.toLowerCase()]" v-if="open" ref="floatingMenu">
+	<div class="floating-menu" :class="[direction.toLowerCase(), type.toLowerCase()]" v-if="open || type === MenuType.Dialog" ref="floatingMenu">
 		<div class="tail" v-if="type === MenuType.Popover"></div>
 		<div class="floating-menu-container" ref="floatingMenuContainer">
 			<div class="floating-menu-content" :class="{ 'scrollable-y': scrollable }" ref="floatingMenuContent" :style="floatingMenuContentStyle">
@@ -112,6 +112,15 @@
 		--floating-menu-content-border-radius: 4px;
 	}
 
+	&.center {
+		justify-content: center;
+		align-items: center;
+
+		.floating-menu-content {
+			transform: translate(-50%, -50%);
+		}
+	}
+
 	&.top,
 	&.bottom {
 		flex-direction: column;
@@ -179,11 +188,13 @@ export enum MenuDirection {
 	TopRight = "TopRight",
 	BottomLeft = "BottomLeft",
 	BottomRight = "BottomRight",
+	Center = "Center",
 }
 
 export enum MenuType {
 	Popover = "Popover",
 	Dropdown = "Dropdown",
+	Dialog = "Dialog",
 }
 
 export default defineComponent({

client/web/src/components/widgets/inputs/MenuBarInput.vue

@@ -10,7 +10,7 @@
 				<IconLabel :icon="entry.icon" v-if="entry.icon" />
 				<span v-if="entry.label">{{ entry.label }}</span>
 			</div>
-			<MenuList :menuEntries="entry.children" :direction="MenuDirection.Bottom" :minWidth="240" :drawIcon="true" :defaultAction="actionNotImplemented" :ref="(ref) => setEntryRefs(entry, ref)" />
+			<MenuList :menuEntries="entry.children" :direction="MenuDirection.Bottom" :minWidth="240" :drawIcon="true" :defaultAction="comingSoon" :ref="(ref) => setEntryRefs(entry, ref)" />
 		</div>
 	</div>
 </template>
@@ -52,6 +52,9 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
+
+import comingSoon from "@/utilities/coming-soon";
+
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 import { ApplicationPlatform } from "@/components/window/MainWindow.vue";
 import MenuList, { MenuListEntry, MenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue";
@@ -138,17 +141,17 @@ const menuEntries: MenuListEntries = [
 	{
 		label: "Document",
 		ref: undefined,
-		children: [[{ label: "Menu not yet populated" }]],
+		children: [[{ label: "Menu entries coming soon" }]],
 	},
 	{
 		label: "View",
 		ref: undefined,
-		children: [[{ label: "Menu not yet populated" }]],
+		children: [[{ label: "Menu entries coming soon" }]],
 	},
 	{
 		label: "Help",
 		ref: undefined,
-		children: [[{ label: "Menu not yet populated" }]],
+		children: [[{ label: "Menu entries coming soon" }]],
 	},
 ];
 
@@ -164,16 +167,13 @@ export default defineComponent({
 		handleLogoClick() {
 			window.open("https://www.graphite.design", "_blank");
 		},
-		actionNotImplemented() {
-			// eslint-disable-next-line no-alert
-			alert("This action is not yet implemented");
-		},
 	},
 	data() {
 		return {
 			ApplicationPlatform,
 			menuEntries,
 			MenuDirection,
+			comingSoon,
 		};
 	},
 	components: {

client/web/src/components/widgets/inputs/ShelfItemInput.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="shelf-item-input" :class="{ active: active }">
-		<IconButton :action="() => _" :icon="icon" :size="32" />
+		<IconButton :action="action" :icon="icon" :size="32" />
 	</div>
 </template>
 
@@ -37,6 +37,7 @@ export default defineComponent({
 	components: { IconButton },
 	props: {
 		icon: { type: String, required: true },
+		action: { type: Function, required: true },
 		active: { type: Boolean, default: false },
 	},
 });

client/web/src/components/widgets/labels/IconLabel.vue

@@ -87,6 +87,7 @@ import Grid from "@/../assets/12px-solid/grid.svg";
 import Overlays from "@/../assets/12px-solid/overlays.svg";
 import Snapping from "@/../assets/12px-solid/snapping.svg";
 import Info from "@/../assets/12px-solid/info.svg";
+import Warning from "@/../assets/12px-solid/warning.svg";
 import Swap from "@/../assets/12px-solid/swap.svg";
 import ResetColors from "@/../assets/12px-solid/reset-colors.svg";
 import DropdownArrow from "@/../assets/12px-solid/dropdown-arrow.svg";
@@ -168,6 +169,7 @@ const icons = {
 	Overlays: { component: Overlays, size: 12 },
 	Snapping: { component: Snapping, size: 12 },
 	Info: { component: Info, size: 12 },
+	Warning: { component: Warning, size: 12 },
 	Swap: { component: Swap, size: 12 },
 	ResetColors: { component: ResetColors, size: 12 },
 	DropdownArrow: { component: DropdownArrow, size: 12 },

client/web/src/components/widgets/options/ToolOptions.vue

@@ -2,12 +2,7 @@
 	<div class="tool-options">
 		<template v-for="(option, index) in toolOptions[activeTool] || []" :key="index">
 			<!-- TODO: Use `<component :is="" v-bind="attributesObject"></component>` to avoid all the separate components with `v-if` -->
-			<IconButton
-				v-if="option.kind === 'IconButton'"
-				:action="() => (option.message && sendToolMessage(option.message), option.callback && option.callback())"
-				:title="option.tooltip"
-				v-bind="option.props"
-			/>
+			<IconButton v-if="option.kind === 'IconButton'" :action="() => handleIconButtonAction(option)" :title="option.tooltip" v-bind="option.props" />
 			<PopoverButton v-if="option.kind === 'PopoverButton'" :title="option.tooltip" :action="option.callback" v-bind="option.props">
 				<h3>{{ option.popover.title }}</h3>
 				<p>{{ option.popover.text }}</p>
@@ -30,7 +25,9 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-import { WidgetRow, SeparatorType } from "@/components/widgets/widgets";
+import comingSoon from "@/utilities/coming-soon";
+
+import { WidgetRow, SeparatorType, IconButtonWidget } from "@/components/widgets/widgets";
 import Separator from "@/components/widgets/separators/Separator.vue";
 import IconButton from "@/components/widgets/buttons/IconButton.vue";
 import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
@@ -53,10 +50,23 @@ export default defineComponent({
 			// This is a placeholder call, using the Shape tool as an example
 			set_tool_options(this.$props.activeTool || "", { Shape: { shape_type: { Polygon: { vertices: newValue } } } });
 		},
-		async sendToolMessage(message: string) {
+		async sendToolMessage(message: string | object) {
 			const { send_tool_message } = await wasm;
 			send_tool_message(this.$props.activeTool || "", message);
 		},
+		handleIconButtonAction(option: IconButtonWidget) {
+			if (option.message) {
+				this.sendToolMessage(option.message);
+				return;
+			}
+
+			if (option.callback) {
+				option.callback();
+				return;
+			}
+
+			comingSoon();
+		},
 	},
 	data() {
 		const toolOptions: Record<string, WidgetRow> = {
@@ -100,11 +110,11 @@ export default defineComponent({
 
 				{ kind: "Separator", props: { type: SeparatorType.Section } },
 
-				{ kind: "IconButton", tooltip: "Boolean Union", props: { icon: "BooleanUnion", size: 24 } },
-				{ kind: "IconButton", tooltip: "Boolean Subtract Front", props: { icon: "BooleanSubtractFront", size: 24 } },
-				{ kind: "IconButton", tooltip: "Boolean Subtract Back", props: { icon: "BooleanSubtractBack", size: 24 } },
-				{ kind: "IconButton", tooltip: "Boolean Intersect", props: { icon: "BooleanIntersect", size: 24 } },
-				{ kind: "IconButton", tooltip: "Boolean Difference", props: { icon: "BooleanDifference", size: 24 } },
+				{ kind: "IconButton", tooltip: "Boolean Union", callback: () => comingSoon(197), props: { icon: "BooleanUnion", size: 24 } },
+				{ kind: "IconButton", tooltip: "Boolean Subtract Front", callback: () => comingSoon(197), props: { icon: "BooleanSubtractFront", size: 24 } },
+				{ kind: "IconButton", tooltip: "Boolean Subtract Back", callback: () => comingSoon(197), props: { icon: "BooleanSubtractBack", size: 24 } },
+				{ kind: "IconButton", tooltip: "Boolean Intersect", callback: () => comingSoon(197), props: { icon: "BooleanIntersect", size: 24 } },
+				{ kind: "IconButton", tooltip: "Boolean Difference", callback: () => comingSoon(197), props: { icon: "BooleanDifference", size: 24 } },
 
 				{ kind: "Separator", props: { type: SeparatorType.Related } },
 
@@ -123,6 +133,7 @@ export default defineComponent({
 		return {
 			toolOptions,
 			SeparatorType,
+			comingSoon,
 		};
 	},
 	components: {

client/web/src/components/widgets/widgets.ts

@@ -1,4 +1,4 @@
-export type Widgets = IconButtonWidget | SeparatorWidget | PopoverButtonWidget | NumberInputWidget;
+export type Widgets = TextButtonWidget | IconButtonWidget | SeparatorWidget | PopoverButtonWidget | NumberInputWidget;
 export type WidgetRow = Array<Widgets>;
 export type WidgetLayout = Array<WidgetRow>;