[ACS-6140] - Remove references to internal Angular Material CSS classes (#3620)

This commit is contained in:
DominikIwanek 2024-02-13 13:22:57 +01:00 committed by GitHub
parent 8e567cd483
commit 184ad17baf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
25 changed files with 88 additions and 90 deletions

View File

@ -5,7 +5,7 @@
"alpha-value-notation": "number",
"function-name-case": "lower",
"selector-class-pattern": [
"^_?(adf|adf-|aca-|app|app-|cdk-||mat-|material-)",
"^_?(adf|adf-|aca-|app|app-)",
{
"resolveNestedSelectors": true
}

60
package-lock.json generated
View File

@ -10,11 +10,11 @@
"hasInstallScript": true,
"license": "LGPL-3.0",
"dependencies": {
"@alfresco/adf-content-services": "6.7.0-7828326288",
"@alfresco/adf-core": "6.7.0-7828326288",
"@alfresco/adf-extensions": "6.7.0-7828326288",
"@alfresco/eslint-plugin-eslint-angular": "6.7.0-7828326288",
"@alfresco/js-api": "7.6.0-7828326288",
"@alfresco/adf-content-services": "6.7.0-7885225129",
"@alfresco/adf-core": "6.7.0-7885225129",
"@alfresco/adf-extensions": "6.7.0-7885225129",
"@alfresco/eslint-plugin-eslint-angular": "6.7.0-7885225129",
"@alfresco/js-api": "7.6.0-7885225129",
"@angular/animations": "14.1.3",
"@angular/cdk": "14.1.3",
"@angular/common": "14.1.3",
@ -42,7 +42,7 @@
"zone.js": "0.11.8"
},
"devDependencies": {
"@alfresco/adf-cli": "6.7.0-7828326288",
"@alfresco/adf-cli": "6.7.0-7885225129",
"@angular-devkit/build-angular": "14.2.11",
"@angular-devkit/core": "14.1.2",
"@angular-devkit/schematics": "14.1.2",
@ -123,12 +123,12 @@
"dev": true
},
"node_modules/@alfresco/adf-cli": {
"version": "6.7.0-7828326288",
"resolved": "https://registry.npmjs.org/@alfresco/adf-cli/-/adf-cli-6.7.0-7828326288.tgz",
"integrity": "sha512-JTEOIPHFVTTTULnEabDFnrKYxafdjEMqN7TTNy56Ygfokl/o/CrlQ8SGSeGrZOyNyKkyqLs7y0BSKFWZt9SByg==",
"version": "6.7.0-7885225129",
"resolved": "https://registry.npmjs.org/@alfresco/adf-cli/-/adf-cli-6.7.0-7885225129.tgz",
"integrity": "sha512-wPXf1hbwXEBCePK1/St+eIBsDy8gpjN79HwmH1Vm8JmUBRCrXLMo33ztIGO00qiaynBfCQowB/drqlpvJKLSOQ==",
"dev": true,
"dependencies": {
"@alfresco/js-api": ">=7.6.0-7828326288",
"@alfresco/js-api": ">=7.6.0-7885225129",
"commander": "^6.2.1",
"ejs": "^3.1.9",
"license-checker": "^25.0.1",
@ -143,15 +143,15 @@
}
},
"node_modules/@alfresco/adf-content-services": {
"version": "6.7.0-7828326288",
"resolved": "https://registry.npmjs.org/@alfresco/adf-content-services/-/adf-content-services-6.7.0-7828326288.tgz",
"integrity": "sha512-+5jb8sZHCTNPgsRt+NXbbM3ABwAVUxkAL1FAntVIdBsnzfjSDFgbBx1SzhS2yrjTv3UwNHcnlvpWJOrASyiOmQ==",
"version": "6.7.0-7885225129",
"resolved": "https://registry.npmjs.org/@alfresco/adf-content-services/-/adf-content-services-6.7.0-7885225129.tgz",
"integrity": "sha512-y82lUb5KFjF2BBkEx7SOmNu34xcN2ptkrLflKUQGIZ3RvmCCePqhaTSb9T0VIfezjKTWx5DyVgVLjRb4+nG67g==",
"dependencies": {
"tslib": "^2.3.0"
},
"peerDependencies": {
"@alfresco/adf-core": ">=6.7.0-7828326288",
"@alfresco/js-api": ">=7.6.0-7828326288",
"@alfresco/adf-core": ">=6.7.0-7885225129",
"@alfresco/js-api": ">=7.6.0-7885225129",
"@angular/animations": ">=14.1.3",
"@angular/cdk": ">=14.1.2",
"@angular/common": ">=14.1.3",
@ -166,9 +166,9 @@
}
},
"node_modules/@alfresco/adf-core": {
"version": "6.7.0-7828326288",
"resolved": "https://registry.npmjs.org/@alfresco/adf-core/-/adf-core-6.7.0-7828326288.tgz",
"integrity": "sha512-WF+QAwP85DuDqlwsdMGbH7RN/SuAnvWx4URqAfz9EPvQo0+aWWWVRcJNFRRxP8N8q2lIiYRybZlBMBZdJ8x07w==",
"version": "6.7.0-7885225129",
"resolved": "https://registry.npmjs.org/@alfresco/adf-core/-/adf-core-6.7.0-7885225129.tgz",
"integrity": "sha512-tRCzCT9BpzCFOsq3bXsjeSxOS1MsEB/uZrg7lDS/dFFzO/JeZaVPL8PHR+PX18TxrE6uCjjpcFjseijTB3Kkcw==",
"dependencies": {
"angular-oauth2-oidc": "^13.0.1",
"angular-oauth2-oidc-jwks": "^13.0.1",
@ -176,8 +176,8 @@
"tslib": "^2.3.0"
},
"peerDependencies": {
"@alfresco/adf-extensions": ">=6.7.0-7828326288",
"@alfresco/js-api": ">=7.6.0-7828326288",
"@alfresco/adf-extensions": ">=6.7.0-7885225129",
"@alfresco/js-api": ">=7.6.0-7885225129",
"@angular/animations": ">=14.1.3",
"@angular/cdk": ">=14.1.2",
"@angular/common": ">=14.1.3",
@ -192,27 +192,27 @@
}
},
"node_modules/@alfresco/adf-extensions": {
"version": "6.7.0-7828326288",
"resolved": "https://registry.npmjs.org/@alfresco/adf-extensions/-/adf-extensions-6.7.0-7828326288.tgz",
"integrity": "sha512-n0GHsGgc/hlknsuwqkFbMQ5zBhB3ngeN6y/7M3n7v79vmQzOYbcWKoEEuMmLARKODXfeuAeQcDAB+7QMm7dwvQ==",
"version": "6.7.0-7885225129",
"resolved": "https://registry.npmjs.org/@alfresco/adf-extensions/-/adf-extensions-6.7.0-7885225129.tgz",
"integrity": "sha512-sVRNMPSjlj/3LPLxJE6bvvoz7ZaGnkKotmNAuUjoK6wMML10Rk5DGIZreprsgcoFU7UEaUhDOrZhvL9Lqif4ZA==",
"dependencies": {
"tslib": "^2.3.0"
},
"peerDependencies": {
"@alfresco/js-api": ">=7.6.0-7828326288",
"@alfresco/js-api": ">=7.6.0-7885225129",
"@angular/common": ">=14.1.3",
"@angular/core": ">=14.1.3"
}
},
"node_modules/@alfresco/eslint-plugin-eslint-angular": {
"version": "6.7.0-7828326288",
"resolved": "https://registry.npmjs.org/@alfresco/eslint-plugin-eslint-angular/-/eslint-plugin-eslint-angular-6.7.0-7828326288.tgz",
"integrity": "sha512-HUYxMlrccRBlMLZO02J/KsaPoZiuXaGkdcnI2nEvEin2WBQ0y49jFipBG1HjNlN+zNKGZvvn6X/zaDEngbd1uQ=="
"version": "6.7.0-7885225129",
"resolved": "https://registry.npmjs.org/@alfresco/eslint-plugin-eslint-angular/-/eslint-plugin-eslint-angular-6.7.0-7885225129.tgz",
"integrity": "sha512-tvDOLEImC3KmxSpifNPCMl1+bF8Hh+aKpbPAUS/qRyFnvqVRt5g6grkEfuUNsLCqyORoX7TSf8dxLcibG+QEsg=="
},
"node_modules/@alfresco/js-api": {
"version": "7.6.0-7828326288",
"resolved": "https://registry.npmjs.org/@alfresco/js-api/-/js-api-7.6.0-7828326288.tgz",
"integrity": "sha512-HzAFeB0r1LMQKMvqK7NaEm5L+0FoK9eU89TILpyfeGqRJTk+Z+vo2cM5PW6ens2jczpxvK5QSH0MtEJ4jIOF9Q==",
"version": "7.6.0-7885225129",
"resolved": "https://registry.npmjs.org/@alfresco/js-api/-/js-api-7.6.0-7885225129.tgz",
"integrity": "sha512-z+oedLdFe5R0mvHoZmlg/XPlQ1ttOZzbMQb198KCzCeWj0SCnCaTdhv+gBsTn2mZl2qSaaGXjmuVPJ8tLXDidA==",
"dependencies": {
"event-emitter": "^0.3.5",
"superagent": "^8.0.9",

View File

@ -34,11 +34,11 @@
},
"private": true,
"dependencies": {
"@alfresco/adf-content-services": "6.7.0-7828326288",
"@alfresco/adf-core": "6.7.0-7828326288",
"@alfresco/adf-extensions": "6.7.0-7828326288",
"@alfresco/eslint-plugin-eslint-angular": "6.7.0-7828326288",
"@alfresco/js-api": "7.6.0-7828326288",
"@alfresco/adf-content-services": "6.7.0-7885225129",
"@alfresco/adf-core": "6.7.0-7885225129",
"@alfresco/adf-extensions": "6.7.0-7885225129",
"@alfresco/eslint-plugin-eslint-angular": "6.7.0-7885225129",
"@alfresco/js-api": "7.6.0-7885225129",
"@angular/animations": "14.1.3",
"@angular/cdk": "14.1.3",
"@angular/common": "14.1.3",
@ -66,7 +66,7 @@
"zone.js": "0.11.8"
},
"devDependencies": {
"@alfresco/adf-cli": "6.7.0-7828326288",
"@alfresco/adf-cli": "6.7.0-7885225129",
"@angular-devkit/build-angular": "14.2.11",
"@angular-devkit/core": "14.1.2",
"@angular-devkit/schematics": "14.1.2",

View File

@ -11,7 +11,7 @@
</mat-select>
</mat-form-field>
<mat-form-field class="aca-rule-simple-condition__form__comparator-input" [class]="{ 'aca-hidden': isComparatorHidden }" data-automation-id="comparator-form-field">
<mat-form-field class="aca-rule-simple-condition__form__field-input aca-rule-simple-condition__form__comparator-input" [class]="{ 'aca-hidden': isComparatorHidden }" data-automation-id="comparator-form-field">
<mat-select formControlName="comparator" data-automation-id="comparator-select">
<mat-option
*ngFor="let comparator of selectedFieldComparators"
@ -21,7 +21,7 @@
</mat-select>
</mat-form-field>
<mat-form-field class="aca-rule-simple-condition__form__parameter-input" [ngSwitch]="selectedField.type">
<mat-form-field class="aca-rule-simple-condition__form__field-input aca-rule-simple-condition__form__parameter-input" [ngSwitch]="selectedField.type">
<mat-select formControlName="parameter" data-automation-id="simple-condition-value-select" *ngSwitchCase="'mimeType'">
<mat-option *ngFor="let mimeType of mimeTypes"
[value]="mimeType.value">

View File

@ -4,7 +4,7 @@
flex-direction: row;
gap: 8px;
mat-form-field {
.aca-rule-simple-condition__form__field-input {
flex: 2;
font-size: inherit;
}

View File

@ -3,7 +3,7 @@
{{ title | translate }}
</div>
<button mat-icon-button mat-dialog-close class="aca-edit-rule-dialog__header__close" tabindex="-1">
<mat-icon>close</mat-icon>
<mat-icon class="aca-edit-rule-dialog__header__icon">close</mat-icon>
</button>
</div>

View File

@ -20,7 +20,7 @@
}
&__close {
& mat-icon {
& .aca-edit-rule-dialog__header__icon {
font-size: 18px;
}
}

View File

@ -73,6 +73,7 @@
}
}
/* stylelint-disable selector-class-pattern */
&.aca-read-only,
.mat-form-field-disabled {
.mat-form-field-underline,

View File

@ -13,7 +13,7 @@
<span class="aca-rule-list__item__header__title">
{{ 'ACA_FOLDER_RULES.RULE_LIST.INHERITED_RULES' | translate }}
<mat-icon class="aca-rule-list__item__header__title__mat-icon" [matTooltip]="'ACA_FOLDER_RULES.RULE_LIST.INHERITED_RULES_WILL_BE_RUN_FIRST' | translate">
<mat-icon class="aca-rule-list__item__header__title__icon" [matTooltip]="'ACA_FOLDER_RULES.RULE_LIST.INHERITED_RULES_WILL_BE_RUN_FIRST' | translate">
info
</mat-icon>
</span>

View File

@ -35,7 +35,7 @@
justify-content: flex-start;
flex: 1;
&__mat-icon {
&__icon {
transform: scale(0.8);
}
}

View File

@ -12,7 +12,7 @@
<img class="aca-details-breadcrumb-icon" alt="{{ 'APP.INFO_DRAWER.ICON' | translate }}" src="{{ nodeIcon }}">
{{ node.name }} </span>
</div>
<div class="acs-details-buttons">
<div class="aca-details-buttons">
<aca-toolbar [items]="aspectActions" info-drawer-buttons></aca-toolbar>
<button
class="aca-close-details-button"

View File

@ -1,5 +1,5 @@
app-details-manager {
.acs-details-buttons {
.aca-details-buttons {
display: flex;
.aca-close-details-button {
@ -26,21 +26,19 @@ app-details-manager {
margin-top: 40px;
height: calc(100% - 136px);
.mat-tab-body-wrapper {
> div {
height: 100%;
}
.mat-tab-list {
margin-left: 50px;
.mat-tab-labels {
.mat-tab-label {
padding: 0 12px;
min-width: 95px;
letter-spacing: 0.25px;
height: 32px;
}
div[role='tab'] {
&:first-of-type {
margin-left: 50px;
}
padding: 0 12px;
min-width: 95px;
letter-spacing: 0.25px;
height: 32px;
}
}

View File

@ -6,7 +6,7 @@
(click)="searchSubmit(searchTerm)"
[title]="'SEARCH.BUTTON.TOOLTIP' | translate"
>
<mat-icon class="app-search-button-icon" [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
<mat-icon class="app-search-input-control-icon app-search-button-icon" [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
</button>
<mat-form-field class="app-input-form-field" [floatLabel]="'never'">
<input
@ -23,7 +23,7 @@
autocomplete="off"
/>
<div matSuffix class="app-suffix-search-icon-wrapper">
<mat-icon *ngIf="searchTerm.length" (click)="clear()" class="app-clear-icon">clear</mat-icon>
<mat-icon *ngIf="searchTerm.length" (click)="clear()" class="app-search-input-control-icon app-clear-icon">clear</mat-icon>
</div>
</mat-form-field>
</div>

View File

@ -5,7 +5,7 @@ $top-margin: 12px;
margin: 14px 1px;
float: left;
mat-icon {
.app-search-input-control-icon {
font-size: 24px;
cursor: pointer;
}
@ -24,16 +24,13 @@ $top-margin: 12px;
box-sizing: border-box;
margin-bottom: 12px;
/* stylelint-disable-next-line selector-class-pattern */
.mat-form-field-underline {
display: none;
}
.mat-form-field-label-wrapper {
label {
cursor: text;
}
// fixes pointer event on FF
&.app-search-menu-trigger .mat-form-field-label-wrapper {
pointer-events: auto;
}

View File

@ -78,24 +78,26 @@ $top-margin: 12px;
letter-spacing: -0.7px;
margin-bottom: -8px;
.app-search-options-checkbox label {
max-width: 155px;
}
&-checkbox {
padding: 3px 24px 3px 19px;
/* stylelint-disable-next-line selector-class-pattern */
.mat-checkbox-inner-container {
height: 18px;
width: 18px;
}
.mat-checkbox-label {
/* stylelint-disable-next-line no-descending-specificity */
label {
padding: 0 0 0 11px;
overflow: hidden;
text-overflow: ellipsis;
}
}
.app-search-options-checkbox label {
max-width: 155px;
}
}
.app-search-hint {
@ -122,17 +124,17 @@ $top-margin: 12px;
#search-options {
padding-left: 20px;
mat-checkbox {
padding: 3px 20px 3px 0;
.mat-checkbox-label {
padding: 0;
}
}
label {
max-width: 105px;
}
.app-search-options-checkbox {
padding: 3px 20px 3px 0;
label {
padding: 0;
}
}
}
}

View File

@ -45,10 +45,10 @@ aca-search-results {
color: var(--theme-search-chip-icon-color);
}
mat-icon {
color: var(--theme-search-chip-icon-color);
}
.adf-search-filter-chip-icon {
color: var(--theme-search-chip-icon-color);
}
}
.adf-search-filter-placeholder {
color: var(--theme-selected-text-color);

View File

@ -27,7 +27,7 @@
(click)="onSaveGeneralData(profileForm)">{{'APP.EDIT_PROFILE.SAVE' | translate}}</button>
</div>
</div>
<mat-divider class="app-mat-divider" *ngIf="generalSectionDropdown"></mat-divider>
<mat-divider class="app-divider" *ngIf="generalSectionDropdown"></mat-divider>
<div *ngIf="generalSectionDropdown">
<div class="app-general-dropdown">
<div class="app-general-dropdown-details">
@ -96,7 +96,7 @@
(click)="onSaveCompanyData(profileForm)">{{'APP.EDIT_PROFILE.SAVE' | translate}}</button>
</div>
</div>
<mat-divider class="app-mat-divider" *ngIf="contactSectionDropdown"></mat-divider>
<mat-divider class="app-divider" *ngIf="contactSectionDropdown"></mat-divider>
<div *ngIf="contactSectionDropdown">
<div class="app-general-dropdown">
<div class="app-general-dropdown-details">

View File

@ -75,7 +75,7 @@ app-view-profile {
text-align: end;
}
.app-mat-divider {
.app-divider {
border-top-width: 2px;
border-top-color: var(--theme-grey-background-color);
padding-left: -1px;

View File

@ -17,10 +17,6 @@ app-create-from-template-dialog {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.bold {
font-weight: 600;
}
}
&-field {

View File

@ -1,3 +1,4 @@
/* stylelint-disable selector-class-pattern */
@mixin adf-about-theme($theme) {
adf-about {
/* custom ADF About Component Theme */

View File

@ -1,3 +1,4 @@
/* stylelint-disable selector-class-pattern */
@mixin adf-pagination-theme($theme) {
adf-pagination {
&.adf-pagination {

View File

@ -1,3 +1,4 @@
/* stylelint-disable selector-class-pattern */
@mixin ay11-theme() {
.mat-icon-button,
.mat-button,

View File

@ -1,3 +1,4 @@
/* stylelint-disable selector-class-pattern */
@use '@angular/material' as mat;
@import '@alfresco/adf-core/theming';
@import 'custom-theme';

View File

@ -1,4 +1,4 @@
<mat-icon>error</mat-icon>
<mat-icon class="generic-error__icon">error</mat-icon>
<p class="generic-error__title">
{{ text | translate }}
</p>

View File

@ -11,7 +11,7 @@
font-size: 16px;
}
mat-icon {
&__icon {
color: var(--theme-warn-color, #f44336);
font-size: 52px;
height: 52px;