From 02777f75af707e8760c8b36996c75debc199471a Mon Sep 17 00:00:00 2001 From: rfrt Date: Wed, 31 Jul 2024 10:14:11 +0200 Subject: [PATCH] feat: layout angular15 --- .../src/app/layout/layout-demo.component.html | 13 ++++++++++++- .../src/app/layout/layout-demo.component.scss | 1 + .../src/app/layout/layout-demo.component.ts | 6 ++++-- projects/layout/src/_layout-theme.scss | 8 ++++---- projects/layout/src/layout.component.scss | 13 +++++++------ projects/layout/src/layout.component.ts | 4 ++-- 6 files changed, 30 insertions(+), 15 deletions(-) diff --git a/projects/demo-app/src/app/layout/layout-demo.component.html b/projects/demo-app/src/app/layout/layout-demo.component.html index 4cd16226..7b1779eb 100644 --- a/projects/demo-app/src/app/layout/layout-demo.component.html +++ b/projects/demo-app/src/app/layout/layout-demo.component.html @@ -30,7 +30,18 @@ -
Layout right
+
+ Layout right +
+ + 1 + 2 + 3 + 4 + 5 + +
+
diff --git a/projects/demo-app/src/app/layout/layout-demo.component.scss b/projects/demo-app/src/app/layout/layout-demo.component.scss index ef65ed05..f7eb8d07 100644 --- a/projects/demo-app/src/app/layout/layout-demo.component.scss +++ b/projects/demo-app/src/app/layout/layout-demo.component.scss @@ -12,6 +12,7 @@ .layout-right-container { display: flex; flex: 1 1 auto; + flex-direction: column; background: mat.get-color-from-palette(mat.$red-palette, 100); } } diff --git a/projects/demo-app/src/app/layout/layout-demo.component.ts b/projects/demo-app/src/app/layout/layout-demo.component.ts index 194d29d5..d66389b6 100644 --- a/projects/demo-app/src/app/layout/layout-demo.component.ts +++ b/projects/demo-app/src/app/layout/layout-demo.component.ts @@ -1,12 +1,13 @@ import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; +import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; -import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; -import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip'; +import { MatTooltipModule } from '@angular/material/tooltip'; import { NgxLayoutComponent } from '@hug/ngx-layout'; import { NgxSearchContainerComponent, NgxSearchInputDirective } from '@hug/ngx-search-container'; import { NgxStatusService } from '@hug/ngx-status'; +import {MatChipsModule} from '@angular/material/chips'; @Component({ selector: 'app-layout-demo', @@ -20,6 +21,7 @@ import { NgxStatusService } from '@hug/ngx-status'; MatButtonModule, MatIconModule, MatTooltipModule, + MatChipsModule, NgxSearchContainerComponent, NgxSearchInputDirective, NgxLayoutComponent diff --git a/projects/layout/src/_layout-theme.scss b/projects/layout/src/_layout-theme.scss index 54cd1712..ceb3a5ea 100644 --- a/projects/layout/src/_layout-theme.scss +++ b/projects/layout/src/_layout-theme.scss @@ -10,7 +10,7 @@ background-color: mat.get-color-from-palette($primary, darker); color: mat.get-color-from-palette($primary, darker-contrast); - .mat-icon-button:not([disabled]) .mat-icon { + .mat-mdc-icon-button:not([disabled]) .mat-icon { color: mat.get-color-from-palette($primary, darker-contrast); } @@ -18,7 +18,7 @@ background-color: mat.get-color-from-palette($primary); color: mat.get-color-from-palette($primary, default-contrast); - .mat-icon-button:not([disabled]) .mat-icon { + .mat-mdc-icon-button:not([disabled]) .mat-icon { color: mat.get-color-from-palette($primary, default-contrast); } } @@ -46,12 +46,12 @@ } [filters-chip-list] { - .mat-standard-chip { + .mat-mdc-chip { background-color: mat.get-color-from-palette($accent); color: mat.get-color-from-palette($background, background); } - .mat-standard-chip { + .mat-mdc-chip { &:not([disabled]) { &:hover { background-color: mat.get-color-from-palette($accent, 700); diff --git a/projects/layout/src/layout.component.scss b/projects/layout/src/layout.component.scss index 471b63fa..36e3b210 100644 --- a/projects/layout/src/layout.component.scss +++ b/projects/layout/src/layout.component.scss @@ -69,17 +69,14 @@ ngx-layout { } [filters-chip-list] { - .mat-chip-list-wrapper { + mat-chip-listbox { margin: 0; max-height: 20vh; overflow-y: auto; } - .mat-standard-chip { + .mat-mdc-chip { position: relative; - } - - .mat-standard-chip { padding: 0.5rem; margin: 0.1rem; font-size: 0.75rem; @@ -137,7 +134,7 @@ ngx-layout { width: 100%; } - .mat-form-field-infix { + .mat-mdc-form-field-infix { width: inherit; } @@ -209,6 +206,10 @@ ngx-layout { .primary-action-container { z-index: 20; + + button { + background-color: #009688; + } } } } diff --git a/projects/layout/src/layout.component.ts b/projects/layout/src/layout.component.ts index b5f11672..6c9790cd 100644 --- a/projects/layout/src/layout.component.ts +++ b/projects/layout/src/layout.component.ts @@ -1,11 +1,11 @@ import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion'; import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, Component, ContentChild, EventEmitter, HostBinding, inject, Input, Output, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; +import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; -import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; -import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip'; import { MatDrawer, MatSidenavModule } from '@angular/material/sidenav'; import { MatToolbarModule } from '@angular/material/toolbar'; +import { MatTooltipModule } from '@angular/material/tooltip'; import { NgxMediaService } from '@hug/ngx-core'; import { NgxSidenavService } from '@hug/ngx-sidenav';