Skip to content

CIRCLE / cloud

Go to a project
Commit 14ce8bf2 by Kálmán Viktor
Options

dashboard: use intro.js

parent 8eea8de7
Showing with 93 additions and 137 deletions
circle/dashboard/static/dashboard/introjs/introjs.min.css 0 → 100644
.introjs-overlay{position:absolute;z-index:999999;background-color:#000;opacity:0;background:-moz-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);background:-webkit-gradient(radial,center center,0px,center center,100%,color-stop(0%,rgba(0,0,0,0.4)),color-stop(100%,rgba(0,0,0,0.9)));background:-webkit-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);background:-o-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);background:-ms-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);background:radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#66000000',endColorstr='#e6000000',GradientType=1);-ms-filter:"alpha(opacity=50)";filter:alpha(opacity=50);-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}.introjs-fixParent{z-index:auto !important;opacity:1.0 !important}.introjs-showElement,tr.introjs-showElement>td,tr.introjs-showElement>th{z-index:9999999 !important}.introjs-relativePosition,tr.introjs-showElement>td,tr.introjs-showElement>th{position:relative}.introjs-helperLayer{position:absolute;z-index:9999998;background-color:#FFF;background-color:rgba(255,255,255,.9);border:1px solid #777;border:1px solid rgba(0,0,0,.5);border-radius:4px;box-shadow:0 2px 15px rgba(0,0,0,.4);-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}.introjs-helperNumberLayer{position:absolute;top:-16px;left:-16px;z-index:9999999999 !important;padding:2px;font-family:Arial,verdana,tahoma;font-size:13px;font-weight:bold;color:white;text-align:center;text-shadow:1px 1px 1px rgba(0,0,0,.3);background:#ff3019;background:-webkit-linear-gradient(top,#ff3019 0,#cf0404 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ff3019),color-stop(100%,#cf0404));background:-moz-linear-gradient(top,#ff3019 0,#cf0404 100%);background:-ms-linear-gradient(top,#ff3019 0,#cf0404 100%);background:-o-linear-gradient(top,#ff3019 0,#cf0404 100%);background:linear-gradient(to bottom,#ff3019 0,#cf0404 100%);width:20px;height:20px;line-height:20px;border:3px solid white;border-radius:50%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3019',endColorstr='#cf0404',GradientType=0);filter:progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=2,color=ff0000);box-shadow:0 2px 5px rgba(0,0,0,.4)}.introjs-arrow{border:5px solid white;content:'';position:absolute}.introjs-arrow.top{top:-10px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:white;border-left-color:transparent}.introjs-arrow.top-right{top:-10px;right:10px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:white;border-left-color:transparent}.introjs-arrow.top-middle{top:-10px;left:50%;margin-left:-5px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:white;border-left-color:transparent}.introjs-arrow.right{right:-10px;top:10px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:white}.introjs-arrow.bottom{bottom:-10px;border-top-color:white;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}.introjs-arrow.left{left:-10px;top:10px;border-top-color:transparent;border-right-color:white;border-bottom-color:transparent;border-left-color:transparent}.introjs-tooltip{position:absolute;padding:10px;background-color:white;min-width:200px;max-width:300px;border-radius:3px;box-shadow:0 1px 10px rgba(0,0,0,.4);-webkit-transition:opacity .1s ease-out;-moz-transition:opacity .1s ease-out;-ms-transition:opacity .1s ease-out;-o-transition:opacity .1s ease-out;transition:opacity .1s ease-out}.introjs-tooltipbuttons{text-align:right}.introjs-button{position:relative;overflow:visible;display:inline-block;padding:.3em .8em;border:1px solid #d4d4d4;margin:0;text-decoration:none;text-shadow:1px 1px 0 #fff;font:11px/normal sans-serif;color:#333;white-space:nowrap;cursor:pointer;outline:0;background-color:#ececec;background-image:-webkit-gradient(linear,0 0,0 100%,from(#f4f4f4),to(#ececec));background-image:-moz-linear-gradient(#f4f4f4,#ececec);background-image:-o-linear-gradient(#f4f4f4,#ececec);background-image:linear-gradient(#f4f4f4,#ececec);-webkit-background-clip:padding;-moz-background-clip:padding;-o-background-clip:padding-box;-webkit-border-radius:.2em;-moz-border-radius:.2em;border-radius:.2em;zoom:1;*display:inline;margin-top:10px}.introjs-button:hover{border-color:#bcbcbc;text-decoration:none;box-shadow:0 1px 1px #e3e3e3}.introjs-button:focus,.introjs-button:active{background-image:-webkit-gradient(linear,0 0,0 100%,from(#ececec),to(#f4f4f4));background-image:-moz-linear-gradient(#ececec,#f4f4f4);background-image:-o-linear-gradient(#ececec,#f4f4f4);background-image:linear-gradient(#ececec,#f4f4f4)}.introjs-button::-moz-focus-inner{padding:0;border:0}.introjs-skipbutton{margin-right:5px;color:#7a7a7a}.introjs-prevbutton{-webkit-border-radius:.2em 0 0 .2em;-moz-border-radius:.2em 0 0 .2em;border-radius:.2em 0 0 .2em;border-right:0}.introjs-nextbutton{-webkit-border-radius:0 .2em .2em 0;-moz-border-radius:0 .2em .2em 0;border-radius:0 .2em .2em 0}.introjs-disabled,.introjs-disabled:hover,.introjs-disabled:focus{color:#9a9a9a;border-color:#d4d4d4;box-shadow:none;cursor:default;background-color:#f4f4f4;background-image:none;text-decoration:none}.introjs-bullets{text-align:center}.introjs-bullets ul{clear:both;margin:15px auto 0;padding:0;display:inline-block}.introjs-bullets ul li{list-style:none;float:left;margin:0 2px}.introjs-bullets ul li a{display:block;width:6px;height:6px;background:#ccc;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;text-decoration:none}.introjs-bullets ul li a:hover{background:#999}.introjs-bullets ul li a.active{background:#999}.introjsFloatingElement{position:absolute;height:0;width:0;left:50%;top:50%}
.introjs-helperLayer *,
.introjs-helperLayer *:before,
.introjs-helperLayer *:after {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-ms-box-sizing: content-box;
-o-box-sizing: content-box;
box-sizing: content-box;
}
circle/dashboard/static/dashboard/vm-tour.js
$(function() { $(function() {
$(".vm-details-start-template-tour").click(function() { $(".vm-details-start-template-tour").click(function() {
ttour = createTemplateTour(); var intro = introJs();
ttour.init(); intro.setOptions({
ttour.start(); 'nextLabel': gettext("Next"),
}); 'prevLabel': gettext("Previous"),
}); 'skipLabel': gettext("Skip"),
'doneLabel': gettext("Done"),
function createTemplateTour() { });
var ttour = new Tour({ intro.setOptions({
storage: false, steps: [
name: "template", {
template: "<div class='popover'>" + element: document.querySelector("#vm-details-template-tour-button"),
"<div class='arrow'></div>" + intro: "<p>" + gettext("Welcome to the template tutorial. In this quick tour, we gonna show you how to do the steps described above.") + "</p>" +
"<h3 class='popover-title'></h3>" + "<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>" +
"<div class='popover-content'></div>" + "<p>" + gettext("During the tour please don't try the functions because it may lead to graphical glitches, however " +
"<div class='popover-navigation'>" + "you can end the tour any time you want with the End Tour button!") + "</p>",
"<div class='btn-group'>" + },
"<button class='btn btn-sm btn-default' data-role='prev'>" + {
'<i class="fa fa-chevron-left"></i> ' + gettext("Prev") + "</button> " + element: document.querySelector('a[href="#home"]'),
"<button class='btn btn-sm btn-default' data-role='next'>" + intro: gettext("In this tab you can tag your virtual machine and modify the name and description."),
gettext("Next") + ' <i class="fa fa-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>" + element: document.querySelector('a[href="#resources"]'),
"<button class='btn btn-sm btn-default' data-role='end'>" + intro: gettext("On the resources tab you can edit the CPU/RAM options and add/remove disks!"),
gettext("End tour") + ' <i class="fa fa-flag-checkered"></i></button>' + },
"</div>" + {
"</div>", element: document.querySelector('#vm-details-resources-form'),
}); intro: '<p><strong>' + gettext("CPU priority") + ":</strong> " + gettext("higher is better") + "</p>" +
'<p><strong>' + gettext("CPU count") + ":</strong> " + gettext("number of CPU cores.") + "</p>" +
ttour.addStep({ '<p><strong>' + gettext("RAM amount") + ":</strong> " + gettext("amount of RAM.") + "</p>",
element: "#vm-details-template-tour-button", },
title: gettext("Template Tutorial Tour"), {
content: "<p>" + gettext("Welcome to the template tutorial. In this quick tour, we gonna show you how to do the steps described above.") + "</p>" + element: document.querySelector('#vm-details-resources-disk'),
"<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>" + intro: gettext("You can add empty disks, download new ones and remove existing ones here."),
"<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>", {
placement: "bottom", element: document.querySelector('a[href="#network"]'),
backdrop: true, intro: gettext('You can add new network interfaces or remove existing ones here.'),
}); },
{
ttour.addStep({ element: document.querySelector("#ops"),
backdrop: true, intro: gettext("Deploy the virtual machine."),
element: 'a[href="#home"]', },
title: gettext("Home tab"), {
content: gettext("In this tab you can tag your virtual machine and modify the name and description."), element: document.querySelector("#vm-info-pane"),
placement: 'top', intro: gettext("Use the connection string or connect with your choice of client!"),
onShow: function() { },
$('a[href="#home"]').trigger("click"); {
}, element: document.querySelector("#vm-info-pane"),
}); intro: gettext("After you have connected to the virtual machine do your modifications then log off."),
},
ttour.addStep({ {
element: 'a[href="#resources"]', element: document.querySelector("#ops"),
title: gettext("Resources tab"), intro: gettext('Press the "Save as template" button and wait until the activity finishes.'),
backdrop: true, },
placement: 'top', {
content: gettext("On the resources tab you can edit the CPU/RAM options and add/remove disks!"), element: document.querySelector(".alert-new-template"),
onShow: function() { intro: gettext("This is the last message, if something is not clear you can do the the tour again!"),
$('a[href="#resources"]').trigger("click"); },
}, ]
}); });
intro.onbeforechange(function(target) {
ttour.addStep({ /* if the tab menu item is highlighted */
element: '#vm-details-resources-form', if($(target).data("toggle") == "pill") {
placement: 'top', $(target).trigger("click");
backdrop: true, }
title: gettext("Resources"),
content: '<p><strong>' + gettext("CPU priority") + ":</strong> " + gettext("higher is better") + "</p>" +
'<p><strong>' + gettext("CPU count") + ":</strong> " + gettext("number of CPU cores.") + "</p>" +
'<p><strong>' + gettext("RAM amount") + ":</strong> " + gettext("amount of RAM.") + "</p>",
onShow: function() {
$('a[href="#resources"]').trigger("click");
},
});
ttour.addStep({ /* if anything in a tab is highlighted change to that tab */
element: '#vm-details-resources-disk', var tab = $(target).closest('.tab-pane:not([id^="ipv"])');
backdrop: true, var id = tab.prop("id");
placement: 'top', if(id) {
title: gettext("Disks"), id = id.substring(1, id.length);
content: gettext("You can add empty disks, download new ones and remove existing ones here."), $('a[href="#' + id + '"]').trigger("click");
onShow: function() { }
$('a[href="#resources"]').trigger("click"); });
}, intro.start();
});
ttour.addStep({
element: 'a[href="#network"]',
backdrop: true,
placement: 'top',
title: gettext("Network tab"),
content: gettext('You can add new network interfaces or remove existing ones here.'),
onShow: function() {
$('a[href="#network"]').trigger("click");
},
});
ttour.addStep({
element: "#ops",
title: '<i class="fa fa-play"></i> ' + gettext("Deploy"),
placement: "left",
backdrop: true,
content: gettext("Deploy the virtual machine."),
});
ttour.addStep({ return false;
element: "#vm-info-pane",
title: gettext("Connect"),
placement: "top",
backdrop: true,
content: gettext("Use the connection string or connect with your choice of client!"),
}); });
});
ttour.addStep({
element: "#vm-info-pane",
placement: "top",
title: gettext("Customize the virtual machine"),
content: gettext("After you have connected to the virtual machine do your modifications then log off."),
});
ttour.addStep({
element: "#ops",
title: '<i class="fa fa-floppy-o"></i> ' + gettext("Save as"),
placement: "left",
backdrop: true,
content: gettext('Press the "Save as template" button and wait until the activity finishes.'),
});
ttour.addStep({
element: ".alert-new-template",
title: gettext("Finish"),
backdrop: true,
placement: "bottom",
content: gettext("This is the last message, if something is not clear you can do the the tour again!"),
});
return ttour;
}
circle/dashboard/templates/dashboard/vm-detail.html
...@@ -185,8 +185,13 @@ ...@@ -185,8 +185,13 @@
{% 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/bootstrap-tour.min.js"></script> <script src="{{ STATIC_URL }}dashboard/bootstrap-tour.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>
<script src="{{ STATIC_URL }}dashboard/vm-common.js"></script> <script src="{{ STATIC_URL }}dashboard/vm-common.js"></script>
<script src="{{ STATIC_URL }}dashboard/vm-console.js"></script> <script src="{{ STATIC_URL }}dashboard/vm-console.js"></script>
......
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