mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
[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:
parent
f508fe49d0
commit
f02aca02eb
@ -1,4 +1,4 @@
|
||||
{
|
||||
"*.{ts,js}": ["prettier --write", "eslint"],
|
||||
"*.{css,scss}": ["prettier --write", "stylelint"]
|
||||
"*.{css,scss}": ["prettier --write", "stylelint --fix"]
|
||||
}
|
||||
|
@ -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'
|
||||
|
@ -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;
|
||||
|
@ -1,4 +0,0 @@
|
||||
.adf-icon {
|
||||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
}
|
@ -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' }
|
||||
|
@ -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;
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user