From 65a509a7ae66554148d8a05f6eabd69fc4cf0ae3 Mon Sep 17 00:00:00 2001
From: Bogdan Cilibiu <Bogdan.Cilibiu@ness.com>
Date: Wed, 25 Oct 2017 00:42:14 +0300
Subject: [PATCH] tidyup

---
 .../favorites/favorites.component.html        |  8 +++---
 src/app/components/files/files.component.html | 14 +++-------
 .../libraries/libraries.component.html        |  8 +++---
 .../recent-files/recent-files.component.html  |  8 +++---
 .../shared-files/shared-files.component.html  |  8 +++---
 .../trashcan/trashcan.component.html          | 10 +++----
 src/app/ui/_layout.scss                       | 12 +++------
 .../ui/overrides/_alfresco-document-list.scss | 26 ++++++++++---------
 8 files changed, 42 insertions(+), 52 deletions(-)

diff --git a/src/app/components/favorites/favorites.component.html b/src/app/components/favorites/favorites.component.html
index 392edb669..2a2948680 100644
--- a/src/app/components/favorites/favorites.component.html
+++ b/src/app/components/favorites/favorites.component.html
@@ -77,7 +77,7 @@
     <div class="inner-layout__content">
 
         <adf-document-list #documentList
-            [ngClass]="{ 'app-no-content': documentList.isEmpty() }"
+            [attr.class]="documentList.isEmpty() ? 'empty-list' : ''"
             currentFolderId="-favorites-"
             selectionMode="multiple"
             [navigate]="false"
@@ -89,10 +89,10 @@
 
             <empty-folder-content>
                 <ng-template>
-                    <div class="app-no-content_block">
+                    <div class="empty-list__block">
                         <mat-icon>star_rate</mat-icon>
-                        <p class="app-no-content_title">{{ 'APP.BROWSE.FAVORITES.EMPTY_STATE.TITLE' | translate }}</p>
-                        <p class="app-no-content_text">{{ 'APP.BROWSE.FAVORITES.EMPTY_STATE.TEXT' | translate }}</p>
+                        <p class="empty-list__title">{{ 'APP.BROWSE.FAVORITES.EMPTY_STATE.TITLE' | translate }}</p>
+                        <p class="empty-list__text">{{ 'APP.BROWSE.FAVORITES.EMPTY_STATE.TEXT' | translate }}</p>
                     </div>
                 </ng-template>
             </empty-folder-content>
diff --git a/src/app/components/files/files.component.html b/src/app/components/files/files.component.html
index aa12696b3..e6f7f8e44 100644
--- a/src/app/components/files/files.component.html
+++ b/src/app/components/files/files.component.html
@@ -78,26 +78,18 @@
         </adf-toolbar>
     </div>
 
-    <div class="inner-layout__content"
-        [ngClass]="{
-            'inner-layout__content--hide': isValidPath,
-            'inner-layout__content--show': !isValidPath
-        }">
+    <div [attr.class]="isValidPath ? 'content--hide' : 'inner-layout__content'">
         <app-generic-error></app-generic-error>
     </div>
 
-    <div class="inner-layout__content"
-        [ngClass]="{
-            'inner-layout__content--hide': !isValidPath ,
-            'inner-layout__content--show': isValidPath
-        }">
+    <div [attr.class]="!isValidPath ? 'content--hide' : 'inner-layout__content'">
         <alfresco-upload-drag-area
             [rootFolderId]="node?.id"
             [disabled]="!canCreateContent(node)"
             [showNotificationBar]="false">
 
             <adf-document-list #documentList
-                [ngClass]="{ 'app-no-content': documentList.isEmpty() }"
+                [attr.class]="documentList.isEmpty() ? 'empty-list' : ''"
                 [loading]="isLoading"
                 [node]="paging"
                 [sorting]="[ 'modifiedAt', 'desc' ]"
diff --git a/src/app/components/libraries/libraries.component.html b/src/app/components/libraries/libraries.component.html
index 7fa260fc5..37d46f93d 100644
--- a/src/app/components/libraries/libraries.component.html
+++ b/src/app/components/libraries/libraries.component.html
@@ -9,7 +9,7 @@
     <div class="inner-layout__content">
 
         <adf-document-list #documentList
