mirror of
https://github.com/Alfresco/alfresco-content-app.git
synced 2025-07-24 17:31:52 +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
@@ -3,14 +3,14 @@
|
||||
align-items: center;
|
||||
color: var(--theme-text-color, rgba(0, 0, 0, 0.54));
|
||||
|
||||
.locked_by--icon {
|
||||
&--icon {
|
||||
font-size: 14px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.locked_by--label,
|
||||
.locked_by--name {
|
||||
&--label,
|
||||
&--name {
|
||||
font-size: 12px;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
@@ -32,9 +32,9 @@ import { MatIconModule } from '@angular/material/icon';
|
||||
imports: [TranslateModule, MatIconModule],
|
||||
selector: 'aca-locked-by',
|
||||
template: `
|
||||
<mat-icon class="locked_by--icon">lock</mat-icon>
|
||||
<span class="locked_by--label">{{ 'APP.LOCKED_BY' | translate }}</span>
|
||||
<span class="locked_by--name">{{ text }}</span>
|
||||
<mat-icon class="aca-locked-by--icon">lock</mat-icon>
|
||||
<span class="aca-locked-by--label">{{ 'APP.LOCKED_BY' | translate }}</span>
|
||||
<span class="aca-locked-by--name">{{ text }}</span>
|
||||
`,
|
||||
styleUrls: ['./locked-by.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
<div class="alfresco-mobile-application-container">
|
||||
<div class="aca-mobile-application-container">
|
||||
<span>{{ 'APP.DIALOGS.MOBILE_APP.OPEN_ALFRESCO_MOBILE_APP' | translate }}</span>
|
||||
<button mat-button class="cross-button" (click)="onCloseDialog()">
|
||||
<mat-icon class="cross-icon">close</mat-icon>
|
||||
<button mat-button class="aca-cross-button" (click)="onCloseDialog()">
|
||||
<mat-icon class="aca-cross-button-icon">close</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="open-in-app-container">
|
||||
<button mat-button (click)="openInApp()" data-automation-id="open-in-app-button" class="open-in-app" cdkFocusInitial>
|
||||
<div class="aca-open-in-app-container">
|
||||
<button mat-button (click)="openInApp()" data-automation-id="open-in-app-button" class="aca-open-in-app-container-button" cdkFocusInitial>
|
||||
<span>{{ 'APP.DIALOGS.MOBILE_APP.MOBILE_APP_BUTTON_LABEL' | translate }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="download-app-container" *ngIf="appStoreUrl">
|
||||
<button mat-button data-automation-id="download-app-button" class="download-app-button" (click)="downloadIosApp()">
|
||||
<div class="aca-download-app-container" *ngIf="appStoreUrl">
|
||||
<button mat-button data-automation-id="download-app-button" class="aca-download-app-container-button" (click)="downloadIosApp()">
|
||||
<span>{{ 'APP.DIALOGS.MOBILE_APP.DOWNLOAD_APP_BUTTON_LABEL' | translate }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
aca-open-in-app {
|
||||
.open-in-app-container {
|
||||
.aca-open-in-app-container {
|
||||
display: flex;
|
||||
place-content: center;
|
||||
padding: 0;
|
||||
@@ -7,28 +7,34 @@ aca-open-in-app {
|
||||
background-color: var(--theme-primary-color);
|
||||
color: var(--theme-about-panel-background-color);
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.open-in-app {
|
||||
overflow-x: hidden;
|
||||
font-size: 16px;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
height: 48px;
|
||||
&-button {
|
||||
overflow-x: hidden;
|
||||
font-size: 16px;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
height: 48px;
|
||||
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
border-radius: unset;
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
border-radius: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.download-app-container {
|
||||
.aca-download-app-container {
|
||||
display: flex;
|
||||
place-content: center;
|
||||
margin-top: 12px;
|
||||
|
||||
&-button {
|
||||
background: var(--theme-dialog-background-color);
|
||||
color: var(--theme-primary-color);
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.alfresco-mobile-application-container {
|
||||
.aca-mobile-application-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
@@ -37,28 +43,18 @@ aca-open-in-app {
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.cross-button {
|
||||
.aca-cross-button {
|
||||
padding-right: 0;
|
||||
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
border-radius: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.cross-icon {
|
||||
font-weight: bold;
|
||||
font-size: 21px;
|
||||
height: 21px;
|
||||
}
|
||||
|
||||
.download-app-button {
|
||||
background: var(--theme-dialog-background-color);
|
||||
color: var(--theme-primary-color);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.mat-dialog-container {
|
||||
padding: 8px 24px 24px;
|
||||
&-icon {
|
||||
font-weight: bold;
|
||||
font-size: 21px;
|
||||
height: 21px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -35,6 +35,6 @@ import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input, HostBindi
|
||||
})
|
||||
export class PageLayoutContentComponent {
|
||||
@Input()
|
||||
@HostBinding('class.scrollable')
|
||||
@HostBinding('class.aca-scrollable')
|
||||
scrollable = false;
|
||||
}
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
}
|
||||
|
||||
.aca-toolbar-action {
|
||||
.mat-button-base {
|
||||
button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@@ -43,27 +43,27 @@
|
||||
@include flex-row;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
.aca-main-content {
|
||||
@include flex-column;
|
||||
}
|
||||
|
||||
.scrollable {
|
||||
.aca-scrollable {
|
||||
overflow: auto;
|
||||
|
||||
.main-content {
|
||||
.aca-main-content {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[dir='rtl'] .aca-page-layout {
|
||||
.main-content {
|
||||
.aca-main-content {
|
||||
border-left: 1px solid var(--theme-border-color, rgba(0, 0, 0, 0.07));
|
||||
}
|
||||
}
|
||||
|
||||
[dir='ltr'] .aca-page-layout {
|
||||
.main-content {
|
||||
.aca-main-content {
|
||||
border-right: 1px solid var(--theme-border-color, rgba(0, 0, 0, 0.07));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -56,13 +56,13 @@ Displayed only when an error is detected by the parent container component.
|
||||
## Layout Content
|
||||
|
||||
You can provide any Angular component or HTML element as the main content.
|
||||
In addition, you can use `scrollable` class to make the content scroll.
|
||||
In addition, you can use `aca-scrollable` class to make the content scroll.
|
||||
|
||||
The content is displayed only when there are no errors detected.
|
||||
|
||||
```html
|
||||
<aca-page-layout>
|
||||
<div class="aca-page-layout-content scrollable">
|
||||
<div class="aca-page-layout-content aca-scrollable">
|
||||
<!-- Main Content -->
|
||||
</div>
|
||||
</aca-page-layout>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<mat-toolbar>
|
||||
<mat-toolbar class="aca-toolbar">
|
||||
<ng-container *ngFor="let item of items; trackBy: trackByActionId">
|
||||
<aca-toolbar-action [actionRef]="item"></aca-toolbar-action>
|
||||
</ng-container>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
aca-toolbar {
|
||||
.mat-toolbar {
|
||||
.aca-toolbar {
|
||||
min-height: 48px;
|
||||
color: var(--adf-theme-foreground-text-color-054);
|
||||
background-color: inherit;
|
||||
@@ -7,16 +7,6 @@ aca-toolbar {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mat-toolbar-row {
|
||||
height: 48px;
|
||||
font-size: var(--theme-body-1-font-size);
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.mat-toolbar-single-row {
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.aca-toolbar-divider {
|
||||
height: 24px;
|
||||
width: 1px;
|
||||
|
||||
Reference in New Issue
Block a user