[ADF-4196] Improve Datatable component row click selection (#4411)

This commit is contained in:
davidcanonieto
2019-03-13 12:12:33 +00:00
committed by Eugenio Romano
parent 9c33eeeb81
commit 250e5e52c4
3 changed files with 24 additions and 11 deletions

View File

@@ -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: ''}

View File

@@ -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 {

View File

@@ -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;
}
}