jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Introduce basic welcome tutorial flow

Browse Source
This commit is contained in:
Johannes Zellner
2016-05-06 13:06:12 +02:00
parent d50fa70f47
commit bf99475dbd
3 changed files with 106 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webadmin/src/index.html
+48
View File
@@ -58,6 +58,54 @@
<body>
<!-- Welcome logic -->
<div class="welcome" ng-show="welcomeSteps[welcomeStep]">
<div class="dialog" ng-show="welcomeSteps[welcomeStep].title === 'intro'">
<h2>Welcome</h2>
<p>This page is the configuration interface to your Cloudron.</p>
<br/>
<button class="btn btn-success pull-right" ng-click="nextWelcomeStep();">Next</button>
</div>
<div class="dialog" ng-show="welcomeSteps[welcomeStep].title === 'apps'">
<h2>Applications</h2>
<p>In this screen you see all applications installed on your Cloudron.</p>
<p>Use your mouse to hover over an app icon and you will be able to configure or uninstall it.</p>
<br/>
<button class="btn btn-default pull-left" ng-click="prevWelcomeStep();">Back</button>
<button class="btn btn-success pull-right" ng-click="nextWelcomeStep();">Next: <b>Cloudron Store</b></button>
</div>
<div class="dialog" ng-show="welcomeSteps[welcomeStep].title === 'appstore'">
<h2>Cloudron Store</h2>
<p>Applications can be installed from this screen onto you Cloudron.</p>
<p>Each app is installed on its own subdomain.</p>
<p>Access control may be applied to each application individually.</p>
<br/>
<button class="btn btn-default pull-left" ng-click="prevWelcomeStep();">Back</button>
<button class="btn btn-success pull-right" ng-click="nextWelcomeStep();">Next: <b>Users and Groups</b></button>
</div>
<div class="dialog" ng-show="welcomeSteps[welcomeStep].title === 'users'">
<h2>Users and Groups</h2>
<p>The Cloudron comes with a built-in user and group managment.</p>
<p>Most apps are single sign-on integrated.</p>
<p>Just use your Cloudron account to log into them.</p>
<br/>
<button class="btn btn-default pull-left" ng-click="prevWelcomeStep();">Back</button>
<button class="btn btn-success pull-right" ng-click="nextWelcomeStep();">Got it</button>
</div>
<div class="dialog" ng-show="welcomeSteps[welcomeStep].title === 'finish'">
<h2>That's it!</h2>
<p>This interface will always be available for you at this domain.</p>
<p>You might want to bookmark this page so you can find it later again.</p>
<br/>
<button class="btn btn-default pull-left" ng-click="prevWelcomeStep();">Back</button>
<button class="btn btn-success pull-right" ng-click="nextWelcomeStep();">Start using apps and invite users</button>
</div>
</div>
<!-- Modal update -->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel" aria-hidden="true">
<div class="modal-dialog">
webadmin/src/js/main.js
+26
View File
@@ -7,6 +7,27 @@ angular.module('Application').controller('MainController', ['$scope', '$route',
$scope.config = {};
$scope.client = Client;
$scope.welcomeStep = -1;
$scope.welcomeSteps = [
{ title: 'intro', page: '#/apps' },
{ title: 'apps', page: '#/apps' },
{ title: 'appstore', page: '#/appstore' },
{ title: 'users', page: '#/users' },
{ title: 'finish', page: '#/apps' }
];
$scope.nextWelcomeStep = function () {
$scope.welcomeStep += 1;
if ($scope.welcomeSteps[$scope.welcomeStep]) window.location.href = $scope.welcomeSteps[$scope.welcomeStep].page;
};
$scope.prevWelcomeStep = function () {
$scope.welcomeStep -= 1;
if ($scope.welcomeSteps[$scope.welcomeStep]) window.location.href = $scope.welcomeSteps[$scope.welcomeStep].page;
};
$scope.update = {
busy: false,
error: {},
@@ -142,6 +163,11 @@ angular.module('Application').controller('MainController', ['$scope', '$route',
}
});
}
// welcome screen
// setTimeout(function () {
// $scope.nextWelcomeStep();
// }, 1000);
});
});
});
webadmin/src/theme.scss
+32
View File
@@ -997,3 +997,35 @@ $graphs-success-alt: lighten(#27CE65, 20%);
}
}
}
// ----------------------------
// Welcome tutorial
// ----------------------------
.welcome {
display: block;
position: absolute;
left: 0;
top: 0;
background-color: rgba(0,0,0,0.5);
z-index: 3000;
width: 100%;
height: 100%;
.dialog {
display: block;
position: absolute;
width: 600px;
background-color: white;
padding: 10px;
box-shadow: 0 3px 5px rgba(0,0,0,.5);
left: 50%;
top: 200px;
margin-left: -300px;
h2 {
margin-bottom: 20px;
margin-top: 0;
}
}
}