[ACA-770] Long file names break the application (#98)

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

@@ -104,12 +104,9 @@
                 </data-column>
 
                 <data-column
+                    class="adf-data-table-cell--ellipsis__name"
                     key="name"
-                    class="app-name-column"
                     title="APP.DOCUMENT_LIST.COLUMNS.NAME">
-                    <ng-template let-value="value" let-context>
-                        <span title="{{ context?.row?.obj | adfNodeNameTooltip }}">{{ value }}</span>
-                    </ng-template>
                 </data-column>
 
                 <data-column
@@ -135,13 +132,14 @@
                 </data-column>
 
                 <data-column
+                    class="adf-data-table-cell--ellipsis"
                     key="modifiedByUser.displayName"
                     title="APP.DOCUMENT_LIST.COLUMNS.MODIFIED_BY">
                 </data-column>
 
             </data-columns>
         </adf-document-list>
-        <adf-pagination
+        <adf-pagination [ngClass]="{ 'no-border' : documentList.isEmpty()}"
             [target]="documentList"
             (changePageSize)="onChangePageSize($event)">
         </adf-pagination>

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

@@ -110,12 +110,9 @@
                     </data-column>
 
                     <data-column
+                        class="adf-data-table-cell--ellipsis__name"
                         key="name"
-                        class="app-name-column"
                         title="APP.DOCUMENT_LIST.COLUMNS.NAME">
-                        <ng-template let-value="value" let-context>
-                            <span title="{{ context?.row?.obj | adfNodeNameTooltip }}">{{ value }}</span>
-                        </ng-template>
                     </data-column>
 
                     <data-column
@@ -135,6 +132,7 @@
                     </data-column>
 
                     <data-column
+                        class="adf-data-table-cell--ellipsis"
                         key="modifiedByUser.displayName"
                         title="APP.DOCUMENT_LIST.COLUMNS.MODIFIED_BY">
                     </data-column>

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

@@ -37,14 +37,9 @@
                 </data-column>
 
                 <data-column
+                    class="adf-data-table-cell--ellipsis__name"
                     key="title"
-                    title="APP.DOCUMENT_LIST.COLUMNS.TITLE"
+                    title="APP.DOCUMENT_LIST.COLUMNS.TITLE">
-                    class="app-name-column">
-                    <ng-template let-context>
-                        <span title="{{ makeLibraryTooltip(context.row.obj.entry) }}">
-                            {{ makeLibraryTitle(context.row.obj.entry) }}
-                        </span>
-                    </ng-template>
                 </data-column>
 
                 <data-column
@@ -64,7 +59,8 @@
                 </data-column>
             </data-columns>
         </adf-document-list>
-        <adf-pagination
+
+        <adf-pagination [ngClass]="{ 'no-border' : documentList.isEmpty()}"
             [target]="documentList"
             (changePageSize)="onChangePageSize($event)">
         </adf-pagination>

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

@@ -98,12 +98,9 @@
                 </data-column>
 
                 <data-column
+                    class="adf-data-table-cell--ellipsis__name"
                     key="name"
-                    class="app-name-column"
                     title="APP.DOCUMENT_LIST.COLUMNS.NAME">
-                    <ng-template let-value="value" let-context>
-                        <span title="{{ context?.row?.obj | adfNodeNameTooltip }}">{{ value }}</span>
-                    </ng-template>
                 </data-column>
 
                 <data-column
@@ -130,7 +127,7 @@
             </data-columns>
 
         </adf-document-list>
-        <adf-pagination
+        <adf-pagination [ngClass]="{'no-border' : documentList.isEmpty()}"
             [target]="documentList"
             (changePageSize)="onChangePageSize($event)">
         </adf-pagination>

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

@@ -96,12 +96,9 @@
                 </data-column>
 
                 <data-column
+                    class="adf-data-table-cell--ellipsis__name"
                     key="name"
-                    class="app-name-column"
                     title="APP.DOCUMENT_LIST.COLUMNS.NAME">
-                    <ng-template let-value="value" let-context>
-                        <span title="{{ context?.row?.obj | adfNodeNameTooltip }}">{{ value }}</span>
-                    </ng-template>
                 </data-column>
 
                 <data-column
@@ -127,18 +124,20 @@
                 </data-column>
 
                 <data-column
+                    class="adf-data-table-cell--ellipsis"
                     key="modifiedByUser.displayName"
                     title="APP.DOCUMENT_LIST.COLUMNS.MODIFIED_BY">
                 </data-column>
 
                 <data-column
+                    class="adf-data-table-cell--ellipsis"
                     key="sharedByUser.displayName"
                     title="APP.DOCUMENT_LIST.COLUMNS.SHARED_BY">
                 </data-column>
 
             </data-columns>
         </adf-document-list>
-        <adf-pagination
+        <adf-pagination [ngClass]="{ 'no-border' :documentList.isEmpty()}"
             [target]="documentList"
             (changePageSize)="onChangePageSize($event)">
         </adf-pagination>

src/app/components/sidenav/sidenav.component.scss

@@ -40,10 +40,9 @@ $sidenav-menu-item--icon-size: 24px;
             list-style-type: none;
 
             &__item {
+                padding: $sidenav-menu-item--v-padding 0;
+
                 &-link {
-                    padding:
-                        $sidenav-menu-item--v-padding
-                        $sidenav-menu-item--h-padding;
 
                     padding-left: $sidenav-menu-item--h-padding + 16px + 24px;
                     position: relative;

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

@@ -56,12 +56,9 @@
                 </data-column>
 
                 <data-column
+                    class="adf-data-table-cell--ellipsis__name"
                     key="name"
-                    class="app-name-column"
                     title="APP.DOCUMENT_LIST.COLUMNS.NAME">
-                    <ng-template let-value="value" let-context>
-                        <span title="{{ context?.row?.obj | adfNodeNameTooltip }}">{{ value }}</span>
-                    </ng-template>
                 </data-column>
 
                 <data-column
@@ -87,6 +84,7 @@
                 </data-column>
 
                 <data-column
+                    class="adf-data-table-cell--ellipsis"
                     key="archivedByUser.displayName"
                     title="APP.DOCUMENT_LIST.COLUMNS.DELETED_BY">
                 </data-column>
@@ -94,7 +92,7 @@
             </data-columns>
 
         </adf-document-list>
-        <adf-pagination
+        <adf-pagination [ngClass]="{ 'no-border' : documentList.isEmpty()}"
             [target]="documentList"
             (changePageSize)="onChangePageSize($event)">
         </adf-pagination>

src/app/ui/_layout.scss

@@ -40,6 +40,10 @@ $app-inner-layout--footer-height: 48px;
 }
 
 .inner-layout {
+    .no-border {
+        border: unset
+    }
+
     display: flex;
     flex: 1;
     flex-direction: column;

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

@@ -7,80 +7,28 @@ adf-document-list {
     overflow: auto;
 
     & > adf-datatable {
-        display: flex;
+        height: 100%;
-        flex-direction: column;
-        flex: 1;
-        overflow: auto;
     }
 }
 
+
 .adf-data-table {
     border: none !important;
 
-    .sr-only {
-        display: none;
-    }
-
-    th, td {
-        color: $alfresco-secondary-text-color;
-    }
-
-    th.adf-data-table-cell--text:nth-child(n+3) {
-        text-align: center;
-    }
-
     th, tr, td {
+        color: $alfresco-secondary-text-color;
         &:focus {
             outline: none !important;
         }
     }
 
-    // TODO: Remove tr background-color once it gets to ADF
     tbody tr {
         &:hover, &:focus {
             background-color: $alfresco-app-color--hue-1;
         }
-    }
 
-    tr {
+        &.is-selected, &.is-selected:hover {
-        &.is-selected {
             background-color: $alfresco-app-color--hue-1;
-
-            &:hover {
-                background-color: $alfresco-app-color--hue-1;
-            }
-
-            .image-table-cell {
-                position: relative;
-
-                &:before {
-                    content: "\E876"; /* "done" */
-                    font-family: "Material Icons";
-                    font-size: 24px;
-                    line-height: 32px;
-                    text-align: center;
-                    color: white;
-                    position: absolute;
-                    width: 32px;
-                    height: 32px;
-                    top: 50%;
-                    left: 50%;
-                    margin-top: -16px;
-                    margin-left: -14px;
-                    border-radius: 100%;
-                    background: #00bcd4;
-                }
-            }
-        }
-
-        .app-name-column {
-            width: 100%;
-
-            .cell-container {
-                max-width: 45vw;
-                text-overflow: ellipsis;
-                overflow: hidden;
-            }
         }
     }
 
@@ -109,6 +57,31 @@ adf-document-list {
     .adf-no-content-container {
         border: none !important;
     }
+
+
+    .adf-data-table-cell--ellipsis {
+        width: 100%;
+    }
+
+    .adf-data-table-cell--ellipsis__name {
+        width: 85%;
+    }
+
+    .adf-data-table-cell--ellipsis .cell-value,
+    .adf-data-table-cell--ellipsis__name .cell-value {
+        display: flex;
+        align-items: center;
+    }
+
+    .adf-data-table-cell--ellipsis .adf-datatable-cell,
+    .adf-data-table-cell--ellipsis__name .adf-datatable-cell {
+        white-space: nowrap;
+        display: block;
+        position: absolute;
+        max-width: calc(100% - 2em);
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
 }
 
 .empty-list {