onboarding added, language file extended, full screen modals and some…

… css adaptations

src/actions/open-learnplace-action.ts

@@ -26,7 +26,8 @@ export class OpenLearnplaceAction extends ILIASObjectAction {
 
     async execute(): Promise<ILIASObjectActionResult> {
 
-        const loadingPage: Modal = this.modalController.create(LoadingPage);
+        const loadingPage: Modal = this.modalController.create(LoadingPage,undefined,
+            { cssClass: "modal-fullscreen" });
         await loadingPage.present();
         try {
             await this.loader.load(this.learnplaceObjectId);

src/app/app.component.ts

@@ -23,6 +23,7 @@ import {DB_MIGRATION, DBMigration} from "../services/migration/migration.api";
 import {SynchronizationService} from "../services/synchronization.service";
 import {LoadingPage} from "./fallback/loading/loading.component";
 import getMessage = Logging.getMessage;
+import { OnboardingPage } from "../pages/onboarding/onboarding";
 
 @Component({
   templateUrl: "app.html"
@@ -39,6 +40,7 @@ export class MyApp {
   settingsPage: object = SettingsPage;
   infoPage: object = InfoPage;
   loginPage: object = LoginPage;
+  onboardingPage: object = OnboardingPage;
   newsPage: string = "NewsPage"; //needs to be string in order to get lazy loaded
   LoadingPage: object = LoadingPage;
   loggedIn: boolean = false;
@@ -143,7 +145,7 @@ export class MyApp {
    */
   openTestpage(): void {
     this.menu.close();
-    this.nav.push(LoadingPage);
+    this.nav.push(OnboardingPage);
 
   }
   // presentLoading(): void {
@@ -213,6 +215,7 @@ export class MyApp {
 
       this.configureDefaultTranslation();
       this.rootPage = this.loginPage;
+      this.presentOnboardingModal();
     }
   }
 
@@ -295,4 +298,14 @@ export class MyApp {
       }
     });
   }
+
+ // tslint:disable-next-line:typedef
+ presentOnboardingModal() {
+    // tslint:disable-next-line:typedef
+    const onboardingModal = this.modal.create(OnboardingPage,
+      undefined,
+      { cssClass: "modal-fullscreen" }
+    );
+    onboardingModal.present();
+  }
 }

src/app/app.html

@@ -45,7 +45,7 @@
               {{ 'settings.title' | translate:[]}}
             </button>
 
-            <!-- <button *ngIf="loggedIn" ion-item (click)="openTestpage()" color="nobg-w">
+            <!-- <button *ngIf="loggedIn" ion-item (click)="presentOnboardingModal()" color="nobg-w">
               <ion-icon name="flask"></ion-icon>
                 TEST-BUTTON
             </button> -->

src/app/app.module.ts

@@ -61,6 +61,7 @@ import {
 } from "../learnplace/services/visitjournal.service";
 import {FavoritesPage} from "../pages/favorites/favorites";
 import {InfoPage} from "../pages/info/info";
+import {OnboardingPage} from "../pages/onboarding/onboarding";
 import {LoginPage} from "../pages/login/login";
 import {ModalPage} from "../pages/modal/modal";
 import {NewObjectsPage} from "../pages/new-objects/new-objects";
@@ -130,6 +131,7 @@ import {HTTP} from "@ionic-native/http";
     SyncFinishedModal,
     ModalPage,
     LoadingPage,
+    OnboardingPage,
 
     /* from src/learnplace */
     MapPage,
@@ -176,6 +178,7 @@ import {HTTP} from "@ionic-native/http";
     SyncFinishedModal,
     //NewsPage,
     LoadingPage,
+    OnboardingPage,
 
     /* from src/learnplace */
     MapPage,

src/app/fallback/loading/loading.html

@@ -2,13 +2,18 @@
     <ion-navbar color="nobg-w"></ion-navbar>
 </ion-header>
 <ion-content class="blue-gradient" color="nobg-w">
+    <div class="custom-spinner">
+        <div class="bounce1"></div>
+        <div class="bounce2"></div>
+        <div class="bounce3"></div>
+    </div>
 
-    <img src="assets/img/walking_pony.png"  class="walking-pony">
+    <!-- <img src="assets/img/walking_pony.png"  class="walking-pony"> -->
     <ion-grid>
       <ion-row justify-content-center padding>
-        <h1 text-center color="white">
+        <!-- <h1 text-center color="white">
           <ion-spinner [paused]="!footerToolbar.isLoading" *ngIf="footerToolbar.isLoading" class=big-spinner></ion-spinner>
-        </h1>
+        </h1> -->
       </ion-row>
       <ion-row justify-content-center padding>
         <h1 text-center color="white">

src/app/fallback/loading/loading.scss

@@ -42,3 +42,46 @@
   // 50% {   padding-left: 50%; }
   100%   {   margin-left: 150%; }
 }
+
+.custom-spinner {
+  margin: 100px auto 0;
+  width: 200px;
+  text-align: center;
+}
+
+.custom-spinner > div {
+  width: 60px;
+  height: 60px;
+  // background-color: color($colors, primary, base);
+  background-image: url("/assets/img/molly_pony_white.svg");
+
+  border-radius: 100%;
+  display: inline-block;
+  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+}
+
+.custom-spinner .bounce1 {
+  -webkit-animation-delay: -0.32s;
+  animation-delay: -0.32s;
+}
+
+.custom-spinner .bounce2 {
+  -webkit-animation-delay: -0.16s;
+  animation-delay: -0.16s;
+}
+
+@-webkit-keyframes sk-bouncedelay {
+  0%, 80%, 100% { -webkit-transform: scale(0) }
+  40% { -webkit-transform: scale(1.0) }
+}
+
+@keyframes sk-bouncedelay {
+  0%, 80%, 100% { 
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  } 40% { 
+    -webkit-transform: scale(1.0);
+    transform: scale(1.0);
+  }
+}

src/assets/i18n/de.json

@@ -114,7 +114,7 @@
         "download_successful": "Datei wurde heruntergeladen",
         "cant_open_file": "Es wurde keine Applikation gefunden, die diesen Dateityp öffnen kann.",
         "server_not_reachable": "Sie haben keine Verbindung zum Server, versuchen Sie es später erneut oder loggen Sie sich erneut ein.",
-        "server_response_validation_error": "Es besteht ein Problem mit der Server Kommunikation, dies kann durch eine veraltete App Version verursacht werden."
+        "server_response_validation_error": "Es besteht ein Problem mit der Server Kommunikation, dies kann durch eine veraltete App Version verursacht werden. Falls der Fehler bestehen bleibt, versuche Dich auszulogen und neu einzulogen."
     },
     "details" : {
         "last_update": "Letztes Update",
@@ -240,5 +240,20 @@
             "activate": "Standort aktivieren",
             "back": "Nope, ich will zurück"
         }
