Skip to content

Commit

Permalink
feat: apply angular material 18
Browse files Browse the repository at this point in the history
  • Loading branch information
rfrt committed Aug 2, 2024
1 parent f11f01f commit f65d64c
Show file tree
Hide file tree
Showing 19 changed files with 3,866 additions and 5,287 deletions.
8,808 changes: 3,690 additions & 5,118 deletions package-lock.json
View file

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,16 +35,16 @@
],
"dependencies": {
"@angular/animations": "~18.1.3",
"@angular/cdk": "~17.3.10",
"@angular/cdk": "~18.1.3",
"@angular/common": "~18.1.3",
"@angular/compiler": "~18.1.3",
"@angular/core": "~18.1.3",
"@angular/forms": "~18.1.3",
"@angular/material": "~17.3.10",
"@angular/material": "~18.1.3",
"@angular/platform-browser": "~18.1.3",
"@angular/platform-browser-dynamic": "~18.1.3",
"@angular/router": "~18.1.3",
"@angular/material-date-fns-adapter": "17.3.10",
"@angular/material-date-fns-adapter": "18.1.3",
"date-fns": "~2.30.0",
"@fontsource-variable/material-symbols-outlined": "~5.0.19",
"@fontsource/material-icons": "4.5.4",
Expand Down
8 changes: 4 additions & 4 deletions projects/core/src/styles/_themeVariables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
@use './palette' as palette;

// Define color scheme
$primary: mat.define-palette(palette.$mat-hug-primary);
$accent: mat.define-palette(mat.$teal-palette);
$warn: mat.define-palette(mat.$red-palette);
$primary: mat.m2-define-palette(palette.$mat-hug-primary);
$accent: mat.m2-define-palette(mat.$m2-teal-palette);
$warn: mat.m2-define-palette(mat.$m2-red-palette);

// Create the theme object from colors
$theme: mat.define-light-theme($primary, $accent, $warn);
$theme: mat.m2-define-light-theme($primary, $accent, $warn);
14 changes: 7 additions & 7 deletions projects/core/src/styles/mixins/_icon-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@
mat-icon,
fa-icon {
&[background='primary'] {
background: mat.get-color-from-palette($primary) !important;
background: mat.m2-get-color-from-palette($primary) !important;
}

&[background='accent'] {
background: mat.get-color-from-palette($accent) !important;
background: mat.m2-get-color-from-palette($accent) !important;
}

&[background='warn'] {
background: mat.get-color-from-palette($warn) !important;
background: mat.m2-get-color-from-palette($warn) !important;
}
}

Expand All @@ -29,7 +29,7 @@

> mat-icon[secondary],
> fa-icon[secondary] {
background: mat.get-color-from-palette($background, background);
background: mat.m2-get-color-from-palette($background, background);
border-radius: 50%;
bottom: 0;
font-size: $ratio;
Expand Down Expand Up @@ -68,15 +68,15 @@
-webkit-font-smoothing: antialiased;

&[color='primary'] {
color: mat.get-color-from-palette($primary);
color: mat.m2-get-color-from-palette($primary);
}

&[color='accent'] {
color: mat.get-color-from-palette($accent);
color: mat.m2-get-color-from-palette($accent);
}

&[color='warn'] {
color: mat.get-color-from-palette($warn);
color: mat.m2-get-color-from-palette($warn);
}

&:not([secondary]) svg {
Expand Down
16 changes: 8 additions & 8 deletions projects/core/src/styles/mixins/_loader-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@
$primary: map-get($theme, primary);

.loader {
border-bottom: 1.25vmin solid mat.get-color-from-palette($primary, 500, 0.2);
border-left: 1.25vmin solid mat.get-color-from-palette($primary);
border-right: 1.25vmin solid mat.get-color-from-palette($primary, 500, 0.2);
border-top: 1.25vmin solid mat.get-color-from-palette($primary, 500, 0.2);
border-bottom: 1.25vmin solid mat.m2-get-color-from-palette($primary, 500, 0.2);
border-left: 1.25vmin solid mat.m2-get-color-from-palette($primary);
border-right: 1.25vmin solid mat.m2-get-color-from-palette($primary, 500, 0.2);
border-top: 1.25vmin solid mat.m2-get-color-from-palette($primary, 500, 0.2);
font-size: 0.7rem;
-webkit-animation: spin 1.1s infinite linear;
animation: spin 1.1s infinite linear;
Expand All @@ -26,10 +26,10 @@
height: 15px;
margin-top: -10px;
margin-left: -5px;
border-bottom: 3px solid mat.get-color-from-palette($primary, 500, 0.2);
border-left: 3px solid mat.get-color-from-palette($primary);
border-right: 3px solid mat.get-color-from-palette($primary, 500, 0.2);
border-top: 3px solid mat.get-color-from-palette($primary, 500, 0.2);
border-bottom: 3px solid mat.m2-get-color-from-palette($primary, 500, 0.2);
border-left: 3px solid mat.m2-get-color-from-palette($primary);
border-right: 3px solid mat.m2-get-color-from-palette($primary, 500, 0.2);
border-top: 3px solid mat.m2-get-color-from-palette($primary, 500, 0.2);
}
}

Expand Down
8 changes: 4 additions & 4 deletions projects/core/src/styles/mixins/_menu-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,10 @@
&ul {
li {
background-color: #fff;
color: mat.get-color-from-palette($primary);
color: mat.m2-get-color-from-palette($primary);

&:hover {
background-color: mat.get-color-from-palette($primary);
background-color: mat.m2-get-color-from-palette($primary);
color: #fff;
}
}
Expand All @@ -25,10 +25,10 @@
> button,
> a {
background-color: #fff;
color: mat.get-color-from-palette($primary);
color: mat.m2-get-color-from-palette($primary);

&:hover {
background-color: mat.get-color-from-palette($primary);
background-color: mat.m2-get-color-from-palette($primary);
color: #fff;
}
}
Expand Down
4 changes: 2 additions & 2 deletions projects/demo-app/src/app/layout/layout-demo.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@
display: flex;
flex: 1 1 auto;
padding: 1rem;
background: mat.get-color-from-palette(mat.$green-palette, 100);
background: mat.m2-get-color-from-palette(mat.$m2-green-palette, 100);
}

.layout-right-container {
display: flex;
flex: 1 1 auto;
flex-direction: column;
background: mat.get-color-from-palette(mat.$red-palette, 100);
background: mat.m2-get-color-from-palette(mat.$m2-red-palette, 100);
}
}
}
57 changes: 29 additions & 28 deletions projects/demo-app/src/app/snackbar/snackbar-demo.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,21 +58,35 @@
<!-- event driven from UI -->
<!-- this behavior is to be used to react to user behavior on the UI, snackbars MUST be disposed using user interraction -->

