inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

2
demo-shell/src/app/components/datatable/datatable.component.ts
View File

@@ -115,7 +115,7 @@ export class DataTableComponent {
], ],
[ [
{ type: 'image', key: 'icon', title: '', srTitle: 'Thumbnail' }, { 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: '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: 'name', title: 'Name', cssClass: 'adf-ellipsis-cell', sortable: true },
{ type: 'text', key: 'createdBy.name', title: 'Created By', sortable: true, cssClass: ''} { type: 'text', key: 'createdBy.name', title: 'Created By', sortable: true, cssClass: ''}

6
lib/content-services/content-node-selector/content-node-selector-panel.component.scss
View File

@@ -119,7 +119,7 @@
} }
.adf-datatable-body .adf-datatable-row { .adf-datatable-body .adf-datatable-row {
height: auto !important; min-height: 40px;
&:first-child { &:first-child {
.adf-datatable-cell { .adf-datatable-cell {
@@ -136,9 +136,9 @@
} }
&-searchLayout { &-searchLayout {
height: auto !important; .adf-datatable-list .adf-datatable-row {
min-height: 65px !important;
.adf-datatable-list {
.adf-datatable-cell { .adf-datatable-cell {
& .adf-name-location-cell-location { & .adf-name-location-cell-location {

27
lib/core/datatable/components/datatable/datatable.component.scss
View File

@@ -181,8 +181,10 @@
@include material-animation-default(0.28s); @include material-animation-default(0.28s);
transition-property: background-color; transition-property: background-color;
border-top: $data-table-dividers; border-top: $data-table-dividers;
padding-top: 12px; min-height: 65px;
padding-bottom: 12px; cursor: pointer;
@include adf-no-select;
&:hover { &:hover {
background-color: $data-table-hover-color; background-color: $data-table-hover-color;
@@ -249,6 +251,13 @@
box-sizing: border-box; box-sizing: border-box;
white-space: nowrap; white-space: nowrap;
&:focus {
outline-offset: -1px;
outline-width: 1px;
outline-color: rgb(68, 138, 255);
outline-style: solid;
}
&.adf-sortable { &.adf-sortable {
@include adf-no-select; @include adf-no-select;
&:hover { &:hover {
@@ -303,9 +312,15 @@
.adf-datatable-cell, .adf-datatable-cell-header { .adf-datatable-cell, .adf-datatable-cell-header {
flex: 1; flex: 1;
padding: 0; padding: 0;
align-items: center;
display: flex;
min-height: inherit;
.adf-datatable-cell-container { .adf-datatable-cell-container {
overflow: hidden; overflow: hidden;
min-height: inherit;
align-items: center;
display: flex;
} }
.adf-datatable-cell-value { .adf-datatable-cell-value {
@@ -316,6 +331,8 @@
.adf-cell-value { .adf-cell-value {
display: flex; display: flex;
min-height: inherit;
align-items: center;
} }
.adf-datatable__actions-cell, .adf-datatable-cell--image { .adf-datatable__actions-cell, .adf-datatable-cell--image {
@@ -365,10 +382,6 @@
} }
} }
.adf-expand-cell {
}
.adf-ellipsis-cell { .adf-ellipsis-cell {
position: sticky; position: sticky;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -388,7 +401,7 @@
display: block; display: block;
width: calc(100% - 2em); width: calc(100% - 2em);
position: absolute; position: absolute;
margin-top: -10px; // margin-top: -10px;
} }
} }