[ADF-3119] Gallery mode layout fixed for document list (#3731)

demo-shell/src/app/components/files/files.component.html

@@ -227,7 +227,8 @@
                         key="$thumbnail"
                         type="image"
                         [sortable]="false"
-                        class="image-table-cell">
+                        class="image-table-cell"
+                        [class.cell-thumbnail]="thumbnails">
                     </data-column>
                     <data-column
                         *ngIf="showNameColumn"
@@ -266,7 +267,7 @@
                         title="{{'DOCUMENT_LIST.COLUMNS.IS_LOCKED' | translate}}"
                         key="id">
                         <ng-template let-entry="$implicit">
-                            <button mat-icon-button [adf-node-lock]="entry.row.node.entry">
+                            <button mat-icon-button [adf-node-lock]="entry.row.node.entry" class="adf-lock-button">
                                 <mat-icon *ngIf="entry.row.getValue('isLocked')">lock</mat-icon>
                                 <mat-icon *ngIf="!entry.row.getValue('isLocked')">lock_open</mat-icon>
                             </button>

demo-shell/src/app/components/files/files.component.scss

@@ -40,6 +40,10 @@
         fill: #00bcd4 !important;
     }
 
+    .adf-lock-button {
+        top: -10px;
+    }
+
     .adf-site-container-style {
         margin-top: 10px;
         margin-bottom: 10px;

lib/core/datatable/components/datatable/datatable.component.html

@@ -49,6 +49,7 @@
         <ng-container *ngIf="!loading && !noPermission">
             <div *ngFor="let row of data.getRows(); let idx = index"
                  class="adf-datatable-row"
+                 [class.adf-datatable-row-thumbnail]="data.thumbnails"
                  role="button"
                  [class.is-selected]="row.isSelected"
                  [adf-upload]="allowDropFiles && rowAllowsDrop(row)" [adf-upload-data]="row"
@@ -80,8 +81,9 @@
                         (change)="onCheckboxChange(row, $event)">
                     </mat-checkbox>
                 </div>
-                <div *ngFor="let col of data.getColumns()"
+                <div *ngFor="let col of data.getColumns(), let first = first;"
                      class="adf-data-table-cell adf-datatable-table-cell adf-data-table-cell--{{col.type || 'text'}} {{col.cssClass}}"
+                     [class.cell-thumbnail]="data.thumbnails && first"
                      [attr.title]="col.title | translate"
                      [attr.filename]="getFilename(row)"
                      tabindex="0"
@@ -91,7 +93,9 @@
                      [context-menu-enabled]="contextMenu">
                     <div *ngIf="!col.template" class="cell-container">
                         <ng-container [ngSwitch]="col.type">
-                            <div *ngSwitchCase="'image'" class="cell-value">
+                            <div *ngSwitchCase="'image'" 
+                                class="cell-value" 
+                                [class.adf-image-gallery-cell]="data.thumbnails">
                                 <mat-icon *ngIf="isIconValue(row, col); else no_iconvalue">{{ asIconValue(row, col) }}
                                 </mat-icon>
                                 <ng-template #no_iconvalue>
@@ -100,6 +104,7 @@
                                     </mat-icon>
                                     <ng-template #no_selected_row>
                                         <img
+                                            [class.adf-image-gallery]="data.thumbnails"
                                             alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
                                             src="{{ data.getValue(row, col) }}"
                                             (error)="onImageLoadingError($event, row)">
@@ -178,7 +183,6 @@
                         </button>
                     </mat-menu>
                 </div>
-
             </div>
             <div *ngIf="isEmpty()"
                  [class.adf-datatable-row]="display === 'list'"

lib/core/datatable/components/datatable/datatable.component.scss

@@ -55,6 +55,10 @@
                 @include mat-overridable-elevation(2);
             }
 
+            .adf-datatable-row-thumbnail {
+                height: 300px !important;
+            }
+
             .adf-datatable-row-empty-card {
                 height: 0 !important;
                 padding-top: 0;
@@ -117,6 +121,7 @@
                 }
 
             }
+            
             .alfresco-datatable__actions-cell {
                 position: absolute;
                 height: 42px !important;
@@ -125,6 +130,17 @@
                 text-align: right;
             }
 
+            .adf-image-gallery {
+                height: 100px;
+            }
+
+            .adf-image-gallery-cell {
+                display: flex;
+                width: 265px;
+                flex: 0 0 auto;
+                justify-content: center;
+            }
+
             .image-table-cell {
                 margin: 8px;
                 padding: 4px;
@@ -149,6 +165,13 @@
                 }
             }
 
+            .cell-thumbnail {
+                flex: 0 0 auto;
+                display: flex;
+                flex-direction: column-reverse;
+                justify-content: space-between;
+            }
+
             .adf-datatable-table-checkbox {
                 margin: 8px;
             }