From f02aca02ebab022eb2a55eae21d31b0d8f2428e2 Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Mon, 5 Aug 2024 11:24:57 -0400 Subject: [PATCH] [ACS-8498] [ACA] Testing Angular 15 - Toolbar buttons layout is broken (#10026) * fix icon styles * auto-fix styles * fix a bug with icon value resolving * fix tests --- .lintstagedrc.json | 2 +- .../components/datatable/datatable.component.spec.ts | 10 +++++++--- .../components/datatable/datatable.component.ts | 11 +++-------- lib/core/src/lib/icon/icon.component.scss | 4 ---- lib/core/src/lib/icon/icon.component.ts | 1 - .../info-drawer/info-drawer-layout.component.scss | 2 +- .../src/lib/viewer/components/viewer.component.scss | 12 ++++++------ 7 files changed, 18 insertions(+), 24 deletions(-) delete mode 100644 lib/core/src/lib/icon/icon.component.scss diff --git a/.lintstagedrc.json b/.lintstagedrc.json index b12ebf776d..30ba7528e5 100644 --- a/.lintstagedrc.json +++ b/.lintstagedrc.json @@ -1,4 +1,4 @@ { "*.{ts,js}": ["prettier --write", "eslint"], - "*.{css,scss}": ["prettier --write", "stylelint"] + "*.{css,scss}": ["prettier --write", "stylelint --fix"] } diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts b/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts index f53a2e142b..ff1fab6d07 100644 --- a/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts +++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts @@ -945,6 +945,7 @@ describe('DataTable', () => { }); it('should use special material url scheme', () => { + dataTable.data = new ObjectDataTableAdapter([{}, {}, {}], []); const column = {} as DataColumn; const row: any = { @@ -955,7 +956,8 @@ describe('DataTable', () => { }); it('should not use special material url scheme', () => { - const column = {} as DataColumn; + dataTable.data = new ObjectDataTableAdapter([{}, {}, {}], []); + const column = { type: 'image' } as DataColumn; const row: any = { getValue: () => 'http://www.google.com' @@ -965,7 +967,8 @@ describe('DataTable', () => { }); it('should parse icon value', () => { - const column = {} as DataColumn; + dataTable.data = new ObjectDataTableAdapter([{}, {}, {}], []); + const column = { type: 'image' } as DataColumn; const row: any = { getValue: () => 'material-icons://android' @@ -975,7 +978,8 @@ describe('DataTable', () => { }); it('should not parse icon value', () => { - const column = {} as DataColumn; + dataTable.data = new ObjectDataTableAdapter([{}, {}, {}], []); + const column = { type: 'image' } as DataColumn; const row: any = { getValue: () => 'http://www.google.com' diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.ts b/lib/core/src/lib/datatable/components/datatable/datatable.component.ts index 7c0c01d303..fef1762aa8 100644 --- a/lib/core/src/lib/datatable/components/datatable/datatable.component.ts +++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.ts @@ -326,12 +326,7 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges, this.keyManager.onKeydown(event); } - constructor( - private elementRef: ElementRef, - differs: IterableDiffers, - private matIconRegistry: MatIconRegistry, - private sanitizer: DomSanitizer - ) { + constructor(private elementRef: ElementRef, differs: IterableDiffers, private matIconRegistry: MatIconRegistry, private sanitizer: DomSanitizer) { if (differs) { this.differ = differs.find([]).create(null); } @@ -763,7 +758,7 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges, isIconValue(row: DataRow, col: DataColumn): boolean { if (row && col) { - const value = row.getValue(col.key); + const value = this.data.getValue(row, col); return value?.startsWith('material-icons://'); } return false; @@ -771,7 +766,7 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges, asIconValue(row: DataRow, col: DataColumn): string { if (this.isIconValue(row, col)) { - const value = row.getValue(col.key) || ''; + const value = this.data.getValue(row, col) || ''; return value.replace('material-icons://', ''); } return null; diff --git a/lib/core/src/lib/icon/icon.component.scss b/lib/core/src/lib/icon/icon.component.scss deleted file mode 100644 index 3217ac6340..0000000000 --- a/lib/core/src/lib/icon/icon.component.scss +++ /dev/null @@ -1,4 +0,0 @@ -.adf-icon { - display: inline-flex; - vertical-align: middle; -} diff --git a/lib/core/src/lib/icon/icon.component.ts b/lib/core/src/lib/icon/icon.component.ts index 35cc910da4..4a38b5c723 100644 --- a/lib/core/src/lib/icon/icon.component.ts +++ b/lib/core/src/lib/icon/icon.component.ts @@ -25,7 +25,6 @@ import { NgIf } from '@angular/common'; standalone: true, imports: [MatIconModule, NgIf], templateUrl: './icon.component.html', - styleUrls: ['./icon.component.scss'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'adf-icon' } diff --git a/lib/core/src/lib/info-drawer/info-drawer-layout.component.scss b/lib/core/src/lib/info-drawer/info-drawer-layout.component.scss index 16bdd7b68a..cd4cb7fc41 100644 --- a/lib/core/src/lib/info-drawer/info-drawer-layout.component.scss +++ b/lib/core/src/lib/info-drawer/info-drawer-layout.component.scss @@ -50,7 +50,7 @@ $adf-info-drawer-icon-size-half: 24px !default; line-height: 28px; letter-spacing: 0.15px; text-align: left; - align-items: start; + align-items: center; color: var(--adf-theme-foreground-text-color-054); overflow: hidden; diff --git a/lib/core/src/lib/viewer/components/viewer.component.scss b/lib/core/src/lib/viewer/components/viewer.component.scss index 98dbecf75b..05d5362bfc 100644 --- a/lib/core/src/lib/viewer/components/viewer.component.scss +++ b/lib/core/src/lib/viewer/components/viewer.component.scss @@ -40,11 +40,13 @@ text-align: center; flex: 1 1 auto; position: absolute; - top: 0; left: 50%; transform: translateX(-50%); + display: flex; + flex-direction: row; + align-items: center; - @media screen and (max-width: 1450px) { + @media screen and (width <= 1450px) { left: 30%; } } @@ -70,8 +72,7 @@ @extend .adf-full-screen; position: relative; - overflow-y: hidden; - overflow-x: hidden; + overflow: hidden; z-index: 1; background-color: var(--theme-background-color); display: flex; @@ -94,8 +95,7 @@ display: flex; flex-direction: row; - overflow-y: auto; - overflow-x: hidden; + overflow: hidden auto; position: relative; }