ygrette
/
Digitalisation_EPA_Client
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge branch 'f_ajout_theme_sombre' into develop

Browse Source
develop
Jimmy Boinembalome 3 years ago
parent 5315ed8f8d 1001965e99
commit ef1754e8a1
6 changed files with 176 additions and 6 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 1
      angular.json
  2. 125
      src/app/app.theme.scss
  3. 3
      src/app/shared/nav-menu/nav-menu.component.html
  4. 29
      src/app/shared/nav-menu/nav-menu.component.ts
  5. 2
      src/index.html
  6. 22
      src/styles.scss

1
angular.json
Unescape View File

@ -24,7 +24,6 @@
"src/assets"
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss"
],
"scripts": []

125
src/app/app.theme.scss
Unescape View File

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

3
src/app/shared/nav-menu/nav-menu.component.html
Unescape View File

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

29
src/app/shared/nav-menu/nav-menu.component.ts
Unescape View File

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

2
src/index.html
Unescape View File

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

22
src/styles.scss
Unescape View File

@ -1,4 +1,24 @@
/* You can add global styles to this file, and also import other style files */
@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; }

Write Preview
Loading…
Cancel
Save