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/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/js/frappe/views/reports/query_report.js b/frappe/public/js/frappe/views/reports/query_report.js
index 3cd3fef2ea..a35891731a 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() {
@@ -62,6 +64,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) {
@@ -356,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);
@@ -690,6 +703,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,
diff --git a/frappe/public/scss/global.scss b/frappe/public/scss/global.scss
index 93fe23e7a6..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 {
@@ -214,7 +223,7 @@ select.input-xs {
.dropdown-menu {
min-width: 200px;
- padding: 4px 0;
+ padding: 4px;
font-size: $font-size-md;
max-height: 500px;
overflow: auto;
diff --git a/frappe/public/scss/notification.scss b/frappe/public/scss/notification.scss
index 473e8f1cb3..53e2b79733 100644
--- a/frappe/public/scss/notification.scss
+++ b/frappe/public/scss/notification.scss
@@ -1,3 +1,19 @@
+@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;
+}
+
.dropdown-notifications .header {
margin: 7px 15px 10px 15px;
cursor: pointer;
@@ -50,18 +66,40 @@
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;
- 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;
+ overflow-y: auto;
+ @include size(200%, 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 {
@@ -116,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;
@@ -180,8 +217,7 @@
}
.recent-item.open-docs {
- display: flex;
- justify-content: space-between;
+ @include flex(flex, space-between, null, null);
.indicator-pill {
margin: 0px;
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;
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