From 250e5e52c48f1423a9f4d5b4b3b9230627851265 Mon Sep 17 00:00:00 2001
From: davidcanonieto <david.cano@alfresco.com>
Date: Wed, 13 Mar 2019 12:12:33 +0000
Subject: [PATCH] [ADF-4196] Improve Datatable component row click selection
 (#4411)

---
 .../datatable/datatable.component.ts          |  2 +-
 ...content-node-selector-panel.component.scss |  6 ++---
 .../datatable/datatable.component.scss        | 27 ++++++++++++++-----
 3 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/demo-shell/src/app/components/datatable/datatable.component.ts b/demo-shell/src/app/components/datatable/datatable.component.ts
index f979512b80..2d500abed9 100644
--- a/demo-shell/src/app/components/datatable/datatable.component.ts
+++ b/demo-shell/src/app/components/datatable/datatable.component.ts
@@ -115,7 +115,7 @@ export class DataTableComponent {
             ],
             [
                 { type: 'image', key: 'icon', title: '', srTitle: 'Thumbnail' },
-                { type: 'text', key: 'id', title: 'Id', sortable: true , cssClass: 'adf-ellipsis-cell' },
+                { type: 'text', key: 'id', title: 'Id', sortable: true , cssClass: '' },
                 { type: 'text', key: 'createdOn', title: 'Created On', sortable: true, cssClass: 'adf-ellipsis-cell adf-expand-cell-5' },
                 { type: 'text', key: 'name', title: 'Name', cssClass: 'adf-ellipsis-cell', sortable: true },
                 { type: 'text', key: 'createdBy.name', title: 'Created By', sortable: true, cssClass: ''}
diff --git a/lib/content-services/content-node-selector/content-node-selector-panel.component.scss b/lib/content-services/content-node-selector/content-node-selector-panel.component.scss
index 251018d0ce..af8fc13291 100644
--- a/lib/content-services/content-node-selector/content-node-selector-panel.component.scss
+++ b/lib/content-services/content-node-selector/content-node-selector-panel.component.scss
@@ -119,7 +119,7 @@
                     }
 
                     .adf-datatable-body .adf-datatable-row {
-                        height: auto !important;
+                        min-height: 40px;
 
                         &:first-child {
                             .adf-datatable-cell {
@@ -136,9 +136,9 @@
                 }
 
                 &-searchLayout {
-                    height: auto !important;
+                    .adf-datatable-list .adf-datatable-row {
+                        min-height: 65px !important;
 
-                    .adf-datatable-list {
                         .adf-datatable-cell {
 
                             & .adf-name-location-cell-location {
diff --git a/lib/core/datatable/components/datatable/datatable.component.scss b/lib/core/datatable/components/datatable/datatable.component.scss
index 99c44e327d..6c3de6beec 100644
--- a/lib/core/datatable/components/datatable/datatable.component.scss
+++ b/lib/core/datatable/components/datatable/datatable.component.scss
@@ -181,8 +181,10 @@
                 @include material-animation-default(0.28s);
                 transition-property: background-color;
                 border-top: $data-table-dividers;
-                padding-top: 12px;
-                padding-bottom: 12px;
+                min-height: 65px;
+                cursor: pointer;
+
+                @include adf-no-select;
 
                 &:hover {
                     background-color: $data-table-hover-color;
@@ -249,6 +251,13 @@
             box-sizing: border-box;
             white-space: nowrap;
 
+            &:focus {
+                outline-offset: -1px;
+                outline-width: 1px;
+                outline-color: rgb(68, 138, 255);
+                outline-style: solid;
+            }
+
             &.adf-sortable {
                 @include adf-no-select;
                 &:hover {
@@ -303,9 +312,15 @@
         .adf-datatable-cell, .adf-datatable-cell-header {
             flex: 1;
             padding: 0;
+            align-items: center;
+            display: flex;
+            min-height: inherit;
 
             .adf-datatable-cell-container {
                 overflow: hidden;
+                min-height: inherit;
+                align-items: center;
+                display: flex;
             }
 
             .adf-datatable-cell-value {
@@ -316,6 +331,8 @@
 
         .adf-cell-value {
             display: flex;
+            min-height: inherit;
+            align-items: center;
         }
 
         .adf-datatable__actions-cell, .adf-datatable-cell--image {
@@ -365,10 +382,6 @@
             }
         }
 
-        .adf-expand-cell {
-
-        }
-
         .adf-ellipsis-cell {
             position: sticky;
             text-overflow: ellipsis;
@@ -388,7 +401,7 @@
                     display: block;
                     width: calc(100% - 2em);
                     position: absolute;
-                    margin-top: -10px;
+                    // margin-top: -10px;
                 }
             }