From 4764cae315af2c0886d7dbacca79071cacd16ebe Mon Sep 17 00:00:00 2001 From: Dhawal Limbuwala Date: Tue, 5 Dec 2017 10:15:18 +0100 Subject: [PATCH] [IMP] website(_sale): Improve UX for the website dashboard Purpose ======= There are some usability issues in the website dashboard Specification ============= 1/ Move button 'Go to Website' in the header 2/ Hide the action button bar if there's nothing in it 3/ Align the labels in the graph's legend 4/ Make the legend labels and display more obvious 5/ Modify the graph colors to be more readable 6/ Remove margins around todo buttons --- .../static/src/js/backend/dashboard.js | 18 +++-- .../src/less/website.backendDashboard.less | 70 ++++++++++++------- .../static/src/xml/website.backend.xml | 60 +++++++++++----- .../static/src/js/website_sale_backend.js | 1 - .../src/less/website_sale_dashboard.less | 4 ++ .../static/src/xml/website_sale_dashboard.xml | 69 +++++++++--------- .../static/src/xml/website_sale_dashboard.xml | 9 +-- 7 files changed, 141 insertions(+), 90 deletions(-) diff --git a/addons/website/static/src/js/backend/dashboard.js b/addons/website/static/src/js/backend/dashboard.js index a4c69885d62..9aae072e155 100644 --- a/addons/website/static/src/js/backend/dashboard.js +++ b/addons/website/static/src/js/backend/dashboard.js @@ -36,7 +36,7 @@ var Dashboard = Widget.extend(ControlPanelMixin, { this.date_from = moment().subtract(1, 'week'); this.date_to = moment(); - this.dashboards_templates = ['website.dashboard_visits']; + this.dashboards_templates = ['website.dashboard_header', 'website.dashboard_content']; this.graphs = []; }, @@ -51,7 +51,6 @@ var Dashboard = Widget.extend(ControlPanelMixin, { var self = this; return this._super().then(function() { self.update_cp(); - self.render_dashboards(); self.render_graphs(); self.$el.parent().addClass('oe_background_grey'); }); @@ -126,7 +125,7 @@ var Dashboard = Widget.extend(ControlPanelMixin, { render_dashboards: function() { var self = this; _.each(this.dashboards_templates, function(template) { - self.$('.o_website_dashboard_content').append(QWeb.render(template, {widget: self})); + self.$('.o_website_dashboard').append(QWeb.render(template, {widget: self})); }); }, @@ -152,6 +151,14 @@ var Dashboard = Widget.extend(ControlPanelMixin, { .tickValues(_.map(tick_values, function(d) { return self.getDate(d); })) .rotateLabels(-45); + chart.interactiveLayer.tooltip.contentGenerator(function(data) { + return QWeb.render('website.SalesChartTooltip', { + format: field_utils.format, + chartData: data, + dateRange: self.date_range + }); + }); + chart.yAxis .tickFormat(d3.format('.02f')); @@ -172,7 +179,7 @@ var Dashboard = Widget.extend(ControlPanelMixin, { var self = this; _.each(this.graphs, function(e) { if (self.groups[e.group]) { - self.render_graph('#o_graph_' + e.name, self.dashboards_data[e.name].graph); + self.render_graph('.o_graph_' + e.name, self.dashboards_data[e.name].graph); } }); this.render_graph_analytics(this.dashboards_data.visits.ga_client_id); @@ -230,7 +237,7 @@ var Dashboard = Widget.extend(ControlPanelMixin, { var self = this; $.when(this.fetch_data()).then(function() { - self.$('.o_website_dashboard_content').empty(); + self.$('.o_website_dashboard').empty(); self.render_dashboards(); self.render_graphs(); }); @@ -294,6 +301,7 @@ var Dashboard = Widget.extend(ControlPanelMixin, { this.update_control_panel({ cp_content: { $searchview: this.$searchview, + $buttons: QWeb.render("website.GoToButtons"), }, breadcrumbs: this.getParent().get_breadcrumbs(), }); diff --git a/addons/website/static/src/less/website.backendDashboard.less b/addons/website/static/src/less/website.backendDashboard.less index c818704e175..2021761aa1c 100644 --- a/addons/website/static/src/less/website.backendDashboard.less +++ b/addons/website/static/src/less/website.backendDashboard.less @@ -8,7 +8,7 @@ color: @odoo-main-color-muted; background-color: @odoo-view-background-color; background-size: cover; - margin-bottom: @odoo-horizontal-padding; + margin-top: @odoo-horizontal-padding; position: static; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3); @@ -20,7 +20,7 @@ h4 { margin: 0 0 0 8px; } - .col-md-6, .col-md-12 { + .col-md-7, .col-xs-12 { padding: 15px; .js_field_selection { @@ -36,7 +36,11 @@ table { - tr:nth-child(even) { + tr:first-child { + background: white; + } + + tr:nth-child(even):not(:hover) { background: #f5f6f7; } @@ -53,6 +57,9 @@ text-align: left; } } + .o_tooltip_key { + text-align: left; + } } /*------------------------------------------*/ @@ -75,23 +82,26 @@ opacity: 0 !important; } - [class*="nv-series-"] { - stroke-width: 3 !important; - fill: @odoo-main-color-muted !important; - } - - .nv-groups .nv-point, g circle { - fill: @odoo-brand-optional; - } - - .nv-groups .nv-point { - fill-opacity: 1 !important; - stroke-opacity: 1 !important; - stroke: @odoo-brand-optional; - } - - .nv-groups .nv-point.hover, .nv-group.nv-noninteractive .nv-point.hover { - stroke: darken(@odoo-brand-optional, 10%); + .nv-groups { + .nv-series-0 { + stroke-width: 3 !important; + .nv-point { + stroke: @odoo-brand-optional; + stroke-opacity: 1 !important; + &.hover { + stroke: darken(@odoo-brand-optional, 10%); + } + } + } + .nv-series-1 { + .nv-point { + stroke: @odoo-main-color-muted !important; + stroke-opacity: 1 !important; + &.hover { + stroke: darken(@odoo-main-color-muted, 10%); + } + } + } } } @@ -118,7 +128,7 @@ display: flex; flex-flow: row wrap; justify-content: flex-start; - > .o_box_item { + > .o_inner_box { @media (max-width: @screen-sm-min) { flex: 1 1 200px; display: block !important; @@ -136,15 +146,12 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - &.o_main { - background-color: @odoo-brand-optional; + cursor: pointer; + color: white; + background-color: @odoo-brand-optional; &:hover { background-color: darken(@odoo-brand-optional, 10%); } - a { - color: white; - } - } &.o_primary { background-color: @odoo-brand-primary; color: white; @@ -158,6 +165,15 @@ } } + .o_graph_sales { + .o_legend0 { + background-color: @odoo-brand-optional; + } + .o_legend1 { + background-color: @odoo-main-color-muted; + } + } + .o_dashboard_visits { h2 { diff --git a/addons/website/static/src/xml/website.backend.xml b/addons/website/static/src/xml/website.backend.xml index bc7248bbcf4..cbddc2840b9 100644 --- a/addons/website/static/src/xml/website.backend.xml +++ b/addons/website/static/src/xml/website.backend.xml @@ -9,7 +9,7 @@
-
+
@@ -18,21 +18,23 @@
- -
-
-

Visits

-
-
- Edit my Analytics Client ID -
-
-
-
-
-
-

There is no data currently available.

- + +
+
+
+

Visits

+
+
+ Edit my Analytics Client ID +
+
+
+
+
+
+

There is no data currently available.

+ +
@@ -66,4 +68,30 @@
+ + + + + + + + + + + + + + + + + +
+ + + + + Go to Website + + + diff --git a/addons/website_sale/static/src/js/website_sale_backend.js b/addons/website_sale/static/src/js/website_sale_backend.js index 2fa7e06dbfa..839b269f8b8 100644 --- a/addons/website_sale/static/src/js/website_sale_backend.js +++ b/addons/website_sale/static/src/js/website_sale_backend.js @@ -11,7 +11,6 @@ WebsiteBackend.include({ init: function (parent, context) { this._super(parent, context); - this.dashboards_templates.unshift('website_sale.dashboard_sales'); this.graphs.push({'name': 'sales', 'group': 'sale_salesman'}); }, diff --git a/addons/website_sale/static/src/less/website_sale_dashboard.less b/addons/website_sale/static/src/less/website_sale_dashboard.less index 4b93126c19b..b8ade85cba6 100644 --- a/addons/website_sale/static/src/less/website_sale_dashboard.less +++ b/addons/website_sale/static/src/less/website_sale_dashboard.less @@ -1,4 +1,8 @@ .o_dashboard_sales { + + h2 { + padding: 15px; + } h4 { margin: 3px 0 4px 0 !important; } .o_demo_background { margin-top: 16px; diff --git a/addons/website_sale/static/src/xml/website_sale_dashboard.xml b/addons/website_sale/static/src/xml/website_sale_dashboard.xml index 8aac2b4d65d..0ae647c45d4 100644 --- a/addons/website_sale/static/src/xml/website_sale_dashboard.xml +++ b/addons/website_sale/static/src/xml/website_sale_dashboard.xml @@ -1,61 +1,60 @@ - -
- + +
+
Unpaid Orders - - -
-
- +
+
+
+ Orders to Invoice +
+
Payments to Capture - - -
-
- +
+
- Abandoned Carts to Recover - - + Abandoned Carts +
- -
-
-
-
+ + +
+
+

Sales Since Last

Sales

 -
-
-
- -
-
-
-
+
+
+
+
+ +
+ +

Sales Since Last

Sales

 -
+
+
+
+
+

There is no recent confirmed order.

+
-
-

There is no recent confirmed order.

-
-
+
-
+ diff --git a/addons/website_sale_management/static/src/xml/website_sale_dashboard.xml b/addons/website_sale_management/static/src/xml/website_sale_dashboard.xml index d9d0f17d3cb..d3bc10f7237 100644 --- a/addons/website_sale_management/static/src/xml/website_sale_dashboard.xml +++ b/addons/website_sale_management/static/src/xml/website_sale_dashboard.xml @@ -2,12 +2,9 @@ -
- -
- Orders to Invoice - - +
+
+ Orders to Invoice