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 = $('') .attr('data-message-idx', i) - .html($.format('
{0}
\ -

{1}

\ -
{3}
', - [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 @@ +
{{ title }}
+

{{ description }}

+
+ {{ action }} + + + +
\ 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; + } + }