mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-31 17:38:48 +00:00
[ACS-6140] - Remove references to internal Angular Material CSS classes (#9271)
This commit is contained in:
DominikIwanek
GitHub
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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', () => {
|
||||
|
||||
Reference in New Issue
Block a user