Commit dc481719 authored by fv3rdugo's avatar fv3rdugo
Browse files

[#595] Add button step-by-step guide

- floating guide example used from introjs.com
- add guide_custom option in /etc/rvd_front.conf for custom guide
- add button to see guide in action
- add id="stepX" in template for guide steps
parent fd8fc0be
......@@ -11,6 +11,7 @@
,group => 'ravada'
,secrets => ['changeme1','changeme2']
,login_custom => ''
,guide_custom => ''
,session_timeout => 5*60
,session_timeout_admin => 15*60
};
......@@ -122,6 +122,7 @@
$scope.toggle_only_public=function() {
$scope.only_public = !$scope.only_public;
};
$scope.startIntro = startIntro;
};
function singleMachinePageC($scope, $http, $interval, request, $location) {
......
function startIntro(){
var intro = introJs();
intro.setOptions({
steps: [
{
intro: "<h4>User guide step-to-step</h4><br /> " +
"<div class=\"alert alert-info\" ><small>You can use cursor keys & ESC for exit</small></div>"
},
{
intro: "Welcome to Ravada VDI"
},
{
element: document.querySelector('#step1'),
intro: "Available machines",
position: 'right'
},
{
element: document.querySelectorAll('#step2')[0],
intro: "Start, stop and settings",
position: 'right'
},
{
element: '#step3',
intro: 'More features, more fun.',
position: 'left'
},
{
element: '#step4',
intro: "Another step.",
position: 'bottom'
},
{
element: '#step5',
intro: 'The end'
}
],
showProgress: true,
showBullets: false,
});
intro.start();
}
......@@ -49,6 +49,7 @@ my $CONFIG_FRONT = plugin Config => { default => {
,login_message => ''
,secrets => ['changeme0']
,login_custom => ''
,guide_custom => ''
,admin => {
hide_clones => 15
}
......@@ -842,6 +843,12 @@ sub quick_start {
sub render_machines_user {
my $c = shift;
if ($CONFIG_FRONT->{guide_custom}) {
push @{$c->stash->{js}}, $CONFIG_FRONT->{guide_custom};
} else {
push @{$c->stash->{js}}, '/js/ravada_guide.js';
}
return $c->render(
template => 'main/list_bases2'
,machines => $RAVADA->list_machines_user($USER)
......
......@@ -17,6 +17,7 @@
<link href="<%= $csslink %>" rel="stylesheet">
% }
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.7.0/introjs.css" rel="stylesheet" type="text/css">
<style>
% foreach my $csssnip (@$csssnippets) {
......
......@@ -17,6 +17,8 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.7.0/intro.js"></script>
% foreach my $jslink (@$js) {
<script src="<%= $jslink %>"></script>
% }
......
......@@ -27,6 +27,9 @@
<div class="panel panel-default">
<div class="panel-heading">
<h2><%=l 'Choose a Machine to Start' %></h2>
% if ( $public_bases ) {
<a class="btn btn-large btn-success" href="javascript:void(0);" ng-click="startIntro();"><%= l 'Step-by-step guide' %></a>
% }
% if ($user->is_admin && $public_bases && $private_bases) {
<div ng-cloak>
<a ng-click="toggle_only_public()" class="label label-primary"
......@@ -55,7 +58,7 @@
<div class="col-sm-4"
ng-hide="!<%= $machine->{is_public} %> && only_public">
<div class="panel panel-success">
<div class="panel-heading">
<div class="panel-heading" id="step1">
<h3 class="panel-title"><a class="btn btn-link"
href="/machine/clone/<%= $machine->{id} %>.html" role="button"><%= $machine->{name} %></a>
% if ( !$machine->{is_public} ) {
......@@ -69,7 +72,7 @@
% }
</div>
<div class="panel-body">
<div class="panel-body" id="step2">
<a type="button" class="btn btn-success" href="/machine/clone/<%= $machine->{id} %>.html"><strong><i class="fa fa-play" aria-hidden="true"></i>&nbsp;<%=l 'Start' %></strong></a>
% if (!$machine->{is_locked}) {
% if ( $machine->{id_clone} && $machine->{is_active} ) {
......@@ -126,8 +129,15 @@
</div><!-- page header -->
</div><!-- page wrapper -->
%= include 'bootstrap/scripts'
</div>
<style>
.introjs-tooltip {
min-width: 450px;
}
</style>
%= include 'bootstrap/footer'
%= include 'bootstrap/messages'
</body>
......
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 to comment