sandre/SkydiveLogs
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source
This commit is contained in:
Sébastien André
2020-04-01 12:34:23 +02:00
parent 2034552256
commit c4e9ac5c52
14 changed files with 238 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
Front/skydivelogs-app/src/app/create-user/create-user.component.css
View File

@@ -0,0 +1 @@

2
Front/skydivelogs-app/src/app/create-user/create-user.component.html
View File

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

2
Front/skydivelogs-app/src/app/create-user/create-user.component.ts
View File

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

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

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

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

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

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

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

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

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

2
Front/skydivelogs-app/src/app/login-user/login-user.component.html
View File

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

2
Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.html
View File

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

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

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

2
Front/skydivelogs-app/src/app/new-gear/new-gear.component.html
View File

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

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

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

16
Front/skydivelogs-app/src/app/new-jump/new-jump.component.html
View File

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

260
Front/skydivelogs-app/src/assets/css/custom-theme.scss
View File

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