[style] style fixes for setup wizard and charts

frappe/desk/page/setup_wizard/setup_wizard.css

@@ -15,26 +15,30 @@
 
 .setup-wizard-slide .lead {
 	margin-bottom: 10px;
+	font-weight: 500;
 }
 
-.setup-wizard-slide .form {
-	margin-top: 20px;
+.setup-wizard-slide.with-form {
+	margin: 40px auto;
 	border: 1px solid #d1d8dd;
 	box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
 }
 
 .setup-wizard-slide .footer {
-	margin: 20px auto;
+	padding: 30px;
 }
 
 .setup-wizard-progress {
-    border-bottom: 1px solid #d1d8dd;
-    padding-bottom: 15px;
-    margin: -20px auto 20px;
+    padding: 15px;
 }
 
 .setup-wizard-slide .fa-fw {
 	vertical-align: middle;
+	font-size: 10px;
+}
+
+.setup-wizard-slide .fa-fw.active {
+	color: #5e64ff;
 }
 
 .setup-wizard-slide .icon-circle-blank {

frappe/desk/page/setup_wizard/setup_wizard.js

@@ -548,11 +548,10 @@ function load_frappe_slides() {
 		title: __("The First User: You"),
 		icon: "fa fa-user",
 		fields: [
-			{"fieldname": "first_name", "label": __("First Name"), "fieldtype": "Data",
+			{"fieldname": "full_name", "label": __("Full Name"), "fieldtype": "Data",
 				reqd:1},
-			{"fieldname": "last_name", "label": __("Last Name"), "fieldtype": "Data"},
 			{"fieldname": "email", "label": __("Email Address"), "fieldtype": "Data",
-				reqd:1, "description": __("You will use it to Login"), "options":"Email"},
+				reqd:1, "description": __("Login id"), "options":"Email"},
 			{"fieldname": "password", "label": __("Password"), "fieldtype": "Password",
 				reqd:1},
 			{fieldtype:"Attach Image", fieldname:"attach_user",
@@ -563,8 +562,10 @@ function load_frappe_slides() {
 			if(user!=="Administrator") {
 				slide.form.fields_dict.password.$wrapper.toggle(false);
 				slide.form.fields_dict.email.$wrapper.toggle(false);
-				slide.form.fields_dict.first_name.set_input(frappe.boot.user.first_name);
-				slide.form.fields_dict.last_name.set_input(frappe.boot.user.last_name);
+				if(frappe.boot.user.first_name || frappe.boot.user.last_name) {
+					slide.form.fields_dict.full_name.set_input(
+						[frappe.boot.user.first_name, frappe.boot.user.last_name].join(' ').trim());
+				}
 
 				var user_image = frappe.get_cookie("user_image");
 				if(user_image) {

frappe/desk/page/setup_wizard/setup_wizard.py

@@ -5,7 +5,6 @@ from __future__ import unicode_literals
 
 import frappe, json, os
 from frappe.utils import strip, cint
-from frappe import _
 from frappe.translate import (set_default_language, get_dict, send_translations)
 from frappe.geo.country_info import get_country_info
 from frappe.utils.file_manager import save_file
@@ -84,11 +83,14 @@ def update_user_name(args):
 		args['name'] = args.get("email")
 
 		_mute_emails, frappe.flags.mute_emails = frappe.flags.mute_emails, True
+		first_name, last_name = args.get('full_name'), ''
+		if ' ' in first_name:
+			first_name, last_name = first_name.split(' ', 1)
 		doc = frappe.get_doc({
 			"doctype":"User",
 			"email": args.get("email"),
-			"first_name": args.get("first_name"),
-			"last_name": args.get("last_name")
+			"first_name": first_name,
+			"last_name": last_name
 		})
 		doc.flags.no_welcome_mail = True
 		doc.insert()

frappe/desk/page/setup_wizard/setup_wizard_page.html

@@ -1,17 +1,17 @@
-<div class="container setup-wizard-slide {%= css_class %}" data-slide-name="{%= name %}">
+<div class="container setup-wizard-slide {%= css_class %} with-form" data-slide-name="{%= name %}">
 	<div class="text-center setup-wizard-progress text-extra-muted">
 		{% for (var i=0; i < slides_count; i++) { %}
-		<i class="fa-fw {% if (i+1==step) { %} fa fa-circle {% } else { %} fa fa-circle-o {% } %}"></i>
+		<i class="fa fa-fw fa-circle{% if (i+1==step) { %} active {% } %}"></i>
 		{% } %}
 	</div>
     <p class="text-center lead">{%= title %}</p>
 	<div class="row">
 		<div class="col-sm-12">
-			{% if (help) { %} <p class="text-center">{%= help %}</p> {% } %}
+			<!-- {% if (help) { %} <p class="text-center">{%= help %}</p> {% } %} -->
 			<div class="form"></div>
 		</div>
 	</div>
-	<div class="footer text-center">
+	<div class="footer text-right">
 		<div>
             <a class="prev-btn hide grey small">{%= __("Previous") %}</a>
 			<a class="next-btn hide btn btn-primary btn-sm">{%= __("Next") %}</a>

frappe/public/css/desk.css

@@ -665,3 +665,44 @@ fieldset[disabled] .form-control {
 .note-editor.note-frame .note-editing-area .note-editable {
   color: #36414C;
 }
+.c3 svg {
+  font-family: inherit;
+  font-size: 10px;
+  color: #36414C;
+}
+.c3-line {
+  stroke-width: 3px;
+}
+.c3-tooltip {
+  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
+  border-radius: 3px;
+  opacity: 1;
+}
+.c3-tooltip tr {
+  border: none;
+}
+.c3-tooltip th {
+  color: #8D99A6;
+  background-color: #ffffff;
+  font-size: 12px;
+  font-weight: normal;
+  padding: 2px 5px;
+  text-align: left;
+  border: 1px solid #d1d8dd;
+}
+.c3-tooltip td {
+  color: #36414C;
+  font-size: 11px;
+  padding: 3px 6px;
+  background-color: #fff;
+  border: 1px solid #d1d8dd;
+}
+.c3-tooltip td > span {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  margin-right: 6px;
+}
+.c3-tooltip td.value {
+  text-align: right;
+}

frappe/public/css/mobile.css

@@ -322,15 +322,6 @@ body {
     margin-top: 10px;
     text-align: left;
   }
-  #page-setup-wizard .form-section:first-child .form-column:first-child .frappe-control:first-child {
-    border-top: 1px solid #d1d8dd;
-  }
-  #page-setup-wizard .form-section:last-child .form-column:last-child .frappe-control:last-child {
-    border-bottom: 1px solid #d1d8dd;
-  }
-  #page-setup-wizard .setup-wizard-slide .form {
-    border: none;
-  }
   body[data-route^="Form"] .page-head .sub-heading {
     right: 90px;
   }

frappe/public/js/frappe/form/control.js

@@ -611,11 +611,6 @@ frappe.ui.form.ControlCurrency = frappe.ui.form.ControlFloat.extend({
 frappe.ui.form.ControlPercent = frappe.ui.form.ControlFloat;
 
 frappe.ui.form.ControlDate = frappe.ui.form.ControlData.extend({
-	datepicker_options: {
-		language: "en",
-		autoClose: true,
-		todayButton: new Date()
-	},
 	set_input: function(value) {
 		this._super(value);
 		if(value && this.last_value !== this.value) {
@@ -630,6 +625,12 @@ frappe.ui.form.ControlDate = frappe.ui.form.ControlData.extend({
 	},
 	set_date_options: function() {
 		var me = this;
+		this.datepicker_options = {
+			language: "en",
+			autoClose: true,
+			todayButton: new Date()
+		};
+
 		var date_format =
 			(frappe.boot.sysdefaults.date_format || 'yyyy-mm-dd');
 		this.datepicker_options.dateFormat = date_format;

frappe/public/js/frappe/ui/charts.js

@@ -23,7 +23,7 @@ frappe.ui.Chart = Class.extend({
 		    data: {},
 			axis: {
 		        x: {
-		            type: 'category' // this needed to load string x value
+		            type: this.opts.x_type || 'category' // this needed to load string x value
 		        },
 				y: {
 					padding: { bottom: 10 }
@@ -47,6 +47,27 @@ frappe.ui.Chart = Class.extend({
 
 		chart_dict["data"]["type"] = this.opts.chart_type || "line";
 
+		if(this.opts.x_type==='timeseries') {
+			if(!chart_dict.axis.x.tick) {
+				chart_dict.axis.x.tick = {}
+			}
+			chart_dict.axis.x.tick.culling = {max: 15};
+			chart_dict.axis.x.tick.format = frappe.boot.sysdefaults.date_format
+				.replace('yyyy', '%Y').replace('mm', '%m').replace('dd', '%d');
+		};
+
+		// set color
+		if(!chart_dict.data.colors) {
+			colors = ['#4E50A6', '#7679FB', '#A3A5FC', '#925191', '#5D3EA4', '#8D5FFA',
+				'#5E3AA8', '#7B933D', '#4F8EA8'];
+			chart_dict.data.colors = {};
+			chart_dict.data.columns.forEach(function(d, i) {
+				if(d[0]!=='x') {
+					chart_dict.data.colors[d[0]] = colors[i-1];
+				}
+			});
+		}
+
 		return c3.generate(chart_dict);
 	},
 

frappe/public/js/frappe/ui/field_group.js

@@ -75,8 +75,12 @@ frappe.ui.FieldGroup = frappe.ui.form.Layout.extend({
 			}
 		}
 		if(errors.length && !ignore_errors) {
-			msgprint('<b>' + __('Missing Values Required') + "</b><br>"
-				+ errors.join('<br>'));
+			msgprint({
+				title: __('Missing Values Required'),
+				message: __('Following fields have missing values:') +
+					'<br><br><ul><li>' + errors.join('<li>') + '</ul>',
+				indicator: 'orange'
+			});
 			return null;
 		}
 		return ret;

frappe/public/js/frappe/views/reports/grid_report.js

@@ -671,7 +671,8 @@ frappe.views.GridReportWithPlot = frappe.views.GridReport.extend({
 
 		this.chart = new frappe.ui.Chart({
 			wrapper: this.chart_area,
-			data: chart_data
+			data: chart_data,
+			x_type: 'timeseries'
 		});
 	},
 

frappe/public/less/desk.less

@@ -533,4 +533,53 @@ textarea.form-control {
 
 .note-editor.note-frame .note-editing-area .note-editable {
 	color: @text-color;
-}
+}
+
+.c3 svg {
+	font-family: inherit;
+	font-size: 10px;
+	color: @text-color;
+}
+
+.c3-line {
+    stroke-width: 3px;
+}
+
+.c3-tooltip {
+  box-shadow: 3px 3px 3px rgba(0,0,0,0.1);
+  border-radius: 3px;
+  opacity: 1;
+}
+
+.c3-tooltip tr {
+  border: none;
+}
+
+.c3-tooltip th {
+	color: @text-muted;
+	background-color: #ffffff;
+	font-size: 12px;
+	font-weight: normal;
+	padding: 2px 5px;
+	text-align: left;
+	border: 1px solid @border-color;
+}
+
+.c3-tooltip td {
+	color: @text-color;
+	font-size: 11px;
+	padding: 3px 6px;
+	background-color: #fff;
+	border: 1px solid @border-color;
+}
+
+.c3-tooltip td > span {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  margin-right: 6px;
+}
+
+.c3-tooltip td.value {
+  text-align: right; }
+

frappe/public/less/mobile.less

@@ -392,20 +392,6 @@ body {
 		}
 	}
 
-	#page-setup-wizard {
-		.form-section:first-child .form-column:first-child .frappe-control:first-child {
-			border-top: 1px solid @border-color;
-		}
-
-		.form-section:last-child .form-column:last-child .frappe-control:last-child {
-			border-bottom: 1px solid @border-color;
-		}
-
-		.setup-wizard-slide .form {
-			border: none;
-		}
-	}
-
 	body[data-route^="Form"] {
 		.page-head .sub-heading {
 			right: 90px;