Ajout d'un thème général

Front/skydivelogs-app/src/app/create-user/create-user.component.css

@@ -0,0 +1 @@
+

Front/skydivelogs-app/src/app/create-user/create-user.component.html

@@ -46,7 +46,7 @@
     </mat-form-field>
   </p>
 
-  <button [disabled]="loading" mat-button>
+  <button [disabled]="loading" mat-raised-button color="accent">
     <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
     Create user and login
   </button>

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 '/'

Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="dataSourceTable != null else loading" class="table-container">
-  <button mat-button (click)="openDialogToAdd()" mat-button>Add a aircraft</button>
+  <button mat-raised-button color="accent" (click)="openDialogToAdd()">Add a aircraft</button>
 
   <table mat-table [dataSource]="dataSourceTable">
     <ng-container matColumnDef="id">

Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="dataSourceTable != null else loading" class="table-container">
-  <button mat-button (click)="openDialogToAdd()" mat-button>Add a drop zone</button>
+  <button mat-raised-button color="accent" (click)="openDialogToAdd()">Add a drop zone</button>
 
   <table mat-table [dataSource]="dataSourceTable">
     <ng-container matColumnDef="isfavorite">

Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="dataSourceTable != null else loading" class="table-container">
-  <button mat-button (click)="openDialogToAdd()" mat-button>Add a gear</button>
+  <button mat-raised-button color="accent" (click)="openDialogToAdd()">Add a gear</button>
 
   <table mat-table [dataSource]="dataSourceTable">
     <ng-container matColumnDef="id">

Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="dataSourceTable != null else loading" class="table-container">
-  <button mat-button (click)="openDialogToAdd()" mat-button>Add a jump type</button>
+  <button mat-raised-button color="accent" (click)="openDialogToAdd()">Add a jump type</button>
 
   <table mat-table [dataSource]="dataSourceTable">
     <ng-container matColumnDef="id">

Front/skydivelogs-app/src/app/login-user/login-user.component.html

@@ -25,7 +25,7 @@
     </mat-form-field>
   </p>
 
-  <button [disabled]="loading" mat-button>
+  <button [disabled]="loading" mat-raised-button color="accent">
     <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
     Login
   </button>

Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.html

@@ -3,5 +3,5 @@
     <label for="aircraftName">Aircraft name</label>
     <input id="aircraftName" type="text" formControlName="aircraftName" class="form-control">
   </p>
-  <button type="submit" mat-button>Add</button>
+  <button type="submit" mat-raised-button color="accent">Add</button>
 </form>

Front/skydivelogs-app/src/app/new-drop-zone/new-drop-zone.component.html

@@ -27,5 +27,5 @@
     <mat-checkbox formControlName="isTunnel">Is a tunnel</mat-checkbox>
   </mat-form-field>
   <br>
-  <button type="submit" mat-button>Add</button>
+  <button type="submit" mat-raised-button color="accent">Add</button>
 </form>

Front/skydivelogs-app/src/app/new-gear/new-gear.component.html

@@ -28,5 +28,5 @@
     <input id="reserveCanopy" type="text" formControlName="reserveCanopy" class="form-control">
   </p>
 
-  <button mat-button type="submit">Add</button>
+  <button mat-raised-button color="accent" type="submit">Add</button>
 </form>

Front/skydivelogs-app/src/app/new-jump-type/new-jump-type.component.html

@@ -3,5 +3,5 @@
     <label for="jumptypeName">Jump type name</label>
     <input id="jumptypeName" type="text" formControlName="jumptypeName" class="form-control">
   </p>
-  <button type="submit" mat-button>Add</button>
+  <button type="submit" mat-raised-button color="accent">Add</button>
 </form>

Front/skydivelogs-app/src/app/new-jump/new-jump.component.html

@@ -7,7 +7,7 @@
         {{jumpType.name}}
       </mat-option>
     </mat-autocomplete>
-    <button mat-button *ngIf="selectedJumpType" matSuffix mat-icon-button aria-label="Clear"
+    <button mat-raised-button color="accent" *ngIf="selectedJumpType" matSuffix mat-icon-button aria-label="Clear"
       (click)="selectedJumpType=undefined">
       <mat-icon>close</mat-icon>
     </button>
@@ -21,7 +21,7 @@
         {{aircraft.name}}
       </mat-option>
     </mat-autocomplete>
-    <button mat-button *ngIf="selectedAircraft" matSuffix mat-icon-button aria-label="Clear"
+    <button mat-raised-button color="accent" *ngIf="selectedAircraft" matSuffix mat-icon-button aria-label="Clear"
       (click)="selectedAircraft=undefined">
       <mat-icon>close</mat-icon>
     </button>
@@ -38,7 +38,7 @@
           style="width: 16px;">
       </mat-option>
     </mat-autocomplete>
-    <button mat-button *ngIf="selectedDz" matSuffix mat-icon-button aria-label="Clear" (click)="selectedDz=undefined">
+    <button mat-raised-button color="accent" *ngIf="selectedDz" matSuffix mat-icon-button aria-label="Clear" (click)="selectedDz=undefined">
       <mat-icon>close</mat-icon>
     </button>
   </mat-form-field>
@@ -51,7 +51,7 @@
         {{gear.name}}
       </mat-option>
     </mat-autocomplete>
