Replace text-only tooltips with custom richly styled tooltips (#3436)

* Replace the title attribute with custom FloatingMenu tooltips

* Separate tooltip labels and descriptions into two styled blocks

* Move keyboard shortcut tooltips to a separate section at the bottom

* Update shortcut key styling in tooltips and hints bar

* Fix .to_string()

Author: Keavon

editor/src/messages/dialog/preferences_dialog/preferences_dialog_message_handler.rs

@@ -42,17 +42,18 @@ impl PreferencesDialogMessageHandler {
 
 		let navigation_header = vec![TextLabel::new("Navigation").italic(true).widget_holder()];
 
-		let zoom_rate_tooltip = "Adjust how fast zooming occurs when using the scroll wheel or pinch gesture (relative to a default of 50)";
+		let zoom_rate_description = "Adjust how fast zooming occurs when using the scroll wheel or pinch gesture (relative to a default of 50).";
 		let zoom_rate_label = vec![
 			Separator::new(SeparatorType::Unrelated).widget_holder(),
 			Separator::new(SeparatorType::Unrelated).widget_holder(),
-			TextLabel::new("Zoom Rate").tooltip(zoom_rate_tooltip).widget_holder(),
+			TextLabel::new("Zoom Rate").tooltip_label("Zoom Rate").tooltip_description(zoom_rate_description).widget_holder(),
 		];
 		let zoom_rate = vec![
 			Separator::new(SeparatorType::Unrelated).widget_holder(),
 			Separator::new(SeparatorType::Unrelated).widget_holder(),
 			NumberInput::new(Some(map_zoom_rate_to_display(preferences.viewport_zoom_wheel_rate)))
-				.tooltip(zoom_rate_tooltip)
+				.tooltip_label("Zoom Rate")
+				.tooltip_description(zoom_rate_description)
 				.mode_range()
 				.int()
 				.min(1.)
@@ -69,12 +70,13 @@ impl PreferencesDialogMessageHandler {
 		];
 
 		let checkbox_id = CheckboxId::new();
-		let zoom_with_scroll_tooltip = "Use the scroll wheel for zooming instead of vertically panning (not recommended for trackpads)";
+		let zoom_with_scroll_description = "Use the scroll wheel for zooming instead of vertically panning (not recommended for trackpads).";
 		let zoom_with_scroll = vec![
 			Separator::new(SeparatorType::Unrelated).widget_holder(),
 			Separator::new(SeparatorType::Unrelated).widget_holder(),
 			CheckboxInput::new(preferences.zoom_with_scroll)
-				.tooltip(zoom_with_scroll_tooltip)
+				.tooltip_label("Zoom with Scroll")
+				.tooltip_description(zoom_with_scroll_description)
 				.on_update(|checkbox_input: &CheckboxInput| {
 					PreferencesMessage::ModifyLayout {
 						zoom_with_scroll: checkbox_input.checked,
@@ -84,9 +86,10 @@ impl PreferencesDialogMessageHandler {
 				.for_label(checkbox_id)
 				.widget_holder(),
 			TextLabel::new("Zoom with Scroll")
-				.table_align(true)
-				.tooltip(zoom_with_scroll_tooltip)
+				.tooltip_label("Zoom with Scroll")
+				.tooltip_description(zoom_with_scroll_description)
 				.for_checkbox(checkbox_id)
+				.table_align(true)
 				.widget_holder(),
 		];
 
@@ -105,7 +108,8 @@ impl PreferencesDialogMessageHandler {
 		let selection_mode = RadioInput::new(vec![
 			RadioEntryData::new(SelectionMode::Touched.to_string())
 				.label(SelectionMode::Touched.to_string())
-				.tooltip(SelectionMode::Touched.tooltip_description())
+				.tooltip_label(SelectionMode::Touched.to_string())
+				.tooltip_description(SelectionMode::Touched.tooltip_description())
 				.on_update(move |_| {
 					PreferencesMessage::SelectionMode {
 						selection_mode: SelectionMode::Touched,
@@ -114,7 +118,8 @@ impl PreferencesDialogMessageHandler {
 				}),
 			RadioEntryData::new(SelectionMode::Enclosed.to_string())
 				.label(SelectionMode::Enclosed.to_string())
-				.tooltip(SelectionMode::Enclosed.tooltip_description())
+				.tooltip_label(SelectionMode::Enclosed.to_string())
+				.tooltip_description(SelectionMode::Enclosed.tooltip_description())
 				.on_update(move |_| {
 					PreferencesMessage::SelectionMode {
 						selection_mode: SelectionMode::Enclosed,
@@ -123,7 +128,8 @@ impl PreferencesDialogMessageHandler {
 				}),
 			RadioEntryData::new(SelectionMode::Directional.to_string())
 				.label(SelectionMode::Directional.to_string())
-				.tooltip(SelectionMode::Directional.tooltip_description())
+				.tooltip_label(SelectionMode::Directional.to_string())
+				.tooltip_description(SelectionMode::Directional.tooltip_description())
 				.on_update(move |_| {
 					PreferencesMessage::SelectionMode {
 						selection_mode: SelectionMode::Directional,
@@ -145,20 +151,25 @@ impl PreferencesDialogMessageHandler {
 
 		let experimental_header = vec![TextLabel::new("Experimental").italic(true).widget_holder()];
 
-		let node_graph_section_tooltip = "Appearance of the wires running between node connections in the graph";
+		let node_graph_section_description = "Appearance of the wires running between node connections in the graph.";
 		let node_graph_wires_label = vec![
 			Separator::new(SeparatorType::Unrelated).widget_holder(),
 			Separator::new(SeparatorType::Unrelated).widget_holder(),
-			TextLabel::new("Node Graph Wires").tooltip(node_graph_section_tooltip).widget_holder(),
+			TextLabel::new("Node Graph Wires")
+				.tooltip_label("Node Graph Wires")
+				.tooltip_description(node_graph_section_description)
+				.widget_holder(),
 		];
 		let graph_wire_style = RadioInput::new(vec![
 			RadioEntryData::new(GraphWireStyle::Direct.to_string())
 				.label(GraphWireStyle::Direct.to_string())
-				.tooltip(GraphWireStyle::Direct.tooltip_description())
+				.tooltip_label(GraphWireStyle::Direct.to_string())
+				.tooltip_description(GraphWireStyle::Direct.tooltip_description())
 				.on_update(move |_| PreferencesMessage::GraphWireStyle { style: GraphWireStyle::Direct }.into()),
 			RadioEntryData::new(GraphWireStyle::GridAligned.to_string())
 				.label(GraphWireStyle::GridAligned.to_string())
-				.tooltip(GraphWireStyle::GridAligned.tooltip_description())
+				.tooltip_label(GraphWireStyle::GridAligned.to_string())
+				.tooltip_description(GraphWireStyle::GridAligned.tooltip_description())
 				.on_update(move |_| PreferencesMessage::GraphWireStyle { style: GraphWireStyle::GridAligned }.into()),
 		])
 		.selected_index(Some(preferences.graph_wire_style as u32))
@@ -170,36 +181,47 @@ impl PreferencesDialogMessageHandler {
 		];
 
 		let checkbox_id = CheckboxId::new();
-		let vello_tooltip = "Use the experimental Vello renderer (your browser must support WebGPU)";
+		let vello_description = "Use the experimental Vello renderer. (Your browser must support WebGPU).";
 		let use_vello = vec![
 			Separator::new(SeparatorType::Unrelated).widget_holder(),
 			Separator::new(SeparatorType::Unrelated).widget_holder(),
 			CheckboxInput::new(preferences.use_vello && preferences.supports_wgpu())
-				.tooltip(vello_tooltip)
+				.tooltip_label("Vello Renderer")
+				.tooltip_description(vello_description)
 				.disabled(!preferences.supports_wgpu())
 				.on_update(|checkbox_input: &CheckboxInput| PreferencesMessage::UseVello { use_vello: checkbox_input.checked }.into())
 				.for_label(checkbox_id)
 				.widget_holder(),
 			TextLabel::new("Vello Renderer")
-				.table_align(true)
-				.tooltip(vello_tooltip)
+				.tooltip_label("Vello Renderer")
+				.tooltip_description(vello_description)
 				.disabled(!preferences.supports_wgpu())
 				.for_checkbox(checkbox_id)
+				.table_align(true)
 				.widget_holder(),
 		];
 
 		let checkbox_id = CheckboxId::new();
-		let vector_mesh_tooltip =
-			"Allow tools to produce vector meshes, where more than two segments can connect to an anchor point.\n\nCurrently this does not properly handle stroke joins and fills.";
+		let vector_mesh_description = "
+			Allow tools to produce vector meshes, where more than two segments can connect to an anchor point.\n\
+			Currently this does not properly handle stroke joins and fills.
+			"
+		.trim();
 		let vector_meshes = vec![
 			Separator::new(SeparatorType::Unrelated).widget_holder(),
 			Separator::new(SeparatorType::Unrelated).widget_holder(),
 			CheckboxInput::new(preferences.vector_meshes)
-				.tooltip(vector_mesh_tooltip)
+				.tooltip_label("Vector Meshes")
+				.tooltip_description(vector_mesh_description)
 				.on_update(|checkbox_input: &CheckboxInput| PreferencesMessage::VectorMeshes { enabled: checkbox_input.checked }.into())
 				.for_label(checkbox_id)
 				.widget_holder(),
-			TextLabel::new("Vector Meshes").table_align(true).tooltip(vector_mesh_tooltip).for_checkbox(checkbox_id).widget_holder(),
+			TextLabel::new("Vector Meshes")
+				.tooltip_label("Vector Meshes")
+				.tooltip_description(vector_mesh_description)
+				.for_checkbox(checkbox_id)
+				.table_align(true)
+				.widget_holder(),
 		];
 
 		Layout::WidgetLayout(WidgetLayout::new(vec![

editor/src/messages/dialog/simple_dialogs/licenses_dialog.rs

@@ -49,16 +49,19 @@ impl DialogLayoutHolder for LicensesDialog {
 
 impl LayoutHolder for LicensesDialog {
 	fn layout(&self) -> Layout {
-		let description = concat!(
-			"The Graphite logo and brand identity are copyright © [YEAR]\nGraphite Labs, LLC. See \"Graphite Logo\" for usage policy.",
-			"\n\n",
-			"The Graphite editor's icons and design assets are copyright\n© [YEAR] Graphite Labs, LLC. See \"Graphite Icons\" for details.",
-			"\n\n",
-			"Graphite code is copyright © [YEAR] Graphite contributors\nand is made available under the Apache 2.0 license. See\n\"Graphite License\" for details.",
-			"\n\n",
-			"Graphite is distributed with third-party open source code\ndependencies. See \"Other Licenses\" for details.",
-		)
-		.replace("[YEAR]", &self.localized_commit_year);
+		let year = &self.localized_commit_year;
+		let description = format!(
+			"
+			The Graphite logo and brand identity are copyright © {year}\nGraphite Labs, LLC. See \"Graphite Logo\" for usage policy.\n\
+			\n\
+			The Graphite editor's icons and design assets are copyright\n© {year} Graphite Labs, LLC. See \"Graphite Icons\" for details.\n\
+			\n\
+			Graphite code is copyright © {year} Graphite contributors\nand is made available under the Apache 2.0 license. See\n\"Graphite License\" for details.\n\
+			\n\
+			Graphite is distributed with third-party open source code\ndependencies. See \"Other Licenses\" for details.
+			"
+		);
+		let description = description.trim();
 
 		Layout::WidgetLayout(WidgetLayout::new(vec![
 			LayoutGroup::Row {

editor/src/messages/input_mapper/input_mappings.rs

@@ -410,7 +410,6 @@ pub fn input_mappings() -> Mapping {
 		entry!(KeyDown(FakeKeyPlus); modifiers=[Accel], canonical, action_dispatch=NavigationMessage::CanvasZoomIncrease { center_on_mouse: false }),
 		entry!(KeyDown(Equal); modifiers=[Accel], action_dispatch=NavigationMessage::CanvasZoomIncrease { center_on_mouse: false }),
 		entry!(KeyDown(Minus); modifiers=[Accel], action_dispatch=NavigationMessage::CanvasZoomDecrease { center_on_mouse: false }),
-		entry!(KeyDown(KeyF); modifiers=[Alt], action_dispatch=NavigationMessage::CanvasFlip),
 		entry!(WheelScroll; modifiers=[Control], action_dispatch=NavigationMessage::CanvasZoomMouseWheel),
 		entry!(WheelScroll; modifiers=[Shift], action_dispatch=NavigationMessage::CanvasPanMouseWheel { use_y_as_x: true }),
 		entry!(WheelScroll; action_dispatch=NavigationMessage::CanvasPanMouseWheel { use_y_as_x: false }),

editor/src/messages/input_mapper/utility_types/input_keyboard.rs

@@ -296,9 +296,9 @@ impl fmt::Display for Key {
 				KeyboardPlatformLayout::Standard => "Ctrl",
 				KeyboardPlatformLayout::Mac => "⌘",
 			},
-			Self::MouseLeft => "LMB",
-			Self::MouseRight => "RMB",
-			Self::MouseMiddle => "MMB",
+			Self::MouseLeft => "Click",
+			Self::MouseRight => "R.Click",
+			Self::MouseMiddle => "M.Click",
 			Self::MouseBack => "Mouse Back",
 			Self::MouseForward => "Mouse Fwd",
 
@@ -321,7 +321,7 @@ impl From<Key> for LayoutKey {
 
 #[derive(Debug, Clone, PartialEq, Eq, Hash, serde::Serialize, serde::Deserialize, specta::Type)]
 pub struct LayoutKey {
-	pub key: Key,
+	key: Key,
 	label: String,
 }