-            [ngClass]="{ 'app-no-content': documentList.isEmpty() }"
+            [attr.class]="documentList.isEmpty() ? 'empty-list' : ''"
             currentFolderId="-sites-"
             selectionMode="none"
             [navigate]="false"
@@ -21,10 +21,10 @@
 
             <empty-folder-content>
                 <ng-template>
-                    <div class="app-no-content_block">
+                    <div class="empty-list__block">
                         <mat-icon>group_work</mat-icon>
-                        <p class="app-no-content_title">{{ 'APP.BROWSE.LIBRARIES.EMPTY_STATE.TITLE' | translate }}</p>
-                        <p class="app-no-content_text">{{ 'APP.BROWSE.LIBRARIES.EMPTY_STATE.TITLE' | translate }}</p>
+                        <p class="empty-list__title">{{ 'APP.BROWSE.LIBRARIES.EMPTY_STATE.TITLE' | translate }}</p>
+                        <p class="empty-list__text">{{ 'APP.BROWSE.LIBRARIES.EMPTY_STATE.TITLE' | translate }}</p>
                     </div>
                 </ng-template>
             </empty-folder-content>
diff --git a/src/app/components/recent-files/recent-files.component.html b/src/app/components/recent-files/recent-files.component.html
index c732347b0..0aff14d62 100644
--- a/src/app/components/recent-files/recent-files.component.html
+++ b/src/app/components/recent-files/recent-files.component.html
@@ -70,7 +70,7 @@
     <div class="inner-layout__content">
 
         <adf-document-list #documentList
-            [ngClass]="{ 'app-no-content': documentList.isEmpty() }"
+            [attr.class]="documentList.isEmpty() ? 'empty-list' : ''"
             currentFolderId="-recent-"
             selectionMode="multiple"
             [navigate]="false"
@@ -82,10 +82,10 @@
 
             <empty-folder-content>
                 <ng-template>
-                    <div class="app-no-content_block">
+                    <div class="empty-list__block">
                         <mat-icon>access_time</mat-icon>
-                        <p class="app-no-content_title">{{ 'APP.BROWSE.RECENT.EMPTY_STATE.TITLE' | translate }}</p>
-                        <p class="app-no-content_text">{{ 'APP.BROWSE.RECENT.EMPTY_STATE.TITLE' | translate }}</p>
+                        <p class="empty-list__title">{{ 'APP.BROWSE.RECENT.EMPTY_STATE.TITLE' | translate }}</p>
+                        <p class="empty-list__text">{{ 'APP.BROWSE.RECENT.EMPTY_STATE.TITLE' | translate }}</p>
                     </div>
                 </ng-template>
             </empty-folder-content>
diff --git a/src/app/components/shared-files/shared-files.component.html b/src/app/components/shared-files/shared-files.component.html
index d73830bfd..10a2bc350 100644
--- a/src/app/components/shared-files/shared-files.component.html
+++ b/src/app/components/shared-files/shared-files.component.html
@@ -69,7 +69,7 @@
 
     <div class="inner-layout__content">
         <adf-document-list #documentList
-            [ngClass]="{ 'app-no-content': documentList.isEmpty() }"
+            [attr.class]="documentList.isEmpty() ? 'empty-list' : ''"
             currentFolderId="-sharedlinks-"
             selectionMode="multiple"
             [sorting]="[ 'modifiedAt', 'desc' ]"
@@ -80,10 +80,10 @@
 
             <empty-folder-content>
                 <ng-template>
-                    <div class="app-no-content_block">
+                    <div class="empty-list__block">
                         <mat-icon>people</mat-icon>
-                        <p class="app-no-content_title">{{ 'APP.BROWSE.SHARED.EMPTY_STATE.TITLE' | translate }}</p>
-                        <p class="app-no-content_text">{{ 'APP.BROWSE.SHARED.EMPTY_STATE.TITLE' | translate }}</p>
+                        <p class="empty-list__title">{{ 'APP.BROWSE.SHARED.EMPTY_STATE.TITLE' | translate }}</p>
+                        <p class="empty-list__text">{{ 'APP.BROWSE.SHARED.EMPTY_STATE.TITLE' | translate }}</p>
                     </div>
                 </ng-template>
             </empty-folder-content>
