[minor] add progress in desktop help message

This commit is contained in:
Rushabh Mehta 2017-03-02 11:12:55 +05:30
parent 494f39de78
commit 96dd947111
4 changed files with 52 additions and 4 deletions

View file

@ -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);
});

View file

@ -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>

View file

@ -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;
}

View file

@ -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;
}
}