FEAT #13671 TIME 1 css + lang customization installer

src/frontend/app/installer/customization/customization.component.html

-<div style="background: url('assets/1.jpg')">
-</div>
 <div class="stepContent">
-    <h2 class="stepContentTitle"><i class="fas fa-tools"></i> Personnalisation</h2>
-    <p>
-        Maarch Courrier vous permet de personnaliser votre application afin de l'intégrer parfaitement à votre environnement de travail.
-    </p>
-    <br/>
-    <mat-form-field appearance="outline">
-        <mat-label>Nom de l'application</mat-label>
-        <input matInput [(ngModel)]="appName" style="color: moccasin;">
-    </mat-form-field>
-    <div>Message écran de connexion : </div>
-    <textarea style="padding-top: 10px;" name="loginMsg" id="loginMsg" [(ngModel)]="loginMsg"></textarea>
-    <br/>
-    <br/>
-    <div>Message d'accueil : </div>
-    <textarea style="padding-top: 10px;" name="homeMsg" id="homeMsg" [(ngModel)]="homeMsg"></textarea>
-    <br/>
-    <br/>
-    <div>Choisissez le fond d'écran de l'écran de connexion : </div>
-    <div class="backgroundList">
-        <mat-card (click)="selectedBackground='bodylogin.jpg'" style="opacity: 0.3;" class="backgroundItem" [class.selected]="selectedBackground === 'bodylogin.jpg'">
-            <img src="assets/bodylogin.jpg" style="width:100%;"/> 
-        </mat-card>
-        <mat-card *ngFor="let background of backgroundList" (click)="selectedBackground=background.filename" style="opacity: 0.3;" class="backgroundItem" [class.selected]="background.filename === selectedBackground">
-            <img src="assets/{{background.filename}}" style="width:100%;"/> 
-        </mat-card>
+    <h2 class="stepContentTitle"><i class="fas fa-tools"></i> {{lang.customization}}</h2>
+    <div class="alert-message alert-message-info" role="alert" style="margin-top: 30px;min-width: 100%;">
+        {{lang.stepCustomization_desc}}
+    </div>
+    <div class="col-md-6">
+        <mat-form-field appearance="outline">
+            <mat-label>{{lang.applicationName}}</mat-label>
+            <input matInput [(ngModel)]="appName">
+        </mat-form-field>
+        <div>{{lang.loginMsg}} : </div>
+        <textarea style="padding-top: 10px;" name="loginMsg" id="loginMsg" [(ngModel)]="loginMsg"></textarea>
+        <br />
+        <br />
+        <div>{{lang.homeMsg}} : </div>
+        <textarea style="padding-top: 10px;" name="homeMsg" id="homeMsg" [(ngModel)]="homeMsg"></textarea>
+        <br />
+        <br />
+    </div>
+    <div class="col-md-6">
+        <div>{{lang.chooseLoginBg}} : </div>
+        <div class="backgroundList">
+            <mat-card (click)="selectedBackground='bodylogin.jpg'" style="opacity: 0.3;" class="backgroundItem"
+                [class.selected]="selectedBackground === 'bodylogin.jpg'" style="background:url(assets/bodylogin.jpg);background-size: cover;">
+            </mat-card>
+            <mat-card *ngFor="let background of backgroundList" (click)="selectedBackground=background.filename"
+                style="opacity: 0.3;" class="backgroundItem" [class.selected]="background.filename === selectedBackground"  [style.background]="'url(assets/'+background.filename+')'">
+            </mat-card>
+        </div>
     </div>
 </div>
\ No newline at end of file

src/frontend/app/installer/customization/customization.component.scss

+@import '../../../css/vars.scss';
+
+
 .stepContent {
-    max-width: 850px;
+    // max-width: 850px;
     margin: auto;
 
     .stepContentTitle {
+        color: $primary;
         margin-bottom: 30px;
         border-bottom: solid 1px;
         padding: 0;
     }
-    
-    ::ng-deep .mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field-invalid .mat-form-field-outline-thick {
-        /*change color of label*/
-        color: white !important;
-    }
-    
-    ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
-        color: white !important;
-        //background: white;
-    }
-    
-    ::ng-deep.mat-form-field-underline {
-        /*change color of underline*/
-        //background-color: white !important;
-    }
-    
-    ::ng-deep.mat-form-field-ripple {
-        /*change color of underline when focused*/
-        //background-color: white !important;
-    }
-
-    ::ng-deep.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label, .mat-form-field-appearance-outline.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
-        color: white;
-    }
 }
 
 .backgroundList {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(5, 1fr);
     grid-gap: 10px;
 }
 
 .selected {
+    transition: all 0.3s;
     opacity: 1 !important;
+    border: solid 10px $secondary !important;
 }
 
 .backgroundItem {
+    border: solid 0px $secondary;
+    opacity: 0.5;
     transition: all 0.3s;
     cursor: pointer;
+    height: 120px;
+    background-size: cover !important;
 }
 
 .backgroundItem:hover {

src/frontend/app/installer/customization/customization.component.ts

@@ -3,6 +3,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { NotificationService } from '../../notification.service';
 import { LANG } from '../../translate.component';
 
+
 declare var tinymce: any;
 
 @Component({
@@ -11,7 +12,7 @@ declare var tinymce: any;
     styleUrls: ['./customization.component.scss']
 })
 export class CustomizationComponent implements OnInit {
-
+    lang: any = LANG;
     stepFormGroup: FormGroup;
 
     docserversPath: string = '/opt/maaarch/docservers/';

src/frontend/app/installer/installer.component.html

@@ -61,7 +61,7 @@
                         </div>
                     </mat-step>
                     <mat-step [stepControl]="appCustomization.getFormGroup()">
-                        <ng-template matStepLabel>Personnalisation</ng-template>
+                        <ng-template matStepLabel>{{lang.customization}}</ng-template>
                         <div class="stepContainer">
                             <div class="stepContent">
                                 <app-customization #appCustomization></app-customization>

src/frontend/lang/lang-fr.ts

@@ -1774,4 +1774,10 @@ export const LANG_FR = {
     "docserverPath": "Chemin de la zone de stockage",
     "docserver": "Zone de stockage",
     "stepDocserver_desc": "N'importe quel système de stockage peut être utilisé, à partir du moment où celui-ci présente un « système de fichiers » à accès direct. Ce peut être le cas d'un attachement direct ou indirect de type NFS sur une baie SAN, NAS, ou pour les cas simples un ensemble de disques RAID.",
+    "applicationName": "Nom de l'application",
+    "loginMsg": "Message à l'écran de connexion",
+    "homeMsg": "Message à l'écran d'accueil",
+    "chooseLoginBg": "Choisissez le fond d'écran de l'écran de connexion",
+    "customization": "Personnalisation",
+    "stepCustomization_desc": "Maarch Courrier vous permet de personnaliser votre application afin de l'intégrer parfaitement à votre environnement de travail.",
 };
\ No newline at end of file