Upgrade to latest ADF beta & UI fixes (#1082)

* [ACA-2359] upgrade ADF to 3.2.0-beta7 version

* [ACA-2359] revert temporary fix because no more nested 'adf-datatable-cell' items coming from ADF

* [ACA-2359] remove no more needed styles related to [ADF-4401] issue

* [ACA-2359] clean-up unneeded styles - coming from new ADF version

* [ACA-2363] fix issue with text being visible underneath the info drawer

* [ACA-2359] fix ellipsis on locked_by text

* [ACA-2359] increase item select area

* [ACA-2331] fix destination picker custom source title

* [ACA-2331] fix destination picker column display

* min-width for adf-no-grow-cell

package-lock.json

@@ -5,33 +5,33 @@
   "requires": true,
   "dependencies": {
     "@alfresco/adf-content-services": {
-      "version": "3.2.0-bcdfcee39750ffcee85a78c6f099a5a8b6ece0c2",
+      "version": "3.2.0-beta7",
-      "resolved": "https://registry.npmjs.org/@alfresco/adf-content-services/-/adf-content-services-3.2.0-bcdfcee39750ffcee85a78c6f099a5a8b6ece0c2.tgz",
+      "resolved": "https://registry.npmjs.org/@alfresco/adf-content-services/-/adf-content-services-3.2.0-beta7.tgz",
-      "integrity": "sha512-nOQtKpX32HV8FFgxdgN/ifwCGdnI7o1/8CeMGEE5bubekjghYRknJYwQyp1nA+NsiJJncoctL+q9PRqQ/Z4G4A==",
+      "integrity": "sha512-GQLAtCOB0Q4GY+0W2YFB8W5JWh519U0RTshpaqs9Bi9JbpbbfSR50+EA4M6w1AQLm9rWy/9LCeQ819CyOpMRpw==",
       "requires": {
         "tslib": "^1.9.0"
       }
     },
     "@alfresco/adf-core": {
-      "version": "3.2.0-bcdfcee39750ffcee85a78c6f099a5a8b6ece0c2",
+      "version": "3.2.0-beta7",
-      "resolved": "https://registry.npmjs.org/@alfresco/adf-core/-/adf-core-3.2.0-bcdfcee39750ffcee85a78c6f099a5a8b6ece0c2.tgz",
+      "resolved": "https://registry.npmjs.org/@alfresco/adf-core/-/adf-core-3.2.0-beta7.tgz",
-      "integrity": "sha512-GRdiKRAH9PJUnmGWOvODms64NEXRMtkbcJ6W/6WujEupmL+/b+2cbDEBsUWHh88X4NScvGAA0R7A3opwiMFO/w==",
+      "integrity": "sha512-hSSJCK+Rezur7CWQjeT0uihzSuq+3cUR/qQEVGehNVte0y/bw6ceJWW+00sKS6ICU0byQDDAjsOqPuEMshqchg==",
       "requires": {
         "tslib": "^1.9.0"
       }
     },
     "@alfresco/adf-extensions": {
-      "version": "3.2.0-bcdfcee39750ffcee85a78c6f099a5a8b6ece0c2",
+      "version": "3.2.0-beta7",
-      "resolved": "https://registry.npmjs.org/@alfresco/adf-extensions/-/adf-extensions-3.2.0-bcdfcee39750ffcee85a78c6f099a5a8b6ece0c2.tgz",
+      "resolved": "https://registry.npmjs.org/@alfresco/adf-extensions/-/adf-extensions-3.2.0-beta7.tgz",
-      "integrity": "sha512-JH42ew6qcrPWjQfhFKR/PYZ2efQOOMxIscfLUhBu9nT5D8wCShG0wvkqrSD3tPm9+CkOxDOSDIbuLxpn1Bhusw==",
+      "integrity": "sha512-2KxNnnCDXu619jV3eslX685j/CkZl2C+BfwEHNP7v5q9eCh4tJ4r5LALvRHnJ44BsRojvJrNG23VND/X4tS2Ng==",
       "requires": {
         "tslib": "^1.9.0"
       }
     },
     "@alfresco/js-api": {
-      "version": "3.2.0-fa5916ff413131513c3e382d7f27dd9b4cfa0e7e",
+      "version": "3.2.0-beta7",
-      "resolved": "https://registry.npmjs.org/@alfresco/js-api/-/js-api-3.2.0-fa5916ff413131513c3e382d7f27dd9b4cfa0e7e.tgz",
+      "resolved": "https://registry.npmjs.org/@alfresco/js-api/-/js-api-3.2.0-beta7.tgz",
-      "integrity": "sha512-3fhNh0+jqDzO6JavRhhYhGr2RZTLwSFIDF+uY2mcGCLWEiI0t81kyv4cYhO1hOHayfwXd6cn6hB7GZIChKrCZw==",
+      "integrity": "sha512-8vWkFdi7qeSBjtk4ogEwEO1ApemcXAckPcPKmWWb2thbCyuW4JhDNa7+csPezuxYgIrhrEk+awRXN+b4xVDmaw==",
       "requires": {
         "event-emitter": "0.3.4",
         "superagent": "3.8.2"

package.json

@@ -36,10 +36,10 @@
   },
   "private": true,
   "dependencies": {
-    "@alfresco/adf-content-services": "3.2.0-bcdfcee39750ffcee85a78c6f099a5a8b6ece0c2",
+    "@alfresco/adf-content-services": "3.2.0-beta7",
-    "@alfresco/adf-core": "3.2.0-bcdfcee39750ffcee85a78c6f099a5a8b6ece0c2",
+    "@alfresco/adf-core": "3.2.0-beta7",
-    "@alfresco/adf-extensions": "3.2.0-bcdfcee39750ffcee85a78c6f099a5a8b6ece0c2",
+    "@alfresco/adf-extensions": "3.2.0-beta7",
-    "@alfresco/js-api": "3.2.0-fa5916ff413131513c3e382d7f27dd9b4cfa0e7e",
+    "@alfresco/js-api": "3.2.0-beta7",
     "@angular/animations": "7.2.13",
     "@angular/cdk": "^7.3.7",
     "@angular/common": "7.2.13",

src/app/components/context-menu/context-menu.directive.ts

@@ -100,8 +100,7 @@ export class ContextActionsDirective implements OnInit, OnDestroy {
   }
 
   private getTarget(event: MouseEvent): Element {
-    // change back to 'adf-datatable-cell' once the [ADF-4401] issue is fixed
+    return this.findAncestor(<Element>event.target, 'adf-datatable-cell');
-    return this.findAncestor(<Element>event.target, 'adf-datatable-cell--');
   }
 
   private isSelected(target: Element): boolean {
@@ -114,15 +113,12 @@ export class ContextActionsDirective implements OnInit, OnDestroy {
     );
   }
 
-  private findAncestor(el: Element, classNameString: string): Element {
+  private findAncestor(el: Element, className: string): Element {
-    if (el.classList.value.includes(classNameString)) {
+    if (el.classList.contains(className)) {
       return el;
     }
     // tslint:disable-next-line:curly
-    while (
+    while ((el = el.parentElement) && !el.classList.contains(className));
-      (el = el.parentElement) &&
-      !el.classList.value.includes(classNameString)
-    );
     return el;
   }
 }

src/app/components/dl-custom-components/name-column/name-column.component.scss

@@ -1,15 +1,19 @@
 .aca-name-column-container {
   aca-locked-by {
-    position: absolute;
-    top: 17px;
-    left: 7px;
     display: flex;
     align-items: center;
     color: rgba(0, 0, 0, 0.54);
+    max-width: 100%;
+    padding: 0 10px;
+
+    .locked_by--name {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
   }
 }
 
 .aca-custom-name-column {
-  display: flex;
+  display: block;
   align-items: center;
 }

src/app/services/node-actions.service.ts

@@ -233,13 +233,17 @@ export class NodeActionsService {
           {
             entry: <Site>{
               guid: '-my-',
-              title: 'APP.BROWSE.PERSONAL.SIDENAV_LINK.LABEL'
+              title: this.translation.instant(
+                'APP.BROWSE.PERSONAL.SIDENAV_LINK.LABEL'
+              )
             }
           },
           {
             entry: <Site>{
               guid: '-mysites-',
-              title: 'APP.BROWSE.LIBRARIES.SIDENAV_LINK.LABEL'
+              title: this.translation.instant(
+                'APP.BROWSE.LIBRARIES.SIDENAV_LINK.LABEL'
+              )
             }
           }
         ]

src/app/ui/overrides/adf-document-list.theme.scss

@@ -15,49 +15,23 @@
   .adf-datatable-list {
     border: none;
 
-    .adf-datatable-cell-container {
+    .adf-ellipsis-cell {
-      .adf-datatable-content-cell,
+      overflow: hidden;
-      .adf-name-column,
+    }
-      .adf-library-name-column,
-      .adf-trashcan-name-column,
-      .adf-name-location-cell {
-        position: absolute;
-        max-width: calc(100% - 0px);
 
-        .adf-datatable-cell-value {
+    .adf-dynamic-column .adf-datatable-link:hover {
-          text-overflow: ellipsis;
+      text-decoration: none;
-          overflow: hidden;
-        }
 
-        // remove this style once the [ADF-4401] issue is fixed:
+      .adf-datatable-cell-value {
-        &.adf-datatable-cell {
+        text-decoration: underline;
-          .adf-datatable-cell-value {
-            position: static;
-            width: auto;
-          }
-        }
-      }
-
-      .adf-library-name-column {
-        // same as on top comment
-        &.adf-datatable-cell {
-          color: $document-list-name-text-color;
-
-          &:hover {
-            color: $document-list-selection-color;
-          }
-        }
       }
     }
 
-    .adf-datatable-cell-value {
+    .adf-datatable-cell,
-      display: block;
+    .adf-datatable-cell-header {
-    }
+      .adf-datatable-link .adf-datatable-cell-value {
-
+        padding: 0 10px;
-    .adf-datatable-cell--image {
+      }
-      min-width: $data-table-thumbnail-width;
-      width: $data-table-thumbnail-width;
-      max-width: $data-table-thumbnail-width;
     }
   }
 
@@ -76,10 +50,12 @@
 
     .adf-datatable-cell-header,
     .adf-datatable-cell {
-      padding: 0 2px;
-      box-sizing: border-box;
       min-width: 120px;
 
+      &.adf-no-grow-cell {
+        min-width: 120px;
+      }
+
       &.adf-datatable-cell--fileSize {
         min-width: 80px;
       }
@@ -123,5 +99,25 @@
     padding-top: 9px;
     padding-bottom: 9px;
     min-height: auto;
+
+    .adf-datatable-cell-value {
+      display: inline-block;
+      padding-left: 0;
+    }
+  }
+
+  .adf-content-node-selector-content-list .adf-datatable-list {
+    .adf-datatable-cell {
+      flex: 0 1 auto;
+      min-width: 1px;
+
+      &:nth-child(2) {
+        flex: 1 0 200px;
+      }
+
+      &.adf-content-selector-visibility-cell {
+        display: initial;
+      }
+    }
   }
 }