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

Rework the tutorial

Browse Source
This commit is contained in:
Johannes Zellner
2016-05-06 21:32:34 +02:00
parent 0d6637de27
commit e4747ef50c
3 changed files with 16 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
webadmin/src/index.html
View File

@@ -61,46 +61,24 @@
<!-- Welcome logic -->
<div class="welcome" ng-show="tutorialSteps[tutorialStep]">
<div class="dialog" ng-show="tutorialSteps[tutorialStep].title === 'intro'">
<h2>Welcome</h2>
<p>This page is the configuration interface to your Cloudron.</p>
<h2>Welcome {{ user.username }}</h2>
<p>This is the configuration interface to your Cloudron to manage installed applications.</p>
<br/>
<button class="btn btn-default pull-left" ng-click="endTutorial();">Skip</button>
<button class="btn btn-success pull-right" ng-click="nextTutorialStep();">Next</button>
</div>
<div class="dialog" ng-show="tutorialSteps[tutorialStep].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="prevTutorialStep();">Back</button>
<button class="btn btn-success pull-right" ng-click="nextTutorialStep();">Next: <b>Cloudron Store</b></button>
</div>
<div class="dialog" ng-show="tutorialSteps[tutorialStep].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>
<p>Install applications by simply giving a subdomain and set per application access control.</p>
<br/>
<button class="btn btn-default pull-left" ng-click="prevTutorialStep();">Back</button>
<button class="btn btn-success pull-right" ng-click="nextTutorialStep();">Next: <b>Users and Groups</b></button>
<button class="btn btn-success pull-right" ng-click="nextTutorialStep();">Last: <b>Users and Groups</b></button>
</div>
<div class="dialog" ng-show="tutorialSteps[tutorialStep].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="prevTutorialStep();">Back</button>
<button class="btn btn-success pull-right" ng-click="nextTutorialStep();">Got it</button>
</div>
<div class="dialog" ng-show="tutorialSteps[tutorialStep].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>
<p>The Cloudron comes with a built-in user and group managment, just use your Cloudron account to log into the apps.</p>
<br/>
<button class="btn btn-default pull-left" ng-click="prevTutorialStep();">Back</button>
<button class="btn btn-success pull-right" ng-click="nextTutorialStep();">Start using apps and invite users</button>

6
webadmin/src/js/main.js
View File

@@ -10,10 +10,8 @@ angular.module('Application').controller('MainController', ['$scope', '$route',
$scope.tutorialStep = -1;
$scope.tutorialSteps = [
{ title: 'intro', page: '#/apps' },
{ title: 'apps', page: '#/apps' },
{ title: 'appstore', page: '#/appstore' },
{ title: 'users', page: '#/users' },
{ title: 'finish', page: '#/apps' }
{ title: 'users', page: '#/users' }
];
$scope.startTutorial = function () {
@@ -26,6 +24,8 @@ angular.module('Application').controller('MainController', ['$scope', '$route',
Client.setShowTutorial(false, function (error) {
if (error) console.error(error);
window.location.href = '#/apps';
});
};

13
webadmin/src/theme.scss
View File

@@ -1007,7 +1007,7 @@ $graphs-success-alt: lighten(#27CE65, 20%);
position: absolute;
left: 0;
top: 0;
background-color: rgba(0,0,0,0.5);
background-color: rgba(0,0,0,0.3);
z-index: 3000;
width: 100%;
height: 100%;
@@ -1017,16 +1017,19 @@ $graphs-success-alt: lighten(#27CE65, 20%);
position: absolute;
width: 600px;
background-color: white;
padding: 10px;
padding: 15px;
box-shadow: 0 3px 5px rgba(0,0,0,.5);
left: 50%;
top: 200px;
margin-left: -300px;
right: 20px;
bottom: 80px;
h2 {
margin-bottom: 20px;
margin-top: 0;
}
p {
font-size: 18px;
}
}
}