fix: MacOS shortcuts (backport #25272) (#25280)

* fix: mac shortcuts

- "Command" symbol in Navbar
- Show "Alt" symbol instead of text

(cherry picked from commit 4e77e5f)

* fix: show "Shift" symbol istead of text

(cherry picked from commit e9a57de)

* fix: settings and help shortcuts

(cherry picked from commit 04a1b54)

---------

Co-authored-by: barredterra <14891507+barredterra@users.noreply.github.com>

frappe/public/js/frappe/form/toolbar.js

@@ -453,7 +453,7 @@ frappe.ui.form.Toolbar = class Toolbar {
 			},
 			true,
 			{
-				shortcut: "ctrl+z",
+				shortcut: "Ctrl+Z",
 				condition: () => !this.frm.is_form_builder(),
 				description: __("Undo last action"),
 			}
@@ -465,7 +465,7 @@ frappe.ui.form.Toolbar = class Toolbar {
 			},
 			true,
 			{
-				shortcut: "ctrl+y",
+				shortcut: "Ctrl+Y",
 				condition: () => !this.frm.is_form_builder(),
 				description: __("Redo last action"),
 			}

frappe/public/js/frappe/ui/keyboard.js

@@ -98,8 +98,11 @@ frappe.ui.keys.show_keyboard_shortcut_dialog = () => {
 					.map(frappe.utils.to_title_case)
 					.join("+");
 				if (frappe.utils.is_mac()) {
-					shortcut_label = shortcut_label.replace("Ctrl", "⌘");
+					shortcut_label = shortcut_label.replace("Ctrl", "⌘").replace("Alt", "⌥");
 				}
+
+				shortcut_label = shortcut_label.replace("Shift", "⇧");
+
 				return `<tr>
 					<td width="40%"><kbd>${shortcut_label}</kbd></td>
 					<td width="60%">${shortcut.description || ""}</td>
@@ -215,7 +218,7 @@ frappe.ui.keys.add_shortcut({
 	shortcut: "alt+s",
 	action: function (e) {
 		e.preventDefault();
-		$(".dropdown-navbar-user a").eq(0).click();
+		$(".dropdown-navbar-user button").eq(0).click();
 	},
 	description: __("Open Settings"),
 });
@@ -232,7 +235,7 @@ frappe.ui.keys.add_shortcut({
 	shortcut: "alt+h",
 	action: function (e) {
 		e.preventDefault();
-		$(".dropdown-help a").eq(0).click();
+		$(".dropdown-help button").eq(0).click();
 	},
 	description: __("Open Help"),
 });

frappe/public/js/frappe/ui/page.js

@@ -536,10 +536,15 @@ frappe.ui.Page = class Page {
 		}
 		// label
 		if (frappe.utils.is_mac()) {
-			shortcut_obj.shortcut_label = shortcut_obj.shortcut.replace("Ctrl", "⌘");
+			shortcut_obj.shortcut_label = shortcut_obj.shortcut
+				.replace("Ctrl", "⌘")
+				.replace("Alt", "⌥");
 		} else {
 			shortcut_obj.shortcut_label = shortcut_obj.shortcut;
 		}
+
+		shortcut_obj.shortcut_label = shortcut_obj.shortcut_label.replace("Shift", "⇧");
+
 		// actual shortcut string
 		shortcut_obj.shortcut = shortcut_obj.shortcut.toLowerCase();
 		// action is button click

frappe/public/js/frappe/ui/toolbar/navbar.html

@@ -26,7 +26,7 @@
 						id="navbar-search"
 						type="text"
 						class="form-control"
-						placeholder="{%= __("Search or type a command (Ctrl + G)") %}"
+						placeholder="{%= __('Search or type a command ({0})', [frappe.utils.is_mac() ? '⌘ + G' : 'Ctrl + G']) %}"
 						aria-haspopup="true"
 					>
 					<span class="search-icon">