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"] { ...@@ -982,16 +982,24 @@ textarea[name="new_members"] {
color: orange; color: orange;
} }
.introjs-skipbutton {
color: #333;
}
.introjs-button:focus { .introjs-button:focus {
text-decoration: none; text-decoration: none;
color: #333; color: #333;
outline: none; outline: none;
} }
.introjs-button:hover { .introjs-button:hover:not(.introjs-disabled) {
color: #428bca; color: #428bca;
} }
.introjs-tooltip {
min-width: 250px;
}
#vm-info-pane { #vm-info-pane {
margin-bottom: 20px; margin-bottom: 20px;
} }
......
...@@ -4,7 +4,7 @@ $(function() { ...@@ -4,7 +4,7 @@ $(function() {
intro.setOptions({ intro.setOptions({
'nextLabel': gettext("Next") + ' <i class="fa fa-chevron-right"></i>', 'nextLabel': gettext("Next") + ' <i class="fa fa-chevron-right"></i>',
'prevLabel': '<i class="fa fa-chevron-left"></i> ' + gettext("Previous"), '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"), 'doneLabel': gettext("Done"),
}); });
intro.setOptions({ intro.setOptions({
...@@ -49,12 +49,20 @@ function get_steps() { ...@@ -49,12 +49,20 @@ function get_steps() {
element: document.querySelector("#vm-details-start-template-tour"), 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>" + 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('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>", "</p>",
}, },
{ {
element: document.querySelector('a[href="#home"]'), 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"]'), element: document.querySelector('a[href="#resources"]'),
......
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
{% block extra_link %} {% 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/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"> <link href="{{ STATIC_URL }}dashboard/dashboard.css" rel="stylesheet">
{% endblock %} {% endblock %}
......
...@@ -212,10 +212,6 @@ ...@@ -212,10 +212,6 @@
{% endblock %} {% endblock %}
{% block extra_css %}
<link rel="stylesheet" href="{{ STATIC_URL }}dashboard/introjs/introjs.min.css">
{% endblock %}
{% block extra_js %} {% block extra_js %}
<script src="{{ STATIC_URL }}dashboard/introjs/intro.min.js"></script> <script src="{{ STATIC_URL }}dashboard/introjs/intro.min.js"></script>
<script src="{{ STATIC_URL }}dashboard/vm-details.js"></script> <script src="{{ STATIC_URL }}dashboard/vm-details.js"></script>
......
{% load i18n %} {% load i18n %}
<div class="row"> <div class="row">
<div class="col-md-4"> <div class="col-md-4">
<dl> <dl id="home_name_and_description">
<dt>{% trans "System" %}:</dt> <dt>{% trans "System" %}:</dt>
<dd><i class="fa fa-{{ os_type_icon }}"></i> {{ instance.system }}</dd> <dd><i class="fa fa-{{ os_type_icon }}"></i> {{ instance.system }}</dd>
<dt style="margin-top: 5px;"> <dt style="margin-top: 5px;">
...@@ -52,30 +52,34 @@ ...@@ -52,30 +52,34 @@
</dd> </dd>
</dl> </dl>
<h4>{% trans "Expiration" %} {% if instance.is_expiring %}<i class="fa fa-warning-sign text-danger"></i>{% endif %} <div id="home_expiration_and_lease">
<span id="vm-details-renew-op"> <h4>
{% with op=op.renew %}{% if op %} {% trans "Expiration" %}
<a href="{{op.get_url}}" class="btn btn-success btn-xs {% if instance.is_expiring %}<i class="fa fa-warning-sign text-danger"></i>{% endif %}
operation operation-{{op.op}}"> <span id="vm-details-renew-op">
<i class="fa fa-{{op.icon}}"></i> {% with op=op.renew %}{% if op %}
{{op.name}} </a> <a href="{{op.get_url}}" class="btn btn-success btn-xs
{% endif %}{% endwith %} operation operation-{{op.op}}">
</span> <i class="fa fa-{{op.icon}}"></i>
</h4> {{op.name}} </a>
<dl> {% endif %}{% endwith %}
<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> </span>
</dd> </h4>
<dt>{% trans "Destroyed at:" %}</dt> <dl>
<dd> <dt>{% trans "Suspended at:" %}</dt>
<span title="{{ instance.time_of_delete }}"> <dd>
<i class="fa fa-times"></i> {{ instance.time_of_delete|timeuntil }} <span title="{{ instance.time_of_suspend }}">
</span> <i class="fa fa-moon-o"></i> {{ instance.time_of_suspend|timeuntil }}
</dd> </span>
</dl> </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 style="font-weight: bold;">{% trans "Tags" %}</div>
<div id="vm-details-tags" style="margin-bottom: 20px;"> <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