Improve navigation footer bar hints

editor/src/messages/portfolio/document/navigation/navigation_message_handler.rs

@@ -196,9 +196,10 @@ impl MessageHandler<NavigationMessage, (&Document, Option<[DVec2; 2]>, &InputPre
 							mouse: None,
 							label: String::from("Snap 15°"),
 							plus: false,
+							slash: false,
 						}]),
 						HintGroup(vec![HintInfo::mouse(MouseMotion::Lmb, "Confirm")]),
-						HintGroup(vec![HintInfo::mouse(MouseMotion::Rmb, "Abort")]),
+						HintGroup(vec![HintInfo::mouse(MouseMotion::Rmb, "Cancel")]),
 					]),
 				});
 
@@ -269,7 +270,7 @@ impl MessageHandler<NavigationMessage, (&Document, Option<[DVec2; 2]>, &InputPre
 				responses.add(FrontendMessage::UpdateMouseCursor { cursor: MouseCursorIcon::Grabbing });
 
 				responses.add(FrontendMessage::UpdateInputHints {
-					hint_data: HintData(vec![HintGroup(vec![HintInfo::mouse(MouseMotion::Rmb, "Abort")])]),
+					hint_data: HintData(vec![HintGroup(vec![HintInfo::mouse(MouseMotion::Rmb, "Cancel")])]),
 				});
 
 				self.mouse_position = ipp.mouse.position;
@@ -308,10 +309,11 @@ impl MessageHandler<NavigationMessage, (&Document, Option<[DVec2; 2]>, &InputPre
 							key_groups: vec![KeysGroup(vec![Key::Control]).into()],
 							key_groups_mac: None,
 							mouse: None,
-							label: String::from("Snap Increments"),
+							label: String::from("Increments"),
 							plus: false,
+							slash: false,
 						}]),
-						HintGroup(vec![HintInfo::mouse(MouseMotion::Rmb, "Abort")]),
+						HintGroup(vec![HintInfo::mouse(MouseMotion::Rmb, "Cancel")]),
 					]),
 				});
 

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

@@ -162,16 +162,15 @@ impl Fsm for NavigateToolFsmState {
 		let hint_data = match self {
 			NavigateToolFsmState::Ready => HintData(vec![
 				HintGroup(vec![HintInfo::mouse(MouseMotion::Lmb, "Zoom In"), HintInfo::keys([Key::Shift], "Zoom Out").prepend_plus()]),
-				HintGroup(vec![HintInfo::mouse(MouseMotion::LmbDrag, "Zoom"), HintInfo::keys([Key::Control], "Snap Increments").prepend_plus()]),
+				HintGroup(vec![HintInfo::mouse(MouseMotion::LmbDrag, "Zoom"), HintInfo::keys([Key::Control], "Increments").prepend_plus()]),
 				HintGroup(vec![
-					HintInfo::mouse(MouseMotion::LmbDrag, " "),
+					HintInfo::keys_and_mouse([Key::Space], MouseMotion::LmbDrag, ""),
-					HintInfo::keys([Key::Space], "Or").prepend_plus(),
+					HintInfo::mouse(MouseMotion::MmbDrag, "Pan").prepend_slash(),
-					HintInfo::mouse(MouseMotion::MmbDrag, "Pan"),
 				]),
-				HintGroup(vec![HintInfo::mouse(MouseMotion::LmbDrag, ""), HintInfo::keys([Key::Alt], "Tilt").prepend_plus()]),
+				HintGroup(vec![HintInfo::keys_and_mouse([Key::Alt], MouseMotion::LmbDrag, "Tilt")]),
 			]),
 			NavigateToolFsmState::Tilting => HintData(vec![HintGroup(vec![HintInfo::keys([Key::Control], "Snap 15°")])]),
-			NavigateToolFsmState::Zooming => HintData(vec![HintGroup(vec![HintInfo::keys([Key::Control], "Snap Increments")])]),
+			NavigateToolFsmState::Zooming => HintData(vec![HintGroup(vec![HintInfo::keys([Key::Control], "Increments")])]),
 			_ => HintData(Vec::new()),
 		};
 

editor/src/messages/tool/utility_types.rs

@@ -495,6 +495,8 @@ pub struct HintInfo {
 	pub label: String,
 	/// Draws a prepended "+" symbol which indicates that this is a refinement upon a previous hint in the group.
 	pub plus: bool,
+	/// Draws a prepended "/" symbol which indicates that this is an alternative to a previous hint in the group.
+	pub slash: bool,
 }
 
 impl HintInfo {
@@ -506,6 +508,19 @@ impl HintInfo {
 			mouse: None,
 			label: label.into(),
 			plus: false,
+			slash: false,
+		}
+	}
+
+	pub fn multi_keys(multi_keys: impl IntoIterator<Item = impl IntoIterator<Item = Key>>, label: impl Into<String>) -> Self {
+		let key_groups = multi_keys.into_iter().map(|keys| KeysGroup(keys.into_iter().collect()).into()).collect();
+		Self {
+			key_groups,
+			key_groups_mac: None,
+			mouse: None,
+			label: label.into(),
+			plus: false,
+			slash: false,
 		}
 	}
 
@@ -516,6 +531,7 @@ impl HintInfo {
 			mouse: Some(mouse_motion),
 			label: label.into(),
 			plus: false,
+			slash: false,
 		}
 	}
 
@@ -526,6 +542,7 @@ impl HintInfo {
 			mouse: None,
 			label: label.into(),
 			plus: false,
+			slash: false,
 		}
 	}
 
@@ -537,22 +554,25 @@ impl HintInfo {
 			mouse: Some(mouse_motion),
 			label: label.into(),
 			plus: false,
+			slash: false,
+		}
+	}
+
+	pub fn multi_keys_and_mouse(multi_keys: impl IntoIterator<Item = impl IntoIterator<Item = Key>>, mouse_motion: MouseMotion, label: impl Into<String>) -> Self {
+		let key_groups = multi_keys.into_iter().map(|keys| KeysGroup(keys.into_iter().collect()).into()).collect();
+		Self {
+			key_groups,
+			key_groups_mac: None,
+			mouse: Some(mouse_motion),
+			label: label.into(),
+			plus: false,
+			slash: false,
 		}
 	}
 
 	pub fn arrow_keys(label: impl Into<String>) -> Self {
-		HintInfo {
+		let multi_keys = [[Key::ArrowUp], [Key::ArrowRight], [Key::ArrowDown], [Key::ArrowLeft]];
-			key_groups: vec![
+		Self::multi_keys(multi_keys, label)
-				KeysGroup(vec![Key::ArrowUp]).into(),
-				KeysGroup(vec![Key::ArrowRight]).into(),
-				KeysGroup(vec![Key::ArrowDown]).into(),
-				KeysGroup(vec![Key::ArrowLeft]).into(),
-			],
-			key_groups_mac: None,
-			mouse: None,
-			label: label.into(),
-			plus: false,
-		}
 	}
 
 	pub fn prepend_plus(mut self) -> Self {
@@ -560,6 +580,11 @@ impl HintInfo {
 		self
 	}
 
+	pub fn prepend_slash(mut self) -> Self {
+		self.slash = true;
+		self
+	}
+
 	pub fn add_mac_keys(mut self, keys: impl IntoIterator<Item = Key>) -> Self {
 		let mac_keys: Vec<_> = keys.into_iter().collect();
 		self.key_groups_mac = Some(vec![KeysGroup(mac_keys).into()]);

frontend/src/components/widgets/labels/UserInputLabel.svelte

@@ -225,7 +225,7 @@
 			}
 		}
 
-		.hint-text {
+		.hint-text:not(:empty) {
 			margin-left: 4px;
 		}
 

frontend/src/components/window/status-bar/StatusBar.svelte

@@ -35,6 +35,9 @@
 				{#if hint.plus}
 					<LayoutRow class="plus">+</LayoutRow>
 				{/if}
+				{#if hint.slash}
+					<LayoutRow class="slash">/</LayoutRow>
+				{/if}
 				<UserInputLabel mouseMotion={hint.mouse} keysWithLabelsGroups={inputKeysForPlatform(hint)}>{hint.label}</UserInputLabel>
 			{/each}
 		{/each}
@@ -57,7 +60,8 @@
 				margin: 0;
 			}
 
-			.plus {
+			.plus,
+			.slash {
 				flex: 0 0 auto;
 				align-items: center;
 				font-weight: 700;

frontend/src/wasm-communication/messages.ts

@@ -172,6 +172,8 @@ export class HintInfo {
 	readonly label!: string;
 
 	readonly plus!: boolean;
+
+	readonly slash!: boolean;
 }
 
 // Rust enum `Key`