From 6672434b24c127a1bf434d9192b7352e286e8335 Mon Sep 17 00:00:00 2001 From: Shivam Mishra Date: Thu, 9 Jul 2020 15:57:29 +0530 Subject: [PATCH 1/9] refactor: override set_default_secondary_action from base list --- frappe/public/js/frappe/views/reports/query_report.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/frappe/public/js/frappe/views/reports/query_report.js b/frappe/public/js/frappe/views/reports/query_report.js index 3cd3fef2ea..357260b555 100644 --- a/frappe/public/js/frappe/views/reports/query_report.js +++ b/frappe/public/js/frappe/views/reports/query_report.js @@ -62,6 +62,14 @@ frappe.views.QueryReport = class QueryReport extends frappe.views.BaseList { }); } + set_default_secondary_action() { + this.refresh_button && this.refresh_button.remove(); + this.refresh_button = this.page.add_action_icon("refresh", () => { + this.setup_progress_bar(); + this.refresh() + }); + } + setup_events() { frappe.realtime.on("report_generated", (data) => { if(data.report_name) { From b413ac780aef55d4db8d98cff2dde6e7938d347a Mon Sep 17 00:00:00 2001 From: Shivam Mishra Date: Thu, 9 Jul 2020 18:29:16 +0530 Subject: [PATCH 2/9] feat: dropdown container overall padding --- frappe/public/scss/global.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frappe/public/scss/global.scss b/frappe/public/scss/global.scss index 93fe23e7a6..85bf6db5eb 100644 --- a/frappe/public/scss/global.scss +++ b/frappe/public/scss/global.scss @@ -214,7 +214,7 @@ select.input-xs { .dropdown-menu { min-width: 200px; - padding: 4px 0; + padding: 4px; font-size: $font-size-md; max-height: 500px; overflow: auto; From 3f06ed87c37af45c45fa635b6985444e15e0d701 Mon Sep 17 00:00:00 2001 From: Shivam Mishra Date: Thu, 9 Jul 2020 18:37:25 +0530 Subject: [PATCH 3/9] fix: check if menu items exist --- frappe/public/js/frappe/list/base_list.js | 2 +- frappe/public/js/frappe/views/reports/query_report.js | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/frappe/public/js/frappe/list/base_list.js b/frappe/public/js/frappe/list/base_list.js index d082b7f1b6..bd83c0428b 100644 --- a/frappe/public/js/frappe/list/base_list.js +++ b/frappe/public/js/frappe/list/base_list.js @@ -207,7 +207,7 @@ frappe.views.BaseList = class BaseList { set_menu_items() { this.set_default_secondary_action() - this.menu_items.map((item) => { + this.menu_items && this.menu_items.map((item) => { if (item.condition && item.condition() === false) { return; } diff --git a/frappe/public/js/frappe/views/reports/query_report.js b/frappe/public/js/frappe/views/reports/query_report.js index 357260b555..9f9225b2a8 100644 --- a/frappe/public/js/frappe/views/reports/query_report.js +++ b/frappe/public/js/frappe/views/reports/query_report.js @@ -53,6 +53,8 @@ frappe.views.QueryReport = class QueryReport extends frappe.views.BaseList { // throttle refresh for 300ms this.refresh = frappe.utils.throttle(this.refresh, 300); + + this.menu_items = []; } set_default_secondary_action() { From 2c03594e5c9a541315427baa98cc896b57cd6de8 Mon Sep 17 00:00:00 2001 From: Shivam Mishra Date: Thu, 9 Jul 2020 18:37:46 +0530 Subject: [PATCH 4/9] fix: full width toggle --- frappe/public/scss/global.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/frappe/public/scss/global.scss b/frappe/public/scss/global.scss index 85bf6db5eb..40db553381 100644 --- a/frappe/public/scss/global.scss +++ b/frappe/public/scss/global.scss @@ -5,6 +5,15 @@ html { body { -webkit-font-smoothing: antialiased; color: $body-color; + + &.full-width { + @include media-breakpoint-up(md) { + .container { + width: 90%; + max-width: 100%; + } + } + } } a { From 43788161727fea5e3b769d0212d2c3d5c8bb8a5d Mon Sep 17 00:00:00 2001 From: Shivam Mishra Date: Thu, 9 Jul 2020 20:51:58 +0530 Subject: [PATCH 5/9] refactor: set default height for charts to 280 --- frappe/public/js/frappe/views/reports/query_report.js | 1 + frappe/public/js/frappe/views/reports/report_utils.js | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/frappe/public/js/frappe/views/reports/query_report.js b/frappe/public/js/frappe/views/reports/query_report.js index 9f9225b2a8..8dcfca4756 100644 --- a/frappe/public/js/frappe/views/reports/query_report.js +++ b/frappe/public/js/frappe/views/reports/query_report.js @@ -700,6 +700,7 @@ frappe.views.QueryReport = class QueryReport extends frappe.views.BaseList { options.axisOptions = { shortenYAxisNumbers: 1 }; + options.height = 280; return options; } diff --git a/frappe/public/js/frappe/views/reports/report_utils.js b/frappe/public/js/frappe/views/reports/report_utils.js index 9a4440a2a8..876ebfe6e4 100644 --- a/frappe/public/js/frappe/views/reports/report_utils.js +++ b/frappe/public/js/frappe/views/reports/report_utils.js @@ -1,7 +1,7 @@ frappe.provide('frappe.report_utils'); frappe.report_utils = { - make_chart_options: function(columns, raw_data, { y_fields, x_field, chart_type, colors }) { + make_chart_options: function(columns, raw_data, { y_fields, x_field, chart_type, colors, height }) { const type = chart_type.toLowerCase(); let rows = raw_data.result.filter(value => Object.keys(value).length); @@ -24,6 +24,7 @@ frappe.report_utils = { }, truncateLegends: 1, type: type, + height: height ? height : 280, colors: colors, axisOptions: { shortenYAxisNumbers: 1, From b35dd30e5f1a9c6980db921a77d2235a67a2aa3f Mon Sep 17 00:00:00 2001 From: Shivam Mishra Date: Thu, 9 Jul 2020 20:52:46 +0530 Subject: [PATCH 6/9] fix: margin for report summary --- frappe/public/scss/report.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frappe/public/scss/report.scss b/frappe/public/scss/report.scss index 40847e047d..7b2118fac1 100644 --- a/frappe/public/scss/report.scss +++ b/frappe/public/scss/report.scss @@ -133,7 +133,7 @@ border-bottom: 1px solid $border-color; // SIZE & SPACING - margin: 1rem 0px; + margin: 1rem; padding: 20px 15px; // LAYOUT From ee77ce1e89d5c9920f14261a59125d9e7684e38c Mon Sep 17 00:00:00 2001 From: Shivam Mishra Date: Thu, 9 Jul 2020 20:53:02 +0530 Subject: [PATCH 7/9] refactor: fix filters layout in query report --- frappe/public/js/frappe/views/reports/query_report.js | 5 ++++- frappe/public/scss/page.scss | 4 ++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/frappe/public/js/frappe/views/reports/query_report.js b/frappe/public/js/frappe/views/reports/query_report.js index 8dcfca4756..a35891731a 100644 --- a/frappe/public/js/frappe/views/reports/query_report.js +++ b/frappe/public/js/frappe/views/reports/query_report.js @@ -366,10 +366,13 @@ frappe.views.QueryReport = class QueryReport extends frappe.views.BaseList { this.clear_filters(); const { filters = [] } = this.report_settings; + let filter_area = $(`
`); + this.page.page_form.append(filter_area); + this.filters = filters.map(df => { if (df.fieldtype === 'Break') return; - let f = this.page.add_field(df); + let f = this.page.add_field(df, filter_area); if (df.default) { f.set_input(df.default); diff --git a/frappe/public/scss/page.scss b/frappe/public/scss/page.scss index 1129ad8ed9..7f57577886 100644 --- a/frappe/public/scss/page.scss +++ b/frappe/public/scss/page.scss @@ -79,8 +79,8 @@ background-color: white; .form-group { - padding: 0px; - margin: 5px; + padding: 0px 5px; + margin: 5px 0px; } .checkbox { margin-top: 4px; From 731114d4ede9d91816b411460a60925b54da0af0 Mon Sep 17 00:00:00 2001 From: Shivam Mishra Date: Thu, 9 Jul 2020 22:39:05 +0530 Subject: [PATCH 8/9] feat: animate notifications --- .../frappe/ui/notifications/notifications.js | 43 +++++++++++++------ .../public/js/frappe/ui/toolbar/navbar.html | 7 ++- frappe/public/scss/notification.scss | 29 +++++++++++++ 3 files changed, 65 insertions(+), 14 deletions(-) diff --git a/frappe/public/js/frappe/ui/notifications/notifications.js b/frappe/public/js/frappe/ui/notifications/notifications.js index 33b7f6a79d..1871f426a9 100644 --- a/frappe/public/js/frappe/ui/notifications/notifications.js +++ b/frappe/public/js/frappe/ui/notifications/notifications.js @@ -17,6 +17,9 @@ frappe.ui.Notifications = class Notifications { this.header_items = this.dropdown_list.find('.header-items'); this.header_actions = this.dropdown_list.find('.header-actions'); this.body = this.dropdown_list.find('.notification-list-body'); + this.reel = this.dropdown_list.find('.notifcation-reel') + this.panel_events = this.dropdown_list.find('.panel-events'); + this.panel_notifications = this.dropdown_list.find('.panel-notifications'); this.notification_indicator = this.dropdown.find( '.notifications-indicator' @@ -51,8 +54,20 @@ frappe.ui.Notifications = class Notifications { .appendTo(this.header_actions); this.categories = [ - { label: __("Notifications"), id: "notifications", view: NotificationsView }, - { label: __("Today's Events"), id: "todays_events", view: EventsView } + { + label: __("Notifications"), + id: "notifications", + view: NotificationsView, + el: this.panel_notifications, + transform: 'translateX(0%)' + }, + { + label: __("Today's Events"), + id: "todays_events", + view: EventsView, + el: this.panel_events, + transform: 'translateX(-50%)' + } ]; let get_headers_html = (item) => { @@ -78,28 +93,26 @@ frappe.ui.Notifications = class Notifications { return item }) navitem.appendTo(this.header_items); - this.switch_tab(this.categories[0]); + this.make_tab_view(this.categories[0]); + this.make_tab_view(this.categories[1]); } switch_tab(item) { this.categories.forEach((item) => { item.dom.removeClass("active"); }); + + this.reel[0].style.transform = item.transform; + item.dom.addClass("active"); - this.current_tab && this.current_tab.hide(); - if (this.tabs[item.id]) { - this.tabs[item.id].show() - this.current_tab = this.tabs[item.id] - } else { - this.make_tab_view(item); - } + + this.tabs[item.id] + this.current_tab = this.tabs[item.id] } make_tab_view(item) { - let tabView = new item.view(this.body); + let tabView = new item.view(item.el); this.tabs[item.id] = tabView; - this.current_tab = tabView; - tabView.show(); } go_to_settings(e) { @@ -173,12 +186,16 @@ frappe.ui.Notifications = class Notifications { setup_dropdown_events() { this.dropdown.on('hide.bs.dropdown', e => { + this.dropdown_list.removeClass('animate-list'); let hide = $(e.currentTarget).data('closable'); $(e.currentTarget).data('closable', true); return hide; }); this.dropdown.on('show.bs.dropdown', () => { + setTimeout(() => { + this.dropdown_list.addClass('animate-list'); + }) this.toggle_seen(true); if (this.notification_indicator.is(':visible')) { this.notification_indicator.hide(); diff --git a/frappe/public/js/frappe/ui/toolbar/navbar.html b/frappe/public/js/frappe/ui/toolbar/navbar.html index e09afe3b4c..0c9f299688 100644 --- a/frappe/public/js/frappe/ui/toolbar/navbar.html +++ b/frappe/public/js/frappe/ui/toolbar/navbar.html @@ -38,7 +38,12 @@
-
+
+
+
+
+
+
  • diff --git a/frappe/public/scss/notification.scss b/frappe/public/scss/notification.scss index 473e8f1cb3..03129110f8 100644 --- a/frappe/public/scss/notification.scss +++ b/frappe/public/scss/notification.scss @@ -1,3 +1,7 @@ +.navbar { + perspective: 3200px; +} + .dropdown-notifications .header { margin: 7px 15px 10px 15px; cursor: pointer; @@ -50,6 +54,18 @@ position: absolute; box-shadow: 0px 1px 4px rgba(17, 43, 66, 0.1), 0px 2px 6px rgba(17, 43, 66, 0.08); + opacity: 0.3; + transform-origin: center -20px; + transform: rotateX(-15deg); + transition: + transform 0.3s, + opacity 0.3s; + + &.animate-list { + opacity: 1; + transform: rotateX(0); + } + .notification-list-header { margin: 0px 10px; display: flex; @@ -62,6 +78,19 @@ // margin: 10px 0px; max-height: 500px; overflow-y: auto; + width: 200%; + height: 100%; + flex: 1; + + .notifcation-reel { + @include size(100%, null); + @include flex(flex, space-between, null, null); + transition: 0.5s; + + .panel-events, .panel-notifications { + @include size(50%, null); + } + } } .notification-item-tabs { From 2bb63a0c5d784b2f81d4a762d12494ce8aee7e43 Mon Sep 17 00:00:00 2001 From: Shivam Mishra Date: Fri, 10 Jul 2020 10:00:02 +0530 Subject: [PATCH 9/9] feat: add size and flex mixins to notifications --- frappe/public/scss/notification.scss | 27 +++++++++++++++++---------- 1 file changed, 17 insertions(+), 10 deletions(-) diff --git a/frappe/public/scss/notification.scss b/frappe/public/scss/notification.scss index 03129110f8..53e2b79733 100644 --- a/frappe/public/scss/notification.scss +++ b/frappe/public/scss/notification.scss @@ -1,3 +1,15 @@ +@mixin size($w, $h) { + width: $w; + height: $h; +} + +@mixin flex($dis, $x, $y, $dir) { + display: $dis; + justify-content: $x; + align-items: $y; + flex-direction: $dir; +} + .navbar { perspective: 3200px; } @@ -68,18 +80,15 @@ .notification-list-header { margin: 0px 10px; - display: flex; - justify-content: space-between; - align-items: center; + @include flex(flex, space-between, center, null); border-bottom: 1px solid $border-color; } .notification-list-body { // margin: 10px 0px; max-height: 500px; - overflow-y: auto; - width: 200%; - height: 100%; + overflow-y: auto; + @include size(200%, 100%); flex: 1; .notifcation-reel { @@ -145,8 +154,7 @@ &::before { content: ''; display:inline-block; - height: 4px; - width: 4px; + @include size(4px, 4px); margin-top: 14px; border-radius: 10px; margin-right: 5px; @@ -209,8 +217,7 @@ } .recent-item.open-docs { - display: flex; - justify-content: space-between; + @include flex(flex, space-between, null, null); .indicator-pill { margin: 0px;