mirror of
https://github.com/Alfresco/alfresco-content-app.git
synced 2025-10-01 14:41:14 +00:00
[ACS-6081] Reduce references to internal Angular material CSS classes (#3534)
* [ACS-6081] Reduce references to internal Angular material CSS classes * [ACS-6081] rollback default scrollable value [ci:force] * [ACS-6081] linting * [ACS-6081] fix e2es * [ACS-6081] cr fix * [ACS-6081] remove adf-cli logger from e2es
This commit is contained in:
Mykyta Maliarchuk
committed by
GitHub
GitHub
parent
7468111d19
commit
7c95b53c8b
@@ -1,14 +1,14 @@
|
||||
<ng-container *ngIf="!item.children">
|
||||
<div class="item">
|
||||
<div class="aca-expansion-panel-item">
|
||||
<button
|
||||
acaActiveLink="action-button--active"
|
||||
acaActiveLink="aca-action-button--active"
|
||||
[action]="item"
|
||||
[attr.aria-label]="item.title | translate"
|
||||
[id]="item.id"
|
||||
[attr.data-automation-id]="item.id"
|
||||
[attr.title]="item.description | translate"
|
||||
mat-button
|
||||
class="action-button full-width"
|
||||
class="aca-action-button aca-full-width"
|
||||
>
|
||||
<adf-icon *ngIf="item.icon" [value]="item.icon"></adf-icon>
|
||||
<span class="action-button__label">{{ item.title | translate }}</span>
|
||||
@@ -18,41 +18,43 @@
|
||||
|
||||
<ng-container *ngIf="item.children && item.children.length">
|
||||
<mat-expansion-panel
|
||||
class="aca-expansion-panel"
|
||||
[expanded]="true"
|
||||
[acaExpansionPanel]="item"
|
||||
[@.disabled]="true"
|
||||
>
|
||||
<mat-expansion-panel-header expandedHeight="32px" collapsedHeight="32px" role="group">
|
||||
<mat-panel-title>
|
||||
<div class="item">
|
||||
<mat-expansion-panel-header expandedHeight="32px" collapsedHeight="32px" role="group" class="aca-expansion-panel-header">
|
||||
<mat-panel-title class="aca-expansion-panel-header-title">
|
||||
<div class="aca-expansion-panel-item">
|
||||
<span
|
||||
[attr.aria-label]="item.title | translate"
|
||||
[id]="item.id"
|
||||
[attr.title]="item.description | translate"
|
||||
[attr.data-automation-id]="item.id"
|
||||
class="action-button full-width"
|
||||
class="aca-action-button aca-full-width"
|
||||
>
|
||||
<adf-icon *ngIf="item.icon" [value]="item.icon"></adf-icon>
|
||||
<span class="action-button__label">{{ item.title | translate }}</span>
|
||||
<span class="aca-action-button__label">{{ item.title | translate }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
|
||||
<div *ngFor="let child of item.children; trackBy: trackById" class="item">
|
||||
<button
|
||||
acaActiveLink="action-button--active"
|
||||
[action]="child"
|
||||
[attr.aria-label]="child.title | translate"
|
||||
[id]="child.id"
|
||||
[attr.data-automation-id]="child.id"
|
||||
[attr.title]="child.description | translate"
|
||||
mat-button
|
||||
class="action-button full-width"
|
||||
>
|
||||
<adf-icon *ngIf="child.icon" [value]="child.icon"></adf-icon>
|
||||
<span class="action-button__label">{{ child.title | translate }}</span>
|
||||
</button>
|
||||
<div class="aca-expansion-panel-body">
|
||||
<div *ngFor="let child of item.children; trackBy: trackById" class="aca-expansion-panel-item">
|
||||
<button
|
||||
acaActiveLink="aca-action-button--active"
|
||||
[action]="child"
|
||||
[attr.aria-label]="child.title | translate"
|
||||
[id]="child.id"
|
||||
[attr.data-automation-id]="child.id"
|
||||
[attr.title]="child.description | translate"
|
||||
mat-button
|
||||
class="aca-action-button aca-full-width"
|
||||
>
|
||||
<adf-icon *ngIf="child.icon" [value]="child.icon"></adf-icon>
|
||||
<span class="aca-action-button__label">{{ child.title | translate }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</mat-expansion-panel>
|
||||
</ng-container>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<div class="sidenav-header">
|
||||
<div class="sidenav-header-title">
|
||||
<div class="sidenav-header-title-logo"
|
||||
<div class="aca-sidenav-header">
|
||||
<div class="aca-sidenav-header-title">
|
||||
<div class="aca-sidenav-header-title-logo"
|
||||
tabindex=0
|
||||
(click)="toggleNavBar.emit()"
|
||||
(keypress)="toggleNavBar.emit()">
|
||||
@@ -10,7 +10,7 @@
|
||||
alt="{{ 'CORE.HEADER.LOGO_ARIA' | translate }}" />
|
||||
</div>
|
||||
|
||||
<div class="sidenav-header-title-text" [routerLink]="landingPage">
|
||||
<div class="aca-sidenav-header-title-text" [routerLink]="landingPage">
|
||||
{{ appName$ | async | translate }}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<div class="sidenav">
|
||||
<div class="aca-sidenav">
|
||||
<app-sidenav-header (toggleNavBar)="toggleClick()"></app-sidenav-header>
|
||||
|
||||
<div class="section-sub-actions">
|
||||
<div *ngFor="let group of groups; trackBy: trackByGroupId" class="section">
|
||||
<div class="aca-sidenav__section">
|
||||
<div *ngFor="let group of groups; trackBy: trackByGroupId" class="aca-sidenav__section__actions">
|
||||
<mat-list-item *ngFor="let item of group.items; trackBy: trackByLinkId">
|
||||
<ng-container *ngIf="!item.component">
|
||||
<app-expand-menu [item]="item"></app-expand-menu>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
.sidenav {
|
||||
.aca-sidenav {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
@@ -38,14 +38,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.section:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.section-sub-actions {
|
||||
&__section {
|
||||
overflow-y: auto;
|
||||
|
||||
.mat-expansion-panel {
|
||||
.aca-expansion-panel {
|
||||
width: 100%;
|
||||
background-color: unset;
|
||||
box-shadow: none;
|
||||
@@ -56,80 +52,69 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&-header-title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.mat-button {
|
||||
line-height: 32px;
|
||||
align-items: center;
|
||||
border: none;
|
||||
span::after {
|
||||
transform: rotate(226deg);
|
||||
}
|
||||
|
||||
.action-button__label {
|
||||
font-size: var(--theme-caption-font-size);
|
||||
}
|
||||
}
|
||||
&-title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
&-body {
|
||||
padding: 0 0 16px;
|
||||
font-size: var(--theme-body-1-font-size);
|
||||
|
||||
.mat-button {
|
||||
line-height: 32px;
|
||||
align-items: center;
|
||||
|
||||
.mat-button-wrapper {
|
||||
display: flex;
|
||||
.aca-action-button__label {
|
||||
font-size: var(--theme-caption-font-size);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-expansion-indicator {
|
||||
.aca-expansion-panel-header:hover {
|
||||
background: var(--adf-theme-background-hover-color);
|
||||
}
|
||||
|
||||
&-item {
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
user-select: none;
|
||||
|
||||
&:hover .aca-action-button__label {
|
||||
color: var(--theme-selected-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.mat-expansion-indicator::after {
|
||||
transform: rotate(226deg);
|
||||
&-body {
|
||||
margin: 0 -24px 16px;
|
||||
font-size: var(--theme-body-1-font-size);
|
||||
|
||||
button {
|
||||
line-height: 32px;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-expansion-panel-header:hover {
|
||||
background: var(--adf-theme-background-hover-color);
|
||||
}
|
||||
|
||||
.item {
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
user-select: none;
|
||||
|
||||
&:hover .action-button__label {
|
||||
color: var(--theme-selected-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.action-button {
|
||||
.aca-action-button {
|
||||
color: var(--theme-action-button-text-color);
|
||||
height: 32px;
|
||||
padding: 0 24px;
|
||||
border-radius: 0;
|
||||
line-height: 32px;
|
||||
|
||||
&--active {
|
||||
color: var(--theme-selected-text-color);
|
||||
background: var(--theme-selected-background-color);
|
||||
}
|
||||
}
|
||||
|
||||
.full-width {
|
||||
.aca-full-width {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.action-button--active {
|
||||
color: var(--theme-selected-text-color);
|
||||
background: var(--theme-selected-background-color);
|
||||
&__actions:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user