dashboard: clean up the tour js

9cafc124 · Kálmán Viktor · 317e11b7 · 9cafc124 · 9cafc124 · 9cafc124
Commit 9cafc124 authored Apr 10, 2014 by Kálmán Viktor
4 changed files
--- a/circle/dashboard/static/dashboard/dashboard.css
+++ b/circle/dashboard/static/dashboard/dashboard.css
@@ -443,3 +443,32 @@ footer a, footer a:hover, footer a:visited {
 .template-choose-list input[type="radio"] {
  float: right;
 }
+/* template create vm help */
+.alert-new-template {                                                       
+  background: #3071a9;                                                      
+  color: white;                                                             
+  font-size: 22px;                                                          
+}                                                                           
+.alert-new-template ol {                                                    
+  margin-left: 25px;
+} 
+/* bootstrap tour */
+.tour-template {
+  max-width: 400px;
+  min-width: 270px;
+  font-size: 16px;
+}
+.tour-template {
+  text-align: justify;
+}
+.tour-template .popover-title {
+  font-weight: bold;
+}
+#vm-details-resources-form {
+  padding: 5px; /* it's nice this way in the tour */
+}
--- a/circle/dashboard/static/dashboard/vm-tour.js
+++ b/circle/dashboard/static/dashboard/vm-tour.js
 /* TODO i18n
 * https://docs.djangoproject.com/en/1.5/topics/i18n/translation/#internationalization-in-javascript-code
- * TODO new tour template
- * http://bootstraptour.com/api/
- * TODO change placeholder yos
 */
 $(function() {
  $(".vm-details-start-template-tour").click(function() {
@@ -15,15 +12,32 @@ $(function() {
 function createTemplateTour() {
  var ttour = new Tour({
      storage: false,
+      name: "template",
+      template: "<div class='popover'>" +
+                  "<div class='arrow'></div>" +
+                  "<h3 class='popover-title'></h3>" +
+                  "<div class='popover-content'></div>" +
+                  "<div class='popover-navigation'>" +
+                    "<div class='btn-group'>" +
+                      "<button class='btn btn-sm btn-default' data-role='prev'>" +
+                        '<i class="icon-chevron-left"></i> ' + "Prev" + "</button> " +
+                      "<button class='btn btn-sm btn-default' data-role='next'>" +
+                        'Next' + ' <i class="icon-chevron-right"></i></button> ' +
+                      "<button class='btn btn-sm btn-default' data-role='pause-resume' data-pause-text='Pause' data-resume-text='Resume'>Pause</button> " +
+                    "</div>" +
+                    "<button class='btn btn-sm btn-default' data-role='end'>" +
+                      "End tour" + ' <i class="icon-flag-checkered"></i></button>' +
+                  "</div>" +
+                "</div>",
  });
  ttour.addStep({
    element: ".alert-new-template",
    title: "Template Tutorial Tour",
-    content: "Welcome to the template tutorial. In this quick tour, we gonna show you how to do the steps described above. " +
+    content: "<p>Welcome to the template tutorial. In this quick tour, we gonna show you how to do the steps described above.</p>" +
-             "For the next tour step press the Next button or the right arrow (or Back button/left arrow for the previous step). " +
+             '<p>For the next tour step press the "Next" button or the right arrow (or "Back" button/left arrow for the previous step).</p>' +
-             "During the tour please don't try the functions because it may lead to graphical glitches, however " +
+             "<p>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!",
+             "you can end the tour any time you want with the End Tour button!</p>",
    placement: "bottom",
    backdrop: true,
  });
@@ -32,7 +46,7 @@ function createTemplateTour() {
    backdrop: true,
    element: 'a[href="#home"]',
    title: "Home tab", 
-    content: "yo",
+    content: "In this tab you can tag your virtual machine and modify the description.",
    placement: 'top',
    onShow: function() {
      console.log("yosag van");
@@ -53,7 +67,7 @@ function createTemplateTour() {
  ttour.addStep({
    element: '#vm-details-resources-form',
-    placement: 'left',
+    placement: 'top',
    backdrop: true,
    title: "Resources",
    content: '<p><strong>CPU priority:</strong> higher (or lower?) is better</p>' + 
@@ -65,11 +79,11 @@ function createTemplateTour() {
  });
  ttour.addStep({
-    element: '.vm-details-resources-disk',
+    element: '#vm-details-resources-disk',
    backdrop: true,
-    placement: 'left',
+    placement: 'top',
    title: "Disks",
-    content: "jo a kontent, bar lehetne hosszabb is es akkor nem nez ki ilyen butan az end tour gomb!",
+    content: "You can add empty disks, download new ones and remove existing ones here.",
    onShow: function() {
      $('a[href="#resources"]').trigger("click");
    },
@@ -90,6 +104,7 @@ function createTemplateTour() {
  ttour.addStep({
    element: "#vm-details-button-deploy",
    title: "Deploy",
+    placement: "left",
    backdrop: true,
    content: "Deploy the virtual machine",
  });
@@ -97,6 +112,7 @@ function createTemplateTour() {
  ttour.addStep({
    element: "#vm-info-pane",
    title: "Connect",
+    placement: "top",
    backdrop: true,
    content: "Use the connection string or connect with your choice of client!",
@@ -106,7 +122,7 @@ function createTemplateTour() {
    element: ".alert-new-template",
    placement: "bottom",
    title: "Customize the virtual machine",
-    content: "Do the modifications",
+    content: "After you have connected to the virtual do you modifications",
  });
  ttour.addStep({
@@ -114,16 +130,16 @@ function createTemplateTour() {
    title: "Save",
    placement: "left",
    backdrop: true,
-    content: "Press this button and wait!",
+    content: 'Press the "Save as template" button and wait until the activity finishes.',
  });
  ttour.addStep({
    element: ".alert-new-template",
-    title: "Fin",
+    title: "Finisih",
    backdrop: true,
    placement: "bottom",
-    content: "Congrats you managed to sit trough this exciting tour!",
+    content: "This is the last message, if something is not clear you can do the the tour again!",
  });
  return ttour;

--- a/circle/dashboard/templates/dashboard/vm-detail.html
+++ b/circle/dashboard/templates/dashboard/vm-detail.html
@@ -5,17 +5,6 @@
 {% block content %}
-<style>
-.alert-new-template {
-  background: #3071a9;
-  color: white; 
-  font-size: 25px;
-}
-.alert-new-template ol {
-  margin-left: 25px;
-}
-</style>
 {% if instance.is_base %}
 <div class="alert alert-info alert-new-template">
  <strong>{% trans "This is the master vm of your new template" %}</strong>

--- a/circle/dashboard/templates/dashboard/vm-detail/resources.html
+++ b/circle/dashboard/templates/dashboard/vm-detail/resources.html
@@ -42,7 +42,7 @@
 <hr />
-<div class="row vm-details-resources-disk">
+<div class="row" id="vm-details-resources-disk">
  <div class="col-sm-11">
    <h3>
      {% trans "Disks" %}