From c4e9ac5c52cbcd86abd979ebc0cd30b2b69ceb6d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Andr=C3=A9?= Date: Wed, 1 Apr 2020 12:34:23 +0200 Subject: [PATCH] =?UTF-8?q?Ajout=20d'un=20th=C3=A8me=20g=C3=A9n=C3=A9ral?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../app/create-user/create-user.component.css | 1 + .../create-user/create-user.component.html | 2 +- .../app/create-user/create-user.component.ts | 2 +- .../list-of-aircrafts.component.html | 2 +- .../list-of-dzs/list-of-dzs.component.html | 2 +- .../list-of-gears.component.html | 2 +- .../list-of-jump-types.component.html | 2 +- .../app/login-user/login-user.component.html | 2 +- .../new-aircraft/new-aircraft.component.html | 2 +- .../new-drop-zone.component.html | 2 +- .../src/app/new-gear/new-gear.component.html | 2 +- .../new-jump-type.component.html | 2 +- .../src/app/new-jump/new-jump.component.html | 16 +- .../src/assets/css/custom-theme.scss | 262 +++++++++++++++--- 14 files changed, 238 insertions(+), 63 deletions(-) diff --git a/Front/skydivelogs-app/src/app/create-user/create-user.component.css b/Front/skydivelogs-app/src/app/create-user/create-user.component.css index e69de29..8b13789 100644 --- a/Front/skydivelogs-app/src/app/create-user/create-user.component.css +++ b/Front/skydivelogs-app/src/app/create-user/create-user.component.css @@ -0,0 +1 @@ + diff --git a/Front/skydivelogs-app/src/app/create-user/create-user.component.html b/Front/skydivelogs-app/src/app/create-user/create-user.component.html index 4fbdf68..37ba92a 100644 --- a/Front/skydivelogs-app/src/app/create-user/create-user.component.html +++ b/Front/skydivelogs-app/src/app/create-user/create-user.component.html @@ -46,7 +46,7 @@

- diff --git a/Front/skydivelogs-app/src/app/create-user/create-user.component.ts b/Front/skydivelogs-app/src/app/create-user/create-user.component.ts index ef30d19..a847b25 100644 --- a/Front/skydivelogs-app/src/app/create-user/create-user.component.ts +++ b/Front/skydivelogs-app/src/app/create-user/create-user.component.ts @@ -43,7 +43,7 @@ export class CreateUserComponent implements OnInit { lastname: ["", [Validators.required, Validators.minLength(3)]], email: ["", [Validators.required, Validators.email]] }, - { updateOn: "submit" } + { updateOn: "blur" } ); // get return url from route parameters or default to '/' diff --git a/Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.html b/Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.html index ab45801..253535b 100644 --- a/Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.html +++ b/Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.html @@ -1,5 +1,5 @@
- + diff --git a/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.html b/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.html index 5750c06..fba3dee 100644 --- a/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.html +++ b/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.html @@ -1,5 +1,5 @@
- +
diff --git a/Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.html b/Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.html index 4c35a15..a57fe2a 100644 --- a/Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.html +++ b/Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.html @@ -1,5 +1,5 @@
- +
diff --git a/Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.html b/Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.html index 710d669..10c1162 100644 --- a/Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.html +++ b/Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.html @@ -1,5 +1,5 @@
- +
diff --git a/Front/skydivelogs-app/src/app/login-user/login-user.component.html b/Front/skydivelogs-app/src/app/login-user/login-user.component.html index 77f12ec..7aaf950 100644 --- a/Front/skydivelogs-app/src/app/login-user/login-user.component.html +++ b/Front/skydivelogs-app/src/app/login-user/login-user.component.html @@ -25,7 +25,7 @@

- diff --git a/Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.html b/Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.html index 2802b3d..f463e06 100644 --- a/Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.html +++ b/Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.html @@ -3,5 +3,5 @@

