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
@@ -5,12 +5,12 @@
|
||||
</div>
|
||||
|
||||
<div class="aca-page-layout-content">
|
||||
<div class="acs-details-container">
|
||||
<div class="acs-details-title">
|
||||
<div class="acs-details-breadcrumb" role="heading" aria-level="2" *ngIf="node">
|
||||
<span class="acs-details-breadcrumb-library"> {{ node.name }} </span>
|
||||
<div class="aca-details-container">
|
||||
<div class="aca-details-title">
|
||||
<div class="aca-details-breadcrumb" role="heading" aria-level="2" *ngIf="node">
|
||||
<span class="aca-details-breadcrumb-library"> {{ node.name }} </span>
|
||||
-
|
||||
<span class="acs-details-breadcrumb-item">{{ 'APP.INFO_DRAWER.TITLE' | translate }}</span>
|
||||
<span class="aca-details-breadcrumb-item">{{ 'APP.INFO_DRAWER.TITLE' | translate }}</span>
|
||||
</div>
|
||||
<button
|
||||
class="aca-close-details-button"
|
||||
|
||||
@@ -18,7 +18,7 @@ app-details-manager {
|
||||
}
|
||||
}
|
||||
|
||||
.acs-details-container {
|
||||
.aca-details-container {
|
||||
background-color: var(--theme-card-background-color);
|
||||
width: 100%;
|
||||
}
|
||||
@@ -31,27 +31,27 @@ app-details-manager {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mat-tab-labels {
|
||||
mat-tab-header {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.acs-details-title {
|
||||
.aca-details-title {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.acs-details-breadcrumb {
|
||||
.aca-details-breadcrumb {
|
||||
font-size: 18px;
|
||||
margin-left: 20px;
|
||||
|
||||
.acs-details-breadcrumb-library {
|
||||
&-library {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.acs-details-breadcrumb-item {
|
||||
&-item {
|
||||
font-weight: 100;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,14 +17,14 @@
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
aca-locked-by {
|
||||
.aca-locked-by {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
max-width: 100%;
|
||||
padding: 0 10px;
|
||||
padding-right: 10px;
|
||||
|
||||
.locked_by--name {
|
||||
&--name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
</div>
|
||||
|
||||
<div class="aca-page-layout-content">
|
||||
<div class="main-content">
|
||||
<div class="aca-main-content">
|
||||
<adf-document-list
|
||||
#documentList
|
||||
acaDocumentList
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
</div>
|
||||
|
||||
<div class="aca-page-layout-content">
|
||||
<div class="main-content">
|
||||
<div class="aca-main-content">
|
||||
<adf-document-list
|
||||
#documentList
|
||||
acaDocumentList
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
</div>
|
||||
|
||||
<div class="aca-page-layout-content">
|
||||
<div class="main-content" *ngIf="!(showLoader$ | async)">
|
||||
<div class="aca-main-content" *ngIf="!(showLoader$ | async)">
|
||||
<adf-upload-drag-area [rootFolderId]="node?.id" [disabled]="!canUpload" (updateFileVersion)="onUploadNewVersion($event)">
|
||||
<adf-document-list
|
||||
#documentList
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<mat-card *ngIf="node">
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form" autocomplete="off">
|
||||
<mat-form-field floatLabel="auto" data-automation-id="library-name-properties-wrapper">
|
||||
<mat-form-field floatLabel="auto" data-automation-id="library-name-properties-wrapper" class="app-library-metadata-form-field">
|
||||
<input
|
||||
matInput
|
||||
[cdkTrapFocusAutoCapture]="form.enabled"
|
||||
@@ -17,11 +17,11 @@
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field floatLabel="auto" data-automation-id="library-id-properties-wrapper">
|
||||
<mat-form-field floatLabel="auto" data-automation-id="library-id-properties-wrapper" class="app-library-metadata-form-field">
|
||||
<input matInput placeholder="{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}" formControlName="id" />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field floatLabel="auto" data-automation-id="library-visibility-properties-wrapper">
|
||||
<mat-form-field floatLabel="auto" data-automation-id="library-visibility-properties-wrapper" class="app-library-metadata-form-field">
|
||||
<mat-select placeholder="{{ 'LIBRARY.DIALOG.FORM.VISIBILITY' | translate }}" formControlName="visibility">
|
||||
<mat-option [value]="type.value" *ngFor="let type of libraryType">
|
||||
{{ type.label | translate }}
|
||||
@@ -29,7 +29,7 @@
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field floatLabel="auto" data-automation-id="library-description-properties-wrapper">
|
||||
<mat-form-field floatLabel="auto" data-automation-id="library-description-properties-wrapper" class="app-library-metadata-form-field">
|
||||
<textarea
|
||||
matInput
|
||||
placeholder="{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}"
|
||||
|
||||
@@ -1,24 +1,5 @@
|
||||
app-library-metadata-form {
|
||||
.mat-form-field {
|
||||
.app-library-metadata-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mat-form-field-infix {
|
||||
position: relative;
|
||||
width: 180px;
|
||||
|
||||
.mat-form-field-label-wrapper {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
pointer-events: none;
|
||||
|
||||
.mat-form-field-label {
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
</div>
|
||||
|
||||
<div class="aca-page-layout-content">
|
||||
<div class="main-content">
|
||||
<div class="aca-main-content">
|
||||
<adf-document-list
|
||||
#documentList
|
||||
acaDocumentList
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
</div>
|
||||
|
||||
<div class="aca-page-layout-content">
|
||||
<div class="main-content">
|
||||
<div class="aca-main-content">
|
||||
<adf-document-list
|
||||
#documentList
|
||||
acaDocumentList
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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,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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
</div>
|
||||
|
||||
<div class="aca-page-layout-content">
|
||||
<div class="main-content">
|
||||
<div class="aca-main-content">
|
||||
<adf-document-list
|
||||
#documentList
|
||||
acaDocumentList
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
</div>
|
||||
|
||||
<div class="aca-page-layout-content">
|
||||
<div class="main-content">
|
||||
<div class="aca-main-content">
|
||||
<adf-document-list
|
||||
#documentList
|
||||
acaDocumentList
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<h2 mat-dialog-title [innerHTML]="title"></h2>
|
||||
<div mat-dialog-content>
|
||||
<h2 mat-dialog-title [innerHTML]="title" class="app-create-from-template-title"></h2>
|
||||
<div mat-dialog-content class="app-create-from-template-content">
|
||||
<form [formGroup]="form" novalidate>
|
||||
<mat-form-field class="app-create-from-template-field">
|
||||
<input
|
||||
@@ -41,12 +41,12 @@
|
||||
</mat-form-field>
|
||||
</form>
|
||||
</div>
|
||||
<div mat-dialog-actions>
|
||||
<div mat-dialog-actions class="app-create-from-template-footer">
|
||||
<button mat-button mat-dialog-close data-automation-id="create-from-template-dialog-cancel-button">
|
||||
{{ 'NODE_FROM_TEMPLATE.CANCEL' | translate }}
|
||||
</button>
|
||||
<button
|
||||
class="create"
|
||||
class="app-create-from-template-footer-create-button"
|
||||
[disabled]="form.invalid"
|
||||
mat-button
|
||||
(click)="onSubmit()"
|
||||
|
||||
@@ -4,54 +4,56 @@ app-create-from-template-dialog {
|
||||
margin-left: -24px;
|
||||
margin-right: -24px;
|
||||
|
||||
.mat-dialog-title {
|
||||
margin-left: 24px;
|
||||
margin-right: 24px;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: 1.6;
|
||||
letter-spacing: -0.5px;
|
||||
color: var(--theme-text-bold-color);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
.app-create-from-template {
|
||||
&-title {
|
||||
margin-left: 24px;
|
||||
margin-right: 24px;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: 1.6;
|
||||
letter-spacing: -0.5px;
|
||||
color: var(--theme-text-bold-color);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.bold {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.app-create-from-template-field {
|
||||
width: 100%;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-dialog-content {
|
||||
margin: 0 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mat-dialog-actions {
|
||||
padding: 8px 22px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
color: var(--theme-secondary-text-color);
|
||||
|
||||
button {
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
.bold {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.create[disabled] {
|
||||
opacity: 0.6;
|
||||
&-field {
|
||||
width: 100%;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.create:enabled {
|
||||
color: var(--theme-accent-color);
|
||||
&-content {
|
||||
margin: 0 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&-footer {
|
||||
padding: 8px 22px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
color: var(--theme-secondary-text-color);
|
||||
|
||||
button {
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
&-create-button[disabled] {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
&-create-button:enabled {
|
||||
color: var(--theme-accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -19,7 +19,7 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
[dir='rtl'] .mat-icon {
|
||||
[dir='rtl'] mat-icon {
|
||||
transform: scale(-1, 1);
|
||||
}
|
||||
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
.adf-pagination__actualinfo-block {
|
||||
padding-right: 12px;
|
||||
|
||||
.mat-menu-trigger {
|
||||
button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
@import 'variables/variables';
|
||||
@include custom-theme($custom-theme);
|
||||
|
||||
.mat-toolbar {
|
||||
mat-toolbar {
|
||||
color: var(--theme-text-color, rgba(0, 0, 0, 0.54));
|
||||
}
|
||||
|
||||
@@ -48,11 +48,6 @@ mat-toolbar.mat-toolbar.mat-toolbar-single-row {
|
||||
}
|
||||
}
|
||||
|
||||
.mat-chip.mat-standard-chip {
|
||||
background-color: #efefef;
|
||||
color: var(--theme-contrast-gray);
|
||||
}
|
||||
|
||||
.adf-property-field {
|
||||
.adf-textitem-edit-icon.mat-icon {
|
||||
color: var(--theme-contrast-gray);
|
||||
|
||||
Reference in New Issue
Block a user