+      },
+      "onboarding": {
+        "title1": "Mit ILIAS Pegasus kannst Du:",
+        "function1": "Deine ILIAS Kursunterlagen auf Deinem Smartphone nutzen.",
+        "function2": "Deine Kurse & Dateien offline verfügbar machen.",
+        "function3": "Dich einmal einloggen und bleibst dann immer eingeloggt.",
+        "title2": "Eine dezentrale App",
+        "concept1": "Die Pegasus App verbindet Dich mit der ILIAS Installation Deiner Institution, Uni oder Schule. Und nur mit dieser.",
+        "concept2": "Wenn Deine Institution noch nicht mitmacht, schreib uns doch an",
+        "title3":"Deine Daten sind sicher!",
+        "datasecurity1": "Deine Daten werden nur auf Deinem Gerät gespeichert. Die App erhebt keinerlei personenbezogene Daten. Wenn Du dies im Detail prüfen möchtest, findest Du hier die",
+        "datasecurity2": "Datenschutzerklärung",
+        "datasecurity3": "ILIAS Pegasus ist ein Open Source Projekt. Wenn Du Dich selbst überzeugen möchtest, was die App tut, dann kannst Du hier den Code einsehen:",
+        "next":"Weiter",
+        "start": "Los geht's"
       }
     }

