fix gallery view sort drop down empty values (#2990)

restore recent in main pace trashcan example demo shell add multi select
2025-05-12 17:04:57 +00:00 · 2018-02-23 17:37:15 +00:00 · 2018-02-23 17:37:15 +00:00 · 8f471d8beb
commit 8f471d8beb
parent 69fd016d32
12 changed files with 109 additions and 66 deletions
--- a/demo-shell/resources/i18n/en.json
+++ b/demo-shell/resources/i18n/en.json
@ -61,7 +61,12 @@
        "DESCRIPTION_UPLOAD" : "Enable upload",
        "ENABLE_INFINITE_SCROLL":"Enable Infinite Scrolling",
        "MULTISELECT_DESCRIPTION" : "Use Cmd (Mac) or Ctrl (Windows) to toggle selection of multiple items",
-        "RECENT" : "Recent Files",
+        "RECENT" : {
+          "EMPTY_STATE": {
+            "TITLE": "Recent is empty"
+          },
+          "TITLE":"Recent Files"
+        },
        "COLUMNS": {
            "DISPLAY_NAME": "Display name",
            "TAG": "Tag",
--- a/demo-shell/src/app/app.component.css
+++ b/demo-shell/src/app/app.component.css
--- a/demo-shell/src/app/app.component.scss
+++ b/demo-shell/src/app/app.component.scss
@ -0,0 +1,35 @@
+.empty-list {
+    .adf-data-table {
+        height: 100%;
+
+        tr:hover, tr:focus {
+            cursor: default;
+        }
+    }
+
+    &__block {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        p {
+            line-height: 0;
+        }
+    }
+
+    &__title {
+        font-size: 18px;
+        font-weight: 600;
+    }
+
+    &__subtitle {
+        font-size: 14px;
+        font-weight: 300;
+    }
+
+    &__block > mat-icon {
+        font-size: 52px;
+        height: 52px;
+        width: 52px;
+    }
+}
--- a/demo-shell/src/app/app.component.ts
+++ b/demo-shell/src/app/app.component.ts
@ -22,7 +22,7 @@ import { SettingsService, PageTitleService, StorageService, TranslationService }
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css'],
+  styleUrls: ['./app.component.scss'],
  encapsulation: ViewEncapsulation.None
 })
 export class AppComponent {
--- a/demo-shell/src/app/components/files/custom-sources.component.html
+++ b/demo-shell/src/app/components/files/custom-sources.component.html
@ -8,17 +8,6 @@
            </mat-select>
        </mat-form-field>
    </adf-toolbar-title>
-
-    <div fxFlex="0 1 auto" class="adf-document-action-buttons" fxShow fxHide.lt-sm="true">
-        <button mat-icon-button
-                (restore)="documentList.reload()"
-                [disabled]="!documentList.selection.length"
-                *ngIf="selectedSource === '-trashcan-'"
-                location="/files"
-                [adf-restore]="documentList.selection">
-            <mat-icon>restore</mat-icon>
-        </button>
-    </div>
 </adf-toolbar>
 <adf-document-list
    [currentFolderId]="selectedSource"
--- a/demo-shell/src/app/components/files/files.component.html
+++ b/demo-shell/src/app/components/files/files.component.html
@ -1,5 +1,33 @@
 <div class="container">

+    <mat-accordion class="adf-container-recent">
+        <mat-expansion-panel  hideToggle="true">
+            <mat-expansion-panel-header >
+                <mat-panel-title>
+                    {{ 'DOCUMENT_LIST.RECENT.TITLE' | translate }}<mat-icon>history</mat-icon>
+                </mat-panel-title>
+            </mat-expansion-panel-header>
+
+            <adf-document-list
+                [currentFolderId]="'-sharedlinks-'"
+                locationFormat="/files"
+                [cardview]="true"
+                [showHeader]="false"
+                [maxItems]="5"
+                (preview)="showFile($event)"
+                selectionMode="null">
+                <empty-folder-content>
+                    <ng-template>
+                        <div class="empty-list__block">
+                            <mat-icon>history</mat-icon>
+                            <p class="empty-list__title">{{ 'DOCUMENT_LIST.RECENT.EMPTY_STATE.TITLE' | translate}}</p>
+                        </div>
+                    </ng-template>
+                </empty-folder-content>
+            </adf-document-list>
+        </mat-expansion-panel>
+    </mat-accordion>
+
    <div class="adf-site-container-style" id="site-container">
        <adf-sites-dropdown (change)="getSiteContent($event)" [hideMyFiles]="false">
        </adf-sites-dropdown>
--- a/demo-shell/src/app/components/files/files.component.scss
+++ b/demo-shell/src/app/components/files/files.component.scss
@ -19,7 +19,7 @@ $minimumDocumentListWidth: 425px;
 }

 .adf-not-overlay-viewer {
-    height:900px;
+    height: 900px;
 }

 adf-document-list ::ng-deep adf-datatable tr.document-list__create {
@ -108,7 +108,7 @@ adf-document-list ::ng-deep .adf-datatable-selected > svg {
    margin-bottom: 20px;
 }

-.adf-no-result-message{
+.adf-no-result-message {
    height: 32px;
    opacity: 0.26;
    font-size: 24px;
@ -116,12 +116,23 @@ adf-document-list ::ng-deep .adf-datatable-selected > svg {
    letter-spacing: -1px;
 }

-.adf-recent-container{
-    border: 1px solid rgba(0, 0, 0, 0.07);
+.adf-container-recent {
+    mat-icon {
+        margin-left: 20px;
+    }
+
+    .empty-list__block {
+        height: 100%;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
 }

@media (max-width: $minimumDocumentListWidth) {
-    adf-document-list ::ng-deep adf-datatable  {
+    adf-document-list ::ng-deep adf-datatable {
        & ::ng-deep .adf-data-table-cell--fileSize {
            display: none;
        }
--- a/demo-shell/src/app/components/trashcan/trashcan.component.html
+++ b/demo-shell/src/app/components/trashcan/trashcan.component.html
@ -17,25 +17,27 @@
            <button
                mat-icon-button
                (selection-node-restored)="refresh()"
+                (restore)="documentList.reload()"
                [adf-restore]="documentList.selection"
                *ngIf="documentList.selection.length"
                title="{{ 'TRASHCAN.ACTIONS.RESTORE' | translate }}">
                <mat-icon>restore</mat-icon>
-           </button>
+            </button>
        </adf-toolbar>
    </div>

    <div class="inner-layout__content">

        <adf-document-list #documentList
-            [attr.class]="documentList.isEmpty() ? 'empty-list' : ''"
-            currentFolderId="-trashcan-"
-            selectionMode="multiple"
-            [navigate]="false"
-            locationFormat="/files"
-            [sorting]="[ 'archivedAt', 'desc' ]"
-            [contextMenuActions]="true"
-            [contentActions]="false">
+                           [attr.class]="documentList.isEmpty() ? 'empty-list' : ''"
+                           currentFolderId="-trashcan-"
+                           selectionMode="multiple"
+                           [multiselect]="true"
+                           [navigate]="false"
+                           locationFormat="/files"
+                           [sorting]="[ 'archivedAt', 'desc' ]"
+                           [contextMenuActions]="true"
+                           [contentActions]="false">

            <empty-folder-content>
                <ng-template>
@ -90,7 +92,7 @@

        </adf-document-list>
        <adf-pagination [ngClass]="{ 'no-border' : documentList.isEmpty()}"
-            [target]="documentList">
+                        [target]="documentList">
        </adf-pagination>
    </div>
 </div>
--- a/demo-shell/src/app/components/trashcan/trashcan.component.scss
+++ b/demo-shell/src/app/components/trashcan/trashcan.component.scss
@ -1,35 +0,0 @@
-.empty-list {
-    .adf-data-table {
-        height: 100%;
-
-        tr:hover, tr:focus {
-            cursor: default;
-        }
-    }
-
-    &__block {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-
-        p {
-            line-height: 0;
-        }
-    }
-
-    &__title {
-        font-size: 18px;
-        font-weight: 600;
-    }
-
-    &__subtitle {
-        font-size: 14px;
-        font-weight: 300;
-    }
-
-    &__block > mat-icon {
-        font-size: 52px;
-        height: 52px;
-        width: 52px;
-    }
-}
--- a/demo-shell/src/app/material.module.ts
+++ b/demo-shell/src/app/material.module.ts
@ -26,7 +26,8 @@ import {
    MatCardModule,
    MatListModule,
    MatMenuModule,
-    MatToolbarModule
+    MatToolbarModule,
+    MatExpansionModule
 } from '@angular/material';

 const MATERIAL_MODULES = [
@ -39,7 +40,8 @@ const MATERIAL_MODULES = [
    MatCardModule,
    MatListModule,
    MatMenuModule,
-    MatToolbarModule
+    MatToolbarModule,
+    MatExpansionModule
 ];

@NgModule({
--- a/lib/core/datatable/components/datatable/datatable.component.html
+++ b/lib/core/datatable/components/datatable/datatable.component.html
@ -33,7 +33,7 @@
        </div>
        <mat-form-field *ngIf="cardview">
            <mat-select [value]="getSortingKey()">
-                <mat-option *ngFor="let col of data.getColumns()"
+                <mat-option *ngFor="let col of getSortableColumns()"
                            [value]="col.key"
                            (click)="onColumnHeaderClick(col)"
                            (keyup.enter)="onColumnHeaderClick(col)">
--- a/lib/core/datatable/components/datatable/datatable.component.ts
+++ b/lib/core/datatable/components/datatable/datatable.component.ts
@ -524,6 +524,12 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck
        return null;
    }

+    getSortableColumns() {
+        return this.data.getColumns().filter((currentColum) => {
+            return currentColum.sortable === true;
+        });
+    }
+
    private emitRowSelectionEvent(name: string, row: DataRow) {
        const domEvent = new CustomEvent(name, {
            detail: {