Compare commits

..

4 Commits

Author SHA1 Message Date
Jimmy Boinembalome ef1754e8a1 Merge branch 'f_ajout_theme_sombre' into develop 3 years ago
Jimmy Boinembalome 1001965e99 Ajout thème sombre 3 years ago
Jimmy Boinembalome 5315ed8f8d Merge branch 'ajout_scss' into develop 3 years ago
Jimmy Boinembalome 07de763723 Migration css vers scss 3 years ago
  1. 10
      angular.json
  2. 0
      src/app/app.component.scss
  3. 2
      src/app/app.component.ts
  4. 125
      src/app/app.theme.scss
  5. 0
      src/app/demandes-formation/new-demande-formation/new-demande-formation.component.scss
  6. 2
      src/app/demandes-formation/new-demande-formation/new-demande-formation.component.ts
  7. 0
      src/app/ep/details-ep/details-ep.component.scss
  8. 2
      src/app/ep/details-ep/details-ep.component.ts
  9. 0
      src/app/ep/details-ep/ep-choix-date/ep-choix-date.component.scss
  10. 2
      src/app/ep/details-ep/ep-choix-date/ep-choix-date.component.ts
  11. 0
      src/app/ep/details-ep/ep-objectifs/ep-objectifs.component.scss
  12. 2
      src/app/ep/details-ep/ep-objectifs/ep-objectifs.component.ts
  13. 0
      src/app/formations/edit-formation/edit-formation.component.scss
  14. 2
      src/app/formations/edit-formation/edit-formation.component.ts
  15. 0
      src/app/formations/new-formation/new-formation.component.scss
  16. 2
      src/app/formations/new-formation/new-formation.component.ts
  17. 0
      src/app/home/home-assistante/home-assistante.component.scss
  18. 2
      src/app/home/home-assistante/home-assistante.component.ts
  19. 0
      src/app/shared/filter/checkbox-filter/checkbox-filter.scss
  20. 2
      src/app/shared/filter/checkbox-filter/checkbox-filter.ts
  21. 0
      src/app/shared/filter/select-filter/select-filter.scss
  22. 2
      src/app/shared/filter/select-filter/select-filter.ts
  23. 0
      src/app/shared/mat-tables/collaborateurs-table/collaborateurs.table.scss
  24. 2
      src/app/shared/mat-tables/collaborateurs-table/collaborateurs.table.ts
  25. 0
      src/app/shared/mat-tables/demandes-formation-table/demandes-formation.table.scss
  26. 0
      src/app/shared/mat-tables/engagements-table/engagements-table.scss
  27. 0
      src/app/shared/mat-tables/ep-table/ep-table.scss
  28. 0
      src/app/shared/mat-tables/formations-table/formations.table.scss
  29. 2
      src/app/shared/mat-tables/formations-table/formations.table.ts
  30. 0
      src/app/shared/mat-tables/participations-formation-table/participations-formation.table.scss
  31. 2
      src/app/shared/mat-tables/participations-formation-table/participations-formation.table.ts
  32. 3
      src/app/shared/nav-menu/nav-menu.component.html
  33. 29
      src/app/shared/nav-menu/nav-menu.component.ts
  34. 2
      src/index.html
  35. 4
      src/styles.css
  36. 24
      src/styles.scss

@ -24,8 +24,7 @@
"src/assets"
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.css"
"src/styles.scss"
],
"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"
}

@ -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 {

@ -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);

@ -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 {

@ -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 {

@ -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>;

@ -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 {

@ -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 {
/**

@ -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 {
/**

@ -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"];

@ -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 {

@ -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 {

@ -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 {

@ -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 {

@ -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 {

@ -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>

@ -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');
}
}

@ -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>

@ -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; }

@ -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; }
Loading…
Cancel
Save