Rename welcome -> tutorial

This commit is contained in:
Johannes Zellner
2016-05-06 14:41:20 +02:00
parent e413f7ba9b
commit b88ee8143a
3 changed files with 31 additions and 29 deletions

View File

@@ -59,51 +59,51 @@
<body>
<!-- Welcome logic -->
<div class="welcome" ng-show="welcomeSteps[welcomeStep]">
<div class="dialog" ng-show="welcomeSteps[welcomeStep].title === 'intro'">
<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>
<br/>
<button class="btn btn-default pull-left" ng-click="endTutorial();">Skip</button>
<button class="btn btn-success pull-right" ng-click="nextWelcomeStep();">Next</button>
<button class="btn btn-success pull-right" ng-click="nextTutorialStep();">Next</button>
</div>
<div class="dialog" ng-show="welcomeSteps[welcomeStep].title === 'apps'">
<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="prevWelcomeStep();">Back</button>
<button class="btn btn-success pull-right" ng-click="nextWelcomeStep();">Next: <b>Cloudron Store</b></button>
<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="welcomeSteps[welcomeStep].title === 'appstore'">
<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>
<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>
<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>
</div>
<div class="dialog" ng-show="welcomeSteps[welcomeStep].title === 'users'">
<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="prevWelcomeStep();">Back</button>
<button class="btn btn-success pull-right" ng-click="nextWelcomeStep();">Got it</button>
<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="welcomeSteps[welcomeStep].title === 'finish'">
<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>
<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>
<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>
</div>
</div>

View File

@@ -7,8 +7,8 @@ angular.module('Application').controller('MainController', ['$scope', '$route',
$scope.config = {};
$scope.client = Client;
$scope.welcomeStep = -1;
$scope.welcomeSteps = [
$scope.tutorialStep = -1;
$scope.tutorialSteps = [
{ title: 'intro', page: '#/apps' },
{ title: 'apps', page: '#/apps' },
{ title: 'appstore', page: '#/appstore' },
@@ -17,30 +17,30 @@ angular.module('Application').controller('MainController', ['$scope', '$route',
];
$scope.startTutorial = function () {
$scope.welcomeStep = 0;
if ($scope.welcomeSteps[$scope.welcomeStep]) window.location.href = $scope.welcomeSteps[$scope.welcomeStep].page;
$scope.tutorialStep = 0;
if ($scope.tutorialSteps[$scope.tutorialStep]) window.location.href = $scope.tutorialSteps[$scope.tutorialStep].page;
};
$scope.endTutorial = function () {
$scope.welcomeStep = -1;
$scope.tutorialStep = -1;
Client.setShowTutorial(false, function (error) {
if (error) console.error(error);
});
};
$scope.nextWelcomeStep = function () {
$scope.welcomeStep += 1;
$scope.nextTutorialStep = function () {
$scope.tutorialStep += 1;
if ($scope.welcomeSteps[$scope.welcomeStep]) window.location.href = $scope.welcomeSteps[$scope.welcomeStep].page;
if ($scope.tutorialSteps[$scope.tutorialStep]) window.location.href = $scope.tutorialSteps[$scope.tutorialStep].page;
if ($scope.welcomeStep >= $scope.welcomeSteps.length) $scope.endTutorial();
if ($scope.tutorialStep >= $scope.tutorialSteps.length) $scope.endTutorial();
};
$scope.prevWelcomeStep = function () {
$scope.welcomeStep -= 1;
$scope.prevTutorialStep = function () {
$scope.tutorialStep -= 1;
if ($scope.welcomeSteps[$scope.welcomeStep]) window.location.href = $scope.welcomeSteps[$scope.welcomeStep].page;
if ($scope.tutorialSteps[$scope.tutorialStep]) window.location.href = $scope.tutorialSteps[$scope.tutorialStep].page;
};
$scope.update = {

View File

@@ -60,8 +60,10 @@ angular.module('Application').controller('AppStoreController', ['$scope', '$loca
$('#collapseResourceConstraint').collapse('hide');
$('#collapseMediaLinksCarousel').collapse('show');
$scope.appInstallForm.$setPristine();
$scope.appInstallForm.$setUntouched();
if ($scope.appInstallForm) {
$scope.appInstallForm.$setPristine();
$scope.appInstallForm.$setUntouched();
}
},
showForm: function (force) {