diff --git a/src/app/components/trashcan/trashcan.component.html b/src/app/components/trashcan/trashcan.component.html
index afbaefc79..1575261a2 100644
--- a/src/app/components/trashcan/trashcan.component.html
+++ b/src/app/components/trashcan/trashcan.component.html
@@ -27,7 +27,7 @@
     <div class="inner-layout__content">
 
         <adf-document-list #documentList
-            [ngClass]="{ 'app-no-content': documentList.isEmpty() }"
+            [attr.class]="documentList.isEmpty() ? 'empty-list' : ''"
             currentFolderId="-trashcan-"
             selectionMode="multiple"
             [navigate]="false"
@@ -38,11 +38,11 @@
 
             <empty-folder-content>
                 <ng-template>
-                    <div class="app-no-content_block">
+                    <div class="empty-list__block">
                         <mat-icon>delete</mat-icon>
-                        <p class="app-no-content_title">{{ 'APP.BROWSE.TRASHCAN.EMPTY_STATE.TITLE' | translate }}</p>
-                        <p class="app-no-content_text">{{ 'APP.BROWSE.TRASHCAN.EMPTY_STATE.FIRST_TEXT' | translate }}</p>
-                        <p class="app-no-content_text">{{ 'APP.BROWSE.TRASHCAN.EMPTY_STATE.SECOND_TEXT' | translate }}</p>
+                        <p class="empty-list__title">{{ 'APP.BROWSE.TRASHCAN.EMPTY_STATE.TITLE' | translate }}</p>
+                        <p class="empty-list__text">{{ 'APP.BROWSE.TRASHCAN.EMPTY_STATE.FIRST_TEXT' | translate }}</p>
+                        <p class="empty-list__text">{{ 'APP.BROWSE.TRASHCAN.EMPTY_STATE.SECOND_TEXT' | translate }}</p>
                     </div>
                 </ng-template>
             </empty-folder-content>
diff --git a/src/app/ui/_layout.scss b/src/app/ui/_layout.scss
index 26e9c5b12..59b0026d9 100644
--- a/src/app/ui/_layout.scss
+++ b/src/app/ui/_layout.scss
@@ -33,6 +33,10 @@ $app-inner-layout--footer-height: 48px;
             border-right: 1px solid $alfresco-divider-color;
         }
     }
+
+    .content--hide {
+        display: none;
+    }
 }
 
 .inner-layout {
@@ -61,14 +65,6 @@ $app-inner-layout--footer-height: 48px;
         overflow: hidden;
     }
 
-    &__content--hide {
-        display: none;
-    }
-
-    &__content--show {
-        display: flex;
-    }
-
     &__footer {
         flex-basis: $app-inner-layout--footer-height;
         border-top: 1px solid $alfresco-divider-color;
diff --git a/src/app/ui/overrides/_alfresco-document-list.scss b/src/app/ui/overrides/_alfresco-document-list.scss
index c1fc9c3f3..ff5c57c41 100644
--- a/src/app/ui/overrides/_alfresco-document-list.scss
+++ b/src/app/ui/overrides/_alfresco-document-list.scss
@@ -28,11 +28,13 @@ adf-document-list .adf-data-table {
     }
 
     // TODO: Remove tr background-color once it gets to ADF
-    tr {
+    tbody tr {
         &:hover, &:focus {
             background-color: $alfresco-app-color--hue-1;
         }
+    }
 
+    tr {
         &.is-selected {
             background-color: $alfresco-app-color--hue-1;
 
@@ -86,7 +88,7 @@ adf-document-list .adf-data-table {
     }
 }
 
-.app-no-content {
+.empty-list {
     .adf-data-table {
         height: 100%;
 
@@ -96,7 +98,7 @@ adf-document-list .adf-data-table {
         }
     }
 
-    &_block {
+    &__block {
         color: $alfresco-secondary-text-color;
         display: flex;
         flex-direction: column;
@@ -107,19 +109,19 @@ adf-document-list .adf-data-table {
         }
     }
 
-    md-icon {
-        font-size: 52px;
-        height: 52px;
-        width: 52px;
-    }
-
-    &_title {
+    &__title {
         font-size: 18px;
         font-weight: 600;
     }
 
-    &_subtitle {
+    &__subtitle {
         font-size: 14px;
         font-weight: 300;
     }
-}
\ No newline at end of file
+
+    &__block > mat-icon {
+        font-size: 52px;
+        height: 52px;
+        width: 52px;
+    }
+}