- + diff --git a/Front/skydivelogs-app/src/app/new-drop-zone/new-drop-zone.component.html b/Front/skydivelogs-app/src/app/new-drop-zone/new-drop-zone.component.html index 9a8ecbb..c9305c6 100644 --- a/Front/skydivelogs-app/src/app/new-drop-zone/new-drop-zone.component.html +++ b/Front/skydivelogs-app/src/app/new-drop-zone/new-drop-zone.component.html @@ -27,5 +27,5 @@ Is a tunnel
- + diff --git a/Front/skydivelogs-app/src/app/new-gear/new-gear.component.html b/Front/skydivelogs-app/src/app/new-gear/new-gear.component.html index 8b76c86..60c6713 100644 --- a/Front/skydivelogs-app/src/app/new-gear/new-gear.component.html +++ b/Front/skydivelogs-app/src/app/new-gear/new-gear.component.html @@ -28,5 +28,5 @@

- + diff --git a/Front/skydivelogs-app/src/app/new-jump-type/new-jump-type.component.html b/Front/skydivelogs-app/src/app/new-jump-type/new-jump-type.component.html index c60d9ab..e79179d 100644 --- a/Front/skydivelogs-app/src/app/new-jump-type/new-jump-type.component.html +++ b/Front/skydivelogs-app/src/app/new-jump-type/new-jump-type.component.html @@ -3,5 +3,5 @@

