From 631e2bc856d95955cfbde63f7826f3502a09ae7c Mon Sep 17 00:00:00 2001
From: Alex ORLUC <alex.orluc@maarch.org>
Date: Thu, 18 Jun 2020 16:56:33 +0200
Subject: [PATCH] FEAT #13671 TIME 1 css + lang customization installer
---
.../customization.component.html | 55 +++++++++---------
.../customization.component.scss | 38 ++++--------
.../customization/customization.component.ts | 3 +-
.../app/installer/installer.component.html | 2 +-
src/frontend/assets/{05.jpg => 5.jpg} | Bin
src/frontend/lang/lang-fr.ts | 6 ++
6 files changed, 49 insertions(+), 55 deletions(-)
rename src/frontend/assets/{05.jpg => 5.jpg} (100%)
diff --git a/src/frontend/app/installer/customization/customization.component.html b/src/frontend/app/installer/customization/customization.component.html
index adfc2607fe7..e6c00ebb723 100644
--- a/src/frontend/app/installer/customization/customization.component.html
+++ b/src/frontend/app/installer/customization/customization.component.html
@@ -1,30 +1,31 @@
-<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
diff --git a/src/frontend/app/installer/customization/customization.component.scss b/src/frontend/app/installer/customization/customization.component.scss
index 36190e8eaaa..a88c2ec22b1 100644
--- a/src/frontend/app/installer/customization/customization.component.scss
+++ b/src/frontend/app/installer/customization/customization.component.scss
@@ -1,51 +1,37 @@
+@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 {
diff --git a/src/frontend/app/installer/customization/customization.component.ts b/src/frontend/app/installer/customization/customization.component.ts
index a1e7f69adf3..e3b1774fded 100644
--- a/src/frontend/app/installer/customization/customization.component.ts
+++ b/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/';
diff --git a/src/frontend/app/installer/installer.component.html b/src/frontend/app/installer/installer.component.html
index fa3d84df62c..73797fb69b1 100644
--- a/src/frontend/app/installer/installer.component.html
+++ b/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>
diff --git a/src/frontend/assets/05.jpg b/src/frontend/assets/5.jpg
similarity index 100%
rename from src/frontend/assets/05.jpg
rename to src/frontend/assets/5.jpg
diff --git a/src/frontend/lang/lang-fr.ts b/src/frontend/lang/lang-fr.ts
index 0ba41f8a60f..e1f5f208cb4 100755
--- a/src/frontend/lang/lang-fr.ts
+++ b/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
--
GitLab