diff --git a/frappe/public/icons/timeless/symbol-defs.svg b/frappe/public/icons/timeless/symbol-defs.svg index 23de8fff53..2dab2e4ce9 100644 --- a/frappe/public/icons/timeless/symbol-defs.svg +++ b/frappe/public/icons/timeless/symbol-defs.svg @@ -16,11 +16,8 @@ - - - - - + + @@ -217,12 +214,13 @@ - - + + + fill="#ACB5BD" stroke-width="0"> - - + + + + + + @@ -459,6 +461,9 @@ + + + - - - - - - - - - - - - - @@ -534,10 +526,6 @@ stroke="none"> - @@ -580,6 +568,19 @@ + + + + + + + + + + + + + diff --git a/frappe/public/js/frappe/dom.js b/frappe/public/js/frappe/dom.js index d5ab13c969..bb4c3e8d16 100644 --- a/frappe/public/js/frappe/dom.js +++ b/frappe/public/js/frappe/dom.js @@ -317,10 +317,10 @@ frappe.get_modal = function(title, content) {
-

${title}

+

${title}

-
+
diff --git a/frappe/public/js/frappe/form/controls/multiselect_list.js b/frappe/public/js/frappe/form/controls/multiselect_list.js index b8c652d841..4e851b384a 100644 --- a/frappe/public/js/frappe/form/controls/multiselect_list.js +++ b/frappe/public/js/frappe/form/controls/multiselect_list.js @@ -2,7 +2,7 @@ frappe.ui.form.ControlMultiSelectList = frappe.ui.form.ControlData.extend({ make_input() { let template = `
-
+
    diff --git a/frappe/public/js/frappe/form/grid.js b/frappe/public/js/frappe/form/grid.js index 401dac4a8a..4f42ed844b 100644 --- a/frappe/public/js/frappe/form/grid.js +++ b/frappe/public/js/frappe/form/grid.js @@ -75,22 +75,22 @@ export default class Grid { data-action="delete_all_rows"> ${__("Delete All")} - -
- -
@@ -865,7 +865,7 @@ export default class Grid { // add / unhide a custom button var btn = this.custom_buttons[label]; if (!btn) { - btn = $('') + btn = $('') .css('margin-right', '4px') .prependTo(this.grid_buttons) .on('click', click); diff --git a/frappe/public/js/frappe/form/grid_row.js b/frappe/public/js/frappe/form/grid_row.js index d86f46cfca..e66f6a4fe1 100644 --- a/frappe/public/js/frappe/form/grid_row.js +++ b/frappe/public/js/frappe/form/grid_row.js @@ -226,10 +226,13 @@ export default class GridRow { if(this.doc && !this.grid.df.in_place_edit) { // remove row if(!this.open_form_button) { - this.open_form_button = $('\ - ') - .appendTo($('
').appendTo(this.row)) - .on('click', function() { me.toggle_view(); return false; }); + this.open_form_button = $(` +
+ ${frappe.utils.icon('edit', 'xs')} +
Edit
` + ) + .appendTo($('
').appendTo(this.row)) + .on('click', function() { me.toggle_view(); return false; }); if(this.is_too_small()) { // narrow diff --git a/frappe/public/js/frappe/form/grid_row_form.js b/frappe/public/js/frappe/form/grid_row_form.js index f93640936f..c798f4e735 100644 --- a/frappe/public/js/frappe/form/grid_row_form.js +++ b/frappe/public/js/frappe/form/grid_row_form.js @@ -42,25 +42,25 @@ export default class GridRowForm {
${ __("Editing Row") } # - +
+ ${frappe.utils.icon('down')}
- - - - -
@@ -68,11 +68,10 @@ export default class GridRowForm {
diff --git a/frappe/public/js/frappe/form/quick_entry.js b/frappe/public/js/frappe/form/quick_entry.js index 2da7b8f236..02a786fe69 100644 --- a/frappe/public/js/frappe/form/quick_entry.js +++ b/frappe/public/js/frappe/form/quick_entry.js @@ -44,7 +44,7 @@ frappe.ui.form.QuickEntryForm = Class.extend({ }); }, - set_meta_and_mandatory_fields: function(){ + set_meta_and_mandatory_fields: function() { this.meta = frappe.get_meta(this.doctype); let fields = this.meta.fields; @@ -60,7 +60,7 @@ frappe.ui.form.QuickEntryForm = Class.extend({ } }, - is_quick_entry: function(){ + is_quick_entry: function() { if(this.meta.quick_entry != 1) { return false; } @@ -74,7 +74,7 @@ frappe.ui.form.QuickEntryForm = Class.extend({ return true; }, - too_many_mandatory_fields: function(){ + too_many_mandatory_fields: function() { if(this.mandatory.length > 7) { // too many fields, show form return true; @@ -91,14 +91,14 @@ frappe.ui.form.QuickEntryForm = Class.extend({ return false; }, - validate_for_prompt_autoname: function(){ + validate_for_prompt_autoname: function() { if(this.meta.autoname && this.meta.autoname.toLowerCase()==='prompt') { this.mandatory = [{fieldname:'__newname', label:__('{0} Name', [this.meta.name]), reqd: 1, fieldtype:'Data'}].concat(this.mandatory); } }, - render_dialog: function(){ + render_dialog: function() { var me = this; this.dialog = new frappe.ui.Dialog({ title: __("New {0}", [__(this.doctype)]), @@ -131,7 +131,7 @@ frappe.ui.form.QuickEntryForm = Class.extend({ } }, - register_primary_action: function(){ + register_primary_action: function() { var me = this; this.dialog.set_primary_action(__('Save'), function() { if(me.dialog.working) { @@ -259,10 +259,14 @@ frappe.ui.form.QuickEntryForm = Class.extend({ frappe.set_route('Form', this.doctype, this.doc.name); }, - render_edit_in_full_page_link: function(){ + render_edit_in_full_page_link: function() { var me = this; - var $link = $('
' + - '
').appendTo(this.dialog.body); + var $link = $(`
+ +
`).appendTo(this.dialog.body); $link.find('.edit-full').on('click', function() { // edit in form @@ -270,7 +274,7 @@ frappe.ui.form.QuickEntryForm = Class.extend({ }); }, - set_defaults: function(){ + set_defaults: function() { var me = this; // set defaults $.each(this.dialog.fields_dict, function(fieldname, field) { diff --git a/frappe/public/js/frappe/ui/dialog.js b/frappe/public/js/frappe/ui/dialog.js index d77481f8b9..a431e51a2f 100644 --- a/frappe/public/js/frappe/ui/dialog.js +++ b/frappe/public/js/frappe/ui/dialog.js @@ -201,6 +201,7 @@ frappe.ui.Dialog = class Dialog extends frappe.ui.FieldGroup { this.get_close_btn().trigger("click"); } toggle_minimize() { + this.$wrapper.prev('.modal-backdrop').toggleClass('show').toggleClass('hide'); let modal = this.$wrapper.closest('.modal').toggleClass('modal-minimize'); modal.attr('tabindex') ? modal.removeAttr('tabindex') : modal.attr('tabindex', -1); this.get_minimize_btn().find('i').toggleClass('octicon-chevron-down').toggleClass('octicon-chevron-up'); diff --git a/frappe/public/js/frappe/ui/page.js b/frappe/public/js/frappe/ui/page.js index 6682efd6e4..41503f3b01 100644 --- a/frappe/public/js/frappe/ui/page.js +++ b/frappe/public/js/frappe/ui/page.js @@ -332,9 +332,9 @@ frappe.ui.Page = Class.extend({ let shortcut_obj = this.prepare_shortcut_obj(shortcut, click, label); $li = $(`
  • ${label} -
    + ${shortcut_obj.shortcut_label} -
    +
  • `); frappe.ui.keys.add_shortcut(shortcut_obj); } else { @@ -588,9 +588,10 @@ frappe.ui.Page = Class.extend({ // }, - add_button: function(label, click, button_class) { - if (!button_class) button_class = "btn-secondary btn-default"; - let button = $(``); + add_button: function(label, click, button_class, button_size) { + if (!button_class) button_class = "btn-default"; + if (!button_size) button_size = "btn-sm"; + let button = $(``); button.appendTo(this.custom_actions); button.on('click', click); this.custom_actions.removeClass('hide'); diff --git a/frappe/public/js/frappe/views/reports/query_report.js b/frappe/public/js/frappe/views/reports/query_report.js index 3db6302188..fafa3ae3ad 100644 --- a/frappe/public/js/frappe/views/reports/query_report.js +++ b/frappe/public/js/frappe/views/reports/query_report.js @@ -152,13 +152,13 @@ frappe.views.QueryReport = class QueryReport extends frappe.views.BaseList { this.create_chart_button && this.create_chart_button.remove() this.create_chart_button = this.page.add_button(__("Set Chart"), () => { this.open_create_chart_dialog(); - }); + }, null, 'btn-xs'); if (this.chart_fields || this.chart_options) { this.add_to_dashboard_button && this.add_to_dashboard_button.remove() this.add_to_dashboard_button = this.page.add_button(__("Add Chart to Dashboard"), () => { this.add_chart_to_dashboard(); - }); + }, null, 'btn-xs'); } } else { this.create_chart_button && this.create_chart_button.remove() @@ -1578,26 +1578,26 @@ frappe.views.QueryReport = class QueryReport extends frappe.views.BaseList { } show_footer_message() { - const message = __('For comparison, use >5, <10 or =324. For ranges, use 5:10 (for values between 5 & 10).'); - const execution_time_msg = __('Execution Time: {0} sec', [this.execution_time || 0.1]); - - this.page.footer.removeClass('hide').addClass('text-muted col-md-12').html(` - ${message}${execution_time_msg} - `); - - this.page.wrapper.find('.tree-footer').remove(); + this.$report_footer && this.$report_footer.remove(); + this.$report_footer = $(`
    `).appendTo(this.page.main); if (this.tree_report) { - this.$tree_footer = this.page.footer.clone().addClass('tree-footer'); - this.$tree_footer.html(`
    + this.$tree_footer = $(`
    `); - this.page.footer.before(this.$tree_footer); + $(this.$report_footer).append(this.$tree_footer); this.$tree_footer.find('[data-action=collapse_all_rows]').show(); this.$tree_footer.find('[data-action=expand_all_rows]').hide(); } + + const message = __('For comparison, use >5, <10 or =324. For ranges, use 5:10 (for values between 5 & 10).'); + const execution_time_msg = __('Execution Time: {0} sec', [this.execution_time || 0.1]); + + this.$report_footer.append(`
    + ${message}${execution_time_msg} +
    `); } expand_all_rows() { diff --git a/frappe/public/less/desk.less b/frappe/public/less/desk.less index b28a153fd3..57c2e47d06 100644 --- a/frappe/public/less/desk.less +++ b/frappe/public/less/desk.less @@ -129,24 +129,24 @@ textarea.form-control { background-color: @light-bg; } -.modal-backdrop { - opacity: 0.5; - position: fixed; -} +// .modal-backdrop { +// opacity: 0.5; +// position: fixed; +// } -.modal-header { - padding: 10px 15px; -} +// .modal-header { +// padding: 10px 15px; +// } -.modal-title { - margin: auto 0px; -} +// .modal-title { +// margin: auto 0px; +// } -.modal-message { - margin: 30px 15px; - color: @text-muted; - text-align: center; -} +// .modal-message { +// margin: 30px 15px; +// color: @text-muted; +// text-align: center; +// } .btn-primary.disabled { background-color: #b1bdca; @@ -689,10 +689,6 @@ li.user-progress { } } -.checkbox label { - padding-left: 2px; -} - // Will not be required after commonifying lists with empty state .multiselect-empty-state{ min-height: 300px; @@ -950,7 +946,7 @@ img.img-loading:after { ul { margin: 0px; li { - padding: 10px; + // padding: 10px; cursor: pointer; &:hover { background: @btn-bg; @@ -986,26 +982,26 @@ body.no-sidebar { white-space: nowrap; } -.modal-minimize { - position: initial; - .modal-backdrop { - display: none; - } - .modal-dialog { - z-index: 101; - position: fixed; - right: 15px; - bottom: 0; - margin: 0; - max-width: 500px; - .modal-content { - min-height: 0; - } - } - .modal-body { - display: none; - } -} +// .modal-minimize { +// position: initial; +// .modal-backdrop { +// display: none; +// } +// .modal-dialog { +// z-index: 101; +// position: fixed; +// right: 15px; +// bottom: 0; +// margin: 0; +// max-width: 500px; +// .modal-content { +// min-height: 0; +// } +// } +// .modal-body { +// display: none; +// } +// } .app-logo { width: 24px; diff --git a/frappe/public/scss/awesomebar.scss b/frappe/public/scss/awesomebar.scss index 413c34a9c3..2a50b6ea8d 100644 --- a/frappe/public/scss/awesomebar.scss +++ b/frappe/public/scss/awesomebar.scss @@ -29,7 +29,7 @@ border: 1px solid var(--border-color); left: 0; margin: 0; - padding: 0; + padding: 4px; z-index: 1; top: calc(100% + var(--margin-xs)); @@ -38,6 +38,7 @@ font-size: 12px; padding: var(--padding-sm); color: var(--text-light); + border-radius: var(--border-radius-sm); } &> li .link-option { diff --git a/frappe/public/scss/form.scss b/frappe/public/scss/form.scss index b7b4f701c6..e503bfd687 100644 --- a/frappe/public/scss/form.scss +++ b/frappe/public/scss/form.scss @@ -43,6 +43,14 @@ } } +.modal { + .form-section { + .form-column { + padding: 0; + } + } +} + .form-section.card-section { margin: var(--margin-lg) 0px; @extend .frappe-card; @@ -215,3 +223,7 @@ } } } + +.form-message { + padding: var(--padding-md) var(--padding-xl); +} diff --git a/frappe/public/scss/global.scss b/frappe/public/scss/global.scss index 0b73320241..499a1dd709 100644 --- a/frappe/public/scss/global.scss +++ b/frappe/public/scss/global.scss @@ -130,22 +130,31 @@ img { } } -.btn-secondary, .btn-default { +.btn-secondary { background-color: var(--control-bg); color: var(--text-color); &:hover, &:active { - background: var(--gray-200); + background: var(--gray-300); + color: var(--text-color); } } .btn-default { background-color: var(--fg-color); + color: var(--text-color); + &:hover, &:active { + background: var(--gray-200); + color: var(--text-color); + } } .btn-primary { background-color: var(--primary-color); } +.btn-danger { + background-color: var(--red-400); +} h1, h2, h3 { color: $text-color; @@ -327,6 +336,15 @@ input[type="checkbox"] { color: var(--heading-color); } +kbd { + background-color: var(--gray-500); + font-family: Inter; + color: var(--fg-color); + line-height: 1.2em; + height: 20px; + padding: 4px 8px; +} + .appreciation { background-color: var(--dark-green-100) !important; color: var(--dark-green-600) !important; diff --git a/frappe/public/scss/grid.scss b/frappe/public/scss/grid.scss index f3d45cec78..ae2e77fead 100644 --- a/frappe/public/scss/grid.scss +++ b/frappe/public/scss/grid.scss @@ -1,3 +1,9 @@ +.form-grid { + // border: 1px solid var(--border-color); + // border-radius: var(--border-radius); + color: var(--text-color); +} + .form-grid.error { border-color: var(--red-500); } @@ -12,10 +18,6 @@ padding: 0px 15px; border-bottom: 1px solid var(--border-color); @include transition(.2s); - - .form-control { - background-color: transparent; - } } .grid-row:last-child { @@ -101,7 +103,13 @@ .grid-body { .btn-open-row { - padding-top: 5px; + display: flex; + padding-top: var(--padding-sm); + justify-content: center; + div { + margin-left: var(--margin-xs); + line-height: 1.7em; + } } .editable-row { @@ -247,7 +255,36 @@ height: 0; opacity: 0; z-index: 1021; + border-radius: var(--border-radius-md); @include base-grid(); + + .btn { + box-shadow: none; + } + + .form-section { + padding: 15px; + + &:not(:first-child) { + border-top: 1px solid var(--border-color); + } + + .section-head { + padding: 0; + } + + .form-column:first-child { + padding-left: 0; + } + } + + .grid-delete-row { + padding: 4px 6px; + + .icon use { + stroke: var(--fg-color); + } + } } .recorder-form-in-grid { @@ -260,12 +297,13 @@ height: auto; overflow: visible; margin: 0px -15px; + padding: 10px 15px; } .grid-form-heading { padding: 10px 15px; font-size: 120%; - border-bottom: 1px solid var(--border-color); + // border-bottom: 1px solid var(--border-color); } .grid-form-body { @@ -287,8 +325,7 @@ padding: 10px 0px; background-color: #fff; - .btn-default { - background-color: var(--control-bg); + .btn { box-shadow: none; } } @@ -320,8 +357,11 @@ a.next-page { } .grid-footer-toolbar { - padding: 10px 15px; - border-top: 1px solid var(--border-color); + padding: 15px 10px 5px 10px; + // border-top: 1px solid var(--border-color); + span { + margin-right: var(--margin-xs); + } } .grid-overflow-no-ellipsis { diff --git a/frappe/public/scss/modal.scss b/frappe/public/scss/modal.scss index 1b1e404e01..48acc0eebe 100644 --- a/frappe/public/scss/modal.scss +++ b/frappe/public/scss/modal.scss @@ -1,7 +1,58 @@ -h4.modal-title { - font-size: 1em; -} - h5.modal-title { margin: 0px !important; } + +.modal { + + .modal-header { + padding: var(--padding-md) 25px; + + .modal-title { + font-weight: 500; + line-height: 2em; + font-size: $font-size-lg; + } + } + + .buttons { + button:not(:last-child) { + margin-right: 3px; + } + } + + .modal-body { + padding: var(--padding-lg) 25px; + } + + .modal-footer { + padding: var(--padding-md); + } + + @include media-breakpoint-up(md) { + .modal-dialog { + width: 575px; + max-width: 575px; + } + } +} + +.modal-minimize { + position: initial; + + .modal-dialog { + z-index: 101; + position: fixed; + right: 15px; + bottom: 0; + margin: 0; + max-width: 575px; + + .modal-content { + min-height: 0; + } + } + + .modal-body { + display: none; + } +} diff --git a/frappe/public/scss/page.scss b/frappe/public/scss/page.scss index 86b768f4d8..4276925851 100644 --- a/frappe/public/scss/page.scss +++ b/frappe/public/scss/page.scss @@ -57,18 +57,6 @@ } } -.menu-shorcut { - padding: 0 8px; - height: 20px; - background: var(--gray-600); - border-radius: 4px; - - span { - color: $white; - line-height: 20px; - } -} - .page-form { margin: 0; padding: var(--padding-sm); diff --git a/frappe/public/scss/report.scss b/frappe/public/scss/report.scss index e160dc01e3..c5ae018468 100644 --- a/frappe/public/scss/report.scss +++ b/frappe/public/scss/report.scss @@ -224,6 +224,14 @@ } } +.report-footer { + padding: var(--padding-sm) 0; +} + +.tree-footer { + margin-bottom: var(--margin-sm); +} + // for sm and above @include media-breakpoint-up(xs) { .group-by-box .row > div[class*="col-sm-"] { diff --git a/frappe/templates/styles/standard.css b/frappe/templates/styles/standard.css index 66ae263848..2d06734723 100644 --- a/frappe/templates/styles/standard.css +++ b/frappe/templates/styles/standard.css @@ -5,7 +5,7 @@ } .print-format { background-color: white; - box-shadow: var(--shadow-xs); + box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); max-width: 8.3in; min-height: 11.69in;