From 96dd94711133283d0dff5ffc52f7c99dca2c19c2 Mon Sep 17 00:00:00 2001
From: Rushabh Mehta <rmehta@gmail.com>
Date: Thu, 2 Mar 2017 11:12:55 +0530
Subject: [PATCH] [minor] add progress in desktop help message

---
 frappe/core/page/desktop/desktop.js           |  5 +----
 .../page/desktop/desktop_help_message.html    |  8 +++++++
 frappe/public/css/desktop.css                 | 21 ++++++++++++++++++
 frappe/public/less/desktop.less               | 22 +++++++++++++++++++
 4 files changed, 52 insertions(+), 4 deletions(-)
 create mode 100644 frappe/core/page/desktop/desktop_help_message.html

diff --git a/frappe/core/page/desktop/desktop.js b/frappe/core/page/desktop/desktop.js
index 828b52f6b1..aa99d351bc 100644
--- a/frappe/core/page/desktop/desktop.js
+++ b/frappe/core/page/desktop/desktop.js
@@ -108,10 +108,7 @@ $.extend(frappe.desktop, {
 			help_messages.forEach(function(message, i) {
 				var $message = $('<div class="help-message-item hidden"></div>')
 					.attr('data-message-idx', i)
-					.html($.format('<div><span class="indicator blue">{0}</span></div>\
-						<p>{1}</p>\
-						<div><a class="btn btn-sm btn-default" href="#{2}">{3}</a></div>',
-							[message.title, message.description, message.route, message.action]))
+					.html(frappe.render_template('desktop_help_message', message))
 					.appendTo($help_messages);
 
 			});
diff --git a/frappe/core/page/desktop/desktop_help_message.html b/frappe/core/page/desktop/desktop_help_message.html
new file mode 100644
index 0000000000..7de47abf03
--- /dev/null
+++ b/frappe/core/page/desktop/desktop_help_message.html
@@ -0,0 +1,8 @@
+<div><span class="indicator blue">{{ title }}</span></div>
+<p>{{ description }}</p>
+<div>
+	<a class="btn btn-sm btn-default" href="#{{ route }}">{{ action }}</a>
+	<span class="help-progress" title="{{ __("You have made {0} of {1}", [count, target]) }}">
+		<span class="help-progress-bar" style="width: {{ Math.floor(count/target*100) }}%"></span>
+	</span>
+</div>
\ No newline at end of file
diff --git a/frappe/public/css/desktop.css b/frappe/public/css/desktop.css
index b29d93f2b0..8962b02129 100644
--- a/frappe/public/css/desktop.css
+++ b/frappe/public/css/desktop.css
@@ -234,3 +234,24 @@ body[data-route="desktop"] .navbar-set-desktop-icons {
 .help-message-wrapper .indicator {
   color: #36414C;
 }
+.help-message-wrapper .help-progress {
+  display: inline-block;
+  margin-left: 10px;
+  height: 4px;
+  background-color: #fafbfc;
+}
+.help-message-wrapper .help-progress {
+  display: inline-block;
+  margin-left: 10px;
+  height: 4px;
+  width: 100px;
+  background-color: #f5f7fa;
+  border-radius: 2px;
+}
+.help-message-wrapper .help-progress-bar {
+  display: inline-block;
+  height: 4px;
+  background-color: #5E64FF;
+  float: left;
+  border-radius: 2px;
+}
diff --git a/frappe/public/less/desktop.less b/frappe/public/less/desktop.less
index 28c89fc46c..8c8680a595 100644
--- a/frappe/public/less/desktop.less
+++ b/frappe/public/less/desktop.less
@@ -293,5 +293,27 @@ body[data-route="desktop"] .navbar-set-desktop-icons {
 		color: @text-color;
 	}
 
+	.help-progress {
+		display: inline-block;
+		margin-left: 10px;
+		height: 4px;
+		background-color: @light-bg;
+	}
+	.help-progress {
+		display: inline-block;
+		margin-left: 10px;
+		height: 4px;
+		width: 100px;
+		background-color: @navbar-bg;
+		border-radius: 2px;
+	}
+	.help-progress-bar {
+		display: inline-block;
+		height: 4px;
+		background-color: @brand-primary;
+		float: left;
+		border-radius: 2px;
+	}
+
 }