Merge branch 'f_ajout_theme_sombre' into develop

angular.json

@@ -24,8 +24,7 @@
               "src/assets"
             ],
             "styles": [
-              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
+              "src/styles.scss"
-              "src/styles.css"
             ],
             "scripts": []
           },
@@ -89,7 +88,7 @@
             ],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
-              "src/styles.css"
+              "src/styles.scss"
             ],
             "scripts": []
           }
@@ -122,5 +121,10 @@
       }
     }
   },
+  "schematics": {
+    "@schematics/angular:component": {
+      "styleext": "scss"
+    }
+  },
   "defaultProject": "EPAClient"
 }

src/app/app.component.ts

@@ -8,7 +8,7 @@ import { cles } from "@shared/utils/cles"
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.scss']
 })
 
 export class AppComponent implements OnInit {

src/app/app.theme.scss

@@ -0,0 +1,125 @@
+// -----------------------------------------------------------------------------------------------------
+// @ Custom color maps
+// -----------------------------------------------------------------------------------------------------
+$navy-app-theme: (
+    50: #ECECEE,
+    100: #C5C6CB,
+    200: #9EA1A9,
+    300: #7D818C,
+    400: #5C616F,
+    500: #E89759,
+    600: #353A48,
+    700: #2D323E,
+    800: #262933,
+    900: #1E2129,
+    A100: #C5C6CB,
+    A200: #9EA1A9,
+    A400: #5C616F,
+    A700: #2D323E,
+    contrast: (
+        50: $dark-primary-text,
+        100: $dark-primary-text,
+        200: $dark-primary-text,
+        300: $light-primary-text,
+        400: $light-primary-text,
+        500: $light-primary-text,
+        600: $light-primary-text,
+        700: $light-primary-text,
+        800: $light-primary-text,
+        900: $light-primary-text,
+        A100: $dark-primary-text,
+        A200: $light-primary-text,
+        A400: $light-primary-text,
+        A700: $light-primary-text,
+    )
+);
+
+$apside-primary-app-theme: (
+    50: #ECECEE,
+    100: #C5C6CB,
+    200: #9EA1A9,
+    300: #7D818C,
+    400: #5C616F,
+    500: #E89759,
+    600: #353A48,
+    700: #2D323E,
+    800: #262933,
+    900: #1E2129,
+    A100: #C5C6CB,
+    A200: #9EA1A9,
+    A400: #5C616F,
+    A700: #2D323E,
+    contrast: (
+        50: $dark-primary-text,
+        100: $dark-primary-text,
+        200: $dark-primary-text,
+        300: $light-primary-text,
+        400: $light-primary-text,
+        500: $light-primary-text,
+        600: $light-primary-text,
+        700: $light-primary-text,
+        800: $light-primary-text,
+        900: $light-primary-text,
+        A100: $dark-primary-text,
+        A200: $light-primary-text,
+        A400: $light-primary-text,
+        A700: $light-primary-text,
+    )
+);
+ 
+// -----------------------------------------------------------------------------------------------------
+// @ Define the default theme
+// -----------------------------------------------------------------------------------------------------
+
+// Define the primary, accent and warn palettes
+$default-primary-palette: mat-palette($navy-app-theme);
+$default-accent-palette: mat-palette($mat-light-blue, 600, 400, 700);
+$default-warn-palette: mat-palette($mat-red);
+
+// Create the Material theme object
+$theme: mat-light-theme($default-primary-palette, $default-accent-palette, $default-warn-palette);
+
+// Add ".theme-default" class to the body to activate this theme.
+// Class name must start with "theme-" !!!
+.theme-default {
+
+    // Create an Angular Material theme from the $theme map
+    @include angular-material-theme($theme);
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Define a blue-gray dark theme
+// -----------------------------------------------------------------------------------------------------
+
+// Define the primary, accent and warn palettes
+$blue-gray-dark-theme-primary-palette: mat-palette($navy-app-theme);
+$blue-gray-dark-theme-accent-palette: mat-palette($mat-blue-gray);
+$blue-gray-dark-theme-warn-palette: mat-palette($mat-red);
+
+// Create the Material theme object
+$blue-gray-dark-theme: mat-dark-theme($blue-gray-dark-theme-primary-palette, $blue-gray-dark-theme-accent-palette, $blue-gray-dark-theme-warn-palette);
+
+// Add ".theme-blue-gray-dark" class to the body to activate this theme.
+// Class name must start with "theme-" !!!
+.theme-blue-gray-dark {
+
+    // Generate the Angular Material theme
+    @include angular-material-theme($blue-gray-dark-theme);
+}
+
+
+// -----------------------------------------------------------------------------------------------------
+// @ Typography
+// -----------------------------------------------------------------------------------------------------
+
+// Angular Material typography
+$typography: mat-typography-config(
+    $font-family: 'Muli, Helvetica Neue, Arial, sans-serif',
+    $title: mat-typography-level(20px, 32px, 600),
+    $body-2: mat-typography-level(14px, 24px, 600),
+    $button: mat-typography-level(14px, 14px, 600),
+    $input: mat-typography-level(16px, 1.125, 400) // line-height must be unitless !!!
+);
+
+// Setup the typography
+@include angular-material-typography($typography);

src/app/demandes-formation/new-demande-formation/new-demande-formation.component.ts

@@ -13,7 +13,7 @@ import { DemandesFormationService } from "@shared/api-swagger/api/api";
 @Component({
   selector: 'app-new-demande-formation',
   templateUrl: './new-demande-formation.component.html',
-  styleUrls: ['./new-demande-formation.component.css']
+  styleUrls: ['./new-demande-formation.component.scss']
 })
 export class NewDemandeFormationComponent implements OnInit {
 

src/app/ep/details-ep/details-ep.component.ts

@@ -12,7 +12,7 @@ import { Subscription } from "rxjs";
 @Component({
     selector : "details-ep",
     templateUrl: "./details-ep.component.html",
-    styleUrls: ["./details-ep.component.css"]
+    styleUrls: ["./details-ep.component.scss"]
 })
 export class DetailsEPComponent implements OnInit {
 

src/app/ep/details-ep/ep-choix-date/ep-choix-date.component.ts

@@ -7,7 +7,7 @@ import { RDVEntretienDTO } from '@shared/api-swagger';
 @Component({
   selector: 'ep-choix-date',
   templateUrl: './ep-choix-date.component.html',
-  styleUrls: ["ep-choix-date.component.css"]
+  styleUrls: ["ep-choix-date.component.scss"]
 })
 export class EpChoixDateComponent  {
   @Input() rdvsEntretien : Array<RDVEntretienDTO>;

src/app/ep/details-ep/ep-objectifs/ep-objectifs.component.ts

@@ -5,7 +5,7 @@ import { afficherStatutObjectif, EpDTO, StatutObjectif } from "@shared/api-swagg
 @Component({
     selector : "ep-objectifs",
     templateUrl: "ep-objectifs.component.html",
-    styleUrls: ["ep-objectifs.component.css"]
+    styleUrls: ["ep-objectifs.component.scss"]
 })
 export class EpObjectifsComponent {
     

src/app/formations/edit-formation/edit-formation.component.ts

@@ -19,7 +19,7 @@ import { FormationsService } from '@shared/api-swagger/api/api';
 @Component({
   selector: 'app-edit-formation',
   templateUrl: './edit-formation.component.html',
-  styleUrls: ["edit-formation.component.css"]
+  styleUrls: ["edit-formation.component.scss"]
 })
 export class EditFormationComponent implements OnInit {
   /**

src/app/formations/new-formation/new-formation.component.ts

@@ -13,7 +13,7 @@ import { FormationsService } from "@shared/api-swagger/api/api";
 @Component({
   selector: 'app-new-formation',
   templateUrl: './new-formation.component.html',
-  styleUrls: ['./new-formation.component.css']
+  styleUrls: ['./new-formation.component.scss']
 })
 export class NewFormationComponent implements OnInit {
   /**

src/app/home/home-assistante/home-assistante.component.ts

@@ -14,7 +14,7 @@ import { epTypeRecherche } from '@shared/utils/cles';
 @Component({
   selector : 'home-assistante',
   templateUrl : 'home-assistante.component.html',
-  styleUrls : [ "./home-assistante.component.css"]
+  styleUrls : [ "./home-assistante.component.scss"]
 })
 export class HomeAssistanteComponent {
   displayedColumns: string[] = ["agence", "collaborateur", "referent", "datearrivee", "statutep", "typeep", "dateentretien", "datedisponibilite", "consultation"];

src/app/shared/filter/checkbox-filter/checkbox-filter.ts

@@ -8,7 +8,7 @@ import { SelectedElement } from "@shared/filter/selected-element";
 @Component({
     selector: "checkbox-filter",
     templateUrl: "./checkbox-filter.html",
-    styleUrls: ["./checkbox-filter.css"]
+    styleUrls: ["./checkbox-filter.scss"]
 })
 export class CheckboxFilterComponent<T> implements OnInit, OnChanges  {
    

src/app/shared/filter/select-filter/select-filter.ts

@@ -4,7 +4,7 @@ import { SelectedElement } from "@shared/filter/selected-element";
 @Component({
     selector: "select-filter",
     templateUrl: "./select-filter.html",
-    styleUrls: ["./select-filter.css"]
+    styleUrls: ["./select-filter.scss"]
 })
 export class SelectFilterComponent<T> implements OnInit, OnChanges   {
    

src/app/shared/mat-tables/collaborateurs-table/collaborateurs.table.ts

@@ -12,7 +12,7 @@ import { cles, collaborateurTypeRecherche } from "@shared/utils/cles";
 @Component({
     selector: "collaborateurs-table",
     templateUrl: "./collaborateurs.table.html",
-    styleUrls: ["./collaborateurs.table.css"]
+    styleUrls: ["./collaborateurs.table.scss"]
 })
 export class CollaborateursTableComponent implements OnInit {
 

src/app/shared/mat-tables/formations-table/formations.table.ts

@@ -12,7 +12,7 @@ import { cles } from "@shared/utils/cles";
 @Component({
     selector: "formations-table",
     templateUrl: "./formations.table.html",
-    styleUrls: ["./formations.table.css"]
+    styleUrls: ["./formations.table.scss"]
 })
 export class FormationsTableComponent implements OnInit {
 

src/app/shared/mat-tables/participations-formation-table/participations-formation.table.ts

@@ -11,7 +11,7 @@ import { DatePipe } from "@angular/common";
 @Component({
     selector: "participations-formation-table",
     templateUrl: "./participations-formation.table.html",
-    styleUrls: ["./participations-formation.table.css"]
+    styleUrls: ["./participations-formation.table.scss"]
 })
 export class ParticipationsFormationTableComponent implements OnInit, OnChanges, AfterViewInit  {
 

src/app/shared/nav-menu/nav-menu.component.html

@@ -1,5 +1,5 @@
 <header>
-  <mat-card>
+  <mat-card class="bg-apside-secondary">
     <!--Mettre l'icon APSIDE-->
     <img routerLink="/home" src="../../assets/img/logo.png">
     <!--LIEN VERS HOME-->
@@ -20,6 +20,7 @@
     <mat-menu #menuMore="matMenu">
       <button mat-menu-item>A propos</button>
       <button mat-menu-item>Manuel utilisation</button>
+      <button mat-menu-item (click)="toggleTheme()">{{ isDarkTheme ? 'Thème clair' : 'Thème sombre' }}</button>
       <button mat-menu-item on-click="logout()">Déconnexion</button>
     </mat-menu>
   </mat-card>

src/app/shared/nav-menu/nav-menu.component.ts

@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+import { Component, Inject } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
 import { AuthService } from '@shared/auth/auth.service';
 
 import { Role } from '@shared/utils/roles';
@@ -29,7 +30,9 @@ export class NavMenuComponent {
     */
   userInfo : string;
 
-  constructor(private authService : AuthService){
+  isDarkTheme: boolean = false;
+
+  constructor(@Inject(DOCUMENT) private document: any, private authService : AuthService){
     this.userRole = authService.firstRole;
     this.userInfo = authService.userInfo;
   }
@@ -41,4 +44,26 @@ export class NavMenuComponent {
     this.authService.logout();
   }
 
+  toggleTheme() {
+    this.isDarkTheme = !this.isDarkTheme;
+
+    this.updateTheme();
+  }
+
+  updateTheme()
+  {
+    // Color theme - Use normal for loop for IE11 compatibility
+    for ( let i = 0; i < this.document.body.classList.length; i++ )
+    {
+        const className = this.document.body.classList[i];
+
+        if ( className.startsWith('theme-') )
+            this.document.body.classList.remove(className);
+    }
+
+    if (!this.isDarkTheme)
+      this.document.body.classList.add('theme-default');
+    else
+      this.document.body.classList.add('theme-blue-gray-dark');
+  }
 }

src/index.html

@@ -9,7 +9,7 @@
   <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
-<body>
+<body class="theme-default mat-app-background">
   <app-root></app-root>
 </body>
 </html>

src/styles.css

@@ -1,4 +0,0 @@
-/* You can add global styles to this file, and also import other style files */
-
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

src/styles.scss

@@ -0,0 +1,24 @@
+@import '~@angular/material/theming';
+@include mat-core();
+
+// Import app.theme.scss
+@import "app/app.theme";
+
+
+.bg-apside-primary 
+{
+    background-color: #183650 !important;
+}
+
+.bg-apside-secondary
+{
+    background-color: #E89759 !important;
+}
+
+.apside-secondary
+{
+    color: #E89759 !important;
+}
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }