diff --git a/cypress/integration/awesome_bar.js b/cypress/integration/awesome_bar.js index 3139db8957..f82fe19c24 100644 --- a/cypress/integration/awesome_bar.js +++ b/cypress/integration/awesome_bar.js @@ -10,11 +10,15 @@ context("Awesome Bar", () => { }); beforeEach(() => { + cy.get("body").click(0, 0); // Click on some blank space to avoid any modals. let txt = `Search or type a command (${ window.navigator.platform === "MacIntel" ? "⌘" : "Ctrl" } + K)`; - cy.findByPlaceholderText(txt).as("awesome_bar"); - cy.get("@awesome_bar").type("{selectall}"); + cy.contains(txt).as("awesome_bar_search"); + cy.get("@awesome_bar_search").click(); + cy.get("#navbar-search").as("awesome_bar"); + cy.get("#navbar-search").type("{selectall}"); + cy.wait(400); }); after(() => { @@ -22,6 +26,10 @@ context("Awesome Bar", () => { cy.clear_filters(); }); + it("opens awesome bar on click", () => { + cy.get("@awesome_bar").should("be.visible"); + }); + it("navigates to doctype list", () => { cy.get("@awesome_bar").type("todo"); cy.wait(100); // Wait a bit before hitting enter. @@ -45,6 +53,8 @@ context("Awesome Bar", () => { cy.wait(200); // Wait a bit longer before checking the filter. cy.get('[data-original-title="ID"]:visible > input').as("filter"); cy.get("@filter").should("have.value", "%test%"); + cy.get("@awesome_bar_search").click(); + cy.wait(400); cy.get("@awesome_bar").type("anothertest in todo"); cy.wait(200); // Wait a bit longer before hitting enter. cy.get("@awesome_bar").type("{enter}"); diff --git a/frappe/desk/page/desktop/desktop.css b/frappe/desk/page/desktop/desktop.css index 4aa6067411..cea47ff018 100644 --- a/frappe/desk/page/desktop/desktop.css +++ b/frappe/desk/page/desktop/desktop.css @@ -36,13 +36,13 @@ position: relative; } -#navbar-search{ +#navbar-modal-search{ padding-left: 32px; } .desktop-search-icon{ position: absolute; left: 10px; - top: 2px; + top: 4px; } .desktop-search-icon > .icon { diff --git a/frappe/desk/page/desktop/desktop.html b/frappe/desk/page/desktop/desktop.html index 03515cbc9f..211a77e2b5 100644 --- a/frappe/desk/page/desktop/desktop.html +++ b/frappe/desk/page/desktop/desktop.html @@ -9,13 +9,9 @@ >
- + diff --git a/frappe/desk/page/desktop/desktop.js b/frappe/desk/page/desktop/desktop.js index 99bdeffd73..ace66eed6e 100644 --- a/frappe/desk/page/desktop/desktop.js +++ b/frappe/desk/page/desktop/desktop.js @@ -199,21 +199,12 @@ class DesktopPage { setup_awesomebar() { if (frappe.boot.desk_settings.search_bar) { let awesome_bar = new frappe.search.AwesomeBar(); - awesome_bar.setup(".desktop-search-wrapper #navbar-search"); + awesome_bar.setup(".desktop-search-wrapper #navbar-modal-search"); } frappe.ui.keys.add_shortcut({ shortcut: "ctrl+g", action: function (e) { - $(".desktop-search-wrapper #navbar-search").focus(); - e.preventDefault(); - return false; - }, - description: __("Open Awesomebar"), - }); - frappe.ui.keys.add_shortcut({ - shortcut: "ctrl+k", - action: function (e) { - $(".desktop-search-wrapper #navbar-search").focus(); + $(".desktop-search-wrapper #navbar-modal-search").click(); e.preventDefault(); return false; }, diff --git a/frappe/public/js/frappe/ui/keyboard.js b/frappe/public/js/frappe/ui/keyboard.js index a824074298..daecc0bb59 100644 --- a/frappe/public/js/frappe/ui/keyboard.js +++ b/frappe/public/js/frappe/ui/keyboard.js @@ -200,17 +200,7 @@ frappe.ui.keys.add_shortcut({ frappe.ui.keys.add_shortcut({ shortcut: "ctrl+k", action: function (e) { - $("#navbar-search").focus(); - e.preventDefault(); - return false; - }, - description: __("Open Awesomebar"), -}); - -frappe.ui.keys.add_shortcut({ - shortcut: "ctrl+k", - action: function (e) { - $("#navbar-search").focus(); + $("#navbar-modal-search").click(); e.preventDefault(); return false; }, @@ -220,7 +210,7 @@ frappe.ui.keys.add_shortcut({ frappe.ui.keys.add_shortcut({ shortcut: "ctrl+g", action: function (e) { - $("#navbar-search").focus(); + $("#navbar-modal-search").click(); e.preventDefault(); return false; }, diff --git a/frappe/public/js/frappe/ui/toolbar/awesome_bar.js b/frappe/public/js/frappe/ui/toolbar/awesome_bar.js index 0213394e89..4273c8cdfb 100644 --- a/frappe/public/js/frappe/ui/toolbar/awesome_bar.js +++ b/frappe/public/js/frappe/ui/toolbar/awesome_bar.js @@ -5,15 +5,80 @@ frappe.provide("frappe.tags"); frappe.search.AwesomeBar = class AwesomeBar { setup(element) { - var me = this; - $(".search-bar").removeClass("hidden"); - var $input = $(element); - var input = $input.get(0); this.options = []; this.global_results = []; + this.setup_search_modal(element); + + frappe.search.utils.setup_recent(); + } + + setup_search_modal(element) { + let is_event_listeners_added = false; + let $search_element = $(element); + + let search_modal = new frappe.get_modal("Search", ""); + + search_modal.on("shown.bs.modal", () => { + search_modal.find("#navbar-search").get(0).focus(); + }); + + let search_modal_body = `
+
${frappe.utils.icon("search")}
+ +
+
`; + + let search_modal_footer = `
+
+ + ${frappe.utils.icon("arrow-up")} + ${frappe.utils.icon("arrow-down")} + ${__("to navigate")} + + + ${frappe.utils.icon("corner-down-left")} + ${__("to select")} + + ${__("esc")} + ${__("to close")} +
+
${frappe.utils.icon("circle-question-mark")}
+
`; + + search_modal.find(".modal-body").css("padding", "0").html(search_modal_body); + search_modal.find(".modal-header").css("display", "none"); + search_modal + .find(".modal-footer") + .removeClass("hide") + .addClass("cool-awesomebar-modal-footer") + .html(search_modal_footer); + search_modal.find(".pointer").on("click", () => { + this.show_help(); + }); + + $search_element.on("click", () => { + search_modal.modal("show"); + + if (is_event_listeners_added) return; + is_event_listeners_added = true; + + this.setup_event_listeners(search_modal); + }); + } + + setup_event_listeners(search_modal) { + var me = this; + let $input = search_modal.find("#navbar-search"); + let input = $input.get(0); + var awesomplete = new Awesomplete(input, { minChars: 0, maxItems: 99, @@ -85,10 +150,9 @@ frappe.search.AwesomeBar = class AwesomeBar { ); me.options = me.options.concat(frappe.search.utils.get_frequent_links()); } - me.add_help(); awesomplete.list = me.deduplicate(me.options); - }, 100) + }, 50) ); var open_recent = function () { @@ -96,6 +160,7 @@ frappe.search.AwesomeBar = class AwesomeBar { $(this).trigger("input"); } }; + $input.on("focus", open_recent); $input.on("awesomplete-open", function (e) { @@ -130,6 +195,7 @@ frappe.search.AwesomeBar = class AwesomeBar { } $input.val(""); $input.trigger("blur"); + search_modal.modal("hide"); }); $input.on("awesomplete-selectcomplete", function (e) { @@ -141,51 +207,43 @@ frappe.search.AwesomeBar = class AwesomeBar { $input.trigger("blur"); } }); - frappe.search.utils.setup_recent(); } - add_help() { - this.options.push({ - value: __("Help on Search"), - index: -10, - default: "Help", - onclick: function () { - var txt = - '\ - \ - \ - \ - \ - \ - \ -
' + - __("Create a new record") + - "" + - __("new type of document") + - "
" + - __("List a document type") + - "" + - __("document type..., e.g. customer") + - "
" + - __("Search in a document type") + - "" + - __("text in document type") + - "
" + - __("Tags") + - "" + - __("tag name..., e.g. #tag") + - "
" + - __("Open a module or tool") + - "" + - __("module name...") + - "
" + - __("Calculate") + - "" + - __("e.g. (55 + 434) / 4 or =Math.sin(Math.PI/2)...") + - "
"; - frappe.msgprint(txt, __("Search Help")); - }, - }); + show_help() { + const txt = + '\ + \ + \ + \ + \ + \ + \ +
' + + __("Create a new record") + + "" + + __("new type of document") + + "
" + + __("List a document type") + + "" + + __("document type..., e.g. customer") + + "
" + + __("Search in a document type") + + "" + + __("text in document type") + + "
" + + __("Tags") + + "" + + __("tag name..., e.g. #tag") + + "
" + + __("Open a module or tool") + + "" + + __("module name...") + + "
" + + __("Calculate") + + "" + + __("e.g. (55 + 434) / 4 or =Math.sin(Math.PI/2)...") + + "
"; + frappe.msgprint(txt, __("Search Help")); } set_specifics(txt, end_txt) { @@ -299,7 +357,10 @@ frappe.search.AwesomeBar = class AwesomeBar { this.options.push({ label: ` - ${__("Search for {0}", [frappe.utils.xss_sanitise(txt).bold()])} + ${ + frappe.search.utils.make_icon("search") + + __("Search for {0}", [frappe.utils.xss_sanitise(txt).bold()]) + } ↵ `, @@ -324,10 +385,12 @@ frappe.search.AwesomeBar = class AwesomeBar { var options = {}; options[search_field] = ["like", "%" + txt + "%"]; this.options.push({ - label: __("Find {0} in {1}", [ - frappe.utils.xss_sanitise(txt).bold(), - __(route[1]).bold(), - ]), + label: + frappe.search.utils.make_icon("search") + + __("Find {0} in {1}", [ + frappe.utils.xss_sanitise(txt).bold(), + __(route[1]).bold(), + ]), value: __("Find {0} in {1}", [frappe.utils.xss_sanitise(txt), __(route[1])]), route_options: options, onclick: function () { @@ -394,7 +457,7 @@ frappe.search.AwesomeBar = class AwesomeBar { make_random(txt) { if (txt.toLowerCase().includes("random")) { this.options.push({ - label: __("Generate Random Password"), + label: frappe.search.utils.make_icon("key") + __("Generate Random Password"), value: frappe.utils.get_random(16), onclick: function () { frappe.msgprint(frappe.utils.get_random(16), __("Result")); diff --git a/frappe/public/js/frappe/ui/toolbar/navbar.html b/frappe/public/js/frappe/ui/toolbar/navbar.html index 9e1ba1c7f7..9410c876b5 100644 --- a/frappe/public/js/frappe/ui/toolbar/navbar.html +++ b/frappe/public/js/frappe/ui/toolbar/navbar.html @@ -22,13 +22,13 @@ {% } %} diff --git a/frappe/public/js/frappe/ui/toolbar/search_utils.js b/frappe/public/js/frappe/ui/toolbar/search_utils.js index 1a4b08eef3..1226d9f9bd 100644 --- a/frappe/public/js/frappe/ui/toolbar/search_utils.js +++ b/frappe/public/js/frappe/ui/toolbar/search_utils.js @@ -5,6 +5,11 @@ frappe.search.utils = { setup_recent: function () { this.recent = JSON.parse(frappe.boot.user.recent || "[]") || []; }, + make_icon(name) { + return `${frappe.utils.icon( + name + )}`; + }, results_to_hide: [], get_recent_pages: function (keywords) { if (keywords === null) keywords = ""; @@ -66,10 +71,10 @@ frappe.search.utils = { const doctype = route[1]; if (route.length > 2 && doctype !== route[2]) { const docname = route[2]; - out.label = __(doctype) + " " + docname.bold(); + out.label = me.make_icon("sticky-note") + __(doctype) + " " + docname.bold(); out.value = __(doctype) + " " + docname; } else { - out.label = __(doctype).bold(); + out.label = me.make_icon("sticky-note") + __(doctype).bold(); out.value = __(doctype); } } else if ( @@ -78,24 +83,30 @@ frappe.search.utils = { ) { const view_type = route[0]; const view_name = route[1]; + + let icon, labelSuffix; + switch (view_type) { case "List": - out.label = __("{0} List", [__(view_name).bold()]); - out.value = __("{0} List", [__(view_name)]); + icon = me.make_icon("list"); + labelSuffix = __("List"); break; case "Tree": - out.label = __("{0} Tree", [__(view_name).bold()]); - out.value = __("{0} Tree", [__(view_name)]); + icon = me.make_icon("list-tree"); + labelSuffix = __("Tree"); break; case "Workspaces": - out.label = __("{0} Workspace", [__(view_name).bold()]); - out.value = __("{0} Workspace", [__(view_name)]); + icon = me.make_icon("wallpaper"); + labelSuffix = __("Workspace"); break; case "query-report": - out.label = __("{0} Report", [__(view_name).bold()]); - out.value = __("{0} Report", [__(view_name)]); + icon = me.make_icon("table"); + labelSuffix = __("Report"); break; } + + out.label = icon + __(view_name.bold()) + " " + labelSuffix; + out.value = __(view_name) + " " + labelSuffix; } else if (match[0]) { out.label = frappe.utils.escape_html(match[0]).bold(); out.value = match[0]; @@ -173,7 +184,9 @@ frappe.search.utils = { if (level) { out.push({ type: "New", - label: __("New {0}", [search_result.marked_string || __(item)]), + label: + me.make_icon("circle-plus") + + __("New {0}", [search_result.marked_string || __(item)]), value: __("New {0}", [__(item)]), index: 1 + level, match: item, @@ -201,6 +214,13 @@ frappe.search.utils = { } else { label = __(`{0} ${skip_list ? "" : type}`, [marked_string || __(target)]); } + if (type === "List") { + label = me.make_icon("list") + label; + } else if (type === "Report") { + label = me.make_icon("table") + label; + } else { + label = me.make_icon("search") + label; + } return { type: type, label: label, @@ -223,7 +243,9 @@ frappe.search.utils = { var match = item; out.push({ type: "New", - label: __("New {0}", [search_result.marked_string || __(item)]), + label: + me.make_icon("circle-plus") + + __("New {0}", [search_result.marked_string || __(item)]), value: __("New {0}", [__(item)]), index: score + 0.015, match: item, @@ -257,7 +279,9 @@ frappe.search.utils = { else route = ["query-report", item]; out.push({ type: "Report", - label: __("Report {0}", [search_result.marked_string || __(item)]), + label: + me.make_icon("grid-3x3") + + __("Report {0}", [search_result.marked_string || __(item)]), value: __("Report {0}", [__(item)]), index: level, route: route, @@ -283,7 +307,9 @@ frappe.search.utils = { var page = me.pages[item]; out.push({ type: "Page", - label: __("Open {0}", [search_result.marked_string || __(item)]), + label: + me.make_icon("file-text") + + __("Open {0}", [search_result.marked_string || __(item)]), value: __("Open {0}", [__(item)]), match: item, index: level, @@ -295,6 +321,7 @@ frappe.search.utils = { if (__("calendar").indexOf(keywords.toLowerCase()) === 0) { out.push({ type: "Calendar", + label: me.make_icon("calendar") + __("Open {0}", [__(target)]), value: __("Open {0}", [__(target)]), index: me.fuzzy_search(keywords, "Calendar"), match: target, @@ -305,6 +332,7 @@ frappe.search.utils = { if (__("hub").indexOf(keywords.toLowerCase()) === 0) { out.push({ type: "Hub", + label: me.make_icon("earth-lock") + __("Open {0}", [__(target)]), value: __("Open {0}", [__(target)]), index: me.fuzzy_search(keywords, "Hub"), match: target, @@ -314,6 +342,7 @@ frappe.search.utils = { if (__("email inbox").indexOf(keywords.toLowerCase()) === 0) { out.push({ type: "Inbox", + label: me.make_icon("inbox") + __("Open {0}", [__("Email Inbox")]), value: __("Open {0}", [__("Email Inbox")]), index: me.fuzzy_search(keywords, "email inbox"), match: target, @@ -332,7 +361,9 @@ frappe.search.utils = { if (level > 0) { var ret = { type: "Workspace", - label: __("Open {0}", [search_result.marked_string || __(item.name)]), + label: + me.make_icon("wallpaper") + + __("Open {0}", [search_result.marked_string || __(item.name)]), value: __("Open {0}", [__(item.name)]), index: level, route: [frappe.router.slug(item.name)], @@ -353,7 +384,9 @@ frappe.search.utils = { if (level > 0) { var ret = { type: "Dashboard", - label: __("{0} Dashboard", [search_result.marked_string || __(item.name)]), + label: + me.make_icon("layout-dashboard") + + __("{0} Dashboard", [search_result.marked_string || __(item.name)]), value: __("{0} Dashboard", [__(item.name)]), index: level, route: ["dashboard-view", item.name], @@ -675,7 +708,9 @@ frappe.search.utils = { const search_result = me.fuzzy_search(keywords, item.title, true); if (search_result.score > 0) { var ret = { - label: __("Install {0} from Marketplace", [search_result.marked_string]), + label: + me.make_icon("arrow-down-from-line") + + __("Install {0} from Marketplace", [search_result.marked_string]), value: __("Install {0} from Marketplace", [__(item.title)]), index: search_result.score * 0.8, route: [ diff --git a/frappe/public/js/frappe/ui/toolbar/toolbar.js b/frappe/public/js/frappe/ui/toolbar/toolbar.js index 59fb87827f..251ab50301 100644 --- a/frappe/public/js/frappe/ui/toolbar/toolbar.js +++ b/frappe/public/js/frappe/ui/toolbar/toolbar.js @@ -184,7 +184,7 @@ frappe.ui.toolbar.Toolbar = class { setup_awesomebar() { if (frappe.boot.desk_settings.search_bar) { let awesome_bar = new frappe.search.AwesomeBar(); - awesome_bar.setup("#navbar-search"); + awesome_bar.setup("#navbar-modal-search"); frappe.search.utils.make_function_searchable( frappe.utils.generate_tracking_url, diff --git a/frappe/public/js/frappe/utils/utils.js b/frappe/public/js/frappe/utils/utils.js index 8660d6978d..5000127989 100644 --- a/frappe/public/js/frappe/utils/utils.js +++ b/frappe/public/js/frappe/utils/utils.js @@ -922,21 +922,44 @@ Object.assign(frappe.utils, { let route = route_str.split("/"); if (route[2] === "Report" || route[0] === "query-report") { - return (__(route[3]) || __(route[1])).bold() + " " + __("Report"); + return ( + frappe.search.utils.make_icon("table") + + (__(route[3]) || __(route[1])).bold() + + " " + + __("Report") + ); } if (route[0] === "List") { - return __(route[1]).bold() + " " + __("List"); + return frappe.search.utils.make_icon("list") + __(route[1]).bold() + " " + __("List"); } if (route[0] === "modules") { - return __(route[1]).bold() + " " + __("Module"); + return ( + frappe.search.utils.make_icon("component") + + __(route[1]).bold() + + " " + + __("Module") + ); } if (route[0] === "Workspaces") { - return __(route[1]).bold() + " " + __("Workspace"); + return ( + frappe.search.utils.make_icon("wallpaper") + + __(route[1]).bold() + + " " + + __("Workspace") + ); } if (route[0] === "dashboard") { - return __(route[1]).bold() + " " + __("Dashboard"); + return ( + frappe.search.utils.make_icon("dashboard") + + __(route[1]).bold() + + " " + + __("Dashboard") + ); } - return __(frappe.utils.to_title_case(__(route[0]), true)); + return ( + frappe.search.utils.make_icon("file-text") + + __(frappe.utils.to_title_case(__(route[0]), true)) + ); }, report_column_total: function (values, column, type) { if (column.column.disable_total) { diff --git a/frappe/public/js/frappe/views/workspace/workspace.js b/frappe/public/js/frappe/views/workspace/workspace.js index c205f26fe8..ab75ce5b63 100644 --- a/frappe/public/js/frappe/views/workspace/workspace.js +++ b/frappe/public/js/frappe/views/workspace/workspace.js @@ -799,7 +799,7 @@ frappe.views.Workspace = class Workspace { "abcdefghijklmnopqrstuvwxyz".split("").forEach((letter) => { const default_shortcut = { action: (e) => { - $("#navbar-search").focus(); + $("#navbar-modal-search").click(); return false; // don't prevent default = type the letter in awesomebar }, page: this.page, diff --git a/frappe/public/scss/desk/breadcrumb.scss b/frappe/public/scss/desk/breadcrumb.scss index 1751befa7e..9b8fea5a95 100644 --- a/frappe/public/scss/desk/breadcrumb.scss +++ b/frappe/public/scss/desk/breadcrumb.scss @@ -44,3 +44,11 @@ color: var(--ink-gray-9) !important; } } + +#navbar-modal-search { + border-radius: var(--border-radius-sm); + padding: var(--input-padding); + background-color: var(--control-bg); + width: 100%; + padding-left: 40px; +} diff --git a/frappe/public/scss/desk/navbar.scss b/frappe/public/scss/desk/navbar.scss index da3663e91e..2f0e53493d 100644 --- a/frappe/public/scss/desk/navbar.scss +++ b/frappe/public/scss/desk/navbar.scss @@ -90,6 +90,59 @@ } } +.navbar-modal-wrapper { + .modal-search-icon { + position: absolute; + } + + #navbar-search { + padding-left: 42px; + } + + .awesomplete { + width: 100%; + ul { + position: relative; + background-color: transparent; + border: none; + border-radius: unset; + box-shadow: none; + margin-top: 12px; + } + ul[hidden] { + display: block !important; + } + } + + .modal-divider { + width: 100%; + height: 1px; + background-color: var(--border-color); + position: absolute; + top: 40px; + border-radius: 50%; + } +} + +.cool-awesomebar-modal-footer { + padding: 10px 18px !important; +} + +.awesomebar-modal-footer { + font-size: 12px; + .help-navigation { + .help-item-navigate { + margin-right: 1rem; + } + .help-item { + background-color: var(--border-color); + padding: 2px; + margin-right: 0.25rem; + border-radius: 4px; + } + } +} + .navbar.bg-dark { .dropdown-menu { font-size: 0.75rem; diff --git a/frappe/public/scss/website/navbar.scss b/frappe/public/scss/website/navbar.scss index c460e9fb5f..1385665a46 100644 --- a/frappe/public/scss/website/navbar.scss +++ b/frappe/public/scss/website/navbar.scss @@ -23,7 +23,7 @@ .navbar { padding: 0 1rem; - .navbar-search { + .navbar-modal-search { width: 75vw; } } @@ -59,7 +59,7 @@ color: white; } - .navbar-search { + .navbar-modal-search { background-color: var(--blue-400); width: 300px; margin-right: 10px; diff --git a/frappe/templates/includes/navbar/navbar_search.html b/frappe/templates/includes/navbar/navbar_search.html index 052940840c..022a97d354 100644 --- a/frappe/templates/includes/navbar/navbar_search.html +++ b/frappe/templates/includes/navbar/navbar_search.html @@ -1,7 +1,7 @@ {% if navbar_search %}
  • -