vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

fix(modal): improve styling and layout of search modal and help section (#37203)

Browse source 
Co-authored-by: Ejaaz Khan <ejaaz@frappe.io>
Co-authored-by: Diptanil Saha <diptanil@frappe.io>
This commit is contained in:
Suraj Shetty 2026-02-19 11:12:58 +05:30 • committed by GitHub
parent 067a6351b5
commit 8fc4c52f03
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 36 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
frappe/public/js/frappe/ui/toolbar/awesome_bar.js
View file

@ -27,8 +27,7 @@ frappe.search.AwesomeBar = class AwesomeBar {
setTimeout(() => input.focus(), 10);
});
let search_modal_body = `<div class="align-baseline flex py-2 px-1 relative navbar-modal-wrapper">
<div class="modal-search-icon absolute pr-2 pl-2">${frappe.utils.icon("search")}</div>
let search_modal_body = `<div class="align-baseline flex p-2 relative navbar-modal-wrapper">
<input
id="navbar-search"
type="text"
@ -41,16 +40,18 @@ frappe.search.AwesomeBar = class AwesomeBar {
let search_modal_footer = `<div class="awesomebar-modal-footer flex justify-between w-100">
<div class="help-navigation">
<span class="help-item-navigate">
<span class="help-item">${frappe.utils.icon("arrow-up")}</span>
<span class="help-item">${frappe.utils.icon("arrow-down")}</span>
<span class="help-item">${frappe.utils.icon("arrow-up", "xs")}</span>
<span class="help-item">${frappe.utils.icon("arrow-down", "xs")}</span>
<span>${__("to navigate")}</span>
</span>
<span class="help-item-navigate">
<span class="help-item">${frappe.utils.icon("corner-down-left")}</span>
<span class="help-item">${frappe.utils.icon("corner-down-left", "xs")}</span>
<span>${__("to select")}</span>
</span>
<span class="help-item help-item-esc">${__("esc")}</span>
<span>${__("to close")}</span>
<span class="help-item-navigate">
<span class="help-item help-item-escape">${__("esc")}</span>
<span>${__("to close")}</span>
</span>
</div>
<div class="pointer">${frappe.utils.icon("circle-question-mark")}</div>
</div>`;
@ -219,45 +220,20 @@ frappe.search.AwesomeBar = class AwesomeBar {
}
show_help() {
const txt =
'<table class="table table-bordered">\
<tr><td style="width: 50%">' +
__("Create a new record") +
"</td><td>" +
__("new type of document") +
"</td></tr>\
<tr><td>" +
__("List a document type") +
"</td><td>" +
__("document type..., e.g. customer") +
"</td></tr>\
<tr><td>" +
__("Search in a document type") +
"</td><td>" +
__("text in document type") +
"</td></tr>\
<tr><td>" +
__("Tags") +
"</td><td>" +
__("tag name..., e.g. #tag") +
"</td></tr>\
<tr><td>" +
__("Open a module or tool") +
"</td><td>" +
__("module name...") +
"</td></tr>\
<tr><td>" +
__("Open in new tab") +
"</td><td>" +
(frappe.utils.is_mac() ? "⌘ + Enter" : "Ctrl + Enter") +
"</td></tr>\
<tr><td>" +
__("Calculate") +
"</td><td>" +
__("e.g. (55 + 434) / 4 or =Math.sin(Math.PI/2)...") +
"</td></tr>\
</table>";
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) {

7
frappe/public/scss/common/modal.scss
View file

@ -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 {

20
frappe/public/scss/desk/navbar.scss
View file

@ -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;
}
}
}