src/assets/i18n/en.json

@@ -68,7 +68,9 @@
     },
     "info": {
         "title": "Info",
-        "guide": "Guide"
+        "guide": "Guide",
+        "instructions1": "If you're on the Home page 'My Courses and Groups' you can mark the courses and groups as 'available Offline'. They are marked with a gray cloud. Once the files are synced, the cloud turns blue.",
+        "instructions2": "The synchronization will start automatically each time the app is started or if a course has been marked as Available Offline. Manual synchronization can also be started by dragging (Pull to Refresh) the 'My Courses and Groups' page."
     },
     "logout": {
         "title": "Logout",
@@ -110,7 +112,7 @@
         "download_successful": "Download successful",
         "cant_open_file": "There's no application that could open this filetype.",
         "server_not_reachable": "We cannot reach the server, please try again later or try logging in again.",
-        "server_response_validation_error": "Server communication issue, please make sure to run the latest app and try again."
+        "server_response_validation_error": "Server communication issue, please make sure to run the latest app and try again. Try login out and log in again-"
     },
     "details" : {
         "last_update": "Last update",
@@ -232,5 +234,20 @@
         "browser_no": "No. return!",
         "loading": "Learnplace",
         "loading_subtitle": "Hang on a minute. If the learnplace contains a lot of content, it may take some time to download."
+    },
+    "onboarding": {
+      "title1": "Whith the help of ILIAS Pegasus you can:",
+        "function1": "access your ILIAS courses on your smartphone.",
+        "function2": "make your courses & files available offline.",
+        "function3": "log in once and stay logged in.",
+        "title2": "A decentralized app",
+        "concept1": "The Pegasus app connects you to the ILIAS installation of your institution, university or school.",
+        "concept2": "If your institution did not join yet, contact us",
+        "title3":"Your data is safe!",
+        "datasecurity1": "Your data will only be stored on your device. The app does not collect any personal information. If you want to check this in detail, you will find here the",
+        "datasecurity2": "privacy policy",
+        "datasecurity3": "ILIAS Pegasus is an open source project. If you want to see for yourself what the app does, then you can see the code here:",
+        "next":"next",
+        "start": "Let's go"    
     }
 }

src/assets/i18n/it.json

@@ -66,7 +66,10 @@
     },
     "info": {
         "title": "Informazioni",
-        "guide": "Guida"
+        "guide": "Guida",
+        "instructions1": "If you're on the Home page 'My Courses and Groups' you can mark the courses and groups as 'available Offline'. They are marked with a gray cloud. Once the files are synced, the cloud turns blue.",
+        "instructions2": "The synchronization will start automatically each time the app is started or if a course has been marked as Available Offline. Manual synchronization can also be started by dragging (Pull to Refresh) the 'My Courses and Groups' page."
+
     },
     "logout": {
         "title": "Disconnettersi",
@@ -226,5 +229,20 @@
         "browser_no": "Senza ritorno!",
         "loading": "luogo di apprendimento",
         "loading_subtitle": "Aspetta un attimo. Se il punto di apprendimento contiene molti contenuti, potrebbe essere necessario del tempo per il download."
-    }
+    },
+    "onboarding": {
+        "title1": "Whith the help of ILIAS Pegasus you can:",
+          "function1": "access your ILIAS courses on your smartphone.",
+          "function2": "make your courses & files available offline.",
+          "function3": "log in once and stay logged in.",
+          "title2": "A decentralized app",
+          "concept1": "The Pegasus app connects you to the ILIAS installation of your institution, university or school.",
+          "concept2": "If your institution did not join yet, contact us",
+          "title3":"Your data is safe!",
+          "datasecurity1": "Your data will only be stored on your device. The app does not collect any personal information. If you want to check this in detail, you will find here the",
+          "datasecurity2": "privacy policy",
+          "datasecurity3": "ILIAS Pegasus is an open source project. If you want to see for yourself what the app does, then you can see the code here:",
+          "next":"next",
+          "start": "Let's go"    
+      }
 }