dashboard: tour features

- fix the skip button
- add name/description step
- add renew step

circle/dashboard/static/dashboard/dashboard.css

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

circle/dashboard/static/dashboard/vm-tour.js

@@ -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"]'),

circle/dashboard/templates/dashboard/base.html

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

circle/dashboard/templates/dashboard/vm-detail.html

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

circle/dashboard/templates/dashboard/vm-detail/home.html

 {% 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;">