-    <button mat-button *ngIf="selectedGear" matSuffix mat-icon-button aria-label="Clear"
+    <button mat-raised-button color="accent" *ngIf="selectedGear" matSuffix mat-icon-button aria-label="Clear"
       (click)="selectedGear=undefined">
       <mat-icon>close</mat-icon>
     </button>
@@ -73,14 +73,14 @@
 
   <mat-form-field>
     <input matInput placeholder="Exit altitude" [(ngModel)]="exitAltitude" name="exitAltitude" type="number">
-    <button mat-button *ngIf="exitAltitude" matSuffix mat-icon-button aria-label="Clear"
+    <button mat-raised-button color="accent" *ngIf="exitAltitude" matSuffix mat-icon-button aria-label="Clear"
       (click)="exitAltitude=undefined">
       <mat-icon>close</mat-icon>
     </button>
   </mat-form-field>
   <mat-form-field>
     <input matInput placeholder="Deploy altitude" [(ngModel)]="deployAltitude" name="deployAltitude" type="number">
-    <button mat-button *ngIf="deployAltitude" matSuffix mat-icon-button aria-label="Clear"
+    <button mat-raised-button color="accent" *ngIf="deployAltitude" matSuffix mat-icon-button aria-label="Clear"
       (click)="deployAltitude=undefined">
       <mat-icon>close</mat-icon>
     </button>
@@ -88,14 +88,14 @@
 
   <mat-form-field>
     <input matInput placeholder="Count of jumps" [(ngModel)]="countOfJumps" name="countOfJumps" type="number">
-    <button mat-button *ngIf="countOfJumps" matSuffix mat-icon-button aria-label="Clear"
+    <button mat-raised-button color="accent" *ngIf="countOfJumps" matSuffix mat-icon-button aria-label="Clear"
       (click)="countOfJumps=undefined">
       <mat-icon>close</mat-icon>
     </button>
   </mat-form-field>
 
   <br />
-  <button mat-button *ngIf="isValidatedForm()">Submit</button>
+  <button mat-raised-button color="accent" *ngIf="isValidatedForm()">Submit</button>
 </form>
 
 <ng-template #loading>

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 ======== */
+@import '~@angular/material/theming';
-$my-custom-primary: mat-palette($mat-deep-purple);
+// Include the common styles for Angular Material. We include this here so that you only
-$my-custom-accent: mat-palette($mat-pink, 100, 500, A100);
+// have to load a single css file for Angular Material in your app.
-$my-custom-warn: mat-palette($mat-lime);
 
-$my-custom-theme: mat-light-theme(
+// Fonts
-  $my-custom-primary,
+@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
-  $my-custom-accent,
+
-  $my-custom-warn
+$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)) {
+// Dark Theme text
-  @return (
+$light-text: #ffffff;
-    primary: $primary,
+$light-primary-text: $light-text;
-    accent: $accent,
+$light-accent-text: rgba($light-primary-text, 0.7);
-    warn: $warn,
+$light-disabled-text: rgba($light-primary-text, 0.5);
-    is-dark: false,
+$light-dividers: rgba($light-primary-text, 0.12);
-    foreground: $mat-light-theme-foreground,
+$light-focused: rgba($light-primary-text, 0.12);
-    background: $mat-light-theme-background
+
-  );
+$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) {
+$mat-primary: (main: #cc33ca,
-  @include mat-core-theme($theme);
+  lighter: #f0c2ef,
-  @include mat-autocomplete-theme($theme);
+  darker: #b920b7,
-  @include mat-button-theme($theme);
+  200: #cc33ca, // For slide toggle,
-  @include mat-button-toggle-theme($theme);
+  contrast : (main: $light-primary-text,
-  @include mat-card-theme($theme);
+    lighter: $dark-primary-text,
-  @include mat-checkbox-theme($theme);
+    darker: $light-primary-text,
-  @include mat-chips-theme($theme);
+  ));
-  @include mat-datepicker-theme($theme);
+$theme-primary: mat-palette($mat-primary, main, lighter, darker);
-  @include mat-dialog-theme($theme);
+
-  @include mat-grid-list-theme($theme);
+body {
-  @include mat-icon-theme($theme);
+  --accent-color: #797979;
-  @include mat-input-theme($theme);
+  --accent-lighter-color: #d7d7d7;
-  @include mat-list-theme($theme);
+  --accent-darker-color: #5c5c5c;
-  @include mat-menu-theme($theme);
+  --text-accent-color: #{$light-primary-text};
-  @include mat-progress-bar-theme($theme);
+  --text-accent-lighter-color: #{$dark-primary-text};
-  @include mat-progress-spinner-theme($theme);
+  --text-accent-darker-color: #{$light-primary-text};
-  @include mat-radio-theme($theme);
+}
-  @include mat-select-theme($theme);
+
-  @include mat-sidenav-theme($theme);
+$mat-accent: (main: #797979,
-  @include mat-slide-toggle-theme($theme);
+  lighter: #d7d7d7,
-  @include mat-slider-theme($theme);
+  darker: #5c5c5c,
-  @include mat-tabs-theme($theme);
+  200: #797979, // For slide toggle,
-  @include mat-toolbar-theme($theme);
+  contrast : (main: $light-primary-text,
-  @include mat-tooltip-theme($theme);
+    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;
 }