Consolidate MenuListButton into TextButton (#1470)

editor/src/messages/dialog/export_dialog/export_dialog_message_handler.rs

@@ -95,7 +95,7 @@ impl LayoutHolder for ExportDialogMessageHandler {
 		let index = export_area_options.iter().position(|(val, _, _)| val == &self.bounds).unwrap();
 		let entries = vec![export_area_options
 			.into_iter()
-			.map(|(val, name, disabled)| DropdownEntryData::new(name).on_update(move |_| ExportDialogMessage::ExportBounds(val).into()).disabled(disabled))
+			.map(|(val, name, disabled)| MenuListEntry::new(name).on_update(move |_| ExportDialogMessage::ExportBounds(val).into()).disabled(disabled))
 			.collect()];
 
 		let export_area = vec![

editor/src/messages/layout/utility_types/widgets/button_widgets.rs

@@ -100,6 +100,9 @@ pub struct TextButton {
 	#[serde(skip)]
 	pub tooltip_shortcut: Option<ActionKeys>,
 
+	#[serde(rename = "menuListChildren")]
+	pub menu_list_children: MenuListEntrySections,
+
 	// Callbacks
 	#[serde(skip)]
 	#[derivative(Debug = "ignore", PartialEq = "ignore")]

editor/src/messages/layout/utility_types/widgets/input_widgets.rs

@@ -48,7 +48,7 @@ impl Default for CheckboxInput {
 #[derivative(Debug, PartialEq, Default)]
 pub struct DropdownInput {
 	#[widget_builder(constructor)]
-	pub entries: DropdownInputEntries,
+	pub entries: MenuListEntrySections,
 
 	// This uses `u32` instead of `usize` since it will be serialized as a normal JS number (replace this with `usize` after switching to a Rust-based GUI)
 	#[serde(rename = "selectedIndex")]
@@ -68,15 +68,15 @@ pub struct DropdownInput {
 	pub tooltip_shortcut: Option<ActionKeys>,
 	//
 	// Callbacks
-	// `on_update` exists on the `DropdownEntryData`, not this parent `DropdownInput`
+	// `on_update` exists on the `MenuListEntry`, not this parent `DropdownInput`
 }
 
-pub type DropdownInputEntries = Vec<Vec<DropdownEntryData>>;
+pub type MenuListEntrySections = Vec<Vec<MenuListEntry>>;
 
 #[derive(Clone, Serialize, Deserialize, Derivative, Default, WidgetBuilder, specta::Type)]
 #[derivative(Debug, PartialEq)]
 #[widget_builder(not_widget_holder)]
-pub struct DropdownEntryData {
+pub struct MenuListEntry {
 	pub value: String,
 
 	#[widget_builder(constructor)]
@@ -91,7 +91,7 @@ pub struct DropdownEntryData {
 
 	pub disabled: bool,
 
-	pub children: DropdownInputEntries,
+	pub children: MenuListEntrySections,
 
 	// Callbacks
 	#[serde(skip)]

editor/src/messages/portfolio/document/document_message_handler.rs

@@ -1590,11 +1590,11 @@ impl DocumentMessageHandler {
 			widgets: vec![
 				DropdownInput::new(
 					vec![vec![
-						DropdownEntryData::new(DocumentMode::DesignMode.to_string()).icon(DocumentMode::DesignMode.icon_name()),
-						DropdownEntryData::new(DocumentMode::SelectMode.to_string())
+						MenuListEntry::new(DocumentMode::DesignMode.to_string()).icon(DocumentMode::DesignMode.icon_name()),
+						MenuListEntry::new(DocumentMode::SelectMode.to_string())
 							.icon(DocumentMode::SelectMode.icon_name())
 							.on_update(|_| DialogMessage::RequestComingSoonDialog { issue: Some(330) }.into()),
-						DropdownEntryData::new(DocumentMode::GuideMode.to_string())
+						MenuListEntry::new(DocumentMode::GuideMode.to_string())
 							.icon(DocumentMode::GuideMode.icon_name())
 							.on_update(|_| DialogMessage::RequestComingSoonDialog { issue: Some(331) }.into()),
 					]])
@@ -1662,7 +1662,7 @@ impl DocumentMessageHandler {
 				modes
 					.iter()
 					.map(|mode| {
-						DropdownEntryData::new(mode.to_string())
+						MenuListEntry::new(mode.to_string())
 							.value(mode.to_string())
 							.on_update(|_| DocumentMessage::SetBlendModeForSelectedLayers { blend_mode: *mode }.into())
 					})

editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs

@@ -333,7 +333,7 @@ fn color_channel(document_node: &DocumentNode, node_id: u64, index: usize, name:
 		let calculation_modes = [RedGreenBlue::Red, RedGreenBlue::Green, RedGreenBlue::Blue];
 		let mut entries = Vec::with_capacity(calculation_modes.len());
 		for method in calculation_modes {
-			entries.push(DropdownEntryData::new(method.to_string()).on_update(update_value(move |_| TaggedValue::RedGreenBlue(method), node_id, index)));
+			entries.push(MenuListEntry::new(method.to_string()).on_update(update_value(move |_| TaggedValue::RedGreenBlue(method), node_id, index)));
 		}
 		let entries = vec![entries];
 
@@ -356,7 +356,7 @@ fn noise_type(document_node: &DocumentNode, node_id: u64, index: usize, name: &s
 		let calculation_modes = NoiseType::list();
 		let mut entries = Vec::with_capacity(calculation_modes.len());
 		for method in calculation_modes {
-			entries.push(DropdownEntryData::new(method.to_string()).on_update(update_value(move |_| TaggedValue::NoiseType(method), node_id, index)));
+			entries.push(MenuListEntry::new(method.to_string()).on_update(update_value(move |_| TaggedValue::NoiseType(method), node_id, index)));
 		}
 		let entries = vec![entries];
 
@@ -381,7 +381,7 @@ fn blend_mode(document_node: &DocumentNode, node_id: u64, index: usize, name: &s
 			.map(|category| {
 				category
 					.iter()
-					.map(|mode| DropdownEntryData::new(mode.to_string()).on_update(update_value(move |_| TaggedValue::BlendMode(*mode), node_id, index)))
+					.map(|mode| MenuListEntry::new(mode.to_string()).on_update(update_value(move |_| TaggedValue::BlendMode(*mode), node_id, index)))
 					.collect()
 			})
 			.collect();
@@ -405,7 +405,7 @@ fn luminance_calculation(document_node: &DocumentNode, node_id: u64, index: usiz
 		let calculation_modes = LuminanceCalculation::list();
 		let mut entries = Vec::with_capacity(calculation_modes.len());
 		for method in calculation_modes {
-			entries.push(DropdownEntryData::new(method.to_string()).on_update(update_value(move |_| TaggedValue::LuminanceCalculation(method), node_id, index)));
+			entries.push(MenuListEntry::new(method.to_string()).on_update(update_value(move |_| TaggedValue::LuminanceCalculation(method), node_id, index)));
 		}
 		let entries = vec![entries];
 
@@ -955,7 +955,7 @@ pub fn adjust_selective_color_properties(document_node: &DocumentNode, node_id:
 			.map(|section| {
 				section
 					.iter()
-					.map(|choice| DropdownEntryData::new(choice.to_string()).on_update(update_value(move |_| TaggedValue::SelectiveColorChoice(*choice), node_id, colors_index)))
+					.map(|choice| MenuListEntry::new(choice.to_string()).on_update(update_value(move |_| TaggedValue::SelectiveColorChoice(*choice), node_id, colors_index)))
 					.collect()
 			})
 			.collect();
@@ -1577,7 +1577,7 @@ pub fn imaginate_properties(document_node: &DocumentNode, node_id: NodeId, conte
 			let sampling_methods = ImaginateSamplingMethod::list();
 			let mut entries = Vec::with_capacity(sampling_methods.len());
 			for method in sampling_methods {
-				entries.push(DropdownEntryData::new(method.to_string()).on_update(update_value(move |_| TaggedValue::ImaginateSamplingMethod(method), node_id, sampling_method_index)));
+				entries.push(MenuListEntry::new(method.to_string()).on_update(update_value(move |_| TaggedValue::ImaginateSamplingMethod(method), node_id, sampling_method_index)));
 			}
 			let entries = vec![entries];
 
@@ -1730,7 +1730,7 @@ pub fn imaginate_properties(document_node: &DocumentNode, node_id: NodeId, conte
 				let mask_fill_content_modes = ImaginateMaskStartingFill::list();
 				let mut entries = Vec::with_capacity(mask_fill_content_modes.len());
 				for mode in mask_fill_content_modes {
-					entries.push(DropdownEntryData::new(mode.to_string()).on_update(update_value(move |_| TaggedValue::ImaginateMaskStartingFill(mode), node_id, mask_fill_index)));
+					entries.push(MenuListEntry::new(mode.to_string()).on_update(update_value(move |_| TaggedValue::ImaginateMaskStartingFill(mode), node_id, mask_fill_index)));
 				}
 				let entries = vec![entries];
 

editor/src/messages/tool/tool_messages/brush_tool.rs

@@ -198,7 +198,7 @@ impl LayoutHolder for BrushTool {
 				group
 					.iter()
 					.map(|blend_mode| {
-						DropdownEntryData::new(format!("{blend_mode}"))
+						MenuListEntry::new(format!("{blend_mode}"))
 							.value(format!("{blend_mode:?}"))
 							.on_update(|_| BrushToolMessage::UpdateOptions(BrushToolMessageOptionsUpdate::BlendMode(*blend_mode)).into())
 					})

editor/src/messages/tool/tool_messages/select_tool.rs

@@ -103,7 +103,7 @@ impl SelectTool {
 	// 	let layer_selection_behavior_entries = [NestedSelectionBehavior::Deepest, NestedSelectionBehavior::Shallowest]
 	// 		.iter()
 	// 		.map(|mode| {
-	// 			DropdownEntryData::new(mode.to_string())
+	// 			MenuListEntry::new(mode.to_string())
 	// 				.value(mode.to_string())
 	// 				.on_update(move |_| SelectToolMessage::SelectOptions(SelectOptionsUpdate::NestedSelectionBehavior(*mode)).into())
 	// 		})

frontend/src/components/layout/ConditionalWrapper.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	export let condition: boolean;
+	export let wrapperClass = "";
+</script>
+
+{#if condition}
+	<div class={wrapperClass}>
+		<slot />
+	</div>
+{:else}
+	<slot />
+{/if}
+
+<style lang="scss" global></style>

frontend/src/components/widgets/buttons/MenuListButton.svelte

@@ -1,83 +0,0 @@
-<script lang="ts">
-	import type { MenuListEntry } from "@graphite/wasm-communication/messages";
-
-	import MenuList from "@graphite/components/floating-menus/MenuList.svelte";
-	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
-	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
-
-	export let entry: MenuListEntry;
-
-	let entryRef: MenuList;
-
-	$: (entry.ref = entryRef), entry.ref;
-
-	function clickEntry(e: MouseEvent) {
-		// If there's no menu to open, trigger the action but don't try to open its non-existant children
-		if ((entry.children?.length ?? 0) === 0) {
-			if (entry.action && !entry.disabled) entry.action();
-			return;
-		}
-
-		// Focus the target so that keyboard inputs are sent to the dropdown
-		(e.target as HTMLElement | undefined)?.focus();
-
-		if (entry.ref) {
-			entry.ref.open = true;
-		} else {
-			throw new Error("The menu bar floating menu has no associated ref");
-		}
-	}
-</script>
-
-<div class="menu-list-button">
-	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-	<div
-		on:click={(e) => clickEntry(e)}
-		on:keydown={(e) => entry.ref?.keydown(e, false)}
-		class="entry"
-		class:open={entry.ref?.open}
-		tabindex="0"
-		data-floating-menu-spawner={(entry.children?.length ?? 0) > 0 ? "" : "no-hover-transfer"}
-	>
-		{#if entry.icon}
-			<IconLabel icon={entry.icon} />
-		{/if}
-		{#if entry.label}
-			<TextLabel>{entry.label}</TextLabel>
-		{/if}
-	</div>
-	{#if (entry.children?.length ?? 0) > 0}
-		<MenuList
-			on:open={({ detail }) => entry.ref && (entry.ref.open = detail)}
-			open={entry.ref?.open || false}
-			entries={entry.children || []}
-			direction="Bottom"
-			minWidth={240}
-			drawIcon={true}
-			bind:this={entryRef}
-		/>
-	{/if}
-</div>
-
-<style lang="scss" global>
-	.menu-list-button {
-		display: flex;
-		position: relative;
-
-		.entry {
-			display: flex;
-			align-items: center;
-			white-space: nowrap;
-			background: none;
-			padding: 0 8px;
-			margin: 0;
-			border: 0;
-			border-radius: 2px;
-
-			&:hover,
-			&.open {
-				background: var(--color-5-dullgray);
-			}
-		}
-	}
-</style>

frontend/src/components/widgets/buttons/TextButton.svelte

@@ -1,9 +1,17 @@
 <script lang="ts">
 	import type { IconName } from "@graphite/utility-functions/icons";
+	import type { MenuListEntry } from "@graphite/wasm-communication/messages";
 
+	import MenuList from "@graphite/components/floating-menus/MenuList.svelte";
+	import ConditionalWrapper from "@graphite/components/layout/ConditionalWrapper.svelte";
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
+	import Separator from "@graphite/components/widgets/labels/Separator.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 
+	let self: MenuList;
+
+	// Note: IconButton should be used if only an icon, but no label, is desired.
+	// However, if multiple TextButton widgets are used in a group with only some having no label, this component is able to accommodate that.
 	export let label: string;
 	export let icon: IconName | undefined = undefined;
 	export let emphasized = false;
@@ -12,38 +20,90 @@
 	export let disabled = false;
 	export let tooltip: string | undefined = undefined;
 	export let sharpRightCorners = false;
+	export let menuListChildren: MenuListEntry[][] | undefined = undefined;
 
 	// Callbacks
 	// TODO: Replace this with an event binding (and on other components that do this)
-	export let action: (e: MouseEvent) => void;
+	export let action: (() => void) | undefined;
+
+	$: menuListChildrenExists = (menuListChildren?.length ?? 0) > 0;
+
+	// Handles either a button click or, if applicable, the opening of the menu list floating menu
+	function onClick(e: MouseEvent) {
+		// If there's no menu to open, trigger the action
+		if ((menuListChildren?.length ?? 0) === 0) {
+			// Call the action
+			if (action && !disabled) action();
+
+			// Exit early so we don't continue on and try to open the menu
+			return;
+		}
+
+		// Focus the target so that keyboard inputs are sent to the dropdown
+		(e.target as HTMLElement | undefined)?.focus();
+
+		// Open the menu list floating menu
+		if (self) {
+			self.open = true;
+		} else {
+			throw new Error("The menu bar floating menu has no associated ref");
+		}
+	}
 </script>
 
-<button
-	class="text-button"
-	class:emphasized
-	class:disabled
-	class:no-background={noBackground}
-	class:sharp-right-corners={sharpRightCorners}
-	style:min-width={minWidth > 0 ? `${minWidth}px` : ""}
-	title={tooltip}
-	data-emphasized={emphasized || undefined}
-	data-disabled={disabled || undefined}
-	data-text-button
-	tabindex={disabled ? -1 : 0}
-	on:click={action}
->
-	{#if icon}
-		<IconLabel {icon} />
+<ConditionalWrapper condition={menuListChildrenExists} wrapperClass="text-button-container">
+	<button
+		class="text-button"
+		class:open={self?.open}
+		class:emphasized
+		class:disabled
+		class:no-background={noBackground}
+		class:sharp-right-corners={sharpRightCorners}
+		style:min-width={minWidth > 0 ? `${minWidth}px` : ""}
+		title={tooltip}
+		data-emphasized={emphasized || undefined}
+		data-disabled={disabled || undefined}
+		data-text-button
+		tabindex={disabled ? -1 : 0}
+		data-floating-menu-spawner={menuListChildrenExists ? "" : "no-hover-transfer"}
+		on:click={onClick}
+		on:keydown={(e) => self?.keydown(e, false)}
+	>
+		{#if icon}
+			<IconLabel {icon} />
+		{/if}
+		{#if icon && label}
+			<Separator type={noBackground ? "Unrelated" : "Related"} />
+		{/if}
+		{#if label}
+			<TextLabel>{label}</TextLabel>
+		{/if}
+	</button>
+	{#if menuListChildrenExists}
+		<MenuList
+			on:open={({ detail }) => self && (self.open = detail)}
+			open={self?.open || false}
+			entries={menuListChildren || []}
+			direction="Bottom"
+			minWidth={240}
+			drawIcon={true}
+			bind:this={self}
+		/>
 	{/if}
-	<TextLabel>{label}</TextLabel>
-</button>
+</ConditionalWrapper>
 
 <style lang="scss" global>
+	.text-button-container {
+		display: flex;
+		position: relative;
+	}
+
 	.text-button {
 		display: flex;
 		justify-content: center;
 		align-items: center;
 		flex: 0 0 auto;
+		white-space: nowrap;
 		height: 24px;
 		margin: 0;
 		padding: 0 8px;
@@ -55,7 +115,8 @@
 		--button-background-color: var(--color-5-dullgray);
 		--button-text-color: var(--color-e-nearwhite);
 
-		&:hover {
+		&:hover,
+		&.open {
 			--button-background-color: var(--color-6-lowergray);
 			--button-text-color: var(--color-f-white);
 		}
@@ -69,7 +130,8 @@
 			--button-background-color: var(--color-e-nearwhite);
 			--button-text-color: var(--color-2-mildblack);
 
-			&:hover {
+			&:hover,
+			&.open {
 				--button-background-color: var(--color-f-white);
 			}
 
@@ -79,12 +141,11 @@
 		}
 
 		&.no-background {
-			&:not(:hover) {
-				background: none;
-			}
+			background: none;
 
-			.icon-label {
-				margin-right: 4px;
+			&:hover,
+			&.open {
+				background: var(--color-5-dullgray);
 			}
 		}
 
@@ -99,8 +160,7 @@
 		}
 
 		.icon-label {
-			position: relative;
-			left: -4px;
+			fill: var(--button-text-color);
 		}
 
 		.text-label {

frontend/src/components/widgets/inputs/FieldInput.svelte

@@ -169,8 +169,6 @@
 		}
 
 		input {
-			// text-align: center;
-
 			&:not(:focus).has-label {
 				text-align: right;
 				margin-left: 0;
@@ -202,6 +200,11 @@
 			textarea {
 				color: var(--color-8-uppergray);
 			}
+
+			input {
+				// Disables drag-selecting the text, since `user-select: none` doesn't work for input elements
+				pointer-events: none;
+			}
 		}
 	}
 </style>

frontend/src/components/widgets/inputs/NumberInput.svelte

@@ -248,7 +248,7 @@
 
 	function onDragPointerDown(e: PointerEvent) {
 		// Only drag the number with left click (and when it's valid to do so)
-		if (e.button !== BUTTON_LEFT || mode !== "Increment" || value === undefined) return;
+		if (e.button !== BUTTON_LEFT || mode !== "Increment" || value === undefined || disabled) return;
 
 		// Don't drag the text value from is input element
 		e.preventDefault();
@@ -633,8 +633,8 @@
 			}
 
 			// Show the left-right arrow cursor when hovered over the draggable area
-			input[type="text"]:not(:focus),
-			label {
+			&:not(.disabled) input[type="text"]:not(:focus),
+			&:not(.disabled) label {
 				cursor: ew-resize;
 			}
 

frontend/src/components/window/title-bar/TitleBar.svelte

@@ -11,7 +11,7 @@
 	import { type KeyRaw, type LayoutKeysGroup, type MenuBarEntry, type MenuListEntry, UpdateMenuBarLayout } from "@graphite/wasm-communication/messages";
 
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
-	import MenuListButton from "@graphite/components/widgets/buttons/MenuListButton.svelte";
+	import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte";
 	import WindowButtonsMac from "@graphite/components/window/title-bar/WindowButtonsMac.svelte";
 	import WindowButtonsWeb from "@graphite/components/window/title-bar/WindowButtonsWeb.svelte";
 	import WindowButtonsWindows from "@graphite/components/window/title-bar/WindowButtonsWindows.svelte";
@@ -77,7 +77,7 @@
 			<WindowButtonsMac {maximized} />
 		{:else}
 			{#each entries as entry}
-				<MenuListButton {entry} />
+				<TextButton label={entry.label} icon={entry.icon} menuListChildren={entry.children} action={entry.action} noBackground={true} />
 			{/each}
 		{/if}
 	</LayoutRow>
@@ -115,5 +115,9 @@
 				justify-content: flex-end;
 			}
 		}
+
+		.text-button {
+			height: 28px;
+		}
 	}
 </style>

frontend/src/wasm-communication/messages.ts

@@ -793,7 +793,7 @@ export type MenuBarEntry = MenuEntryCommon & {
 	disabled?: boolean;
 };
 
-// An entry in the all-encompassing MenuList component which defines all types of menus (which are spawned by widgets like `MenuListButton` and `DropdownInput`)
+// An entry in the all-encompassing MenuList component which defines all types of menus (which are spawned by widgets like `TextButton` and `DropdownInput`)
 export type MenuListEntry = MenuEntryCommon & {
 	action?: () => void;
 	children?: MenuListEntry[][];
@@ -1055,6 +1055,8 @@ export class TextButton extends WidgetProps {
 
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltip!: string | undefined;
+
+	menuListChildren!: MenuListEntry[][];
 }
 
 export type TextButtonWidget = {