[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
This commit is contained in:
Denys Vuika 2024-08-05 11:24:57 -04:00 committed by GitHub
parent f508fe49d0
commit f02aca02eb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 18 additions and 24 deletions

View File

@ -1,4 +1,4 @@
{
"*.{ts,js}": ["prettier --write", "eslint"],
"*.{css,scss}": ["prettier --write", "stylelint"]
"*.{css,scss}": ["prettier --write", "stylelint --fix"]
}

View File

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

View File

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

View File

@ -1,4 +0,0 @@
.adf-icon {
display: inline-flex;
vertical-align: middle;
}

View File

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

View File

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

View File

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