inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-07-31 17:38:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-6081] Reduce references to internal Angular material CSS classes (#3534)

Browse Source 
* [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
2023-11-24 14:59:57 +01:00
committed by GitHub
parent 7468111d19
commit 7c95b53c8b
82 changed files with 390 additions and 471 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.html
View File

@@ -6,7 +6,7 @@
(click)="searchSubmit(searchTerm)"
[title]="'SEARCH.BUTTON.TOOLTIP' | translate"
>
<mat-icon [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
<mat-icon class="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
@@ -18,6 +18,7 @@
[(ngModel)]="searchTerm"
(ngModelChange)="inputChange($event)"
(keyup.enter)="searchSubmit($event)"
class="app-input-form-field-input"
[placeholder]="'SEARCH.INPUT.PLACEHOLDER' | translate"
autocomplete="off"
/>

14
projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.scss
View File

@@ -5,7 +5,7 @@ $top-margin: 12px;
margin: 14px 1px;
float: left;
.mat-icon {
mat-icon {
font-size: 24px;
cursor: pointer;
}
@@ -24,10 +24,6 @@ $top-margin: 12px;
box-sizing: border-box;
margin-bottom: 12px;
.mat-form-field {
font-size: 16px;
}
.mat-form-field-underline {
display: none;
}
@@ -37,7 +33,7 @@ $top-margin: 12px;
}
// fixes pointer event on FF
&.searchMenuTrigger .mat-form-field-label-wrapper {
&.app-search-menu-trigger .mat-form-field-label-wrapper {
pointer-events: auto;
}
@@ -45,16 +41,16 @@ $top-margin: 12px;
letter-spacing: -0.7px;
width: calc(100% - 56px);
.mat-input-element {
&-input {
letter-spacing: -0.7px;
}
}
.app-search-button.mat-icon-button {
.app-search-button {
top: -2px;
left: -8px;
.mat-icon {
&-icon {
font-size: 24px;
padding-right: 0;
}

10
projects/aca-content/src/lib/components/search/search-input/search-input.component.html
View File

@@ -1,4 +1,4 @@
<div class="app-search-container searchMenuTrigger"
<div class="app-search-container app-search-menu-trigger"
[matMenuTriggerFor]="searchOptionsMenu"
(menuOpened)="onMenuOpened()"
(menuClosed)="syncInputValues()"
@@ -11,6 +11,7 @@
<input
matInput
[attr.aria-label]="'SEARCH.INPUT.ARIA-LABEL' | translate"
class="app-input-form-field-input"
[type]="'text'"
[disabled]="true"
[value]="searchedWord"
@@ -21,8 +22,8 @@
<mat-icon>arrow_drop_down</mat-icon>
</div>
<button mat-icon-button matSuffix class="app-suffix-search-icon-wrapper app-close-icon" (click)="exitSearch()">
<mat-icon>close</mat-icon>
<button mat-icon-button matSuffix class="app-suffix-search-icon-wrapper app-close-button" (click)="exitSearch()">
<mat-icon class="app-close-icon">close</mat-icon>
</button>
</mat-form-field>
</div>
@@ -39,8 +40,9 @@
</app-search-input-control>
<mat-hint *ngIf="hasLibrariesConstraint" class="app-search-hint">{{ 'SEARCH.INPUT.HINT' | translate }}</mat-hint>
<div id="search-options">
<div id="search-options" class="app-search-options">
<mat-checkbox
class="app-search-options-checkbox"
*ngFor="let option of searchOptions"
id="{{ option.id }}"
[(ngModel)]="option.value"

69
projects/aca-content/src/lib/components/search/search-input/search-input.component.scss
View File

@@ -10,10 +10,6 @@ $top-margin: 12px;
max-width: $search-width;
height: $search-height + $top-margin;
&.mat-menu-trigger {
margin: 0;
}
.app-search-button {
width: 32px;
height: 32px;
@@ -23,18 +19,16 @@ $top-margin: 12px;
}
.app-input-form-field {
.app-close-icon {
.app-suffix-search-icon-wrapper.app-close-button {
height: 6px;
&.app-suffix-search-icon-wrapper {
.mat-icon {
font-size: 18px;
line-height: 28px;
}
.app-close-icon {
font-size: 18px;
line-height: 28px;
}
}
.mat-input-element {
&-input {
caret-color: var(--theme-text-color);
&:disabled {
@@ -43,30 +37,19 @@ $top-margin: 12px;
}
}
.mat-focused label.mat-form-field-label {
display: none;
&:focus-within {
label {
display: none;
}
}
}
.app-search-options-menu {
&.mat-menu-panel {
background-color: var(--theme-dialog-background-color);
width: $search-width;
max-width: unset;
border-radius: $search-border-radius;
margin-top: $top-margin;
}
.mat-menu-content:not(:empty) {
padding-top: 0;
padding-bottom: 0;
}
}
mat-checkbox {
.mat-checkbox-frame {
border-color: var(--theme-text-color);
}
background-color: var(--theme-dialog-background-color);
width: $search-width;
max-width: unset;
border-radius: $search-border-radius;
margin-top: 3px;
}
.aca-search-input {
@@ -77,20 +60,25 @@ mat-checkbox {
height: $search-height;
margin-bottom: 0;
padding-bottom: 26px;
.app-search-container {
margin: 0;
}
}
.app-search-control {
margin-top: -$top-margin;
}
#search-options {
.app-search-options {
color: var(--theme-text-color);
border-top: 1px solid var(--theme-divider-color);
padding: 20px 0;
font-size: 16px;
letter-spacing: -0.7px;
margin-bottom: -8px;
mat-checkbox {
&-checkbox {
padding: 3px 24px 3px 19px;
.mat-checkbox-inner-container {
@@ -105,7 +93,7 @@ mat-checkbox {
}
}
.mat-checkbox-layout {
.app-search-options-checkbox label {
max-width: 155px;
}
}
@@ -128,9 +116,7 @@ mat-checkbox {
}
.app-search-options-menu {
&.mat-menu-panel {
width: $search-width-small;
}
width: $search-width-small;
}
#search-options {
@@ -144,7 +130,7 @@ mat-checkbox {
}
}
.mat-checkbox-layout {
label {
max-width: 105px;
}
}
@@ -162,13 +148,10 @@ mat-checkbox {
}
.app-search-options-menu {
&.mat-menu-panel {
width: $search-width-xsmall;
margin-top: 9px;
}
width: $search-width-xsmall;
}
#search-options .mat-checkbox-layout {
#search-options label {
max-width: 180px;
}
}

6
projects/aca-content/src/lib/components/search/search-libraries-results/search-libraries-results.component.html
View File

@@ -6,12 +6,12 @@
</div>
<div class="aca-page-layout-content">
<div class="main-content">
<div class="aca-main-content">
<div class="adf-search-results">
<div class="adf-search-results__content">
<mat-progress-bar *ngIf="isLoading" color="primary" mode="indeterminate"></mat-progress-bar>
<div class="adf-search-results__content-header content" *ngIf="data?.list.entries.length">
<div class="content__side--left">
<div class="adf-search-results__content-header aca-content" *ngIf="data?.list.entries.length">
<div class="aca-content__side--left">
<div class="adf-search-results--info-text" *ngIf="totalResults !== 1">
{{ 'APP.BROWSE.SEARCH_LIBRARIES.FOUND_RESULTS' | translate: { number: totalResults } }}
</div>

6
projects/aca-content/src/lib/components/search/search-libraries-results/search-libraries-results.component.scss
View File

@@ -28,11 +28,7 @@ aca-search-results {
color: rgba(0, 0, 0, 0.54);
}
.text--bold {
font-weight: 600;
}
.content {
.aca-content {
@include flex-row;
flex: unset;

6
projects/aca-content/src/lib/components/search/search-results-row/search-results-row.component.html
View File

@@ -1,12 +1,12 @@
<div class="search-file-name">
<span tabindex="0" role="link" *ngIf="isFile" (click)="showPreview($event)" (keyup.enter)="showPreview($event)" class="link">
<span tabindex="0" role="link" *ngIf="isFile" (click)="showPreview($event)" (keyup.enter)="showPreview($event)" class="aca-link">
{{ name$ | async }}
</span>
<span tabindex="0" role="link" *ngIf="!isFile" (click)="navigate($event)" (keyup.enter)="navigate($event)" class="bold link">
<span tabindex="0" role="link" *ngIf="!isFile" (click)="navigate($event)" (keyup.enter)="navigate($event)" class="bold aca-link">
{{ name$ | async }}
</span>
<span>{{ title$ | async }}</span>
</div>
<div class="result-location">
<div class="aca-result-location">
<aca-location-link [context]="context" [showLocation]="true"></aca-location-link>
</div>

8
projects/aca-content/src/lib/components/search/search-results-row/search-results-row.component.scss
View File

@@ -1,10 +1,10 @@
.aca-search-results-row {
.result-location {
.aca-result-location {
height: 15px;
padding-top: 3px;
}
.link {
.aca-link {
text-decoration: none;
color: var(--theme-text-bold-color);
}
@@ -14,13 +14,13 @@
color: var(--theme-foreground-text-color);
}
.link:hover,
.aca-link:hover,
.aca-location-link .adf-datatable-cell-value:hover {
color: var(--theme-primary-color);
text-decoration: underline;
}
.adf-is-selected .link:not(:hover),
.adf-is-selected .aca-link:not(:hover),
.adf-is-selected .adf-datatable-cell-value:not(:hover) {
color: var(--theme-primary-color);
}

2
projects/aca-content/src/lib/components/search/search-results/search-results.component.html
View File

@@ -6,7 +6,7 @@
</div>
<div class="aca-page-layout-content">
<div class="main-content">
<div class="aca-main-content">
<div class="adf-search-results">
<div class="adf-search-results__content">
<mat-progress-bar *ngIf="isLoading" color="primary" mode="indeterminate" aria-live="polite"> </mat-progress-bar>

18
projects/aca-content/src/lib/components/search/search-results/search-results.component.scss
View File

@@ -30,16 +30,9 @@ aca-search-results {
border-top: 1px solid var(--theme-border-color);
border-bottom: 1px solid var(--theme-border-color);
.adf-search-filter-chip,
.adf-search-filter-chip-tabbed {
&[disabled] {
&.mat-chip {
background-color: var(--theme-disabled-chip-background-color);
color: var(--theme-search-chip-icon-color);
}
}
&.mat-chip {
.aca-content__advanced-filters {
.adf-search-filter-chip,
.adf-search-filter-chip-tabbed {
background-color: var(--theme-dropdown-color);
color: var(--theme-selected-text-color);
@@ -48,6 +41,11 @@ aca-search-results {
background-color: var(--theme-grey-background-hover);
}
&[disabled] {
background-color: var(--theme-disabled-chip-background-color);
color: var(--theme-search-chip-icon-color);
}
mat-icon {
color: var(--theme-search-chip-icon-color);
}