Commit 659102d8 by Kálmán Viktor

dashboard: tour features

- fix the skip button
- add name/description step
- add renew step
parent e8de471b
......@@ -982,16 +982,24 @@ textarea[name="new_members"] {
color: orange;
}
.introjs-skipbutton {
color: #333;
}
.introjs-button:focus {
text-decoration: none;
color: #333;
outline: none;
}
.introjs-button:hover {
.introjs-button:hover:not(.introjs-disabled) {
color: #428bca;
}
.introjs-tooltip {
min-width: 250px;
}
#vm-info-pane {
margin-bottom: 20px;
}
......
......@@ -4,7 +4,7 @@ $(function() {
intro.setOptions({
'nextLabel': gettext("Next") + ' <i class="fa fa-chevron-right"></i>',
'prevLabel': '<i class="fa fa-chevron-left"></i> ' + gettext("Previous"),
'skipLabel': gettext("Skip"),
'skipLabel': '<i class="fa fa-times"></i> ' + gettext("End tour"),
'doneLabel': gettext("Done"),
});
intro.setOptions({
......@@ -49,12 +49,20 @@ function get_steps() {
element: document.querySelector("#vm-details-start-template-tour"),
intro: "<p>" + gettext("Welcome to the template tutorial. In this quick tour, we gonna show you how to do the steps described above.") + "</p>" +
"<p>" + gettext('For the next tour step press the "Next" button or the right arrow (or "Back" button/left arrow for the previous step).') + "</p>" +
"<p>" + gettext("During the tour please don't try the functions because it may lead to graphical glitches, however you can end the tour any time you want with the End Tour button!") +
"<p>" + gettext("During the tour please <strong>don't try</strong> the functions because it may lead to graphical glitches, however you can end the tour any time you want with the End Tour button.") +
"</p>",
},
{
element: document.querySelector('a[href="#home"]'),
intro: gettext("In this tab you can tag your virtual machine and modify the name and description."),
intro: gettext("In this tab you can extend the expiration date of your virtual machine, add tags and modify the name and description."),
},
{
element: document.querySelector('#home_name_and_description'),
intro: gettext("Please add a meaningful description to the virtual machine. Changing the name is also recommended, however you can choose a new name when saving the template."),
},
{
element: document.querySelector('#home_expiration_and_lease'),
intro: gettext("You can change the lease to extend the expiration date. This will be the lease of the new template."),
},
{
element: document.querySelector('a[href="#resources"]'),
......
......@@ -6,6 +6,7 @@
{% block extra_link %}
<link rel="stylesheet" href="{{ STATIC_URL }}dashboard/loopj-jquery-simple-slider/css/simple-slider.css"/>
<link rel="stylesheet" href="{{ STATIC_URL }}dashboard/introjs/introjs.min.css">
<link href="{{ STATIC_URL }}dashboard/dashboard.css" rel="stylesheet">
{% endblock %}
......
......@@ -212,10 +212,6 @@
{% endblock %}
{% block extra_css %}
<link rel="stylesheet" href="{{ STATIC_URL }}dashboard/introjs/introjs.min.css">
{% endblock %}
{% block extra_js %}
<script src="{{ STATIC_URL }}dashboard/introjs/intro.min.js"></script>
<script src="{{ STATIC_URL }}dashboard/vm-details.js"></script>
......
{% load i18n %}
<div class="row">
<div class="col-md-4">
<dl>
<dl id="home_name_and_description">
<dt>{% trans "System" %}:</dt>
<dd><i class="fa fa-{{ os_type_icon }}"></i> {{ instance.system }}</dd>
<dt style="margin-top: 5px;">
......@@ -52,30 +52,34 @@
</dd>
</dl>
<h4>{% trans "Expiration" %} {% if instance.is_expiring %}<i class="fa fa-warning-sign text-danger"></i>{% endif %}
<span id="vm-details-renew-op">
{% with op=op.renew %}{% if op %}
<a href="{{op.get_url}}" class="btn btn-success btn-xs
operation operation-{{op.op}}">
<i class="fa fa-{{op.icon}}"></i>
{{op.name}} </a>
{% endif %}{% endwith %}
</span>
</h4>
<dl>
<dt>{% trans "Suspended at:" %}</dt>
<dd>
<span title="{{ instance.time_of_suspend }}">
<i class="fa fa-moon-o"></i> {{ instance.time_of_suspend|timeuntil }}
<div id="home_expiration_and_lease">
<h4>
{% trans "Expiration" %}
{% if instance.is_expiring %}<i class="fa fa-warning-sign text-danger"></i>{% endif %}
<span id="vm-details-renew-op">
{% with op=op.renew %}{% if op %}
<a href="{{op.get_url}}" class="btn btn-success btn-xs
operation operation-{{op.op}}">
<i class="fa fa-{{op.icon}}"></i>
{{op.name}} </a>
{% endif %}{% endwith %}
</span>
</dd>
<dt>{% trans "Destroyed at:" %}</dt>
<dd>
<span title="{{ instance.time_of_delete }}">
<i class="fa fa-times"></i> {{ instance.time_of_delete|timeuntil }}
</span>
</dd>
</dl>
</h4>
<dl>
<dt>{% trans "Suspended at:" %}</dt>
<dd>
<span title="{{ instance.time_of_suspend }}">
<i class="fa fa-moon-o"></i> {{ instance.time_of_suspend|timeuntil }}
</span>
</dd>
<dt>{% trans "Destroyed at:" %}</dt>
<dd>
<span title="{{ instance.time_of_delete }}">
<i class="fa fa-times"></i> {{ instance.time_of_delete|timeuntil }}
</span>
</dd>
</dl>
</div>
<div style="font-weight: bold;">{% trans "Tags" %}</div>
<div id="vm-details-tags" style="margin-bottom: 20px;">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment