ACS-8498] [ACA] Testing Angular 15 - Toolbar buttons layout is broken (#3995)

This commit is contained in:
Denys Vuika
2024-08-07 21:33:52 -04:00
committed by GitHub
parent 4c02291a84
commit 3075135fbc
22 changed files with 38 additions and 110 deletions

View File

@@ -2,7 +2,7 @@
<ng-container [ngSwitch]="actionRef.type">
<ng-container *ngSwitchCase="'menu'">
<button mat-menu-item [id]="actionRef.id" [matMenuTriggerFor]="childMenu">
<adf-icon [value]="actionRef.icon"></adf-icon>
<adf-icon [value]="actionRef.icon" class="app-context-menu-item--icon"></adf-icon>
<span [attr.data-automation-id]="actionRef.id + '-label'">{{ actionRef.title | translate }}</span>
</button>
@@ -22,8 +22,8 @@
</ng-container>
<ng-container *ngSwitchDefault>
<button mat-menu-item color="primary" [id]="actionRef.id" (click)="runAction()">
<adf-icon [value]="actionRef.icon"></adf-icon>
<button mat-menu-item [id]="actionRef.id" (click)="runAction()">
<adf-icon [value]="actionRef.icon" class="app-context-menu-item--icon"></adf-icon>
<span [attr.data-automation-id]="actionRef.id + '-label'">{{ actionRef.title | translate }}</span>
</button>
</ng-container>

View File

@@ -5,7 +5,7 @@
<ng-container *ngFor="let entry of actions; trackBy: trackByActionId" [ngSwitch]="entry.type">
<ng-container *ngSwitchDefault>
<button mat-menu-item [id]="entry.id" (click)="runAction(entry)">
<adf-icon [value]="entry.icon"></adf-icon>
<adf-icon [value]="entry.icon" class="app-context-menu-item--icon"></adf-icon>
<span [attr.data-automation-id]="entry.id + '-label'">{{ entry.title | translate }}</span>
</button>
</ng-container>
@@ -16,7 +16,7 @@
<ng-container *ngSwitchCase="'menu'">
<button mat-menu-item [id]="entry.id" [matMenuTriggerFor]="childMenu">
<adf-icon [value]="entry.icon"></adf-icon>
<adf-icon [value]="entry.icon" class="app-context-menu-item--icon"></adf-icon>
<span [attr.data-automation-id]="entry.id + '-label'">{{ entry.title | translate }}</span>
</button>

View File

@@ -0,0 +1,8 @@
.aca-context-menu {
.app-context-menu-item {
&--icon {
display: inline-flex;
vertical-align: middle;
}
}
}

View File

@@ -52,6 +52,7 @@ import { OutsideEventDirective } from './context-menu-outside-event.directive';
],
selector: 'aca-context-menu',
templateUrl: './context-menu.component.html',
styleUrls: ['./context-menu.component.scss'],
host: {
class: 'aca-context-menu-holder'
},

View File

@@ -38,7 +38,6 @@ aca-search-results {
/* stylelint-disable-next-line */
.mdc-evolution-chip__text-label {
padding-top: 4px;
color: var(--theme-selected-text-color);
}

View File

@@ -51,7 +51,7 @@ import { NotificationService } from '@alfresco/adf-core';
[attr.title]="(membership.isJoinRequested | async) ? ('APP.ACTIONS.CANCEL_JOIN' | translate) : ('APP.ACTIONS.JOIN' | translate)"
>
<mat-icon *ngIf="membership.isJoinRequested | async">cancel</mat-icon>
<mat-icon *ngIf="!(membership.isJoinRequested | async)" svgIcon="adf:join_library"></mat-icon>
<mat-icon *ngIf="!(membership.isJoinRequested | async)">library_add</mat-icon>
</button>
`,
encapsulation: ViewEncapsulation.None,

View File

@@ -44,8 +44,7 @@ import { MatMenuModule } from '@angular/material/menu';
[isAdmin]="(profile$ | async).isAdmin"
[attr.title]="(membership.isJoinRequested | async) ? ('APP.ACTIONS.CANCEL_JOIN' | translate) : ('APP.ACTIONS.JOIN' | translate)"
>
<mat-icon *ngIf="membership.isJoinRequested | async">cancel</mat-icon>
<mat-icon *ngIf="!(membership.isJoinRequested | async)" svgIcon="adf:join_library"></mat-icon>
<mat-icon>{{ membership.isJoinRequested ? 'cancel' : 'library_add' }}</mat-icon>
<span>{{ (membership.isJoinRequested | async) ? ('APP.ACTIONS.CANCEL_JOIN' | translate) : ('APP.ACTIONS.JOIN' | translate) }}</span>
</button>
`,

View File

@@ -10,10 +10,6 @@ mat-toolbar {
color: var(--adf-theme-foreground-text-color-054);
}
mat-icon {
vertical-align: middle;
}
.adf-name-location-cell-location.adf-datatable-cell-value {
color: var(--theme-secondary-text);
}
@@ -23,27 +19,6 @@ mat-icon {
padding: 0;
}
#{$mat-button} > #{$mat-icon} {
padding: 0;
}
#{$mat-button} {
#{$mat-button-label} {
-webkit-font-smoothing: subpixel-antialiased;
}
&#{$mat-primary} {
#{$mat-button-label} {
-webkit-font-smoothing: initial;
font-weight: 500;
}
}
}
#{$mat-button}:active {
outline: none;
}
#{$mat-form-field-error-wrapper}:is(div) {
padding: 0;
font-size: 10px;
@@ -125,6 +100,7 @@ mat-slide-toggle {
#{$mat-evolution-chip-text-label} {
white-space: normal;
display: flex;
}
#{$mat-evolution-chip-action}#{$mat-chip-action} {