diff --git a/frappe/public/js/frappe/ui/sidebar/sidebar.js b/frappe/public/js/frappe/ui/sidebar/sidebar.js index 3f86bae8fc..1b4a37b301 100644 --- a/frappe/public/js/frappe/ui/sidebar/sidebar.js +++ b/frappe/public/js/frappe/ui/sidebar/sidebar.js @@ -240,6 +240,9 @@ frappe.ui.Sidebar = class Sidebar { icon: "search", type: "Button", id: "navbar-modal-search", + suffix: { + keyboard_shortcut: "CtrlK", + }, }, ]; this.standard_items.forEach((w) => { diff --git a/frappe/public/js/frappe/ui/sidebar/sidebar_item.html b/frappe/public/js/frappe/ui/sidebar/sidebar_item.html index f58db7f4cf..75c01cb9ce 100644 --- a/frappe/public/js/frappe/ui/sidebar/sidebar_item.html +++ b/frappe/public/js/frappe/ui/sidebar/sidebar_item.html @@ -35,6 +35,9 @@ {% } %} + {% if (item.suffix) { %} + + {% } %} {% if (!item.show_arrow) { %}
{% } %} diff --git a/frappe/public/js/frappe/ui/sidebar/sidebar_item.js b/frappe/public/js/frappe/ui/sidebar/sidebar_item.js index 00a6d9b9af..01f4fe7cbc 100644 --- a/frappe/public/js/frappe/ui/sidebar/sidebar_item.js +++ b/frappe/public/js/frappe/ui/sidebar/sidebar_item.js @@ -56,6 +56,7 @@ frappe.ui.sidebar_item.TypeLink = class SidebarItem { prepare() {} make() { this.path = this.get_path(); + this.set_suffix(); if (!this.item.icon && !(this.item.child && this.item.parent.indent)) { this.item.icon = "list-alt"; } @@ -69,6 +70,19 @@ frappe.ui.sidebar_item.TypeLink = class SidebarItem { $(this.container).append(this.wrapper); this.setup_editing_controls(); } + set_suffix() { + if (this.item.suffix) { + if (this.item.suffix.keyboard_shortcut) { + this.item.suffix = this.get_shortcut_html(this.item.suffix.keyboard_shortcut); + } + } + } + get_shortcut_html(shortcut) { + if (frappe.utils.is_mac()) { + shortcut = shortcut.replace("Ctrl", "⌘"); + } + return ``; + } setup_editing_controls() { this.menu_items = this.get_menu_items(); this.$edit_menu = this.wrapper.find(".edit-menu"); diff --git a/frappe/public/scss/desk/sidebar.scss b/frappe/public/scss/desk/sidebar.scss index 646c30394f..c53942ada1 100644 --- a/frappe/public/scss/desk/sidebar.scss +++ b/frappe/public/scss/desk/sidebar.scss @@ -280,3 +280,13 @@ .indent + .nested-container { margin-left: 16px; } +.sidebar-item-suffix { + margin-left: auto; + .keyboard-shortcut { + color: var(--ink-gray-4, #999999); + font-size: var(--text-sm); + line-height: 1.15; + letter-spacing: 0.02em; + font-weight: 420; + } +}