<!--inside a container-->
<section #containerEl class="container" [style.position]="'relative'">
<ng-template ngFor let-message [ngForOf]="infos$ | async">
<ngx-snackbar *ngIf="message.gate" alignment="right" [outerContainerElement]="containerEl">
<ngx-message-box type="primary" horizontal>
{{ message.content }}
<ng-template #actionsTemplate>
<button mat-icon-button class="action-button" [color]="'blank'" (click)="message.gate = false">
<mat-icon>clear</mat-icon>
</button>
</ng-template>
</ngx-message-box>
</ngx-snackbar>
</ng-template>
</section>
<div class="sectionContainer">
<section class="push-section">
<!-- server push like feed -->
<!-- this behavior is to be used to push message to the client for example, snackbars MUST be displosed by themself -->
<!-- to do so, define duration @Input and negate flag used for disposal using the onAnimationDone @Output -->
<ng-template ngFor let-message [ngForOf]="messages$ | async">
<ngx-snackbar *ngIf="message.gate" alignment="left" [duration]="5000" (onAnimationDone)="message.gate = false">
<ngx-message-box type="primary" horizontal>
{{ message.content }}
</ngx-message-box>
</ngx-snackbar>
</ng-template>
</section>
<!--inside a container-->
<section #containerEl class="container" [style.position]="'relative'">
<ng-template ngFor let-message [ngForOf]="infos$ | async">
<ngx-snackbar *ngIf="message.gate" alignment="right" [outerContainerElement]="containerEl">
<ngx-message-box type="primary" horizontal>
{{ message.content }}
<ng-template #actionsTemplate>
<button mat-icon-button class="action-button" [color]="'blank'" (click)="message.gate = false">
<mat-icon>clear</mat-icon>
</button>
</ng-template>
</ngx-message-box>
</ngx-snackbar>
</ng-template>
</section>
</div>

<!--on the viewport-->
<ng-template ngFor let-message [ngForOf]="successes$ | async">
Expand Down Expand Up @@ -113,19 +127,6 @@
</ngx-message-box>
</ngx-snackbar>
</ng-template>

<section class="push-section">
<!-- server push like feed -->
<!-- this behavior is to be used to push message to the client for example, snackbars MUST be displosed by themself -->
<!-- to do so, define duration @Input and negate flag used for disposal using the onAnimationDone @Output -->
<ng-template ngFor let-message [ngForOf]="messages$ | async">
<ngx-snackbar *ngIf="message.gate" alignment="left" [duration]="5000" (onAnimationDone)="message.gate = false">
<ngx-message-box type="primary" horizontal>
{{ message.content }}
</ngx-message-box>
</ngx-snackbar>
</ng-template>
</section>
</mat-card-content>
</mat-card>
</div>
20 changes: 13 additions & 7 deletions projects/demo-app/src/app/snackbar/snackbar-demo.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,13 @@ $primary: map-get(themeVariables.$theme, primary);
border: solid rgba(0, 0, 0, 1) 1px;
}

.sectionContainer {
display: flex;
width: 100%;
height: 400px;
overflow: auto;
}

.btn-container {
width: 1000px;
margin: auto;
Expand All @@ -29,33 +36,32 @@ $primary: map-get(themeVariables.$theme, primary);
}

[background='danger'] {
background: mat.get-color-from-palette(mat.$red-palette, 400);
background: mat.m2-get-color-from-palette(mat.$m2-red-palette, 400);
}

[background='warning'] {
background: mat.get-color-from-palette(mat.$orange-palette, 400);
background: mat.m2-get-color-from-palette(mat.$m2-orange-palette, 400);
}

[background='success'] {
background: mat.get-color-from-palette(mat.$green-palette, 400);
background: mat.m2-get-color-from-palette(mat.$m2-green-palette, 400);
}

[background='info'] {
background: mat.get-color-from-palette(mat.$blue-palette, 400);
background: mat.m2-get-color-from-palette(mat.$m2-blue-palette, 400);
}

[background='default'] {
background: mat.get-color-from-palette(mat.$grey-palette, 900);
background: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 900);
}

[background='primary'] {
background: mat.get-color-from-palette($primary);
background: mat.m2-get-color-from-palette($primary);
}
}

.push-section {
width: 400px;
height: 4000px;
border: red solid 1px;
}
}
Loading

0 comments on commit f65d64c

Please sign in to comment.