From 8fc4c52f035e28dfb86d17856b66ae909ed6ee57 Mon Sep 17 00:00:00 2001 From: Suraj Shetty <13928957+surajshetty3416@users.noreply.github.com> Date: Thu, 19 Feb 2026 11:12:58 +0530 Subject: [PATCH] fix(modal): improve styling and layout of search modal and help section (#37203) Co-authored-by: Ejaaz Khan Co-authored-by: Diptanil Saha --- .../js/frappe/ui/toolbar/awesome_bar.js | 68 ++++++------------- frappe/public/scss/common/modal.scss | 7 +- frappe/public/scss/desk/navbar.scss | 20 +++--- 3 files changed, 36 insertions(+), 59 deletions(-) diff --git a/frappe/public/js/frappe/ui/toolbar/awesome_bar.js b/frappe/public/js/frappe/ui/toolbar/awesome_bar.js index 1390f8b635..d6b1c0e8f7 100644 --- a/frappe/public/js/frappe/ui/toolbar/awesome_bar.js +++ b/frappe/public/js/frappe/ui/toolbar/awesome_bar.js @@ -27,8 +27,7 @@ frappe.search.AwesomeBar = class AwesomeBar { setTimeout(() => input.focus(), 10); }); - let search_modal_body = `
-
${frappe.utils.icon("search")}
+ let search_modal_body = `
- ${frappe.utils.icon("arrow-up")} - ${frappe.utils.icon("arrow-down")} + ${frappe.utils.icon("arrow-up", "xs")} + ${frappe.utils.icon("arrow-down", "xs")} ${__("to navigate")} - ${frappe.utils.icon("corner-down-left")} + ${frappe.utils.icon("corner-down-left", "xs")} ${__("to select")} - ${__("esc")} - ${__("to close")} + + ${__("esc")} + ${__("to close")} +
${frappe.utils.icon("circle-question-mark")}
`; @@ -219,45 +220,20 @@ frappe.search.AwesomeBar = class AwesomeBar { } 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...") + - "
" + - __("Open in new tab") + - "" + - (frappe.utils.is_mac() ? "⌘ + Enter" : "Ctrl + Enter") + - "
" + - __("Calculate") + - "" + - __("e.g. (55 + 434) / 4 or =Math.sin(Math.PI/2)...") + - "
"; - frappe.msgprint(txt, __("Search Help")); + const help_data = [ + [__("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...")], + [__("Open in new tab"), frappe.utils.is_mac() ? "⌘ + Enter" : "Ctrl + Enter"], + [__("Calculate"), __("e.g. (55 + 434) / 4")], + ]; + frappe.msgprint({ + message: help_data, + title: __("Search Help"), + as_table: true, + }); } set_specifics(txt, end_txt) { diff --git a/frappe/public/scss/common/modal.scss b/frappe/public/scss/common/modal.scss index e9cd4f79e8..3cb388a3fd 100644 --- a/frappe/public/scss/common/modal.scss +++ b/frappe/public/scss/common/modal.scss @@ -39,8 +39,7 @@ body.modal-open[style^="padding-right"] { top: 0; z-index: 3; background: inherit; - padding: var(--padding-sm) var(--padding-lg); - // padding-bottom: 0; + padding: var(--padding-sm) var(--padding-md); border-bottom: 1px solid var(--border-color); .modal-title { @@ -66,7 +65,7 @@ body.modal-open[style^="padding-right"] { } .modal-body { - padding: var(--padding-md) var(--padding-lg); + padding: var(--padding-md) var(--padding-md); .form-layout:first-child > .form-page { .visible-section:first-child { padding-top: 0; @@ -93,7 +92,7 @@ body.modal-open[style^="padding-right"] { bottom: 0; z-index: 1; background: inherit; - padding: var(--padding-md) var(--padding-lg); + padding: var(--padding-md); justify-content: space-between; button { diff --git a/frappe/public/scss/desk/navbar.scss b/frappe/public/scss/desk/navbar.scss index 4b0ea766a6..5ae494158e 100644 --- a/frappe/public/scss/desk/navbar.scss +++ b/frappe/public/scss/desk/navbar.scss @@ -86,12 +86,8 @@ } .navbar-modal-wrapper { - .modal-search-icon { - position: absolute; - } - #navbar-search { - padding-left: 42px; + display: flex; } .awesomplete { @@ -127,17 +123,23 @@ .awesomebar-modal-footer { font-size: 12px; .help-navigation { + display: flex; + gap: var(--margin-md); .help-item-navigate { - margin-right: 1rem; + display: flex; + gap: var(--margin-xs); + align-items: center; } .help-item { background-color: var(--border-color); - padding: 2px; - margin-right: 0.25rem; + padding: 3px; + display: flex; + font-size: x-small; border-radius: 4px; } - .help-item-esc { + .help-item-escape { padding: 2px 4px; + display: inline-flex; } } }