Update welcome carousel.

4 files changed, 30 insertions, 11 deletions

diff --git a/webapp/assets/images/iot-graphx.jpg b/webapp/assets/images/iot-graphx.jpg
index 6a2c428..74c640a 100644
--- a/webapp/assets/images/iot-graphx.jpg
+++ b/webapp/assets/images/iot-graphx.jpg
diff --git a/webapp/src/app/app.component.html b/webapp/src/app/app.component.html
index 3dc77ef..4faedea 100644
--- a/webapp/src/app/app.component.html
+++ b/webapp/src/app/app.component.html
@@ -6,8 +6,8 @@
 
         <div class="navbar-collapse collapse menu2">
             <ul class="nav navbar-nav navbar-right">
-                <li><a routerLink="/devel"><i class="fa fa-2x fa-play-circle" title="Open build page"></i></a></li>
                 <li><a routerLink="/config"><i class="fa fa-2x fa-cog" title="Open configuration page"></i></a></li>
+                <li><a routerLink="/devel"><i class="fa fa-2x fa-play-circle" title="Open build page"></i></a></li>
                 <li><a routerLink="/home"><i class="fa fa-2x fa-home" title="Back to home page"></i></a></li>
             </ul>
         </div>
diff --git a/webapp/src/app/config/config.component.html b/webapp/src/app/config/config.component.html
index 8737d08..a78b1e6 100644
--- a/webapp/src/app/config/config.component.html
+++ b/webapp/src/app/config/config.component.html
@@ -68,7 +68,7 @@
         <form [formGroup]="addProjectForm" (ngSubmit)="onSubmit()">
             <div class="row ">
                 <div class="col-xs-2">
-                    <button class="btn btn-primary" type="submit" [disabled]="!addProjectForm.valid"><i class="fa fa-plus"></i>&nbsp;New Folder</button>
+                    <button class="btn btn-primary" type="submit" [disabled]="!addProjectForm.valid"><i class="fa fa-plus"></i>&nbsp;Add Folder</button>
                 </div>
 
                 <div class="col-xs-6">
diff --git a/webapp/src/app/home/home.component.ts b/webapp/src/app/home/home.component.ts
index 1df277f..0e3c995 100644
--- a/webapp/src/app/home/home.component.ts
+++ b/webapp/src/app/home/home.component.ts
@@ -4,7 +4,9 @@ export interface ISlide {
     img?: string;
     imgAlt?: string;
     hText?: string;
-    pText?: string;
+    hHtml?: string;
+    text?: string;
+    html?: string;
     btn?: string;
     btnHref?: string;
 }
@@ -17,18 +19,33 @@ export interface ISlide {
             .wide img {
                 width: 98%;
             }
+            .carousel-item {
+                max-height: 90%;
+            }
             h1, h2, h3, h4, p {
                 color: #330066;
             }
+            .html-inner {
+                color: #330066;
+            }
+            h1 {
+                font-size: 4em;
+            }
+            p {
+                font-size: 2.5em;
+            }
 
         </style>
+
         <div class="wide">
             <carousel [interval]="carInterval" [(activeSlide)]="activeSlideIndex">
                 <slide *ngFor="let sl of slides; let index=index">
                     <img [src]="sl.img" [alt]="sl.imgAlt">
-                    <div class="carousel-caption" *ngIf="sl.hText">
-                        <h2>{{ sl.hText }}</h2>
-                        <p>{{ sl.pText }}</p>
+                    <div class="carousel-caption">
+                        <h1 *ngIf="sl.hText">{{ sl.hText }}</h1>
+                        <h1 *ngIf="sl.hHtml" class="html-inner" [innerHtml]="sl.hHtml"></h1>
+                        <p   *ngIf="sl.text">{{ sl.text }}</p>
+                        <div *ngIf="sl.html" class="html-inner" [innerHtml]="sl.html"></div>
                     </div>
                 </slide>
             </carousel>
@@ -38,7 +55,7 @@ export interface ISlide {
 
 export class HomeComponent {
 
-    public carInterval: number = 2000;
+    public carInterval: number = 4000;
 
     // FIXME SEB - Add more slides and info
     public slides: ISlide[] = [
@@ -46,15 +63,17 @@ export class HomeComponent {
             img: 'assets/images/iot-graphx.jpg',
             imgAlt: "iot graphx image",
             hText: "Welcome to XDS Dashboard !",
-            pText: "X(cross) Development System allows developers to easily cross-compile applications.",
+            text: "X(cross) Development System allows developers to easily cross-compile applications.",
         },
         {
-            //img: 'assets/images/beige.jpg',
-            //imgAlt: "beige image",
             img: 'assets/images/iot-graphx.jpg',
             imgAlt: "iot graphx image",
             hText: "Create, Build, Deploy, Enjoy !",
-            pText: "TODO...",
+        },
+        {
+            img: 'assets/images/iot-graphx.jpg',
+            imgAlt: "iot graphx image",
+            hHtml: '<p>To Start: click on <i class="fa fa-cog" style="color:#9d9d9d;"></i> icon and add new folder</p>',
         }
     ];