[ADF-2169] Destination Picker fixes (#2984)

* style and layout fixes for Destination Picker * fix for binding to private member, remove recent demo * add 'search results' label, code fixes * selected icon style fixes * style fixes * style fixes * fix column header align issue * style fixes for empty content * icon column style fixes
2025-07-24 17:32:15 +00:00 · 2018-02-22 19:21:10 +00:00
parent 1a97cc00c0
commit c915a79342
11 changed files with 176 additions and 162 deletions
--- a/demo-shell/src/app/components/files/files.component.html
+++ b/demo-shell/src/app/components/files/files.component.html
@@ -1,22 +1,5 @@
 <div class="container">

-    <div class="adf-recent-container">
-        <mat-list>
-            <mat-list-item><mat-icon>history</mat-icon>{{ 'DOCUMENT_LIST.RECENT' | translate }}</mat-list-item>
-            <mat-divider></mat-divider>
-        </mat-list>
-
-        <adf-document-list
-            [currentFolderId]="'-recent-'"
-            locationFormat="/files"
-            [cardview]="true"
-            [showHeader]="false"
-            [maxItems]="5"
-            (preview)="showFile($event)"
-            selectionMode="null">
-        </adf-document-list>
-    </div>
-
    <div class="adf-site-container-style" id="site-container">
        <adf-sites-dropdown (change)="getSiteContent($event)" [hideMyFiles]="false">
        </adf-sites-dropdown>
--- a/lib/content-services/content-node-selector/content-node-selector-panel.component.html
+++ b/lib/content-services/content-node-selector/content-node-selector-panel.component.html
@@ -1,96 +1,102 @@
-<div (node-select)="onNodeSelect($event)">
+<div class="adf-content-node-selector-content" (node-select)="onNodeSelect($event)">
    <mat-form-field floatPlaceholder="never" class="adf-content-node-selector-content-input">
-            <input matInput
-                id="searchInput"
-                [formControl]="searchInput"
-                type="text"
-                placeholder="{{'NODE_SELECTOR.SEARCH' | translate}}"
-                [value]="searchTerm"
-                data-automation-id="content-node-selector-search-input">
+        <input matInput
+            id="searchInput"
+            [formControl]="searchInput"
+            type="text"
+            placeholder="{{'NODE_SELECTOR.SEARCH' | translate}}"
+            [value]="searchTerm"
+            data-automation-id="content-node-selector-search-input">

-            <mat-icon *ngIf="searchTerm.length > 0"
-                matSuffix (click)="clear()"
-                class="adf-content-node-selector-content-input-icon"
-                data-automation-id="content-node-selector-search-clear">clear
-            </mat-icon>
+        <mat-icon *ngIf="searchTerm.length > 0"
+            matSuffix (click)="clear()"
+            class="adf-content-node-selector-content-input-icon"
+            data-automation-id="content-node-selector-search-clear">clear
+        </mat-icon>

-            <mat-icon *ngIf="searchTerm.length === 0"
-                matSuffix
-                class="adf-content-node-selector-content-input-icon"
-                data-automation-id="content-node-selector-search-icon">search
-            </mat-icon>
+        <mat-icon *ngIf="searchTerm.length === 0"
+            matSuffix
+            class="adf-content-node-selector-content-input-icon"
+            data-automation-id="content-node-selector-search-icon">search
+        </mat-icon>

-        </mat-form-field>
+    </mat-form-field>

-        <adf-sites-dropdown
-            (change)="siteChanged($event)"
-            [placeholder]="'NODE_SELECTOR.SELECT_LOCATION'"
-            [hideMyFiles]="dropdownHideMyFiles"
-            [siteList]="dropdownSiteList"
-            data-automation-id="content-node-selector-sites-combo"></adf-sites-dropdown>
+    <adf-sites-dropdown
+        class="full-width"
+        (change)="siteChanged($event)"
+        [placeholder]="'NODE_SELECTOR.SELECT_LOCATION'"
+        [hideMyFiles]="dropdownHideMyFiles"
+        [siteList]="dropdownSiteList"
+        data-automation-id="content-node-selector-sites-combo">
+    </adf-sites-dropdown>

-        <adf-toolbar>
-            <adf-toolbar-title>
-                <adf-dropdown-breadcrumb *ngIf="needBreadcrumbs()"
-                    class="adf-content-node-selector-content-breadcrumb"
-                    (navigate)="clear()"
-                    [target]="documentList"
-                    [folderNode]="breadcrumbFolderNode"
-                    data-automation-id="content-node-selector-content-breadcrumb">
-                </adf-dropdown-breadcrumb>
-            </adf-toolbar-title>
-        </adf-toolbar>
+    <adf-toolbar>
+        <adf-toolbar-title>
+            <ng-container *ngIf="showingSearchResults && !chosenNode">
+                <span class="search-results-label">{{ 'NODE_SELECTOR.SEARCH_RESULTS' | translate }}</span>
+            </ng-container>
+            <adf-dropdown-breadcrumb *ngIf="needBreadcrumbs()"
+                class="adf-content-node-selector-content-breadcrumb"
+                (navigate)="clear()"
+                [target]="documentList"
+                [folderNode]="breadcrumbFolderNode"
+                data-automation-id="content-node-selector-content-breadcrumb">
+            </adf-dropdown-breadcrumb>
+        </adf-toolbar-title>
+    </adf-toolbar>

-        <div
-            class="adf-content-node-selector-content-list"
-            [class.adf-content-node-selector-content-list-searchLayout]="showingSearchResults"
-            data-automation-id="content-node-selector-content-list">
-            <adf-document-list
-                #documentList
-                adf-highlight
-                adf-highlight-selector="adf-name-location-cell .adf-name-location-cell-name"
-                [node]="nodes"
-                [maxItems]="pageSize"
-                [skipCount]="skipCount"
-                [enableInfiniteScrolling]="infiniteScroll"
-                [rowFilter]="rowFilter"
-                [imageResolver]="imageResolver"
-                [currentFolderId]="folderIdToShow"
-                selectionMode="single"
-                [contextMenuActions]="false"
-                [contentActions]="false"
-                [allowDropFiles]="false"
-                (folderChange)="onFolderChange()"
-                (ready)="onFolderLoaded($event)"
-                (node-dblclick)="onNodeDoubleClick($event)"
-                data-automation-id="content-node-selector-document-list">
-                <empty-folder-content>
-                    <ng-template>
-                        <div>{{ 'NODE_SELECTOR.NO_RESULTS' | translate }}</div>
+    <div
+        class="adf-content-node-selector-content-list"
+        [class.adf-content-node-selector-content-list-searchLayout]="showingSearchResults"
+        data-automation-id="content-node-selector-content-list">
+        <adf-document-list
+            #documentList
+            adf-highlight
+            adf-highlight-selector="adf-name-location-cell .adf-name-location-cell-name"
+            [showHeader]="false"
+            [node]="nodes"
+            [maxItems]="pageSize"
+            [skipCount]="skipCount"
+            [enableInfiniteScrolling]="infiniteScroll"
+            [rowFilter]="rowFilter"
+            [imageResolver]="imageResolver"
+            [currentFolderId]="folderIdToShow"
+            selectionMode="single"
+            [contextMenuActions]="false"
+            [contentActions]="false"
+            [allowDropFiles]="false"
+            (folderChange)="onFolderChange()"
+            (ready)="onFolderLoaded($event)"
+            (node-dblclick)="onNodeDoubleClick($event)"
+            data-automation-id="content-node-selector-document-list">
+            <empty-folder-content>
+                <ng-template>
+                    <div>{{ 'NODE_SELECTOR.NO_RESULTS' | translate }}</div>
+                </ng-template>
+            </empty-folder-content>
+
+            <data-columns>
+                <data-column key="$thumbnail" type="image"></data-column>
+                <data-column key="name" type="text" class="full-width ellipsis-cell">
+                    <ng-template let-context="$implicit">
+                        <adf-name-location-cell [data]="context.data" [column]="context.col" [row]="context.row"></adf-name-location-cell>
                    </ng-template>
-                </empty-folder-content>
+                </data-column>
+                <data-column key="modifiedAt" type="date" format="timeAgo" class="adf-content-selector-modified-cell"></data-column>
+                <data-column key="modifiedByUser.displayName" type="text" class="adf-content-selector-modifier-cell"></data-column>
+                <data-column key="visibility" type="text"></data-column>
+            </data-columns>

-                <data-columns>
-                    <data-column key="$thumbnail" type="image"></data-column>
-                    <data-column key="name" type="text" class="full-width ellipsis-cell">
-                        <ng-template let-context="$implicit">
-                            <adf-name-location-cell [data]="context.data" [column]="context.col" [row]="context.row"></adf-name-location-cell>
-                        </ng-template>
-                    </data-column>
-                    <data-column key="modifiedAt" type="date" format="timeAgo" class="adf-content-selector-modified-cell"></data-column>
-                    <data-column key="modifiedByUser.displayName" type="text" class="adf-content-selector-modifier-cell"></data-column>
-                    <data-column key="visibility" type="text"></data-column>
-                </data-columns>
+        </adf-document-list>

-            </adf-document-list>
-
-            <adf-infinite-pagination
-                [pagination]="pagination"
-                [pageSize]="pageSize"
-                [loading]="loadingSearchResults"
-                (loadMore)="getNextPageOfSearch($event)"
-                data-automation-id="content-node-selector-search-pagination">
-                {{ 'ADF-DOCUMENT-LIST.LAYOUT.LOAD_MORE' | translate }}
-            </adf-infinite-pagination>
-        </div>
+        <adf-infinite-pagination
+            [pagination]="pagination"
+            [pageSize]="pageSize"
+            [loading]="loadingSearchResults"
+            (loadMore)="getNextPageOfSearch($event)"
+            data-automation-id="content-node-selector-search-pagination">
+            {{ 'ADF-DOCUMENT-LIST.LAYOUT.LOAD_MORE' | translate }}
+        </adf-infinite-pagination>
+    </div>
 </div>
--- a/lib/content-services/content-node-selector/content-node-selector-panel.component.scss
+++ b/lib/content-services/content-node-selector/content-node-selector-panel.component.scss
@@ -3,6 +3,16 @@
    $foreground: map-get($theme, foreground);
    $background: map-get($theme, background);

+    .search-results-label {
+        font-weight: 600;
+        font-size: 14px;
+        font-style: normal;
+        font-stretch: normal;
+        line-height: 1.43;
+        letter-spacing: -0.2px;
+        color: mat-color($foreground, base, 0.87);
+    }
+
    .adf-content-node-selector {

        &-content {
@@ -44,6 +54,7 @@
            }

            .adf-toolbar .mat-toolbar {
+                max-height: 48px;
                border-bottom-width: 0;
                font-size: 14px;

@@ -81,12 +92,13 @@
                .adf-data-table {
                    border: none;

-                    .adf-no-content-container {
-                        text-align: center;
+                    .adf-datatable-selected > svg {
+                        fill: #00bcd4 !important;
                    }

-                    thead {
-                        display: none;
+                    .adf-no-content-container {
+                        text-align: center;
+                        border: none !important;
                    }

                    .adf-data-table-cell {
@@ -112,7 +124,7 @@
                        }
                    }

-                    tbody tr {
+                    .adf-datatable-body .adf-datatable-row {
                        height: auto !important;

                        &:first-child {
@@ -151,6 +163,12 @@
                            &.adf-content-selector-modifier-cell {
                                display: none;
                            }
+
+                            &--image {
+                                padding-left: 16px;
+                                padding-right: 8px;
+                                padding-bottom: 8px;
+                            }
                        }
                    }
                }
--- a/lib/content-services/content-node-selector/content-node-selector-panel.component.ts
+++ b/lib/content-services/content-node-selector/content-node-selector-panel.component.ts
@@ -45,7 +45,8 @@ const defaultValidation = () => true;
    selector: 'adf-content-node-selector-panel',
    styleUrls: ['./content-node-selector-panel.component.scss'],
    templateUrl: './content-node-selector-panel.component.html',
-    encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.None,
+    host: { 'class': 'adf-content-node-selector-panel' }
 })
 export class ContentNodeSelectorPanelComponent implements OnInit {

--- a/lib/content-services/content-node-selector/content-node-selector.component.html
+++ b/lib/content-services/content-node-selector/content-node-selector.component.html
@@ -1,10 +1,9 @@
-<header matDialogTitle
-        class="adf-content-node-selector-dialog-title"
-        data-automation-id="content-node-selector-title">{{title || data?.title}}
+<header
+    mat-dialog-title
+    data-automation-id="content-node-selector-title">{{title || data?.title}}
 </header>

-<section matDialogContent
-         class="adf-content-node-selector-dialog-content">
+<mat-dialog-content>
    <adf-content-node-selector-panel
        [currentFolderId]="currentFolderId || data?.currentFolderId"
        [dropdownHideMyFiles]="dropdownHideMyFiles || data?.dropdownHideMyFiles"
@@ -15,22 +14,20 @@
        [breadcrumbTransform]="data?.breadcrumbTransform"
        (select)="onSelect($event)">
    </adf-content-node-selector-panel>
-</section>
+</mat-dialog-content>

-<footer matDialogActions class="adf-content-node-selector-actions">
+<mat-dialog-actions align="end">
    <button
        mat-button
-        class="adf-content-node-selector-actions-cancel"
        (click)="close()"
        data-automation-id="content-node-selector-actions-cancel">{{ 'NODE_SELECTOR.CANCEL' | translate }}
    </button>

    <button mat-button
        [disabled]="!chosenNode"
-        class="adf-content-node-selector-actions-choose"
+        class="choose-action"
        (click)="onClick()"
        data-automation-id="content-node-selector-actions-choose">{{ buttonActionName | translate }}
    </button>
-
-</footer>
+</mat-dialog-actions>

--- a/lib/content-services/content-node-selector/content-node-selector.component.scss
+++ b/lib/content-services/content-node-selector/content-node-selector.component.scss
@@ -3,27 +3,31 @@
    $foreground: map-get($theme, foreground);
    $background: map-get($theme, background);

-    .mat-dialog-container {
-        padding: 0;
-    }
-
    .adf-content-node-selector-dialog {
-        &-title,
-        &-content,
-        &-actions {
-            padding: 16px;
+
+        .mat-dialog-title {
+            margin-left: 24px;
+            margin-right: 24px;
+            font-size: 20px;
+            font-weight: 600;
+            font-style: normal;
+            font-stretch: normal;
+            line-height: 1.6;
+            letter-spacing: -0.5px;
+            color: mat-color($foreground, text, 0.87);
+        }
+
+        .mat-dialog-container {
+            padding-left: 0;
+            padding-right: 0;
+        }
+
+        .mat-dialog-content {
            margin: 0;
+            overflow: hidden;
        }

-        &-content{
-            padding-top: 0;
-        }
-
-        &-title::first-letter {
-            text-transform: uppercase;
-        }
-
-        &-actions {
+        .mat-dialog-actions {
            padding: 8px;
            background-color: mat-color($background, background);
            display: flex;
@@ -32,18 +36,10 @@

            button {
                text-transform: uppercase;
-            }
-
-            &:last-child {
-                margin-bottom: 0px;
-            }
-
-            &-cancel {
                font-weight: normal;
            }

-            &-choose {
-                font-weight: normal;
+            .choose-action {

                &[disabled] {
                    opacity: 0.6;
--- a/lib/content-services/content-node-selector/content-node-selector.component.ts
+++ b/lib/content-services/content-node-selector/content-node-selector.component.ts
@@ -73,7 +73,7 @@ export class ContentNodeSelectorComponent {
    pageSize: number;

    buttonActionName: string;
-    private chosenNode: MinimalNodeEntryEntity[];
+    chosenNode: MinimalNodeEntryEntity[];

    constructor(@Inject(MAT_DIALOG_DATA) public data: ContentNodeSelectorComponentData) {
        this.buttonActionName = data.actionName ? `NODE_SELECTOR.${data.actionName.toUpperCase()}` : 'NODE_SELECTOR.CHOOSE';
--- a/lib/content-services/i18n/en.json
+++ b/lib/content-services/i18n/en.json
@@ -45,6 +45,7 @@
    "MOVE_ITEM": "Move '{{ name }}' to...",
    "NO_RESULTS": "No results found",
    "SEARCH": "Search",
+    "SEARCH_RESULTS": "Search results",
    "SELECT_LOCATION": "Select Location"
  },
  "OPERATION": {
--- a/lib/content-services/site-dropdown/sites-dropdown.component.scss
+++ b/lib/content-services/site-dropdown/sites-dropdown.component.scss
@@ -1,3 +1,7 @@
-.adf-site-dropdown {
-
+.adf-sites-dropdown {
+    &.full-width {
+        .mat-input-container {
+            width: 100%;
+        }
+    }
 }
--- a/lib/content-services/site-dropdown/sites-dropdown.component.ts
+++ b/lib/content-services/site-dropdown/sites-dropdown.component.ts
@@ -15,14 +15,16 @@
 * limitations under the License.
 */

+import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
 import { SitesService } from '@alfresco/adf-core';
 import { SitePaging, SiteEntry } from 'alfresco-js-api';
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';

@Component({
    selector: 'adf-sites-dropdown',
    styleUrls: ['./sites-dropdown.component.scss'],
-    templateUrl: './sites-dropdown.component.html'
+    templateUrl: './sites-dropdown.component.html',
+    encapsulation: ViewEncapsulation.None,
+    host: { 'class': 'adf-sites-dropdown' }
 })
 export class DropdownSitesComponent implements OnInit {

--- a/lib/core/datatable/components/datatable/datatable.component.scss
+++ b/lib/core/datatable/components/datatable/datatable.component.scss
@@ -29,9 +29,6 @@

        border: 1px solid mat-color($foreground, divider);

-        .sr-only {
-        }
-
        .adf-datatable-body {
            flex-flow: row wrap;
            display: flex;
@@ -239,7 +236,7 @@

        .adf-datatable-table-cell, .adf-datatable-table-cell-header {
            padding: 0 $data-table-column-padding 12px $data-table-column-padding;
-            text-align: right;
+            text-align: left;

            &:first-of-type {
                padding-left: 24px;
@@ -303,12 +300,6 @@
                    margin-right: 5px;
                    vertical-align: sub;
                }
-                &:hover {
-                    cursor: pointer;
-                    &:before {
-                        color: $data-table-header-sorted-icon-hover-color;
-                    }
-                }
            }
            &.adf-data-table__header--sorted-desc:before {
                content: "\e5db";
@@ -332,13 +323,15 @@
            }

            &--image {
+                padding-left: 24px;
+                padding-right: 24px;
+                width: 10px;
+                text-align: left;

                .cell-value {
                    height: 24px;
                }

-                text-align: left;
-
                img {
                    height: 100%;
                }
@@ -350,6 +343,18 @@
            }
        }

+        .adf-location-cell {
+            a {
+                text-decoration: none;
+                color: mat-color($foreground, text);
+
+                &:hover {
+                    color: #2196F3;
+                    text-decoration: underline;
+                }
+            }
+        }
+
        .full-width {
            width: 100%;
        }
@@ -357,6 +362,7 @@
        /* Empty folder */
        .adf-no-content-container {
            padding: 0 !important;
+            border: none !important;

            & > img {
                width: 100%;