inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
DominikIwanek
2024-02-09 08:22:01 +01:00
committed by GitHub
parent 9343fe65a6
commit 6d93d011c9
137 changed files with 638 additions and 996 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.html
View File

@@ -13,7 +13,7 @@
</adf-aspect-list>
</mat-dialog-content>
<mat-dialog-actions>
<mat-dialog-actions class="adf-aspect-list-dialog">
<div>
<button mat-button (click)="aspectList.reset()" id="aspect-list-dialog-actions-reset"
data-automation-id="aspect-list-dialog-actions-reset">{{

16
lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.scss
View File

@@ -19,21 +19,25 @@
}
&-aspect-list-dialog {
.mat-dialog-actions {
justify-content: space-between;
}
justify-content: space-between;
}
&-aspect-dialog-content {
padding-top: 3px;
.adf-aspect-property-table {
.mat-cell {
.adf-aspect-property-table-cell {
font-size: smaller;
}
.mat-column-name {
width: 30%;
.adf-aspect-property-table-column {
&-name {
width: 30%;
}
&-title {
width: 50%;
}
}
}
}

27
lib/content-services/src/lib/aspect-list/aspect-list.component.html
View File

@@ -1,8 +1,11 @@
<div id="aspect-list-container" class="adf-aspect-list-container" *ngIf="aspects$ | async as aspects; else loading">
<mat-accordion class="adf-accordion-aspect-list">
<mat-expansion-panel *ngFor="let aspect of aspects; let colIndex = index" [id]="'aspect-list-'+getId(aspect)">
<mat-expansion-panel-header [id]="'aspect-list-'+(getId(aspect))+'header'">
<mat-panel-title>
<mat-expansion-panel *ngFor="let aspect of aspects; let colIndex = index"
[id]="'aspect-list-'+getId(aspect)"
class="adf-accordion-aspect-list-expansion-panel">
<mat-expansion-panel-header class='adf-accordion-aspect-list-expansion-panel-header'
[id]="'aspect-list-'+(getId(aspect))+'header'">
<mat-panel-title class="adf-accordion-aspect-list-expansion-panel-header-title">
<mat-checkbox class="adf-aspect-list-check-button" [id]="'aspect-list-'+colIndex+'-check'"
[checked]="nodeAspects?.includes(aspect?.entry?.id)"
(click)="onCheckBoxClick($event)"
@@ -10,8 +13,10 @@
<p class="adf-aspect-list-element-title">{{getTitle(aspect)}}</p>
</mat-checkbox>
</mat-panel-title>
<mat-panel-description [id]="'aspect-list-'+colIndex+'-title'"
[matTooltip]="getTitle(aspect)">
<mat-panel-description
class="adf-accordion-aspect-list-expansion-panel-header-description"
[id]="'aspect-list-'+colIndex+'-title'"
[matTooltip]="getTitle(aspect)">
{{getTitle(aspect)}}
</mat-panel-description>
</mat-expansion-panel-header>
@@ -19,16 +24,16 @@
<table mat-table [dataSource]="aspect?.entry?.properties" *ngIf="aspect?.entry?.properties?.length > 0" class="adf-aspect-property-table" [id]="'aspect-list-'+colIndex+'-properties-table'">
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> {{'ADF-ASPECT-LIST.PROPERTY_NAME' | translate}} </th>
<td mat-cell *matCellDef="let property"> {{property.id}} </td>
<th class="adf-aspect-property-table-column-name" mat-header-cell *matHeaderCellDef> {{'ADF-ASPECT-LIST.PROPERTY_NAME' | translate}} </th>
<td class="adf-aspect-property-table-column-name adf-aspect-property-table-cell" mat-cell *matCellDef="let property"> {{property.id}} </td>
</ng-container>
<ng-container matColumnDef="title">
<th mat-header-cell *matHeaderCellDef> {{'ADF-ASPECT-LIST.DESCRIPTION' | translate}} </th>
<td mat-cell *matCellDef="let property"> {{property.title}} </td>
<th class="adf-aspect-property-table-column-title" mat-header-cell *matHeaderCellDef> {{'ADF-ASPECT-LIST.DESCRIPTION' | translate}} </th>
<td class="adf-aspect-property-table-column-title adf-aspect-property-table-cell" mat-cell *matCellDef="let property"> {{property.title}} </td>
</ng-container>
<ng-container matColumnDef="dataType">
<th mat-header-cell *matHeaderCellDef> {{'ADF-ASPECT-LIST.DATA_TYPE' | translate}} </th>
<td mat-cell *matCellDef="let property"> {{property.dataType}} </td>
<th class="adf-aspect-property-table-column-data-type" mat-header-cell *matHeaderCellDef> {{'ADF-ASPECT-LIST.DATA_TYPE' | translate}} </th>
<td class="adf-aspect-property-table-column-data-type adf-aspect-property-table-cell" mat-cell *matCellDef="let property"> {{property.dataType}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="propertyColumns"></tr>
<tr mat-row *matRowDef="let row; columns: propertyColumns;"></tr>

32
lib/content-services/src/lib/aspect-list/aspect-list.component.scss
View File

@@ -23,20 +23,18 @@
align-items: center;
}
.adf-accordion-aspect-list {
.mat-expansion-panel-spacing {
margin: 0;
}
.adf-accordion-aspect-list-expansion-panel {
margin: 0;
.mat-expansion-panel-header {
&-header {
font-size: smaller;
}
.mat-expansion-panel-header-title {
&-header-title {
flex: 1 1 0;
}
.mat-expansion-panel-header-description {
&-header-description {
justify-content: flex-start;
align-items: center;
flex: 1 1 0;
@@ -50,17 +48,19 @@
&-aspect-property-table {
width: 100%;
.mat-column-name {
width: 15%;
}
.adf-aspect-property-table-column {
&-name {
width: 15%;
}
.mat-column-description {
width: 65%;
}
&-title {
width: 65%;
}
.mat-column-type {
width: 20%;
padding-left: 10px;
&-data-type {
width: 20%;
padding-left: 10px;
}
}
}
}

16
lib/content-services/src/lib/breadcrumb/breadcrumb.component.scss
View File

@@ -23,10 +23,6 @@
height: 0;
overflow: hidden;
margin-top: 35px;
&.mat-select {
width: 0;
}
}
&-trigger {
@@ -100,18 +96,6 @@
font-size: var(--theme-adf-icon-1-font-size);
}
&.mat-primary {
color: var(--theme-primary-color);
}
&.mat-accent {
color: var(--theme-accent-color);
}
&.mat-warn {
color: var(--theme-warn-color);
}
&-anchor {
box-sizing: border-box;
color: inherit;

7
lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.html
View File

@@ -9,15 +9,16 @@
(click)="open()"
[attr.aria-label]="'BREADCRUMB.ARIA-LABEL.DROPDOWN' | translate"
data-automation-id="dropdown-breadcrumb-trigger">
<mat-icon [class.adf-isRoot]="!hasPreviousNodes()">folder</mat-icon>
<mat-icon class="adf-dropdown-breadcrumb-icon" [class.adf-isRoot]="!hasPreviousNodes()">folder</mat-icon>
</button>
<mat-icon class="adf-dropdown-breadcrumb-item-chevron">chevron_right</mat-icon>
<mat-icon class="adf-dropdown-breadcrumb-icon adf-dropdown-breadcrumb-item-chevron">chevron_right</mat-icon>
<div class="adf-dropdown-breadcrumb-path">
<mat-select
#dropdown
*ngIf="hasPreviousNodes()"
class="adf-dropdown-breadcrumb-path-select"
tabindex="-1"
data-automation-id="dropdown-breadcrumb-path"
aria-labelledby="dropdown-breadcrumb-button">
@@ -26,7 +27,7 @@
*ngFor="let node of previousNodes;"
(click)="onRoutePathClick(node, $event)"
(onSelectionChange)="onRouteClick(node)"
class="adf-dropdown-breadcrumb-path-option"
class="adf-dropdown-breadcrumb-path-option adf-dropdown-breadcrumb-path-option-node"
data-automation-class="dropdown-breadcrumb-path-option"
[disabled]="readOnly">
{{ node.name | translate }}

10
lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.scss
View File

@@ -12,7 +12,7 @@ $dropdown-horizontal-offset: 30px;
overflow: hidden;
margin-top: 10px;
.mat-icon {
&-icon {
height: 35px;
}
@@ -49,7 +49,7 @@ $dropdown-horizontal-offset: 30px;
overflow: hidden;
margin-top: 35px;
&.mat-select {
&-select {
width: 0;
}
}
@@ -63,18 +63,18 @@ $dropdown-horizontal-offset: 30px;
color: var(--adf-theme-foreground-text-color);
}
&-dropdown-breadcrumb-path-option.mat-option {
&-dropdown-breadcrumb-path-option.adf-dropdown-breadcrumb-path-option-node {
height: 28px;
line-height: 28px;
padding: 0 12px;
font-size: var(--theme-caption-font-size);
}
&-dropdown-breadcrumb-path-option.mat-option:first-child {
&-dropdown-breadcrumb-path-option.adf-dropdown-breadcrumb-path-option-node:first-child {
padding-top: 4px;
}
&-dropdown-breadcrumb-path-option.mat-option:last-child {
&-dropdown-breadcrumb-path-option.adf-dropdown-breadcrumb-path-option-node:last-child {
padding-bottom: 4px;
}
}

13
lib/content-services/src/lib/category/categories-management/categories-management.component.html
View File

@@ -43,24 +43,25 @@
<p class="adf-existing-categories-label">
{{ existingCategoriesMsg | translate }}
</p>
<mat-selection-list
<mat-list
[disabled]="isCRUDMode"
(selectionChange)="addCategoryToAssign($event)">
<mat-list-option
class="adf-categories-management-list">
<mat-list-item
*ngFor="let category of existingCategories"
class="adf-category"
[value]="category">
(click)='addCategoryToAssign(category)'>
{{ category.name }}
</mat-list-option>
</mat-list-item>
<p *ngIf="!existingCategories?.length && !existingCategoriesLoading"
data-automation-id="no-categories-message">
{{ 'CATEGORIES_MANAGEMENT.NO_EXISTING_CATEGORIES' | translate }}
</p>
</mat-selection-list>
</mat-list>
</ng-container>
<mat-spinner
*ngIf="existingCategoriesLoading"
[diameter]="50"
class="adf-categories-management-spinner"
[attr.aria-label]="'CATEGORIES_MANAGEMENT.LOADING' | translate">
</mat-spinner>
</div>

18
lib/content-services/src/lib/category/categories-management/categories-management.component.scss
View File

@@ -37,26 +37,20 @@
}
.adf-categories-list {
.mat-list-base .mat-list-item,
.mat-list-base .mat-list-option {
.adf-categories-management-list .adf-category {
display: flex;
height: 100%;
overflow-wrap: anywhere;
padding: 5px 0;
font-size: 14px;
&.mat-list-item-disabled {
background-color: inherit;
color: inherit;
&:hover {
cursor: pointer;
background: var(--adf-theme-mat-grey-color-a200);
}
.mat-list-item-content,
.mat-list-item-content-reverse {
& span {
padding: 0;
.mat-pseudo-checkbox {
display: none;
}
}
}
@@ -66,7 +60,7 @@
margin-bottom: 2px;
}
mat-spinner {
.adf-categories-management-spinner {
margin: auto;
}
}

18
lib/content-services/src/lib/category/categories-management/categories-management.component.spec.ts
View File

@@ -19,7 +19,7 @@ import { Category, CategoryPaging, ResultNode, ResultSetPaging } from '@alfresco
import { ComponentFixture, discardPeriodicTasks, fakeAsync, flush, TestBed, tick } from '@angular/core/testing';
import { Validators } from '@angular/forms';
import { MatError } from '@angular/material/form-field';
import { MatListOption, MatSelectionList } from '@angular/material/list';
import { MatList } from '@angular/material/list';
import { By } from '@angular/platform-browser';
import { TranslateModule } from '@ngx-translate/core';
import { of, Subject } from 'rxjs';
@@ -91,8 +91,8 @@ describe('CategoriesManagementComponent', () => {
*
* @returns list of material option element
*/
function getExistingCategoriesList(): MatListOption[] {
return fixture.debugElement.queryAll(By.directive(MatListOption))?.map((debugElem) => debugElem.componentInstance);
function getExistingCategoriesList(): HTMLElement[] {
return fixture.debugElement.queryAll(By.css('.adf-category'))?.map((debugElem) => debugElem.nativeElement);
}
/**
@@ -129,8 +129,8 @@ describe('CategoriesManagementComponent', () => {
*
* @returns material selection list
*/
function getSelectionList(): MatSelectionList {
return fixture.debugElement.query(By.directive(MatSelectionList)).componentInstance;
function getSelectionList(): MatList {
return fixture.debugElement.query(By.directive(MatList)).componentInstance;
}
/**
@@ -159,7 +159,7 @@ describe('CategoriesManagementComponent', () => {
* @returns native element
*/
function getCreateCategoryLabel(): HTMLSpanElement {
return fixture.debugElement.query(By.css('.adf-existing-categories-panel span'))?.nativeElement;
return fixture.debugElement.query(By.css('.adf-create-category-label'))?.nativeElement;
}
/**
@@ -323,7 +323,7 @@ describe('CategoriesManagementComponent', () => {
it('should not display create category label', fakeAsync(() => {
typeCategory('test');
fixture.detectChanges();
expect(getCreateCategoryLabel()).toBeUndefined();
}));
@@ -338,7 +338,7 @@ describe('CategoriesManagementComponent', () => {
typeCategory('test');
const options = getExistingCategoriesList();
// eslint-disable-next-line no-underscore-dangle
options[0]._handleClick();
options[0].click();
expect(component.categories.length).toBe(3);
expect(component.categories[2].name).toBe('testCat');
@@ -352,7 +352,7 @@ describe('CategoriesManagementComponent', () => {
typeCategory('test');
const options = getExistingCategoriesList();
// eslint-disable-next-line no-underscore-dangle
options[0]._handleClick();
options[0].click();
fixture.detectChanges();
const categoriesChangeSpy = spyOn(component.categoriesChange, 'emit').and.callThrough();

7
lib/content-services/src/lib/category/categories-management/categories-management.component.ts
View File

@@ -18,7 +18,6 @@
import { Category } from '@alfresco/js-api';
import { Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
import { MatSelectionListChange } from '@angular/material/list';
import { EMPTY, Observable, Subject, timer } from 'rxjs';
import { debounce, first, map, takeUntil, tap } from 'rxjs/operators';
import { CategoriesManagementMode } from './categories-management-mode';
@@ -229,10 +228,10 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
/**
* Adds existing category to categories list and removes it from existing categories list.
*
* @param change - selection list change containing selected category
* @param category - selection list change containing selected category
*/
addCategoryToAssign(change: MatSelectionListChange) {
const selectedCategory: Category = change.options[0].value;
addCategoryToAssign(category: Category) {
const selectedCategory: Category = category;
this.categories.push(selectedCategory);
this._existingCategories.splice(this._existingCategories.indexOf(selectedCategory), 1);
this.categoryNameControl.updateValueAndValidity();

6
lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.html
View File

@@ -1,5 +1,5 @@
<mat-card *ngIf="node">
<mat-card-content>
<mat-card *ngIf="node" class="adf-content-metadata-card-view">
<mat-card-content class="adf-content-metadata-card-view-content">
<adf-content-metadata
[displayDefaultProperties]="displayDefaultProperties"
[expanded]="expanded"
@@ -14,7 +14,7 @@
[customPanels]="customPanels">
</adf-content-metadata>
</mat-card-content>
<mat-card-footer class="adf-content-metadata-card-footer">
<mat-card-footer class="adf-content-metadata-card-footer adf-content-metadata-card-view-footer">
<div>
<button *ngIf="isEditAspectSupported()"
mat-icon-button

6
lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.scss
View File

@@ -1,13 +1,13 @@
.adf-content-metadata-card {
.mat-card {
.adf-content-metadata-card-view {
padding: 0;
.mat-card-content {
.adf-content-metadata-card-view-content {
margin-bottom: 0;
}
}
&-footer.mat-card-footer {
&-footer.adf-content-metadata-card-view-footer {
margin: 0;
padding: 8px 12px;
border-top: 1px solid var(--adf-theme-foreground-text-color-007);

16
lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html
View File

@@ -5,7 +5,8 @@
[(expanded)]="isGeneralPanelExpanded"
[attr.data-automation-id]="'adf-metadata-group-properties'"
hideToggle>
<mat-expansion-panel-header>
<mat-expansion-panel-header class="adf-metadata-properties-header"
[class.adf-metadata-properties-header-expanded]='isGeneralPanelExpanded'>
<adf-content-metadata-header [title]="'CORE.METADATA.BASIC.HEADER'" [expanded]="isGeneralPanelExpanded">
<button *ngIf="canEditGeneralInfo"
mat-icon-button
@@ -36,6 +37,7 @@
</adf-content-metadata-header>
</mat-expansion-panel-header>
<adf-card-view
class="adf-metadata-properties-expansion-panel"
(keydown)="keyDown($event)"
[properties]="basicProperties$ | async"
[editable]="isEditingModeGeneralInfo"
@@ -48,7 +50,8 @@
<ng-container *ngIf="displayTags">
<mat-expansion-panel hideToggle [(expanded)]="isTagPanelExpanded" class="adf-content-metadata-panel">
<mat-expansion-panel-header>
<mat-expansion-panel-header class="adf-metadata-properties-header"
[class.adf-metadata-properties-header-expanded]='isTagPanelExpanded'>
<adf-content-metadata-header [title]="'METADATA.BASIC.TAGS'" [expanded]="isTagPanelExpanded">
<button *ngIf="canEditTags"
mat-icon-button
@@ -98,7 +101,8 @@
<ng-container *ngIf="displayCategories">
<mat-expansion-panel hideToggle [(expanded)]="isCategoriesPanelExpanded" class="adf-content-metadata-panel">
<mat-expansion-panel-header>
<mat-expansion-panel-header class="adf-metadata-properties-header"
[class.adf-metadata-properties-header-expanded]='isCategoriesPanelExpanded'>
<adf-content-metadata-header [title]="'CATEGORIES_MANAGEMENT.CATEGORIES_TITLE'" [expanded]="isCategoriesPanelExpanded">
<button *ngIf="canEditCategories"
mat-icon-button
@@ -154,7 +158,8 @@
(closed)="customPanel.expanded = false"
class="adf-content-metadata-panel"
hideToggle>
<mat-expansion-panel-header>
<mat-expansion-panel-header class="adf-metadata-properties-header"
[class.adf-metadata-properties-header-expanded]='customPanel.expanded'>
<adf-content-metadata-header class="adf-metadata-custom-panel-title" [title]="customPanel.panelTitle" [expanded]="customPanel.expanded">
</adf-content-metadata-header>
</mat-expansion-panel-header>
@@ -171,7 +176,8 @@
(closed)="group.expanded = false"
class="adf-content-metadata-panel"
hideToggle>
<mat-expansion-panel-header>
<mat-expansion-panel-header class="adf-metadata-properties-header"
[class.adf-metadata-properties-header-expanded]='group.expanded'>
<adf-content-metadata-header [title]="group.title" [expanded]="group.expanded">
<button *ngIf="hasGroupToggleEdit(group)"
mat-icon-button

23
lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss
View File

@@ -9,36 +9,25 @@ $panel-properties-height: 56px !default;
margin: 12px;
.adf-property-list .adf-property .adf-property-field {
.mat-input-element {
.adf-property-value:not(.adf-card-view-selectitem .adf-property-value) {
margin-top: 20px;
}
.mat-form-field-label {
transform: translateY(-1.3437em) scale(1);
label {
font-size: 19px;
line-height: 20px;
}
}
}
mat-expansion-panel-header {
.adf-metadata-properties-header {
height: $panel-properties-height;
padding: 0 12px;
border-radius: 12px 12px 0 0;
&.mat-expanded {
height: $panel-properties-height;
&.adf-metadata-properties-header-expanded {
border-bottom: 1px solid var(--adf-metadata-property-panel-border-color);
}
.mat-content {
display: contents;
margin-right: 0;
}
}
.mat-expansion-panel-content {
.mat-expansion-panel-body {
padding: 0 12px 12px;
}
}
.adf-edit-icon-buttons {

24
lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.scss
View File

@@ -13,12 +13,11 @@ h2.adf-search-results-label {
color: var(--adf-theme-foreground-text-color-087);
}
.adf-toolbar .mat-toolbar {
max-height: 48px;
border-bottom-width: 0;
font-size: var(--theme-body-1-font-size);
&.mat-toolbar-single-row {
.adf-content-node-selector-panel {
.adf-toolbar .adf-toolbar-container.adf-toolbar-container-row {
max-height: 48px;
border-bottom-width: 0;
font-size: var(--theme-body-1-font-size);
height: auto;
}
}
@@ -48,13 +47,8 @@ h2.adf-search-results-label {
}
}
.mat-form-field-underline .mat-form-field-ripple {
height: 1px;
transition: none;
}
.adf-site-dropdown-container {
.mat-form-field {
.adf-sites-dropdown-form-field {
display: block;
margin-bottom: 15px;
}
@@ -64,7 +58,7 @@ h2.adf-search-results-label {
width: 100%;
margin-bottom: 0;
.mat-select-trigger {
.adf-sites-dropdown-select-trigger {
font-size: var(--theme-body-1-font-size);
}
}
@@ -73,7 +67,7 @@ h2.adf-search-results-label {
.adf-dropdown-breadcrumb-trigger {
outline: none;
.mat-icon {
.adf-dropdown-breadcrumb-icon {
color: var(--adf-theme-foreground-base-color-045);
&:hover {
@@ -81,7 +75,7 @@ h2.adf-search-results-label {
}
}
&:focus .mat-icon {
&:focus .adf-dropdown-breadcrumb-icon {
color: var(--theme-primary-color);
}
}

147
lib/content-services/src/lib/content-node-selector/content-node-selector.component.html
View File

@@ -1,77 +1,82 @@
<h1 mat-dialog-title data-automation-id="content-node-selector-title">{{title}}</h1>
<mat-tab-group class="adf-content-node-selector-dialog-content"
mat-align-tabs="start"
(selectedIndexChange)="onTabSelectionChange($event)"
[class.adf-content-node-selector-headless-tabs]="!canPerformLocalUpload()">
<mat-tab label="{{ 'NODE_SELECTOR.REPOSITORY' | translate }}">
<adf-content-node-selector-panel
[currentFolderId]="data?.currentFolderId"
[restrictRootToCurrentFolderId]="data?.restrictRootToCurrentFolderId"
[dropdownHideMyFiles]="data?.dropdownHideMyFiles"
[dropdownSiteList]="data?.dropdownSiteList"
[rowFilter]="data?.rowFilter"
[imageResolver]="data?.imageResolver"
[isSelectionValid]="data?.isSelectionValid"
[breadcrumbTransform]="data?.breadcrumbTransform"
[excludeSiteContent]="data?.excludeSiteContent"
[selectionMode]="data?.selectionMode"
[where]="data?.where"
[showSearch]="data?.showSearch"
[showDropdownSiteList]="data?.showDropdownSiteList"
[showFilesInResult]="data?.showFilesInResult"
[showNodeCounter]="isCounterVisible()"
(currentFolder)="onCurrentFolder($event)"
(folderLoaded)="onFolderLoaded()"
(select)="onSelect($event)"
(showingSearch)="onShowingSearch($event)"
(siteChange)="onSiteChange($event)"
(navigationChange)="onNavigationChange($event)">
</adf-content-node-selector-panel>
</mat-tab>
<mat-tab *ngIf="canPerformLocalUpload()"
[disabled]="isNotAllowedToUpload()">
<div class="adf-content-node-selector-local-upload-container">
<div class="adf-content-node-selector-local-upload-header">
<adf-toolbar>
<adf-toolbar-title>
<adf-dropdown-breadcrumb
class="adf-content-node-selector-content-breadcrumb"
[folderNode]="breadcrumbFolderNode"
[rootId]="data?.currentFolderId"
[readOnly]="true"
data-automation-id="content-node-selector-upload-breadcrumb"
></adf-dropdown-breadcrumb>
<ng-container *ngIf="isCounterVisible()" [adf-node-counter]="getSelectedCount()"></ng-container>
</adf-toolbar-title>
</adf-toolbar>
<ng-template mat-tab-label>
{{ 'NODE_SELECTOR.UPLOAD_FROM_DEVICE' | translate }}
<mat-icon *ngIf="hasUploadError()"
data-automation-id="adf-content-node-selector-disabled-tab-info-icon"
matTooltip="{{ getWarningMessage() | translate }}">info
</mat-icon>
</ng-template>
</div>
<div class="adf-content-node-selector-local-upload-content">
<adf-upload-drag-area [rootFolderId]="currentDirectoryId">
<div [class.adf-upload-dialog-container]="uploadStarted">
<adf-file-uploading-dialog [alwaysVisible]="true"></adf-file-uploading-dialog>
</div>
<adf-empty-list data-automation-id="adf-empty-list" *ngIf="!uploadStarted">
<div class="adf-empty-list_template adf-empty-folder">
<div class="adf-empty-folder-drag-drop">{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.TITLE' | translate }}</div>
<div class="adf-empty-folder-any-files-here-to-add">{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate }}</div>
<img [alt]="'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.TITLE' | translate" class="adf-empty-folder-image"
[src]="emptyFolderImageUrl">
<h1 mat-dialog-title class="adf-content-node-selector-dialog-title" data-automation-id="content-node-selector-title">{{title}}</h1>
<ng-container *ngIf="canPerformLocalUpload(); else contentNodePanel">
<mat-tab-group class="adf-content-node-selector-dialog-content"
mat-align-tabs="start"
(selectedIndexChange)="onTabSelectionChange($event)">
<mat-tab label="{{ 'NODE_SELECTOR.REPOSITORY' | translate }}">
<ng-container *ngTemplateOutlet='contentNodePanel'></ng-container>
</mat-tab>
<mat-tab [disabled]="isNotAllowedToUpload()">
<div class="adf-content-node-selector-local-upload-container">
<div class="adf-content-node-selector-local-upload-header">
<adf-toolbar>
<adf-toolbar-title>
<adf-dropdown-breadcrumb
class="adf-content-node-selector-content-breadcrumb"
[folderNode]="breadcrumbFolderNode"
[rootId]="data?.currentFolderId"
[readOnly]="true"
data-automation-id="content-node-selector-upload-breadcrumb"
></adf-dropdown-breadcrumb>
<ng-container *ngIf="isCounterVisible()" [adf-node-counter]="getSelectedCount()"></ng-container>
</adf-toolbar-title>
</adf-toolbar>
<ng-template mat-tab-label>
{{ 'NODE_SELECTOR.UPLOAD_FROM_DEVICE' | translate }}
<mat-icon *ngIf="hasUploadError()"
data-automation-id="adf-content-node-selector-disabled-tab-info-icon"
matTooltip="{{ getWarningMessage() | translate }}">info
</mat-icon>
</ng-template>
</div>
<div class="adf-content-node-selector-local-upload-content">
<adf-upload-drag-area [rootFolderId]="currentDirectoryId">
<div [class.adf-upload-dialog-container]="uploadStarted">
<adf-file-uploading-dialog [alwaysVisible]="true"></adf-file-uploading-dialog>
</div>
</adf-empty-list>
</adf-upload-drag-area>
<adf-empty-list data-automation-id="adf-empty-list" *ngIf="!uploadStarted">
<div class="adf-empty-list_template adf-empty-folder">
<div class="adf-empty-folder-drag-drop">{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.TITLE' | translate }}</div>
<div class="adf-empty-folder-any-files-here-to-add">{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate }}</div>
<img [alt]="'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.TITLE' | translate" class="adf-empty-folder-image"
[src]="emptyFolderImageUrl">
</div>
</adf-empty-list>
</adf-upload-drag-area>
</div>
</div>
</div>
</mat-tab>
</mat-tab-group>
</mat-tab>
</mat-tab-group>
</ng-container>
<mat-dialog-actions>
<ng-template #contentNodePanel>
<adf-content-node-selector-panel
[currentFolderId]="data?.currentFolderId"
[restrictRootToCurrentFolderId]="data?.restrictRootToCurrentFolderId"
[dropdownHideMyFiles]="data?.dropdownHideMyFiles"
[dropdownSiteList]="data?.dropdownSiteList"
[rowFilter]="data?.rowFilter"
[imageResolver]="data?.imageResolver"
[isSelectionValid]="data?.isSelectionValid"
[breadcrumbTransform]="data?.breadcrumbTransform"
[excludeSiteContent]="data?.excludeSiteContent"
[selectionMode]="data?.selectionMode"
[where]="data?.where"
[showSearch]="data?.showSearch"
[showDropdownSiteList]="data?.showDropdownSiteList"
[showFilesInResult]="data?.showFilesInResult"
[showNodeCounter]="isCounterVisible()"
(currentFolder)="onCurrentFolder($event)"
(folderLoaded)="onFolderLoaded()"
(select)="onSelect($event)"
(showingSearch)="onShowingSearch($event)"
(siteChange)="onSiteChange($event)"
(navigationChange)="onNavigationChange($event)">
</adf-content-node-selector-panel>
</ng-template>
<mat-dialog-actions class="adf-content-node-selector-dialog-actions">
<div>
<ng-container *ngIf="isUploadEnabled()">
<adf-upload-button

35
lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss
View File

@@ -1,10 +1,4 @@
adf-content-node-selector {
.adf-content-node-selector-headless-tabs {
.mat-tab-header {
display: none;
}
}
.adf-upload-dialog {
box-shadow: none;
@@ -46,14 +40,7 @@ adf-content-node-selector {
}
.adf-content-node-selector-dialog {
&-content {
padding-left: 24px;
padding-right: 24px;
}
.mat-dialog-title {
margin-left: 24px;
margin-right: 24px;
.adf-content-node-selector-dialog-title {
font-size: var(--theme-title-font-size);
font-weight: 600;
font-style: normal;
@@ -68,17 +55,7 @@ adf-content-node-selector {
}
}
.mat-dialog-container {
padding-left: 0;
padding-right: 0;
}
.mat-dialog-content {
margin: 0;
overflow: hidden;
}
.mat-dialog-actions {
.adf-content-node-selector-dialog-actions {
padding: 8px;
height: 61px;
background-color: var(--theme-background-color);
@@ -102,10 +79,10 @@ adf-content-node-selector {
}
}
}
}
@media screen and (max-width: 768px) {
.mat-dialog-container {
height: 100vh;
}
@media screen and (max-width: 768px) {
.adf-content-node-selector-dialog {
height: 100vh;
}
}

6
lib/content-services/src/lib/content-node-selector/content-node-selector.component.spec.ts
View File

@@ -428,9 +428,11 @@ describe('ContentNodeSelectorComponent', () => {
it('should tabs be headless when local upload is not enabled', () => {
component.data.showLocalUploadButton = false;
fixture.detectChanges();
const tabGroup = fixture.debugElement.queryAll(By.css('.adf-content-node-selector-headless-tabs'))[0];
const tabGroup = fixture.debugElement.queryAll(By.css('.adf-content-node-selector-dialog-content'))[0];
const nodePanel = fixture.debugElement.queryAll(By.css('.adf-content-node-selector-panel'))[0];
expect(tabGroup).not.toBe(undefined);
expect(tabGroup).toBeUndefined();
expect(nodePanel).not.toBeUndefined();
});
it('should tabs show headers when local upload is enabled', () => {

2
lib/content-services/src/lib/content-node-share/content-node-share.dialog.html
View File

@@ -112,7 +112,7 @@
</form>
<hr class="adf-share-link__separation-line" />
</mat-dialog-content>
<div mat-dialog-actions>
<div class="adf-share-link__actions" mat-dialog-actions>
<button data-automation-id="adf-share-dialog-close" mat-button color="primary" mat-dialog-close>
{{ 'SHARE.CLOSE' | translate }}
</button>

41
lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss
View File

@@ -97,20 +97,14 @@
.adf-full-width {
width: 100%;
background-color: var(--theme-grey-text-background-color);
border-radius: 6px;
padding-top: 8px;
}
.adf-sharable-link {
margin-left: 8px;
}
.mat-form-field-infix {
border-top: unset;
}
.mat-dialog-actions {
.adf-share-link__actions {
justify-content: flex-end;
padding: 0;
margin: 8px 0 0;
@@ -121,37 +115,4 @@
margin-right: 12px;
}
}
.mat-form-field-flex {
align-items: center;
}
.mat-dialog-container {
padding: 0;
}
.mat-form-field-appearance-legacy .mat-form-field-underline {
display: none;
}
.mat-form-field-appearance-legacy .mat-form-field-wrapper {
padding-bottom: 8px;
margin-right: 8px;
margin-left: 8px;
}
@media screen and (max-width: 380px) {
.mat-dialog-container {
padding: 0 15px;
}
.mat-dialog-actions {
margin-bottom: 0;
padding: 2px 0;
}
.mat-form-field-suffix {
padding-left: 8px;
}
}
}

8
lib/content-services/src/lib/content-type/content-type-dialog.component.scss
View File

@@ -1,14 +1,10 @@
.adf {
&-content-type-dialog {
.mat-expansion-panel {
margin-bottom: 10px;
& .adf-content-type-accordion {
margin: 10px;
}
}
&-content-type-accordion {
margin: 10px;
}
&-content-type-dialog-title {
font-size: large;
font-weight: 200;

118
lib/content-services/src/lib/content-user-info/content-user-info.component.html
View File

@@ -8,7 +8,7 @@
<span *ngIf="showName" id="adf-userinfo-ecm-name-display" class="adf-userinfo-name">
{{ecmUser | fullName}}
</span>
<button mat-button [matMenuTriggerFor]="menu" class="adf-userinfo-menu_button"
<button mat-button [matMenuTriggerFor]="menu" class="adf-userinfo-menu_button adf-content-userinfo-button"
data-automation-id="adf-user-profile">
<div class="adf-userinfo-button-profile" id="user-profile">
<div *ngIf="identityUser; else showEcmUserImage" id="identity-user-image">
@@ -38,72 +38,64 @@
<mat-menu #menu="matMenu" id="user-profile-lists" [xPosition]="menuPositionX" [yPosition]="menuPositionY"
[overlapTrigger]="false" class="adf-userinfo-menu">
<mat-tab-group id="tab-group-env" (click)="stopClosing($event)" selectedIndex="0" role="menuitem"
class="adf-userinfo-tab adf-hide-tab">
<mat-tab label="{{ 'USER_PROFILE.TAB.CS' | translate }}" role="dialog"
*ngIf="mode === userInfoMode.CONTENT">
<mat-card class="adf-userinfo-card">
<mat-card-header class="adf-userinfo-card-header"
[style.background-image]="'url(' + ecmBackgroundImage + ')'">
<div *ngIf="ecmUser.avatarId; else initialTemplate"
class="adf-userinfo-profile-container adf-hide-small">
<img class="adf-userinfo-profile-picture" id="ecm-user-detail-image"
alt="ecm-profile-image" [src]="getEcmAvatar(ecmUser.avatarId)"/>
</div>
<ng-template #initialTemplate>
<div
[outerHTML]="ecmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
</ng-template>
<mat-card *ngIf="mode === userInfoMode.CONTENT" class="adf-userinfo-card adf-content-userinfo-card">
<mat-card-header class="adf-userinfo-card-header"
[style.background-image]="'url(' + ecmBackgroundImage + ')'">
<div *ngIf="ecmUser.avatarId; else initialTemplate"
class="adf-userinfo-profile-container adf-hide-small">
<img class="adf-userinfo-profile-picture" id="ecm-user-detail-image"
alt="ecm-profile-image" [src]="getEcmAvatar(ecmUser.avatarId)"/>
</div>
<ng-template #initialTemplate>
<div
[outerHTML]="ecmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
</ng-template>
<div class="mat-title" id="ecm-username">{{ecmUser | fullName}}</div>
</mat-card-header>
<mat-card-content>
<div class="adf-userinfo-supporting-text">
<div class="adf-userinfo-detail">
<h2 id="ecm-full-name"
class="adf-userinfo__detail-title">{{ecmUser | fullName}}</h2>
<span id="ecm-email"> {{ecmUser.email}} </span>
<a href="#/profile">
{{ 'USER_PROFILE.LABELS.MY_PROFILE' | translate }}</a>
</div>
<div class="adf-userinfo-detail">
<div class="mat-title" id="ecm-username">{{ecmUser | fullName}}</div>
</mat-card-header>
<mat-card-content>
<div class="adf-userinfo-supporting-text">
<div class="adf-userinfo-detail">
<h2 id="ecm-full-name"
class="adf-userinfo__detail-title">{{ecmUser | fullName}}</h2>
<span id="ecm-email"> {{ecmUser.email}} </span>
<a href="#/profile">
{{ 'USER_PROFILE.LABELS.MY_PROFILE' | translate }}</a>
</div>
<div class="adf-userinfo-detail">
<span class="adf-userinfo__secondary-info" id="ecm-job-title-label">
{{ 'USER_PROFILE.LABELS.ECM.JOB_TITLE' | translate }}
<span id="ecm-job-title"> {{ ecmUser.jobTitle ? ecmUser.jobTitle : 'N/A' }} </span>
</span>
</div>
</div>
</mat-card-content>
</mat-card>
</mat-tab>
<mat-tab id="identity-panel" role="dialog" *ngIf="mode === userInfoMode.CONTENT_SSO">
<mat-card class="adf-userinfo-card">
<mat-card-header class="adf-userinfo-card-header"
[style.background-image]="'url(' + bpmBackgroundImage + ')'">
<div *ngIf="ecmUser.avatarId; else initialTemplate"
class="adf-userinfo-profile-container adf-hide-small">
<img class="adf-userinfo-profile-picture" id="ecm-user-detail-image"
alt="ecm-profile-image" [src]="getEcmAvatar(ecmUser.avatarId)"/>
</div>
<ng-template #initialTemplate>
<div
[outerHTML]="identityUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
</ng-template>
<div class="mat-title" id="identity-username">{{identityUser | fullName}}</div>
</mat-card-header>
<mat-card-content>
<div class="adf-userinfo-supporting-text">
<div class="adf-userinfo-detail">
<h2 id="identity-full-name"
class="adf-userinfo__detail-title">{{identityUser | fullName}}</h2>
<span id="identity-email"> {{identityUser.email}} </span>
<a href="#/profile">
{{ 'USER_PROFILE.LABELS.MY_PROFILE' | translate }}</a>
</div>
</div>
</mat-card-content>
</mat-card>
</mat-tab>
</mat-tab-group>
</div>
</div>
</mat-card-content>
</mat-card>
<mat-card *ngIf="mode === userInfoMode.CONTENT_SSO" class="adf-userinfo-card adf-content-userinfo-card">
<mat-card-header class="adf-userinfo-card-header"
[style.background-image]="'url(' + bpmBackgroundImage + ')'">
<div *ngIf="ecmUser.avatarId; else initialTemplate"
class="adf-userinfo-profile-container adf-hide-small">
<img class="adf-userinfo-profile-picture" id="ecm-user-detail-image"
alt="ecm-profile-image" [src]="getEcmAvatar(ecmUser.avatarId)"/>
</div>
<ng-template #initialTemplate>
<div
[outerHTML]="identityUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
</ng-template>
<div class="mat-title" id="identity-username">{{identityUser | fullName}}</div>
</mat-card-header>
<mat-card-content>
<div class="adf-userinfo-supporting-text">
<div class="adf-userinfo-detail">
<h2 id="identity-full-name"
class="adf-userinfo__detail-title">{{identityUser | fullName}}</h2>
<span id="identity-email"> {{identityUser.email}} </span>
<a href="#/profile">
{{ 'USER_PROFILE.LABELS.MY_PROFILE' | translate }}</a>
</div>
</div>
</mat-card-content>
</mat-card>
</mat-menu>
</div>

27
lib/content-services/src/lib/content-user-info/content-user-info.component.scss
View File

@@ -49,7 +49,7 @@
display: inline-block;
}
&-userinfo-menu_button.mat-button {
&-userinfo-menu_button.adf-content-userinfo-button {
margin-right: 0;
border-radius: 90%;
padding: 0;
@@ -57,21 +57,6 @@
height: 40px;
}
&-userinfo-tab .mat-tab-header {
align-self: center;
width: 100%;
min-width: 250px;
}
&-userinfo-tab .mat-tab-label {
flex: auto;
font-weight: 500;
font-size: var(--theme-body-1-font-size);
text-transform: uppercase;
line-height: 48px;
text-align: center;
}
&-userinfo-card-header {
align-items: center;
display: flex;
@@ -81,7 +66,7 @@
box-sizing: border-box;
}
&-userinfo-card.mat-card {
&-userinfo-card.adf-content-userinfo-card {
padding: 0;
}
@@ -146,14 +131,10 @@
&-userinfo-detail {
text-align: left;
}
&-hide-tab .mat-tab-label-active {
display: none !important;
}
}
@media only screen and (min-device-width: 480px) {
.mat-menu-panel.adf-userinfo-menu {
.adf-content-userinfo-menu.adf-userinfo-menu {
max-height: 450px;
min-width: 450px;
overflow: auto;
@@ -161,6 +142,6 @@
}
}
.mat-menu-panel.adf-userinfo-menu .mat-menu-content {
.adf-content-userinfo-menu.adf-userinfo-menu > div {
padding: 0;
}

8
lib/content-services/src/lib/content-user-info/content-user-info.component.spec.ts
View File

@@ -217,14 +217,6 @@ describe('ContentUserInfoComponent', () => {
expect(ecmJobTitle.nativeElement.textContent).toContain('N/A');
});
it('should not show the tabs', () => {
const imageButton = element.querySelector<HTMLButtonElement>('[data-automation-id="user-initials-image"]');
imageButton.click();
fixture.detectChanges();
const tabHeader = fixture.debugElement.query(By.css('#tab-group-env'));
expect(tabHeader.classes['adf-hide-tab']).toBeTruthy();
});
it('should display the current user Initials if the user dose not have avatarId', () => {
fixture.detectChanges();
const pipe = new InitialUsernamePipe(new FakeSanitizer());

6
lib/content-services/src/lib/dialogs/confirm.dialog.html
View File

@@ -10,9 +10,9 @@
</mat-dialog-content>
<mat-dialog-actions>
<span class="adf-dialog-spacer" data-automation-id="adf-confirm-dialog-spacer"></span>
<button id="adf-confirm-accept" mat-button color="primary" data-automation-id="adf-confirm-dialog-confirmation"
<button id="adf-confirm-accept" class="adf-confirm-dialog-button" mat-button color="primary" data-automation-id="adf-confirm-dialog-confirmation"
[mat-dialog-close]="true">{{ yesLabel | translate }}</button>
<button id="adf-confirm-all" mat-button *ngIf="thirdOptionLabel" [mat-dialog-close]="thirdOptionLabel" data-automation-id="adf-confirm-dialog-confirm-all">{{ thirdOptionLabel | translate }}</button>
<button id="adf-confirm-cancel" mat-button [mat-dialog-close]="false" data-automation-id="adf-confirm-dialog-reject"
<button id="adf-confirm-all" class="adf-confirm-dialog-button" mat-button *ngIf="thirdOptionLabel" [mat-dialog-close]="thirdOptionLabel" data-automation-id="adf-confirm-dialog-confirm-all">{{ thirdOptionLabel | translate }}</button>
<button id="adf-confirm-cancel" class="adf-confirm-dialog-button" mat-button [mat-dialog-close]="false" data-automation-id="adf-confirm-dialog-reject"
cdkFocusInitial>{{ noLabel | translate }}</button>
</mat-dialog-actions>

6
lib/content-services/src/lib/dialogs/confirm.dialog.scss
View File

@@ -2,6 +2,8 @@
flex: 1 1 auto;
}
.adf-confirm-dialog .mat-dialog-actions .mat-button-wrapper {
text-transform: uppercase;
.adf-confirm-dialog {
& .adf-confirm-dialog-button {
text-transform: uppercase;
}
}

2
lib/content-services/src/lib/dialogs/download-zip/download-zip.dialog.html
View File

@@ -3,7 +3,7 @@
<mat-progress-bar color="primary" mode="indeterminate"></mat-progress-bar>
</div>
<mat-dialog-actions align="end">
<button mat-button color="primary" id="cancel-button" (click)="cancelDownload()">
<button class="adf-download-zip-dialog-button" mat-button color="primary" id="cancel-button" (click)="cancelDownload()">
{{ 'CORE.DIALOG.DOWNLOAD_ZIP.ACTIONS.CANCEL' | translate }}
</button>
</mat-dialog-actions>

2
lib/content-services/src/lib/dialogs/download-zip/download-zip.dialog.scss
View File

@@ -1,3 +1,3 @@
.adf-download-zip-dialog .mat-dialog-actions .mat-button-wrapper {
.adf-download-zip-dialog-button {
text-transform: uppercase;
}

2
lib/content-services/src/lib/dialogs/folder.dialog.html
View File

@@ -1,4 +1,4 @@
<h2 data-automation-id="adf-folder-dialog-title" mat-dialog-title>
<h2 data-automation-id="adf-folder-dialog-title" class="adf-folder-dialog-title" mat-dialog-title>
{{ (editing ? editTitle : createTitle) | translate }}
</h2>

21
lib/content-services/src/lib/dialogs/folder.dialog.scss
View File

@@ -6,21 +6,6 @@
width: 100%;
}
.adf-lock-file-name {
.mat-checkbox-layout {
width: 100%;
}
.mat-checkbox-label {
text-overflow: ellipsis;
overflow: hidden;
}
.mat-checkbox-inner-container {
margin: auto 8px auto 0;
}
}
.adf-dialog-buttons button {
text-transform: uppercase;
}
@@ -34,11 +19,7 @@
}
@media screen and (max-width: 380px) {
.mat-form-field {
font-size: 6px;
}
.mat-dialog-title {
.adf-folder-dialog-title {
margin: 0;
}

11
lib/content-services/src/lib/dialogs/library/library.dialog.html
View File

@@ -2,7 +2,7 @@
<mat-dialog-content>
<form novalidate [formGroup]="form" (submit)="submit()">
<mat-form-field>
<mat-form-field class="adf-library-dialog-form-field">
<input
placeholder="{{ 'LIBRARY.DIALOG.FORM.NAME' | translate }}"
required
@@ -28,7 +28,7 @@
</mat-error>
</mat-form-field>
<mat-form-field>
<mat-form-field class="adf-library-dialog-form-field">
<input
required
placeholder="{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}"
@@ -46,7 +46,7 @@
</mat-error>
</mat-form-field>
<mat-form-field>
<mat-form-field class="adf-library-dialog-form-field">
<textarea
matInput
placeholder="{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}"
@@ -60,12 +60,14 @@
</mat-form-field>
<mat-radio-group
class="adf-library-dialog-radio-group"
[ngModelOptions]="{ standalone: true }"
[(ngModel)]="visibilityOption"
(change)="visibilityChangeHandler($event)"
>
<mat-radio-button
color="primary"
class="adf-library-dialog-radio-group-button"
[disabled]="option.disabled"
*ngFor="let option of visibilityOptions"
[attr.data-automation-id]="option.value"
@@ -79,12 +81,13 @@
</mat-dialog-content>
<mat-dialog-actions class="adf-action-buttons">
<button mat-button mat-dialog-close data-automation-id="cancel-library-id">
<button class="adf-action-button" mat-button mat-dialog-close data-automation-id="cancel-library-id">
{{ 'LIBRARY.DIALOG.CANCEL' | translate }}
</button>
<button
color="primary"
class="adf-action-button"
mat-button
(click)="submit()"
[disabled]="!form.valid || disableCreateButton"

11
lib/content-services/src/lib/dialogs/library/library.dialog.scss
View File

@@ -1,19 +1,16 @@
.adf-library-dialog {
.mat-radio-group {
.adf-library-dialog-radio-group {
display: flex;
flex-direction: column;
margin: 0 0 20px;
}
.mat-radio-group .mat-radio-button {
.adf-library-dialog-radio-group .adf-library-dialog-radio-group-button {
margin: 10px 0;
}
.mat-form-field {
.adf-library-dialog-form-field {
width: 100%;
}
mat-form-field {
padding-top: 20px;
}
@@ -22,7 +19,7 @@
flex-direction: row;
justify-content: flex-end;
.mat-button {
.adf-action-button {
text-transform: uppercase;
}
}

6
lib/content-services/src/lib/new-version-uploader/new-version-uploader.dialog.html
View File

@@ -1,5 +1,5 @@
<h1 mat-dialog-title data-automation-id="new-version-uploader-dialog-title">{{ title | translate }}</h1>
<section mat-dialog-content *ngIf="!data.showVersionsOnly">
<h1 class="adf-new-version-uploader-dialog-title" mat-dialog-title data-automation-id="new-version-uploader-dialog-title">{{ title | translate }}</h1>
<section class="adf-new-version-uploader-dialog-content" mat-dialog-content *ngIf="!data.showVersionsOnly">
<adf-version-comparison id="adf-version-comparison" [newFileVersion]="data.file" [node]="data.node"></adf-version-comparison>
<adf-version-upload
id="adf-version-upload-button"
@@ -27,7 +27,7 @@
</div>
</div>
</section>
<div mat-dialog-actions>
<div class="adf-new-version-uploader-dialog-actions" mat-dialog-actions>
<button mat-button color="primary" [mat-dialog-close]="true">{{ 'ADF-NEW-VERSION-UPLOADER.DIALOG_LIST.CLOSE' | translate }}</button>
</div>
</ng-container>

69
lib/content-services/src/lib/new-version-uploader/new-version-uploader.dialog.scss
View File

@@ -24,45 +24,38 @@
height: 500px;
}
.mat-dialog {
&-title {
flex: 0 0 auto;
font-size: 20px;
font-weight: 600;
font-style: normal;
font-stretch: normal;
line-height: 1.6;
margin: 0;
letter-spacing: -0.5px;
color: var(--adf-theme-foreground-text-color-087);
}
&-content {
flex: 1 1 auto;
position: relative;
overflow-y: auto;
max-height: 100vh;
overflow: hidden;
padding: 2px 26px;
}
&-actions {
/* stylelint-disable-next-line shorthand-property-no-redundant-values */
padding: 8px 8px 24px 8px;
display: flex;
justify-content: flex-end;
color: var(--adf-theme-foreground-text-color-054);
button {
text-transform: uppercase;
font-weight: normal;
}
}
&-title {
flex: 0 0 auto;
font-size: 20px;
font-weight: 600;
font-style: normal;
font-stretch: normal;
line-height: 1.6;
margin: 0;
letter-spacing: -0.5px;
color: var(--adf-theme-foreground-text-color-087);
}
.mat-list-item-content {
padding: 0;
margin: 0 16px;
&-content {
flex: 1 1 auto;
position: relative;
overflow-y: auto;
max-height: 100vh;
overflow: hidden;
padding: 2px 26px;
}
&-actions {
/* stylelint-disable-next-line shorthand-property-no-redundant-values */
padding: 8px 8px 24px 8px;
display: flex;
justify-content: flex-end;
color: var(--adf-theme-foreground-text-color-054);
button {
text-transform: uppercase;
font-weight: normal;
}
}
.adf-version-list-container {
@@ -72,7 +65,7 @@
padding: 0;
}
.mat-list.adf-version-list {
.adf-version-list-element {
overflow: auto;
}
}

10
lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.html
View File

@@ -1,9 +1,9 @@
<h2 mat-dialog-title id="add-permission-dialog-title">
<h2 mat-dialog-title class='adf-add-permission-dialog-title' id="add-permission-dialog-title">
{{ (data?.title ? data?.title : "PERMISSION_MANAGER.ADD-PERMISSION.BASE-DIALOG-TITLE") | translate }}
</h2>
<ng-container *ngIf="!isSearchActive">
<mat-dialog-content>
<mat-dialog-content class="adf-add-permission-dialog-content">
<button mat-button (click)="enableSearch()" class="adf-search-user-button">
{{ "PERMISSION_MANAGER.ADD-PERMISSION.SEARCH" | translate }}
<span class="adf-toolbar--spacer"></span>
@@ -73,7 +73,7 @@
</mat-dialog-content>
<mat-dialog-actions>
<mat-dialog-actions class="adf-add-permission-dialog-actions">
<button mat-button
mat-dialog-close
data-automation-id="add-permission-dialog-close-button">
@@ -91,11 +91,11 @@
</ng-container>
<ng-container *ngIf="isSearchActive">
<mat-dialog-content>
<mat-dialog-content class="adf-add-permission-dialog-content">
<adf-add-permission-panel class="adf-search-container" (select)="onSelect($event)"></adf-add-permission-panel>
</mat-dialog-content>
<mat-dialog-actions>
<mat-dialog-actions class="adf-add-permission-dialog-actions">
<button mat-button
(click)="canCloseDialog()"
data-automation-id="add-permission-dialog-close-button">

13
lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.scss
View File

@@ -1,5 +1,5 @@
.adf-add-permission-dialog {
.mat-dialog-title {
.adf-add-permission-dialog-title {
margin-left: 24px;
margin-right: 24px;
font-size: var(--theme-title-font-size);
@@ -11,12 +11,7 @@
color: var(--adf-theme-foreground-text-color-087);
}
.mat-dialog-container {
padding-left: 0;
padding-right: 0;
}
.mat-dialog-content {
.adf-add-permission-dialog-content {
margin: 0;
overflow: hidden;
flex-grow: 1;
@@ -31,7 +26,7 @@
}
}
.mat-dialog-actions {
.adf-add-permission-dialog-actions {
padding: 0 24px;
background-color: var(--theme-background-color);
display: flex;
@@ -58,7 +53,7 @@
&-search-user-button {
width: 100%;
.mat-button-wrapper {
span {
display: flex;
align-items: center;
}

4
lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.scss
View File

@@ -50,10 +50,6 @@
&-permission-role-column-header {
position: relative;
height: 40px;
.mat-form-field-infix {
border: none;
}
}
&-permission-header {

2
lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.component.scss
View File

@@ -34,7 +34,7 @@
}
}
&-datatable-selected.mat-icon {
&-datatable-selected {
height: 100%;
width: 100%;
margin-left: -2px;

3
lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.html
View File

@@ -2,6 +2,7 @@
<mat-checkbox
*ngFor="let option of options"
[checked]="option.checked"
labelPosition="before"
(keydown.enter)="option.checked = !option.checked"
[attr.data-automation-id]="'checkbox-' + (option.name)"
[attr.aria-label]="option.name | translate"
@@ -9,7 +10,7 @@
class="adf-facet-filter">
<div matTooltip="{{ option.name | translate }}"
matTooltipPosition="right"
class="facet-name">
class="adf-search-check-list-label">
{{ option.name | translate }}
</div>

10
lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.scss
View File

@@ -3,20 +3,14 @@
flex-direction: column;
.adf-facet-filter {
&.mat-checkbox {
display: block;
}
display: block;
.mat-checkbox-label {
.adf-search-check-list-label {
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
}
.mat-checkbox-layout {
width: 100%;
}
.adf-facet-name {
text-overflow: ellipsis;
overflow: hidden;

7
lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.html
View File

@@ -1,18 +1,18 @@
<mat-form-field class="adf-chip-list" appearance="outline">
<mat-chip-list #chipList [attr.aria-label]="'SEARCH.FILTER.ARIA-LABEL.OPTIONS-SELECTION' | translate">
<mat-chip
class="adf-option-chips"
class="adf-option-chips adf-autocomplete-added-option-chips"
*ngFor="let option of selectedOptions"
(removed)="remove(option)">
<span [matTooltip]="'SEARCH.RESULTS.WILL_CONTAIN' | translate:{searchTerm: option.fullPath}"
[matTooltipDisabled]="!option.fullPath" [matTooltipShowDelay]="tooltipShowDelay">
{{ option.value }}
</span>
<button matChipRemove class="adf-option-chips-delete-button" [matTooltipDisabled]="!option.fullPath"
<button matChipRemove class="adf-option-chips-delete-button adf-autocomplete-added-option-chips-delete-button" [matTooltipDisabled]="!option.fullPath"
[matTooltip]="('SEARCH.FILTER.BUTTONS.REMOVE' | translate) + ' \'' + option.fullPath + '\''"
[matTooltipShowDelay]="tooltipShowDelay"
[attr.aria-label]="('SEARCH.FILTER.BUTTONS.REMOVE' | translate) + ' ' + option.value">
<mat-icon class="adf-option-chips-delete-icon">close</mat-icon>
<mat-icon class="adf-option-chips-delete-icon adf-autocomplete-added-option-chips-delete-icon">close</mat-icon>
</button>
</mat-chip>
<input
@@ -37,6 +37,7 @@
[matTooltipDisabled]="!option.fullPath" matTooltipPosition="right"
[attr.data-automation-id]="'option-' + (option.value)"
[matTooltip]="'SEARCH.RESULTS.WILL_CONTAIN' | translate:{searchTerm: option.fullPath || option.value}"
class="adf-search-chip-autocomplete-added-option"
[ngClass]="(option | adfIsIncluded: selectedOptions : compareOption) && 'adf-autocomplete-added-option'">
{{ option.fullPath || option.value }}
</mat-option>

33
lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss
View File

@@ -1,17 +1,14 @@
adf-search-chip-autocomplete-input {
.adf-chip-list {
width: 100%;
/* stylelint-disable-next-line */
.mat-form-field-infix {
border: none;
}
}
.mat-form-field-appearance-outline .mat-form-field-outline {
top: 0;
}
.mat-form-field-infix {
border: none;
}
.mat-chip.adf-option-chips {
.adf-autocomplete-added-option-chips.adf-option-chips {
border: 1px solid var(--theme-text-color);
border-radius: 10px;
background-color: var(--theme-primary-color-default-contrast);
@@ -19,32 +16,20 @@ adf-search-chip-autocomplete-input {
word-break: break-word;
}
.mat-chip-remove.adf-option-chips-delete-button {
.adf-option-chips-delete-button.adf-autocomplete-added-option-chips-delete-button {
font-size: 13px;
height: 13px;
width: 13px;
.adf-option-chips-delete-icon.mat-icon {
.adf-option-chips-delete-icon.adf-autocomplete-added-option-chips-delete-icon {
font-size: 13px;
height: 13px;
width: 13px;
}
}
.mat-chip-list-wrapper {
min-height: 40px;
}
.mat-form-field-wrapper {
padding: 0;
}
}
.mat-tooltip-hide {
display: none;
}
.mat-option.adf-autocomplete-added-option {
.adf-search-chip-autocomplete-added-option.adf-autocomplete-added-option {
background: var(--adf-theme-mat-grey-color-a200);
color: var(--adf-theme-primary-300);
}

4
lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.html
View File

@@ -4,6 +4,7 @@
data-automation-id="reset-filter"
color="primary"
selected
class="adf-search-chip-list-item"
matTooltip="{{ 'SEARCH.FILTER.BUTTONS.CLEAR-ALL.TOOLTIP' | translate }}"
matTooltipPosition="right"
(click)="facetFiltersService.resetAllSelectedBuckets()">
@@ -12,11 +13,12 @@
<mat-chip
data-automation-id="chip-list-entry"
class="adf-search-chip-list-item"
*ngFor="let selection of facetFiltersService.selectedBuckets"
[removable]="true"
(removed)="facetFiltersService.unselectFacetBucket(selection.field, selection.bucket)">
{{ (selection.bucket.display || selection.bucket.label) | translate }}
<mat-icon matChipRemove>cancel</mat-icon>
<mat-icon class="adf-search-chip-list-item-remove" matChipRemove>cancel</mat-icon>
</mat-chip>
</ng-container>
</mat-chip-list>

4
lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.scss
View File

@@ -1,8 +1,8 @@
.mat-chip:focus {
.adf-search-chip-list-item:focus {
color: var(--theme-accent-color-default-contrast);
background-color: var(--theme-accent-color);
.mat-chip-remove {
.adf-search-chip-list-item-remove {
color: var(--theme-accent-color-default-contrast);
opacity: 1;
}

9
lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.html
View File

@@ -2,7 +2,7 @@
<div class="adf-facet-result-filter">
<div class="adf-facet-search-container">
<button mat-icon-button class="adf-facet-search-icon" tabindex="-1">
<mat-icon>search</mat-icon>
<mat-icon class="adf-search-field-icon">search</mat-icon>
</button>
<mat-form-field class="adf-facet-search-field" floatLabel="never">
<input matInput placeholder="{{ 'SEARCH.FILTER.ACTIONS.SEARCH' | translate }}"
@@ -19,9 +19,12 @@
<div class="adf-checklist">
<mat-checkbox *ngFor="let bucket of field.buckets" [checked]="bucket.checked"
[attr.data-automation-id]="'checkbox-'+field.label+'-'+(bucket.display || bucket.label)"
(change)="onToggleBucket($event, field, bucket)">
(change)="onToggleBucket($event, field, bucket)"
class="adf-search-filter-facet-checkbox">
<div matTooltip="{{ bucket.display || bucket.label | translate }} {{ getBucketCountDisplay(bucket) }}"
matTooltipPosition="right" class="adf-facet-label">
matTooltipPosition="right"
class="adf-facet-label"
[class.adf-search-filter-facet-checkbox-checked]='bucket.checked'>
{{ bucket.display || bucket.label | translate }} {{ getBucketCountDisplay(bucket) }}
</div>
</mat-checkbox>

35
lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.scss
View File

@@ -7,26 +7,10 @@
padding: 5px 0;
overflow-y: auto;
.mat-checkbox-label {
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
}
.mat-checkbox-layout {
width: 100%;
}
.adf-facet-label {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.mat-checkbox {
.adf-search-filter-facet-checkbox {
margin: 5px;
&.mat-checkbox-checked .mat-checkbox-label {
.adf-search-filter-facet-checkbox-checked {
font-weight: bold;
}
}
@@ -45,7 +29,7 @@
width: 27px;
margin-top: -4px;
.mat-icon {
.adf-search-field-icon {
font-size: var(--theme-subheading-1-font-size);
}
}
@@ -57,14 +41,6 @@
font-size: var(--theme-body-1-font-size);
line-height: 24px;
letter-spacing: 0.25px;
.mat-form-field-underline {
display: none;
}
.mat-form-field-suffix {
padding-right: 1px;
}
}
}
}
@@ -72,7 +48,7 @@
.adf-facet-buttons {
text-align: right;
.mat-button {
button {
text-transform: uppercase;
}
@@ -81,8 +57,7 @@
}
}
.mat-checkbox-label,
.mat-radio-label {
.adf-facet-label {
color: var(--adf-theme-foreground-text-color-054);
}
}

6
lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip-tabbed/search-facet-chip-tabbed.component.scss
View File

@@ -9,9 +9,3 @@ adf-search-facet-chip-tabbed {
max-width: 500px;
}
}
adf-search-filter-tabbed {
.mat-tab-body-wrapper {
margin-top: 16px;
}
}

2
lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.html
View File

@@ -1,6 +1,6 @@
<mat-chip [attr.data-automation-id]="'search-filter-chip-' + field.label"
disableRipple
class="adf-search-filter-chip"
class="adf-search-filter-chip adf-search-filter-facet-chip"
[class.adf-search-toggle-chip]="(facetField.displayValue$ | async) || menuTrigger.menuOpen"
[disabled]="!isPopulated()"
tabIndex="0"

40
lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss
View File

@@ -2,35 +2,16 @@
.adf-search-filter-chip,
.adf-search-filter-chip-tabbed {
&.mat-chip {
border: 2px solid transparent;
transition: border 500ms ease-in-out;
max-width: 320px;
text-overflow: ellipsis;
overflow: hidden;
background: var(--adf-theme-background-unselected-chip-color);
&:focus {
color: unset;
}
&.mat-standard-chip::after {
background: var(--adf-theme-background-unselected-chip-color);
color: unset;
}
&.mat-chip-list-wrapper {
margin: 4px 6px;
}
}
border: 2px solid transparent;
transition: border 500ms ease-in-out;
max-width: 320px;
text-overflow: ellipsis;
overflow: hidden;
background: var(--adf-theme-background-unselected-chip-color);
&.adf-search-toggle-chip {
background: var(--adf-theme-background-card-color);
border: 2px solid var(--theme-primary-color);
&.mat-chip::after {
background: unset;
}
}
.adf-search-filter-placeholder {
@@ -39,6 +20,11 @@
color: var(--adf-theme-foreground-disabled-text-color);
}
&.adf-search-filter-facet-chip::after {
background: var(--adf-theme-background-unselected-chip-color);
color: unset;
}
.adf-search-filter-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
@@ -50,12 +36,12 @@
font-weight: 500;
}
.mat-icon {
.adf-search-filter-chip-icon {
padding-top: 5px;
padding-left: 5px;
}
&-menu + * .cdk-overlay-pane .mat-menu-panel {
&-menu + * .adf-search-filter-chip-menu-panel {
min-width: 320px;
border-radius: 12px;

4
lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.html
View File

@@ -16,10 +16,10 @@
&nbsp;{{ displayValue | translate }}
</span>
<ng-template #showAny><span class="adf-search-filter-ellipsis adf-filter-value">&nbsp;{{ 'SEARCH.FILTER.ANY' | translate }}</span></ng-template>
<mat-icon>{{ chipIcon }}</mat-icon>
<mat-icon class="adf-search-filter-chip-icon">{{ chipIcon }}</mat-icon>
</mat-chip>
<mat-menu #menu="matMenu" class="adf-search-widget-extra-width" backdropClass="adf-search-filter-chip-menu" [class]="'adf-search-filter-chip-menu-panel-' + category.id" (closed)="onClosed()">
<mat-menu #menu="matMenu" class="adf-search-widget-extra-width" backdropClass="adf-search-filter-chip-menu" [class]="'adf-search-filter-chip-menu-panel adf-search-filter-chip-menu-panel-' + category.id" (closed)="onClosed()">
<div #menuContainer [attr.data-automation-id]="'search-field-' + category.name">
<adf-search-filter-menu-card (click)="$event.stopPropagation()"
(keydown.tab)="$event.stopPropagation();"

2
lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.html
View File

@@ -19,7 +19,7 @@
</button>
<mat-menu #filter="matMenu"
class="adf-filter-menu"
class="adf-filter-menu adf-search-filter-menu"
(closed)="onClosed()">
<div #filterContainer
role="menuitem"

24
lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.scss
View File

@@ -8,19 +8,16 @@
&-active {
color: var(--theme-primary-color);
}
.mat-badge-active {
border: 2px solid var(--adf-theme-background-card-color) !important;
span {
border: 2px solid var(--adf-theme-background-card-color) !important;
width: 10px;
height: 10px;
top: -3px !important;
right: -6px !important;
}
}
}
.mat-badge-content {
width: 10px;
height: 10px;
top: -3px !important;
right: -6px !important;
}
}
&-container {
@@ -61,7 +58,10 @@
}
}
.mat-menu-panel.adf-filter-menu .mat-menu-content {
.adf-search-filter-menu.adf-filter-menu {
min-width: 260px;
padding: 0;
> div:first-child {
padding: 0;
}
}

6
lib/content-services/src/lib/search/components/search-filter-tabbed/search-filter-tabbed.component.html
View File

@@ -1,5 +1,7 @@
<mat-tab-group>
<mat-tab *ngFor="let tabContent of tabsContents" label="{{tabContent.name | translate}}">
<mat-tab-group (selectedIndexChange)="onTabIndexChanged($event)">
<mat-tab *ngFor="let tabContent of tabsContents; let i = index"
[labelClass]='selectedIndex === i ? "adf-search-tab-label-active" : ""'
label="{{tabContent.name | translate}}">
<ng-container *ngTemplateOutlet="tabContent.templateRef"></ng-container>
</mat-tab>
</mat-tab-group>

19
lib/content-services/src/lib/search/components/search-filter-tabbed/search-filter-tabbed.component.scss
View File

@@ -1,20 +1,5 @@
adf-search-filter-tabbed {
.mat-tab-label {
flex: 1;
&.mat-tab-label-active {
border-bottom: 2px solid var(--theme-primary-color);
}
}
// The important tag is used here as a workaround for a bug in angular material, when MatTabs are used in conjunction with MatMenu
// https://github.com/angular/components/issues/27426
.mat-tab-body.mat-tab-body-active .mat-tab-body-content {
display: block;
visibility: visible !important;
}
.mat-ink-bar {
display: none;
.adf-search-tab-label-active {
border-bottom: 2px solid var(--theme-primary-color);
}
}

6
lib/content-services/src/lib/search/components/search-filter-tabbed/search-filter-tabbed.component.ts
View File

@@ -27,4 +27,10 @@ import { SearchFilterTabDirective } from './search-filter-tab.directive';
export class SearchFilterTabbedComponent {
@ContentChildren(SearchFilterTabDirective)
tabsContents: QueryList<SearchFilterTabDirective>;
selectedIndex: number = 0;
onTabIndexChanged(index: number): void {
this.selectedIndex = index;
}
}

6
lib/content-services/src/lib/search/components/search-filter/search-filter.component.html
View File

@@ -13,7 +13,7 @@
[attr.data-automation-id]="'expansion-panel-'+category.name"
[(expanded)]="category.expanded">
<mat-expansion-panel-header>
<mat-panel-title>
<mat-panel-title class="adf-search-filter-header-title">
{{ category.name | translate }}
</mat-panel-title>
</mat-expansion-panel-header>
@@ -25,7 +25,7 @@
<ng-container *ngIf="facetFiltersService.tabbedFacet && showContextFacets">
<mat-expansion-panel [attr.data-automation-id]="'expansion-panel-'+facetFiltersService.tabbedFacet.label" [expanded]="true">
<mat-expansion-panel-header>
<mat-panel-title>{{ facetFiltersService.tabbedFacet.label | translate }}</mat-panel-title>
<mat-panel-title class="adf-search-filter-header-title">{{ facetFiltersService.tabbedFacet.label | translate }}</mat-panel-title>
</mat-expansion-panel-header>
<adf-search-facet-tabbed-content
[tabbedFacet]="facetFiltersService.tabbedFacet"
@@ -38,7 +38,7 @@
<mat-expansion-panel [attr.data-automation-id]="'expansion-panel-'+field.label" *ngFor="let field of facetFiltersService.responseFacets"
[expanded]="shouldExpand(field)">
<mat-expansion-panel-header>
<mat-panel-title>{{ field.label | translate }}</mat-panel-title>
<mat-panel-title class="adf-search-filter-header-title">{{ field.label | translate }}</mat-panel-title>
</mat-expansion-panel-header>
<adf-search-facet-field [field]="field"></adf-search-facet-field>

5
lib/content-services/src/lib/search/components/search-filter/search-filter.component.scss
View File

@@ -1,11 +1,10 @@
.adf-search-filter {
.mat-expansion-panel-header-title {
.adf-search-filter-header-title {
font-size: var(--theme-body-1-font-size);
color: var(--adf-theme-foreground-text-color-087);
}
.mat-checkbox-label,
.mat-radio-label {
.adf-search-check-list-label {
color: var(--adf-theme-foreground-text-color-054);
}
}

6
lib/content-services/src/lib/search/components/search-form/search-form.component.html
View File

@@ -1,7 +1,7 @@
<ng-container *ngIf="queryBuilder.searchForms | async as forms">
<ng-container *ngIf="forms.length === 1">
<button class="adf-search-form"
<button class="adf-search-form adf-search-form-button"
disableRipple mat-button
[title]="getSelected(forms) | translate"
[attr.aria-label]="getSelected(forms) | translate">
@@ -12,7 +12,7 @@
</ng-container>
<ng-container *ngIf="forms.length > 1">
<button class="adf-search-form"
<button class="adf-search-form adf-search-form-button"
[matMenuTriggerFor]="menu"
#menuTrigger="matMenuTrigger"
disableRipple
@@ -28,7 +28,7 @@
<mat-icon [class.adf-search-form-icon-selected]="menuTrigger.menuOpen" class="adf-search-form-icon">expand_more</mat-icon>
</button>
<mat-menu #menu="matMenu" backdropClass="adf-search-form-menu">
<mat-menu #menu="matMenu" class="adf-search-form-menu">
<button *ngFor="let form of forms"
mat-menu-item
tabindex="0"

16
lib/content-services/src/lib/search/components/search-form/search-form.component.scss
View File

@@ -1,14 +1,14 @@
@use '@angular/material' as mat;
.adf-search-form {
&.mat-button {
&.adf-search-form-button {
height: 35px;
max-width: 190px;
min-width: 190px;
align-content: center;
overflow: hidden;
.mat-button-wrapper {
> span:first-child {
display: flex;
align-items: center;
}
@@ -35,14 +35,14 @@
&-icon-selected {
border-color: var(--theme-accent-color);
}
}
&-menu + * .mat-menu-panel {
@include mat.elevation(2);
.adf-search-form-menu {
@include mat.elevation(2);
border-radius: 6px;
border-radius: 6px;
.mat-menu-content {
padding: 0;
}
> div:first-child {
padding: 0;
}
}

1
lib/content-services/src/lib/search/components/search-properties/search-properties.component.scss
View File

@@ -1,3 +1,4 @@
/* stylelint-disable selector-class-pattern */
adf-search-properties {
.adf-search-properties-file-size-label {
display: block;

3
lib/content-services/src/lib/search/components/search-radio/search-radio.component.html
View File

@@ -1,4 +1,5 @@
<mat-radio-group
class="adf-search-radio-group"
[(ngModel)]="value"
(change)="changeHandler($event)">
<mat-radio-button [attr.data-automation-id]="'search-radio-'+(option.name | translate)"
@@ -8,7 +9,7 @@
<div
matTooltip="{{ option.name | translate }}"
matTooltipPosition="right"
class="filter-label">
class="adf-filter-label">
{{ option.name | translate }}
</div>
</mat-radio-button>

16
lib/content-services/src/lib/search/components/search-radio/search-radio.component.scss
View File

@@ -1,23 +1,11 @@
.adf-search-radio {
.mat-radio-group {
.adf-search-radio-group {
display: flex;
flex-direction: column;
}
.mat-radio-button {
margin: 5px;
}
.adf-facet-filter {
.mat-radio-label-content {
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
}
.mat-radio-label {
width: 100%;
}
margin: 5px;
.adf-filter-label {
text-overflow: ellipsis;

1
lib/content-services/src/lib/search/components/search-slider/search-slider.component.html
View File

@@ -5,6 +5,7 @@
[step]="step"
[thumbLabel]="thumbLabel"
(change)="onChangedHandler($event)"
class="adf-search-slider"
data-automation-id="slider-range">
</mat-slider>

4
lib/content-services/src/lib/search/components/search-slider/search-slider.component.scss
View File

@@ -1,5 +1,3 @@
.adf-search-slider {
.mat-slider {
width: 100%;
}
width: 100%;
}

2
lib/content-services/src/lib/search/components/search-sorting-picker/search-sorting-picker.component.scss
View File

@@ -1,5 +1,5 @@
.adf-search-sorting-picker {
.mat-icon-button {
.adf-sorting-picker-button {
color: var(--adf-theme-foreground-text-color-054);
}
}

2
lib/content-services/src/lib/search/components/search-text/search-text.component.html
View File

@@ -1,4 +1,4 @@
<mat-form-field>
<mat-form-field class="adf-search-text-form-field">
<input
matInput
placeholder="{{ settings?.placeholder | translate }}"

2
lib/content-services/src/lib/search/components/search-text/search-text.component.scss
View File

@@ -1,5 +1,5 @@
.adf-search-text {
.mat-form-field {
.adf-search-text-form-field {
width: 100%;
max-width: 168px;
}

5
lib/content-services/src/lib/site-dropdown/sites-dropdown.component.html
View File

@@ -1,5 +1,5 @@
<div id="site-dropdown-container" class="adf-site-dropdown-container">
<mat-form-field>
<mat-form-field class="adf-sites-dropdown-form-field">
<mat-label>{{ 'NODE_SELECTOR.LOCATION' | translate }}</mat-label>
<mat-select
adf-infinite-select-scroll
@@ -12,6 +12,9 @@
floatPlaceholder="never"
[(value)]="selected"
(selectionChange)="selectedSite($event)">
<mat-select-trigger class="adf-sites-dropdown-select-trigger">
{{ selected?.entry.title | translate}}
</mat-select-trigger>
<mat-option *ngFor="let site of siteList?.list.entries;" [value]="site">
{{ site.entry.title | translate}}
</mat-option>

7
lib/content-services/src/lib/site-dropdown/sites-dropdown.component.scss
View File

@@ -1,7 +0,0 @@
.adf-sites-dropdown {
&.adf-full-width {
.mat-form-field {
width: 100%;
}
}
}

1
lib/content-services/src/lib/site-dropdown/sites-dropdown.component.ts
View File

@@ -33,7 +33,6 @@ export enum Relations {
@Component({
selector: 'adf-sites-dropdown',
styleUrls: ['./sites-dropdown.component.scss'],
templateUrl: './sites-dropdown.component.html',
encapsulation: ViewEncapsulation.None,
host: { class: 'adf-sites-dropdown' }

4
lib/content-services/src/lib/social/rating.component.scss
View File

@@ -23,10 +23,6 @@ $adf-average-star-color: #808080;
cursor: pointer;
width: 25px;
.mat-list-item-content {
padding: 0 !important;
}
&:hover {
transform: rotate(13deg) scale(1.2);
}

2
lib/content-services/src/lib/tag/tag-list.component.html
View File

@@ -1,6 +1,6 @@
<mat-chip-list class="adf-tag-chips-list">
<div class="adf-list-tag" *ngFor="let currentEntry of tagsEntries; let idx = index">
<mat-chip>
<mat-chip class="adf-tag-list-chip">
<span id="tag_name_{{idx}}">{{currentEntry.entry.tag}}</span>
</mat-chip>
</div>

6
lib/content-services/src/lib/tag/tag-list.component.scss
View File

@@ -12,13 +12,9 @@
display: block;
font-size: var(--theme-subheading-2-font-size);
.mat-chip {
.adf-tag-list-chip {
color: var(--theme-primary-color-default-contrast);
background-color: var(--theme-primary-color);
.mat-icon {
color: var(--theme-primary-color-default-contrast);
}
}
}
}

12
lib/content-services/src/lib/tag/tags-creator/tags-creator.component.html
View File

@@ -47,20 +47,20 @@
{{ (isOnlyCreateMode() ? 'TAG.TAGS_CREATOR.EXISTING_TAGS' : 'TAG.TAGS_CREATOR.EXISTING_TAGS_SELECTION') | translate }}
</p>
<div class="adf-tags-list">
<mat-selection-list
<mat-list
*ngIf="!spinnerVisible && existingTags"
(selectionChange)="addExistingTagToTagsToAssign($event)"
[disabled]="isOnlyCreateMode()">
<mat-list-option
<mat-list-item
*ngFor="let tagRow of existingTags"
class="adf-tag"
[value]="tagRow">
(click)='addExistingTagToTagsToAssign(tagRow)'>
{{ tagRow.entry.tag }}
</mat-list-option>
</mat-list-item>
<p *ngIf="!existingTags?.length">{{ 'TAG.TAGS_CREATOR.NO_EXISTING_TAGS' | translate }}</p>
</mat-selection-list>
</mat-list>
<mat-spinner
*ngIf="spinnerVisible"
class="adf-tags-creator-spinner"
[diameter]="50"
[attr.aria-label]="'TAG.TAGS_CREATOR.TAGS_LOADING' | translate">
</mat-spinner>

33
lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss
View File

@@ -94,38 +94,25 @@ adf-tags-creator {
height: auto;
width: unset;
&:hover {
cursor: pointer;
background: var(--adf-theme-mat-grey-color-a200);
}
& span {
padding: 0;
}
& + .adf-tag {
margin-top: -10px;
}
.mat-list-item-content-reverse {
padding: 0;
.mat-pseudo-checkbox {
display: none;
}
}
}
mat-spinner {
.adf-tags-creator-spinner {
margin: auto;
overflow: unset;
min-height: 62px;
}
.mat-list-item-disabled {
background-color: inherit;
color: inherit;
}
}
}
mat-dialog-actions {
margin-right: -24px;
background-color: inherit;
.adf-save-button {
margin-right: 24px;
}
}

52
lib/content-services/src/lib/tag/tags-creator/tags-creator.component.spec.ts
View File

@@ -30,7 +30,7 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { EMPTY, of, throwError } from 'rxjs';
import { DebugElement } from '@angular/core';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { MatListModule, MatSelectionList, MatSelectionListChange } from '@angular/material/list';
import { MatListModule } from '@angular/material/list';
describe('TagsCreatorComponent', () => {
let fixture: ComponentFixture<TagsCreatorComponent>;
@@ -159,15 +159,6 @@ describe('TagsCreatorComponent', () => {
fixture.detectChanges();
}
/**
* Find the selection list
*
* @returns material component
*/
function findSelectionList(): MatSelectionList {
return fixture.debugElement.query(By.directive(MatSelectionList)).componentInstance;
}
/**
* Get the existing tags label
*
@@ -513,8 +504,8 @@ describe('TagsCreatorComponent', () => {
* @returns list of tags
*/
function getExistingTags(): string[] {
const tagElements = fixture.debugElement.queryAll(By.css(`.adf-existing-tags-panel .adf-tag .mat-list-text`));
return tagElements.map(el => el.nativeElement.firstChild.nodeValue.trim());
const tagElements = fixture.debugElement.queryAll(By.css(`.adf-existing-tags-panel .adf-tag`));
return tagElements.map(el => el.nativeElement.textContent.trim());
}
it('should call findTagByName on tagService using name set in input', fakeAsync(() => {
@@ -673,38 +664,12 @@ describe('TagsCreatorComponent', () => {
it('should selection be disabled if mode is Create', fakeAsync(() => {
component.mode = TagsCreatorMode.CREATE;
spyOn(tagService, 'searchTags').and.returnValue(
of({
list: {
entries: [
{ entry: { tag: 'tag' } as any }
],
pagination: {}
}
})
);
typeTag('Tag');
expect(findSelectionList().disabled).toBeTrue();
expect(component.isOnlyCreateMode()).toBeTrue();
}));
it('should selection be enabled if mode is Create And Assign', fakeAsync(() => {
component.mode = TagsCreatorMode.CREATE_AND_ASSIGN;
spyOn(tagService, 'searchTags').and.returnValue(
of({
list: {
entries: [
{ entry: { tag: 'tag' } as any }
],
pagination: {}
}
})
);
typeTag('Tag');
expect(findSelectionList().disabled).toBeFalse();
expect(component.isOnlyCreateMode()).toBeFalse();
}));
it('should select existing tag when selectionChange event emits', fakeAsync(() => {
@@ -724,11 +689,8 @@ describe('TagsCreatorComponent', () => {
);
typeTag('Tag');
findSelectionList().selectionChange.emit({
options: [{
value: selectedTag
}]
} as MatSelectionListChange);
component.addExistingTagToTagsToAssign(selectedTag);
fixture.detectChanges();
expect(getAddedTags()).toEqual([selectedTag.entry.tag]);

6
lib/content-services/src/lib/tag/tags-creator/tags-creator.component.ts
View File

@@ -33,7 +33,6 @@ import { debounce, distinctUntilChanged, finalize, first, map, takeUntil, tap }
import { EMPTY, forkJoin, Observable, Subject, timer } from 'rxjs';
import { NotificationService } from '@alfresco/adf-core';
import { TagsCreatorMode } from './tags-creator-mode';
import { MatSelectionListChange } from '@angular/material/list';
import { TagService } from '../services/tag.service';
interface TagNameControlErrors {
@@ -278,10 +277,9 @@ export class TagsCreatorComponent implements OnInit, OnDestroy {
/**
* Called when user selects any tag from list of existing tags. It moves tag from existing tags list to top list.
*
* @param change changes
* @param selectedTag changes
*/
addExistingTagToTagsToAssign(change: MatSelectionListChange): void {
const selectedTag: TagEntry = change.options[0].value;
addExistingTagToTagsToAssign(selectedTag: TagEntry): void {
this.tags.push(selectedTag.entry.tag);
this.removeTagFromArray(this.existingTags, selectedTag);
this.tagNameControl.updateValueAndValidity();

4
lib/content-services/src/lib/tree-view/components/tree-view.component.html
View File

@@ -1,11 +1,11 @@
<mat-tree class="adf-tree-view-main" [dataSource]="dataSource"
[treeControl]="treeControl" *ngIf="nodeId; else missingNodeId">
<mat-tree-node class="adf-tree-view-node"
<mat-tree-node class="adf-tree-view adf-tree-view-node"
*matTreeNodeDef="let treeNode" id="{{treeNode.name + '-tree-node'}}"
matTreeNodePadding [matTreeNodePaddingIndent]="15">
{{treeNode.name}}
</mat-tree-node>
<mat-tree-node class="adf-tree-view-node"
<mat-tree-node class="adf-tree-view adf-tree-view-node"
id="{{treeNode.name + '-tree-child-node'}}" *matTreeNodeDef="let treeNode; when: hasChild"
matTreeNodePadding [matTreeNodePaddingIndent]="15">
<button matTreeNodeToggle id="{{'button-'+treeNode.name}}" (click)="onNodeClicked(treeNode.node)"

2
lib/content-services/src/lib/tree-view/components/tree-view.component.scss
View File

@@ -3,7 +3,7 @@
color: #d9e022;
}
&-tree-view-node.mat-tree-node {
&-tree-view-node.adf-tree-view {
min-height: 40px;
font-size: var(--theme-caption-font-size);
align-items: baseline;

10
lib/content-services/src/lib/version-manager/version-list.component.html
View File

@@ -1,12 +1,12 @@
<mat-progress-bar *ngIf="isLoading" data-automation-id="version-history-loading-bar" mode="indeterminate" color="accent"></mat-progress-bar>
<mat-list class="adf-version-list" [hidden]="isLoading">
<mat-list class="adf-version-list adf-version-list-element" [hidden]="isLoading">
<cdk-virtual-scroll-viewport #viewport itemSize="88" class="adf-version-list-viewport">
<mat-list-item *cdkVirtualFor="let version of versionsDataSource; let idx = index; let latestVersion = first">
<mat-list-item class="adf-version-list-item" *cdkVirtualFor="let version of versionsDataSource; let idx = index; let latestVersion = first">
<mat-icon mat-list-icon>insert_drive_file</mat-icon>
<p mat-line class="adf-version-list-item-name" [id]="'adf-version-list-item-name-' + version.entry.id" >{{version.entry.name}}</p>
<p mat-line class="adf-version-list-item-line adf-version-list-item-name" [id]="'adf-version-list-item-name-' + version.entry.id" >{{version.entry.name}}</p>
<p mat-line>
<span class="adf-version-list-item-version" [id]="'adf-version-list-item-version-' + version.entry.id" >{{version.entry.id}}</span> -
<span class="adf-version-list-item-date" [id]="'adf-version-list-item-date-' + version.entry.id" >{{version.entry.modifiedAt | date}}</span>
<span class="adf-version-list-item-line adf-version-list-item-version" [id]="'adf-version-list-item-version-' + version.entry.id" >{{version.entry.id}}</span> -
<span class="adf-version-list-item-line adf-version-list-item-date" [id]="'adf-version-list-item-date-' + version.entry.id" >{{version.entry.modifiedAt | date}}</span>
</p>
<p mat-line [id]="'adf-version-list-item-comment-'+ version.entry.id" class="adf-version-list-item-comment"
*ngIf="showComments">{{version.entry.versionComment}}</p>

2
lib/content-services/src/lib/version-manager/version-list.component.scss
View File

@@ -3,7 +3,7 @@
height: 100%;
}
.mat-list-item-content {
.adf-version-list-item {
border-bottom: 1px solid #d8d8d8;
}

7
lib/content-services/src/lib/version-manager/version-manager.component.scss
View File

@@ -1,15 +1,12 @@
adf-version-manager {
.mat-list .mat-3-line {
.adf-version-list .adf-version-list-item {
height: auto !important;
width: 100% !important;
}
.mat-list-item-content {
padding: 16px 0 !important;
}
}
.adf-version-list-item-comment.mat-line {
.adf-version-list-item-comment.adf-version-list-item-line {
height: 100%;
word-break: break-all;
white-space: unset !important;

4
lib/core/src/lib/about/about-license-list/about-license-list.component.html
View File

@@ -3,7 +3,9 @@
<mat-header-cell *matHeaderCellDef>
{{ column.header | translate }}
</mat-header-cell>
<mat-cell *matCellDef="let row" [innerHTML]="column.cell(row)"></mat-cell>
<mat-cell *matCellDef="let row"
class="adf-about-license-cell"
[innerHTML]="column.cell(row)"></mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

2
lib/core/src/lib/about/about-license-list/about-license-list.component.scss
View File

@@ -1,4 +1,4 @@
mat-cell {
.adf-about-license-cell {
white-space: pre-line;
line-height: 30px;
}

1
lib/core/src/lib/form/components/form-renderer.component.scss
View File

@@ -1,3 +1,4 @@
/* stylelint-disable selector-class-pattern */
@import 'styles/flex';
.adf-hidden {

1
lib/core/src/lib/form/components/inplace-form-input/inplace-form-input.component.scss
View File

@@ -1,3 +1,4 @@
/* stylelint-disable selector-class-pattern */
$adf-inplace-input-padding: 7px;
.adf-inplace-input-container {

1
lib/core/src/lib/form/components/widgets/amount/amount.widget.scss
View File

@@ -1,3 +1,4 @@
/* stylelint-disable selector-class-pattern */
.adf {
&-amount-widget {
width: 100%;

1
lib/core/src/lib/form/components/widgets/date-time/date-time.widget.scss
View File

@@ -1,3 +1,4 @@
/* stylelint-disable selector-class-pattern */
.adf {
&-date-time-widget {
.mat-form-field-suffix {

2
lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.scss
View File

@@ -2,7 +2,7 @@
&-multiline-text-widget {
width: 100%;
.mat-form-field-label-wrapper {
.adf-label {
top: 20px;
}
}

2
lib/core/src/lib/form/components/widgets/number/number.widget.scss
View File

@@ -2,7 +2,7 @@
&-number-widget {
width: 100%;
.mat-form-field-label-wrapper {
.adf-label {
top: 20px;
}
}

1
lib/core/src/lib/form/components/widgets/text/text.widget.scss
View File

@@ -1,3 +1,4 @@
/* stylelint-disable selector-class-pattern */
.adf {
&-text-widget {
width: 100%;

43
lib/core/src/lib/identity-user-info/identity-user-info.component.html
View File

@@ -1,14 +1,12 @@
<div
<div *ngIf="isLoggedIn"
id="userinfo_container"
[class.adf-userinfo-name-right]="showOnRight"
(keyup)="onKeyPress($event)"
class="adf-userinfo-container"
*ngIf="isLoggedIn"
>
class="adf-userinfo-container">
<span *ngIf="showName" id="adf-userinfo-identity-name-display" class="adf-userinfo-name">
{{identityUser | fullName}}
</span>
<button mat-button [matMenuTriggerFor]="menu" class="adf-userinfo-menu_button"
<button mat-button [matMenuTriggerFor]="menu" class="adf-userinfo-menu_button adf-identity-userinfo-button"
data-automation-id="adf-user-profile">
<div class="adf-userinfo-button-profile" id="user-profile">
<div id="identity-user-image">
@@ -17,25 +15,20 @@
</div>
</button>
<mat-menu #menu="matMenu" id="user-profile-lists" [xPosition]="menuPositionX" [yPosition]="menuPositionY"
[overlapTrigger]="false" class="adf-userinfo-menu">
<mat-tab-group id="tab-group-env" (click)="stopClosing($event)" selectedIndex="0" role="menuitem"
class="adf-userinfo-tab adf-hide-tab">
<mat-tab id="identity-panel" role="dialog">
<mat-card class="adf-userinfo-card">
<mat-card-header class="adf-userinfo-card-header"
[style.background-image]="'url(' + bpmBackgroundImage + ')'">
<div class="mat-title" id="identity-username">{{identityUser | fullName}}</div>
</mat-card-header>
<mat-card-content>
<div class="adf-userinfo-supporting-text">
<h2 id="identity-full-name"
class="adf-userinfo__detail-title">{{identityUser | fullName}}</h2>
<span id="identity-email"> {{identityUser.email}} </span>
<a href="#/profile"> {{ 'USER_PROFILE.LABELS.MY_PROFILE' | translate }}</a>
</div>
</mat-card-content>
</mat-card>
</mat-tab>
</mat-tab-group>
[overlapTrigger]="false" class="adf-userinfo-menu adf-identity-userinfo-menu">
<mat-card class="adf-userinfo-card adf-identity-userinfo-card">
<mat-card-header class="adf-userinfo-card-header"
[style.background-image]="'url(' + bpmBackgroundImage + ')'">
<div class="mat-title" id="identity-username">{{identityUser | fullName}}</div>
</mat-card-header>
<mat-card-content>
<div class="adf-userinfo-supporting-text">
<h2 id="identity-full-name"
class="adf-userinfo__detail-title">{{identityUser | fullName}}</h2>
<span id="identity-email"> {{identityUser.email}} </span>
<a href="#/profile"> {{ 'USER_PROFILE.LABELS.MY_PROFILE' | translate }}</a>
</div>
</mat-card-content>
</mat-card>
</mat-menu>
</div>

27
lib/core/src/lib/identity-user-info/identity-user-info.component.scss
View File

@@ -36,7 +36,7 @@
display: inline-block;
}
&-userinfo-menu_button.mat-button {
&-userinfo-menu_button.adf-identity-userinfo-button {
margin-right: 0;
border-radius: 90%;
padding: 0;
@@ -44,21 +44,6 @@
height: 40px;
}
&-userinfo-tab .mat-tab-header {
align-self: center;
width: 100%;
min-width: 250px;
}
&-userinfo-tab .mat-tab-label {
flex: auto;
font-weight: 500;
font-size: var(--theme-body-1-font-size);
text-transform: uppercase;
line-height: 48px;
text-align: center;
}
&-userinfo-card-header {
align-items: center;
display: flex;
@@ -68,7 +53,7 @@
box-sizing: border-box;
}
&-userinfo-card.mat-card {
&-userinfo-card.adf-identity-userinfo-card {
padding: 0;
}
@@ -103,14 +88,10 @@
border: 0;
vertical-align: middle;
}
&-hide-tab .mat-tab-label-active {
display: none;
}
}
@media only screen and (min-device-width: 480px) {
.mat-menu-panel.adf-userinfo-menu {
.adf-identity-userinfo-menu.adf-userinfo-menu {
max-height: 450px;
min-width: 450px;
overflow: auto;
@@ -118,6 +99,6 @@
}
}
.mat-menu-panel.adf-userinfo-menu .mat-menu-content {
.adf-identity-userinfo-menu.adf-userinfo-menu > div {
padding: 0;
}

4
lib/core/src/lib/layout/components/header/header.component.html
View File

@@ -12,7 +12,7 @@
[attr.aria-expanded]="expandedSidenav"
[attr.aria-label]="'CORE.HEADER.ACCESSIBILITY.SIDEBAR_TOGGLE_BUTTON_ARIA_LABEL' | translate">
<mat-icon
class="mat-icon material-icon"
class="adf-menu-icon-header"
role="img"
aria-hidden="true">{{ toggleIcon }}
</mat-icon>
@@ -47,7 +47,7 @@
[attr.aria-expanded]="expandedSidenav"
[attr.aria-label]="'CORE.HEADER.ACCESSIBILITY.SIDEBAR_TOGGLE_BUTTON_ARIA_LABEL' | translate">
<mat-icon
class="mat-icon material-icon"
class="adf-menu-icon-header"
role="img"
aria-hidden="true">{{ toggleIcon }}
</mat-icon>

8
lib/core/src/lib/layout/components/header/header.component.scss
View File

@@ -1,6 +1,6 @@
@import 'styles/flex';
adf-layout-header .mat-toolbar-single-row {
adf-layout-header .adf-toolbar-container-row {
color: var(--theme-header-text-color) !important;
background-color: var(--theme-primary-color);
position: relative;
@@ -10,7 +10,7 @@ adf-layout-header .mat-toolbar-single-row {
position: relative;
margin-right: 0;
.mat-icon {
.adf-menu-icon-header {
font-size: 29px;
padding: 0 5px 0 0;
}
@@ -73,7 +73,7 @@ adf-layout-header .mat-toolbar-single-row {
}
}
[dir='rtl'] adf-layout-header .mat-toolbar-single-row {
[dir='rtl'] adf-layout-header .adf-toolbar-container-row {
.adf-menu-icon {
margin-right: -11px;
}
@@ -99,7 +99,7 @@ adf-layout-header .mat-toolbar-single-row {
}
}
[dir='ltr'] adf-layout-header .mat-toolbar-single-row {
[dir='ltr'] adf-layout-header .adf-toolbar-container-row {
.adf-menu-icon {
margin-left: -11px;
}

3
lib/core/src/lib/layout/components/layout-container/layout-container.component.html
View File

@@ -1,5 +1,6 @@
<mat-sidenav-container>
<mat-sidenav-container class="adf-layout-container">
<mat-sidenav
class="adf-layout-container-sidenav"
[position]="position"
[disableClose]="!isMobileScreenSize"
[ngClass]="{ 'adf-sidenav--hidden': hideSidenav }"

5
lib/core/src/lib/layout/components/layout-container/layout-container.component.scss
View File

@@ -23,19 +23,20 @@ adf-layout-container {
opacity: 0 !important;
}
.mat-sidenav-container {
.adf-layout-container {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
}
.mat-sidenav {
.adf-layout-container-sidenav {
overflow: hidden;
border-right: 1px solid var(--adf-theme-foreground-text-color-007);
background-color: var(--theme-background-color);
}
/* stylelint-disable selector-class-pattern */
mat-sidenav-content.mat-sidenav-content,
.mat-drawer-transition .mat-drawer-content {
margin-left: 0 !important;

17
lib/core/src/lib/layout/components/sidebar-action/sidebar-action-menu.component.scss
View File

@@ -2,7 +2,7 @@
.adf {
&-sidebar-action-menu {
& .mat-raised-button {
& .adf-sidebar-action-menu-button {
width: 100%;
display: block;
box-shadow: none !important;
@@ -12,11 +12,6 @@
color: var(--theme-primary-color-default-contrast) !important;
border-radius: 4px;
& mat-icon {
width: 24px;
height: 25px;
color: var(--theme-primary-color-default-contrast) !important;
}
}
&-text {
@@ -40,17 +35,17 @@
text-align: left;
letter-spacing: -0.4px;
.mat-menu-item {
button {
font-size: var(--theme-body-1-font-size);
color: var(--adf-theme-foreground-text-color-087);
text-align: left;
line-height: 1.5;
letter-spacing: -0.4px;
}
.mat-menu-item:hover {
color: var(--theme-primary-color);
opacity: inherit;
&:hover {
color: var(--theme-primary-color);
opacity: inherit;
}
}
}

3
lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.scss
View File

@@ -25,12 +25,13 @@
}
@include flex.layout-bp(lt-sm) {
.mat-drawer {
.adf-layout-container {
width: calc(-50px + 100vw) !important;
max-width: 300px !important;
}
}
/* stylelint-disable-next-line selector-class-pattern */
.mat-drawer-content {
@include flex-column;

Some files were not shown because too many files have changed in this diff Show More