- + diff --git a/Front/skydivelogs-app/src/app/new-jump/new-jump.component.html b/Front/skydivelogs-app/src/app/new-jump/new-jump.component.html index c34a3b6..58c6f8a 100644 --- a/Front/skydivelogs-app/src/app/new-jump/new-jump.component.html +++ b/Front/skydivelogs-app/src/app/new-jump/new-jump.component.html @@ -7,7 +7,7 @@ {{jumpType.name}} - @@ -21,7 +21,7 @@ {{aircraft.name}} - @@ -38,7 +38,7 @@ style="width: 16px;"> - @@ -51,7 +51,7 @@ {{gear.name}} - @@ -73,14 +73,14 @@ - - @@ -88,14 +88,14 @@ -
- + diff --git a/Front/skydivelogs-app/src/assets/css/custom-theme.scss b/Front/skydivelogs-app/src/assets/css/custom-theme.scss index 5716cc6..bb76c39 100644 --- a/Front/skydivelogs-app/src/assets/css/custom-theme.scss +++ b/Front/skydivelogs-app/src/assets/css/custom-theme.scss @@ -1,51 +1,225 @@ -@import "~@angular/material/theming"; -@include mat-core(); +/** +* Generated theme by Material Theme Generator +* https://materialtheme.arcsine.dev +*/ -/* ======== Angular material custom themes ======== */ -$my-custom-primary: mat-palette($mat-deep-purple); -$my-custom-accent: mat-palette($mat-pink, 100, 500, A100); -$my-custom-warn: mat-palette($mat-lime); +@import '~@angular/material/theming'; +// Include the common styles for Angular Material. We include this here so that you only +// have to load a single css file for Angular Material in your app. -$my-custom-theme: mat-light-theme( - $my-custom-primary, - $my-custom-accent, - $my-custom-warn +// Fonts +@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500'); + +$fontConfig: (display-4: mat-typography-level(112px, 112px, 300, 'Roboto', -0.0134em), + display-3: mat-typography-level(56px, 56px, 400, 'Roboto', -0.0089em), + display-2: mat-typography-level(45px, 48px, 400, 'Roboto', 0.0000em), + display-1: mat-typography-level(34px, 40px, 400, 'Roboto', 0.0074em), + headline: mat-typography-level(24px, 32px, 400, 'Roboto', 0.0000em), + title: mat-typography-level(20px, 32px, 500, 'Roboto', 0.0075em), + subheading-2: mat-typography-level(16px, 28px, 400, 'Roboto', 0.0094em), + subheading-1: mat-typography-level(15px, 24px, 500, 'Roboto', 0.0067em), + body-2: mat-typography-level(14px, 24px, 500, 'Roboto', 0.0179em), + body-1: mat-typography-level(14px, 20px, 400, 'Roboto', 0.0179em), + button: mat-typography-level(14px, 14px, 500, 'Roboto', 0.0893em), + caption: mat-typography-level(12px, 20px, 400, 'Roboto', 0.0333em), + input: mat-typography-level(inherit, 1.125, 400, 'Roboto', 1.5px)); + +// Foreground Elements + +// Light Theme Text +$dark-text: #000000; +$dark-primary-text: rgba($dark-text, 0.87); +$dark-accent-text: rgba($dark-primary-text, 0.54); +$dark-disabled-text: rgba($dark-primary-text, 0.38); +$dark-dividers: rgba($dark-primary-text, 0.12); +$dark-focused: rgba($dark-primary-text, 0.12); + +$mat-light-theme-foreground: (base: black, + divider: $dark-dividers, + dividers: $dark-dividers, + disabled: $dark-disabled-text, + disabled-button: rgba($dark-text, 0.26), + disabled-text: $dark-disabled-text, + elevation: black, + secondary-text: $dark-accent-text, + hint-text: $dark-disabled-text, + accent-text: $dark-accent-text, + icon: $dark-accent-text, + icons: $dark-accent-text, + text: $dark-primary-text, + slider-min: $dark-primary-text, + slider-off: rgba($dark-text, 0.26), + slider-off-active: $dark-disabled-text, ); -@function mat-light-theme($primary, $accent, $warn: mat-palette($mat-red)) { - @return ( - primary: $primary, - accent: $accent, - warn: $warn, - is-dark: false, - foreground: $mat-light-theme-foreground, - background: $mat-light-theme-background - ); +// Dark Theme text +$light-text: #ffffff; +$light-primary-text: $light-text; +$light-accent-text: rgba($light-primary-text, 0.7); +$light-disabled-text: rgba($light-primary-text, 0.5); +$light-dividers: rgba($light-primary-text, 0.12); +$light-focused: rgba($light-primary-text, 0.12); + +$mat-dark-theme-foreground: (base: $light-text, + divider: $light-dividers, + dividers: $light-dividers, + disabled: $light-disabled-text, + disabled-button: rgba($light-text, 0.3), + disabled-text: $light-disabled-text, + elevation: black, + hint-text: $light-disabled-text, + secondary-text: $light-accent-text, + accent-text: $light-accent-text, + icon: $light-text, + icons: $light-text, + text: $light-text, + slider-min: $light-text, + slider-off: rgba($light-text, 0.3), + slider-off-active: rgba($light-text, 0.3), +); + +// Background config +// Light bg +$light-background: #fafafa; +$light-bg-darker-5: darken($light-background, 5%); +$light-bg-darker-10: darken($light-background, 10%); +$light-bg-darker-20: darken($light-background, 20%); +$light-bg-darker-30: darken($light-background, 30%); +$light-bg-lighter-5: lighten($light-background, 5%); +$dark-bg-tooltip: lighten(#2c2c2c, 20%); +$dark-bg-alpha-4: rgba(#2c2c2c, 0.04); +$dark-bg-alpha-12: rgba(#2c2c2c, 0.12); + +$mat-light-theme-background: (background: $light-background, + status-bar: $light-bg-darker-20, + app-bar: $light-bg-darker-5, + hover: $dark-bg-alpha-4, + card: $light-bg-lighter-5, + dialog: $light-bg-lighter-5, + tooltip: $dark-bg-tooltip, + disabled-button: $dark-bg-alpha-12, + raised-button: $light-bg-lighter-5, + focused-button: $dark-focused, + selected-button: $light-bg-darker-20, + selected-disabled-button: $light-bg-darker-30, + disabled-button-toggle: $light-bg-darker-10, + unselected-chip: $light-bg-darker-10, + disabled-list-option: $light-bg-darker-10, +); + +// Dark bg +$dark-background: #2c2c2c; +$dark-bg-lighter-5: lighten($dark-background, 5%); +$dark-bg-lighter-10: lighten($dark-background, 10%); +$dark-bg-lighter-20: lighten($dark-background, 20%); +$dark-bg-lighter-30: lighten($dark-background, 30%); +$light-bg-alpha-4: rgba(#fafafa, 0.04); +$light-bg-alpha-12: rgba(#fafafa, 0.12); + +// Background palette for dark themes. +$mat-dark-theme-background: (background: $dark-background, + status-bar: $dark-bg-lighter-20, + app-bar: $dark-bg-lighter-5, + hover: $light-bg-alpha-4, + card: $dark-bg-lighter-5, + dialog: $dark-bg-lighter-5, + tooltip: $dark-bg-lighter-20, + disabled-button: $light-bg-alpha-12, + raised-button: $dark-bg-lighter-5, + focused-button: $light-focused, + selected-button: $dark-bg-lighter-20, + selected-disabled-button: $dark-bg-lighter-30, + disabled-button-toggle: $dark-bg-lighter-10, + unselected-chip: $dark-bg-lighter-20, + disabled-list-option: $dark-bg-lighter-10, +); + +// Compute font config +@include mat-core($fontConfig); + +// Theme Config + +body { + --primary-color: #cc33ca; + --primary-lighter-color: #f0c2ef; + --primary-darker-color: #b920b7; + --text-primary-color: #{$light-primary-text}; + --text-primary-lighter-color: #{$dark-primary-text}; + --text-primary-darker-color: #{$light-primary-text}; } -@mixin angular-material-theme($theme) { - @include mat-core-theme($theme); - @include mat-autocomplete-theme($theme); - @include mat-button-theme($theme); - @include mat-button-toggle-theme($theme); - @include mat-card-theme($theme); - @include mat-checkbox-theme($theme); - @include mat-chips-theme($theme); - @include mat-datepicker-theme($theme); - @include mat-dialog-theme($theme); - @include mat-grid-list-theme($theme); - @include mat-icon-theme($theme); - @include mat-input-theme($theme); - @include mat-list-theme($theme); - @include mat-menu-theme($theme); - @include mat-progress-bar-theme($theme); - @include mat-progress-spinner-theme($theme); - @include mat-radio-theme($theme); - @include mat-select-theme($theme); - @include mat-sidenav-theme($theme); - @include mat-slide-toggle-theme($theme); - @include mat-slider-theme($theme); - @include mat-tabs-theme($theme); - @include mat-toolbar-theme($theme); - @include mat-tooltip-theme($theme); +$mat-primary: (main: #cc33ca, + lighter: #f0c2ef, + darker: #b920b7, + 200: #cc33ca, // For slide toggle, + contrast : (main: $light-primary-text, + lighter: $dark-primary-text, + darker: $light-primary-text, + )); +$theme-primary: mat-palette($mat-primary, main, lighter, darker); + +body { + --accent-color: #797979; + --accent-lighter-color: #d7d7d7; + --accent-darker-color: #5c5c5c; + --text-accent-color: #{$light-primary-text}; + --text-accent-lighter-color: #{$dark-primary-text}; + --text-accent-darker-color: #{$light-primary-text}; +} + +$mat-accent: (main: #797979, + lighter: #d7d7d7, + darker: #5c5c5c, + 200: #797979, // For slide toggle, + contrast : (main: $light-primary-text, + lighter: $dark-primary-text, + darker: $light-primary-text, + )); +$theme-accent: mat-palette($mat-accent, main, lighter, darker); + +body { + --warn-color: #ff0000; + --warn-lighter-color: #ffb3b3; + --warn-darker-color: #ff0000; + --text-warn-color: #{$light-primary-text}; + --text-warn-lighter-color: #{$dark-primary-text}; + --text-warn-darker-color: #{$light-primary-text}; +} + +$mat-warn: (main: #ff0000, + lighter: #ffb3b3, + darker: #ff0000, + 200: #ff0000, // For slide toggle, + contrast : (main: $light-primary-text, + lighter: $dark-primary-text, + darker: $light-primary-text, + )); +$theme-warn: mat-palette($mat-warn, main, lighter, darker); +; + +$theme: mat-light-theme($theme-primary, $theme-accent, $theme-warn); +$altTheme: mat-dark-theme($theme-primary, $theme-accent, $theme-warn); + +// Theme Init +@include angular-material-theme($theme); + +.theme-alternate { + @include angular-material-theme($altTheme); +} + +// Specific component overrides, pieces that are not in line with the general theming + +// Handle buttons appropriately, with respect to line-height +.mat-raised-button, +.mat-stroked-button, +.mat-flat-button { + padding: 0 1.15em; + margin: 0 .65em; + min-width: 3em; + line-height: 36.4px +} + +.mat-standard-chip { + padding: .5em .85em; + min-height: 2.5em; }