[ACA-1245] Document List - pagination is missing (#260)

* refactor styling

* disable :hoover in empty folders content

src/app/components/adf-layout/layout-container.component.scss

@@ -1,15 +1,11 @@
+@import 'mixins';
+
 :host {
-    display: block;
+    @include flex-column;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
 }
 
 ng-content {
-    display: block;
+    @include flex-column;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
 }
 
 .sidenav--hidden {
@@ -20,10 +16,7 @@ ng-content {
 }
 
 .mat-sidenav-container {
-    display: block;
+    @include flex-column;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
 }
 
 .mat-sidenav {

src/app/components/adf-layout/sidenav-layout.component.scss

@@ -1,9 +1,10 @@
+@import 'mixins';
+
 :host {
-    display: flex;
+    @include flex-column;
-    flex: 1;
 
     .sidenav-layout {
-        width: 100%;
+        @include flex-column;
     }
 
     router-outlet {

src/app/components/favorites/favorites.component.html

@@ -97,9 +97,9 @@
         </adf-toolbar>
     </div>
     <div class="inner-layout__content">
-        <div class="inner-layout__panel">
+        <div class="inner-layout__panel" [ngClass]="{'adf-document-list--loading': documentList.isEmpty()}">
             <adf-document-list #documentList
-                [attr.class]="documentList.isEmpty() ? 'empty-list' : ''"
+                [attr.class]="documentList.isEmpty() ? 'adf-document-list--empty' : ''"
                 currentFolderId="-favorites-"
                 selectionMode="multiple"
                 [navigate]="false"
@@ -167,10 +167,13 @@
 
                 </data-columns>
             </adf-document-list>
-            <adf-pagination [ngClass]="{ 'no-border' : documentList.isEmpty()}"
+
+            <ng-container *ngIf="!documentList.isEmpty()">
+                <adf-pagination
                     [target]="documentList"
                     (changePageSize)="onChangePageSize($event)">
                 </adf-pagination>
+            </ng-container>
         </div>
 
         <div class="inner-layout__side-panel"

src/app/components/files/files.component.html

@@ -101,18 +101,18 @@
         </adf-toolbar>
     </div>
 
-    <div [attr.class]="isValidPath ? 'content--hide' : 'inner-layout__content'">
+    <div [attr.class]="isValidPath ? 'inner-layout__content--hide' : 'inner-layout__content'">
         <app-generic-error></app-generic-error>
     </div>
 
-    <div [attr.class]="!isValidPath ? 'content--hide' : 'inner-layout__content'">
+    <div [attr.class]="!isValidPath ? 'inner-layout__content--hide' : 'inner-layout__content'">
-        <div class="inner-layout__panel">
+        <div class="inner-layout__panel" [ngClass]="{'adf-document-list--loading': isLoading}">
             <adf-upload-drag-area
                 [parentId]="node?.id"
                 [disabled]="!canCreateContent(node)">
 
                 <adf-document-list #documentList
-                    [attr.class]="documentList.isEmpty() ? 'empty-list' : ''"
+                    [attr.class]="documentList.isEmpty() ? 'adf-document-list--empty' : ''"
                     [loading]="isLoading"
                     [node]="paging"
                     [sorting]="sorting"

src/app/components/libraries/libraries.component.html

@@ -7,9 +7,9 @@
     </div>
 
     <div class="inner-layout__content">
-        <div class="inner-layout__panel">
+        <div class="inner-layout__panel" [ngClass]="{'adf-document-list--loading': isLoading}">
             <adf-document-list #documentList
-                [attr.class]="documentList.isEmpty() ? 'empty-list' : ''"
+                [attr.class]="documentList.isEmpty() ? 'adf-document-list--empty' : ''"
                 currentFolderId="-mysites-"
                 selectionMode="none"
                 [navigate]="false"
@@ -66,10 +66,12 @@
                 </data-columns>
             </adf-document-list>
 
-            <adf-pagination [ngClass]="{ 'no-border' : documentList.isEmpty()}"
+            <ng-container *ngIf="!documentList.isEmpty()">
+                    <adf-pagination
                         [target]="documentList"
                         (changePageSize)="onChangePageSize($event)">
                     </adf-pagination>
+            </ng-container>
         </div>
     </div>
 </div>

src/app/components/recent-files/recent-files.component.html

@@ -91,9 +91,9 @@
     </div>
 
     <div class="inner-layout__content">
-        <div class="inner-layout__panel">
+        <div class="inner-layout__panel" [ngClass]="{'adf-document-list--loading': documentList.isEmpty()}">
             <adf-document-list #documentList
-                [attr.class]="documentList.isEmpty() ? 'empty-list' : ''"
+                [attr.class]="documentList.isEmpty() ? 'adf-document-list--empty' : ''"
                 currentFolderId="-recent-"
                 selectionMode="multiple"
                 [navigate]="false"
@@ -156,10 +156,13 @@
                 </data-columns>
 
             </adf-document-list>
-            <adf-pagination [ngClass]="{'no-border' : documentList.isEmpty()}"
+
+            <ng-container *ngIf="!documentList.isEmpty()">
+                <adf-pagination
                     [target]="documentList"
                     (changePageSize)="onChangePageSize($event)">
                 </adf-pagination>
+            </ng-container>
         </div>
 
         <div class="inner-layout__side-panel"

src/app/components/shared-files/shared-files.component.html

@@ -99,9 +99,9 @@
     </div>
 
     <div class="inner-layout__content">
-        <div class="inner-layout__panel">
+        <div class="inner-layout__panel" [ngClass]="{'adf-document-list--loading': documentList.isEmpty()}">
             <adf-document-list #documentList
-                [attr.class]="documentList.isEmpty() ? 'empty-list' : ''"
+                [attr.class]="documentList.isEmpty() ? 'adf-document-list--empty' : ''"
                 currentFolderId="-sharedlinks-"
                 selectionMode="multiple"
                 [sorting]="sorting"
@@ -173,10 +173,13 @@
 
                 </data-columns>
             </adf-document-list>
-            <adf-pagination [ngClass]="{ 'no-border' :documentList.isEmpty()}"
+
+            <ng-container *ngIf="!documentList.isEmpty()">
+                <adf-pagination
                     [target]="documentList"
                     (changePageSize)="onChangePageSize($event)">
                 </adf-pagination>
+            </ng-container>
         </div>
 
         <div class="inner-layout__side-panel"

src/app/components/trashcan/trashcan.component.html

@@ -27,9 +27,9 @@
     </div>
 
     <div class="inner-layout__content">
-        <div class="inner-layout__panel">
+        <div class="inner-layout__panel" [ngClass]="{'adf-document-list--loading': documentList.isEmpty()}">
             <adf-document-list #documentList
-                [attr.class]="documentList.isEmpty() ? 'empty-list' : ''"
+                [attr.class]="documentList.isEmpty() ? 'adf-document-list--empty' : ''"
                 currentFolderId="-trashcan-"
                 selectionMode="multiple"
                 [navigate]="false"
@@ -96,12 +96,14 @@
                     </data-column>
 
                 </data-columns>
-
             </adf-document-list>
-            <adf-pagination [ngClass]="{ 'no-border' : documentList.isEmpty()}"
+
+            <ng-container *ngIf="!documentList.isEmpty()">
+                <adf-pagination
                     [target]="documentList"
                     (changePageSize)="onChangePageSize($event)">
                 </adf-pagination>
+            </ng-container>
         </div>
     </div>
 </div>

src/app/ui/_layout.scss

@@ -1,65 +1,21 @@
-@import 'variables';
+@import 'mixins';
 
 $app-layout--header-height: 65px;
 $app-layout--side-width: 320px;
-
 $app-inner-layout--header-height: 48px;
 $app-inner-layout--footer-height: 48px;
 
 .layout {
-    display: flex;
+    @include flex-column;
-    flex-direction: column;
-    flex: 1 0;
-    overflow: hidden;
-
-    &__header {
-        flex: 0 0 $app-layout--header-height;
-    }
-
-    &__content {
-        display: flex;
-        flex: 1;
-        flex-direction: row;
-        overflow: hidden;
-
-        & > * {
-            display: flex;
-            flex: 1;
-        }
-    }
-
-    .content--hide {
-        display: none !important;
-    }
 }
 
 .inner-layout {
-    display: flex;
+    @include flex-column;
-    flex: 1;
-    flex-direction: column;
-
-    .adf-info-drawer {
-        width: 350px;
-        height: 100%;
-        overflow-y: auto;
-    }
-
-    .no-border {
-        border: unset
-    }
-
-    &--scroll {
-        overflow: auto;
-    }
-
-    &__header,
-    &__footer {
-        display: flex;
-        flex: 0 0;
-        align-items: center;
-    }
 
     &__header {
+        display: flex;
+        align-items: center;
+        flex: 0 0 $app-layout--header-height;
         flex-basis: $app-inner-layout--header-height;
         background: $alfresco-gray-background;
         border-bottom: 1px solid $alfresco-divider-color;
@@ -67,39 +23,30 @@ $app-inner-layout--footer-height: 48px;
     }
 
     &__content {
-        display: flex;
+        @include flex-row;
-        flex-direction: row;
-        flex: 1;
-        overflow: hidden;
-        background: #fff;
-    }
-
-    &__panel {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex:1;
-        flex-direction: column;
-        border-right: 1px solid rgba(0, 0, 0, 0.07);
-    }
-
-    &__side-panel {
-        display: flex;
-        width: 350px;
-        height: 100%;
     }
 
     &__content--scroll {
         overflow: auto;
     }
 
-    &__footer {
+    &__content--hide {
-        flex-basis: $app-inner-layout--footer-height;
+        display: none !important;
-        border-top: 1px solid $alfresco-divider-color;
     }
 
-    app-generic-error {
+    &__panel {
+        @include flex-column;
+        border-right: 1px solid rgba(0, 0, 0, 0.07);
+    }
+
+    &__side-panel {
+        display: block;
         height: 100%;
-        width: 100%;
+        overflow-y: scroll;
     }
 }
+
+app-generic-error {
+    height: 100%;
+    width: 100%;
+}

src/app/ui/application.scss

@@ -1,25 +1,25 @@
+@import 'mixins';
 @import 'variables';
 @import 'theme';
 
-html, body, ng-component {
+html, body {
-    display: flex;
+    @include flex-column;
     font-size: 14px;
     font-family: "Muli", sans-serif;
     color: $alfresco-primary-text-color;
-    overflow: hidden;
-    width: 100%;
-    height: 100%;
     margin: 0;
 }
 
-app-root > ng-component {
+app-root,
-    display: block;
+app-layout,
-    width: 100%;
+adf-layout-container,
-    height: 100%;
+ng-component {
+    @include flex-column;
 }
 
 @import 'layout';
 
+@import './overrides/adf-login';
 @import './overrides/alfresco-document-list';
 @import './overrides/alfresco-upload-drag-area';
 @import './overrides/alfresco-upload-button';

src/app/ui/mixins.scss

@@ -0,0 +1,15 @@
+@mixin flex-column {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 100%;
+    overflow: hidden;
+}
+
+@mixin flex-row {
+    display: flex;
+    flex-direction: row;
+    flex: 1;
+    height: 100%;
+    overflow: hidden;
+}

src/app/ui/overrides/_adf-login.scss

@@ -0,0 +1,5 @@
+@import 'mixins';
+
+adf-login {
+    @include flex-column;
+}

src/app/ui/overrides/_alfresco-document-list.scss

@@ -1,16 +1,27 @@
-@import '../variables';
+@import 'variables-color';
+
+@import 'mixins';
 
 adf-document-list {
-    display: flex;
+    @include flex-column;
-    flex-direction: column;
+}
-    flex: 1;
-    overflow: auto;
 
-    & > adf-datatable {
+.adf-document-list--loading {
-        height: 100%;
+    .adf-data-table {
+        @include flex-column;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .adf-datatable-table-cell {
+        border: none !important;
     }
 }
 
+adf-datatable {
+    @include flex-column;
+    overflow-y: scroll;
+}
 
 .adf-data-table {
     border: none !important;
@@ -54,8 +65,7 @@ adf-document-list {
         }
     }
 
-    .adf-datatable-header:first-of-type, .adf-datatable-header.adf-data-table-cell--image,
+    .adf-datatable-body .adf-data-table-cell--image {
-    .adf-data-table-cell:first-of-type, .adf-data-table-cell.adf-data-table-cell--image {
         padding-left: 24px;
         padding-right: 0;
         width: 10px;
@@ -89,13 +99,16 @@ adf-document-list {
     }
 }
 
-.empty-list {
+.adf-document-list--empty {
     .adf-data-table {
-        height: 100%;
+        @include flex-column;
+        justify-content: center;
+        align-items: center;
+    }
 
-        .adf-datatable-row:hover, .adf-datatable-row:focus {
+    .adf-data-table .adf-datatable-row:hover,
+    .adf-data-table .adf-datatable-row:focus {
         background-color: unset;
         cursor: default;
     }
-    }
 }

src/app/ui/overrides/_alfresco-upload-drag-area.scss

@@ -1,4 +1,5 @@
-@import '../_variables.scss';
+@import 'mixins';
+@import 'variables.scss';
 
 @mixin file-draggable__input-focus {
     color: $alfresco-secondary-text-color !important;
@@ -6,6 +7,17 @@
     margin-left: 0 !important;
 }
 
+adf-upload-drag-area {
+    @include flex-column;
+
+    .upload-border {
+        @include flex-column;
+
+        vertical-align: unset;
+        text-align: unset;
+    }
+}
+
 adf-upload-drag-area:first-child {
     & > div {
         adf-upload-drag-area {
@@ -34,15 +46,6 @@ adf-upload-drag-area:first-child {
 }
 
 adf-upload-drag-area {
-    height: 100%;
-    width: 100%;
-
-    & > div {
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-    }
-
     .file-draggable__input-focus {
         adf-document-list {
             background: $alfresco-app-color--hue-1;