pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] website: improve dashboard design

Browse Source
This commit is contained in:
Csaba Fazekas
2016-08-22 13:48:49 +02:00
committed by Martin Geubelle
parent b94ddcbd70
commit 1ede17978b
8 changed files with 255 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/img/website_dashboard_visit_demo.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 42 KiB

addons/website/static/src/js/website.backendDashboard.js
+5 -6
View File
@@ -105,7 +105,7 @@ var Dashboard = Widget.extend(ControlPanelMixin, {
render_dashboards: function() {
var self = this;
_.each(this.dashboards_templates, function(template) {
self.$el.append(QWeb.render(template, {widget: self}));
self.$('.o_website_dashboard').append(QWeb.render(template, {widget: self}));
});
},
@@ -129,7 +129,7 @@ var Dashboard = Widget.extend(ControlPanelMixin, {
chart.xAxis
.tickFormat(function(d) { return d3.time.format("%m/%d/%y")(new Date(d)); })
.tickValues(_.map(tick_values, function(d) { return self.getDate(d); }))
.rotateLabels(-30);
.rotateLabels(-45);
chart.yAxis
.tickFormat(d3.format('.02f'));
@@ -156,7 +156,6 @@ var Dashboard = Widget.extend(ControlPanelMixin, {
},
render_graph_analytics: function(client_id) {
if (!this.dashboards_data.visits || !this.dashboards_data.visits.ga_client_id) {
return;
}
@@ -203,7 +202,7 @@ var Dashboard = Widget.extend(ControlPanelMixin, {
var self = this;
$.when(this.fetch_data()).then(function() {
self.$el.empty();
self.$('.o_website_dashboard').empty();
self.render_dashboards();
self.render_graphs();
});
@@ -292,7 +291,7 @@ var Dashboard = Widget.extend(ControlPanelMixin, {
} else if (this.date_range === 'year') {
start_date = '365daysAgo';
}
var $analytics_chart_2 = $('<div>').addClass('col-md-6');
var $analytics_chart_2 = $('<div>').addClass('col-md-6 col-xs-12');
var breakdownChart = new gapi.analytics.googleCharts.DataChart({
query: {
'dimensions': 'ga:date',
@@ -312,7 +311,7 @@ var Dashboard = Widget.extend(ControlPanelMixin, {
$analytics_chart_2.appendTo($analytics_components);
// 5. Chart table
var $analytics_chart_1 = $('<div>').addClass('col-md-6');
var $analytics_chart_1 = $('<div>').addClass('col-md-6 col-xs-12');
var mainChart = new gapi.analytics.googleCharts.DataChart({
query: {
'dimensions': 'ga:medium',
addons/website/static/src/less/website.backendDashboard.less
+211 -96
View File
@@ -1,113 +1,228 @@
.o_website_dashboard {
.o_dashboards {
background-color: #ececec;
background-color: @odoo-webclient-background-color;
.o_website_dashboard {
background-color: #ececec;
padding: 16px;
svg {
padding-top: 2px;
float: left;
}
> div {
margin-right: 0px;
margin-left: 0px;
}
div.o_box {
.clearfix();
padding: 10px;
color: @odoo-main-text-color;
background-color: @odoo-view-background-color;
background-size: cover;
margin-top: @odoo-horizontal-padding;
margin-bottom: @odoo-horizontal-padding;
position: relative;
}
div.o_box {
.clearfix();
color: @odoo-main-color-muted;
background-color: @odoo-view-background-color;
background-size: cover;
margin-bottom: @odoo-horizontal-padding;
position: static;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
padding: 25px 16px;
.o_dashboard_visits {
.o_demo_background {
margin-top: 16px;
height: 300px;
background: url("/website/static/src/img/website_dashboard_visit_demo.png");
position: relative;
> button {
position: absolute;
top: 50%;
left: 40%;
h2, h4 {
text-transform: uppercase;
margin-top: 0;
}
.o_layer {
background-color: rgba(0,0,0,.4);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
h4 { margin: 0 0 0 8px; }
h2 { color: @odoo-brand-primary; }
.col-md-6 {
padding: 15px;
.js_field_selection {
width: 30%;
margin: 0 0 20px 0;
float: right;
border-radius: 0;
}
.table-responsive {
border: none;
}
table {
tr:nth-child(even) {
background: #f5f6f7;
}
th {
text-transform: uppercase;
color: @odoo-brand-optional;
border-top-width: 0px;
}
td, th {
text-align: right;
border-left: none;
&:first-child {
text-align: left;
}
}
}
/*------------------------------------------*/
/* Chart design */
/*------------------------------------------*/
.gapi-analytics-data-chart svg g path, svg [class*="nv-series-"] {
stroke: @odoo-main-color-muted !important;
}
svg {
padding-top: 2px;
float: left;
g.nvd3.nv-wrap.nv-lineChart {
.translate(45; 30) !important;
}
g.nv-y.nv-axis, g.nv-x.nv-axis, g.nv-y.nv-axis .nv-axisMaxMin {
text {
opacity: .3 !important;
}
}
g.nv-x.nv-axis .tick > line {
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%);
}
}
.nvtooltip {
border-radius: 0;
border: 1px solid @gray-lighter;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
.legend-color-guide > div {
border: none;
}
tr:first-child .legend-color-guide > div {
background-color: @odoo-brand-optional !important;
}
tr:last-child .legend-color-guide > div {
background-color: darken(@odoo-brand-optional, 10%) !important;
}
}
}
}
.o_properties_selection {
.o-flex-display();
margin-top: 10px;
margin-bottom: 10px;
.o_dashboard_visits {
.o_demo_background {
margin-top: 16px;
height: 300px;
background-size: 100% !important;
background: url("/website/static/src/img/website_dashboard_visit_demo.png");
position: relative;
.o_buttons {
position: relative;
z-index: 10;
> button {
display: block;
}
}
.o_layer {
background-color: rgba(255,255,255,.3);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
.o_properties_selection {
@media (min-width: @screen-md-min) {
.o-flex-display();
}
margin-top: 10px;
margin-bottom: 10px;
}
.gapi-analytics-auth-styles-signinbutton {
cursor: pointer;
}
.ActiveUsers {
position: relative;
float: right;
top: -60px;
right: 10px;
border: 1px solid @gray-lighter;
font-weight: 300;
white-space: nowrap;
padding: .5em 1.5em;
margin: .5em;
text-transform: uppercase;
}
.ActiveUsers-value {
display: inline-block;
font-weight: 300;
margin-right: -.25em;
}
.ActiveUsers.is-increasing {
animation: increase 3s;
}
.ActiveUsers.is-decreasing {
animation: decrease 3s;
}
@keyframes increase {
10% {
background-color: lighten(@odoo-brand-optional, 30%);
border-color: @odoo-brand-optional;
color: @odoo-brand-optional;
}
}
@keyframes decrease {
10% {
background-color: lighten(@odoo-brand-optional, 30%);
border-color: @odoo-brand-optional;
color: @odoo-brand-optional;
}
}
}
.gapi-analytics-auth-styles-signinbutton {
tr.o_product_template {
cursor: pointer;
}
.ActiveUsers {
position: absolute;
top: 0;
right: 0;
background: hsl(30,10%,95%);
border: 1px solid #d4d2d0;
border-radius: 4px;
font-weight: 300;
white-space: nowrap;
padding: .5em 1.5em;
margin: .5em;
.o_loader {
text-align: center;
width: 100%;
height: 20em;
}
.ActiveUsers-value {
display: inline-block;
font-weight: 600;
margin-right: -.25em;
}
.ActiveUsers.is-increasing {
animation: increase 3s;
}
.ActiveUsers.is-decreasing {
animation: decrease 3s;
}
@keyframes increase {
0% {}
10% {
background-color: hsl(120, 100%, 96%);
border-color: hsla(120, 100%, 25%, .5);
color: hsla(120, 100%, 25%, 1);
}
100% {}
}
@keyframes decrease {
0% {}
10% {
background-color: hsl(0, 100%, 96%);
border-color: hsla(0, 100%, 50%, .5);
color: hsl(0, 100%, 50%);
}
100% {}
}
}
tr.o_product_template {
cursor: pointer;
}
.o_loader {
text-align: center;
width: 100%;
height: 20em;
}
}
addons/website/static/src/xml/website.backend.xml
+12 -10
View File
@@ -6,7 +6,9 @@
</div>
<t t-name="website.WebsiteDashboardMain">
<div class="container o_website_dashboard">
<div class="o_dashboards">
<div class="container-fluid o_website_dashboard">
</div>
</div>
</t>
@@ -14,25 +16,25 @@
<div class="row o_dashboard_visits">
<div class="col-xs-12 o_box">
<h2>Visits</h2>
<div t-if="widget.dashboards_data.visits &amp;&amp; widget.dashboards_data.visits.ga_client_id" class="row js_analytics_components">
<div t-if="widget.dashboards_data.visits &amp;&amp; widget.dashboards_data.visits.ga_client_id">
<div class="row js_analytics_components"/>
<a href="#" class="js_link_analytics_settings">Edit my Analytics Client ID</a>
</div>
<div t-if="!(widget.dashboards_data.visits &amp;&amp; widget.dashboards_data.visits.ga_client_id)">
<div t-if="!(widget.dashboards_data.visits &amp;&amp; widget.dashboards_data.visits.ga_client_id)" class="col-md-12">
<div class="o_demo_background">
<div class="o_layer">
</div>
<button class="btn btn-sm btn-primary js_link_analytics_settings">Link my Analytics Account</button>
<div class="o_buttons text-center">
<h3>Currently there is no data available.</h3>
<button class="btn btn-sm btn-primary js_link_analytics_settings center-block mb8">Link my Analytics Account</button>
</div>
</div>
</div>
<a href="#" class="js_link_analytics_settings">Edit my Analytics Client ID</a>
</div>
</div>
</t>
<div t-name="website.unauthorized_analytics" class="col-xs-12 js_unauthorized_message">
<div t-name="website.unauthorized_analytics" class="col-xs-12 js_unauthorized_message mb16">
<span t-if="reason === 'not_connected'">You need to log in to your Google Account before: </span>
<span t-if="reason === 'no_right'">You do not seem to have access to this Analytics Account.</span>
</div>
addons/website_crm/controllers/main.py
+6
View File
@@ -55,6 +55,12 @@ class WebsiteCrmBackend(WebsiteBackend):
},
],
'leads': leads,
'lead_fields': {
'create_date': 'Create Date',
'campaign_id': 'Campaign',
'medium_id': 'Medium',
'source_id': 'Source',
},
}
return results
addons/website_crm/static/src/js/website_crm_backend.js
+2 -2
View File
@@ -45,8 +45,8 @@ WebsiteBackend.include({
return this._super().then(function() {
var leads = self.dashboards_data.leads.leads;
if (leads && leads.length) {
self.lead_fields = Object.keys(self.dashboards_data.leads.leads[0]);
self.lead_field = self.lead_fields[0];
self.lead_fields = self.dashboards_data.leads.lead_fields;
self.lead_field = Object.keys(self.lead_fields)[0];
self.compute_percentages();
}
});
addons/website_crm/static/src/xml/website_crm_dashboard.xml
+13 -16
View File
@@ -4,26 +4,23 @@
<t t-name="website_crm.dashboard_leads">
<div class="row o_dashboard_leads">
<div class="col-xs-12 o_box">
<h2>Lead Acquisition</h2>
<div class="col-md-6 col-xs-12">
<h2>Leads Acquisition / <t t-esc="widget.date_range"></t></h2>
<div id="o_graph_leads" class="o_graph" data-type="leads"/>
</div>
<div class="row">
<div class="col-md-6">
<div id="o_graph_leads" class="o_graph" data-type="leads"/>
<div class="col-md-6 col-xs-12">
<h4>Leads Analysis</h4>
<div t-if="!widget.leads_table || !widget.leads_table.length">
<i>There is no recent lead.</i>
</div>
<div class="col-md-6">
<h4>Leads Analysis</h4>
<div t-if="!widget.leads_table || !widget.leads_table.length">
<i>There is no recent lead.</i>
</div>
<div t-if="widget.leads_table &amp;&amp; widget.leads_table.length" class="table-responsive">
<select class="js_field_selection">
<option t-foreach="widget.lead_fields" t-as="field" t-att-value="field"><t t-esc="widget.lead_fields[field]"/></option>
</select>
<div t-if="widget.leads_table &amp;&amp; widget.leads_table.length" class="table-responsive">
<select class="js_field_selection">
<option t-foreach="widget.lead_fields" t-as="field" t-att-value="field"><t t-esc="field.split('_id')[0]"/></option>
</select>
<t t-call="website_crm.LeadsTable"/>
</div>
<t t-call="website_crm.LeadsTable"/>
</div>
</div>
</div>
addons/website_sale/static/src/xml/website_sale_dashboard.xml
+6 -8
View File
@@ -5,16 +5,14 @@
<t t-name="website_sale.dashboard_sales">
<div class="row o_dashboard_sales">
<div class="col-xs-12 o_box">
<h2>Sales</h2>
<div class="row">
<div class="col-md-6">
<div id="o_graph_sales" class="o_graph" data-type="sales"/>
</div>
<div class="col-md-6 col-xs-12">
<h2>Sales / <t t-esc="widget.date_range"></t></h2>
<div id="o_graph_sales" class="o_graph" data-type="sales"/>
</div>
<div class="col-md-6">
<t t-call="website_sale.products_table"/>
</div>
<div class="col-md-6 col-xs-12">
<t t-call="website_sale.products_table"/>
</div>
</div>
</div>