mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-4401] Fix DL issues because of nested 'adf-datatable-cell' items (#4615)
* [ADF-4401] remove classname from nested items - use 'adf-content-cell' instead * [ADF-4401] some DL display fixes - align header cells with content cells - columns aligned on Trashcan DL - ellipsis on long folder names inside the content node selector - more width on highlight cell from search-results * [ADF-4401] use 'adf-content-cell' - to allow ellipsis to display when a parent has 'adf-ellipsis-cell' class * [ADF-4401] remove not used styles * [ADF-4401] rename scss classname to have 'adf-datatable' prefix * [ADF-4401] Add documentation for datatable
This commit is contained in:
Suzana Dirla
committed by
Eugenio Romano
Eugenio Romano
parent
cc53d96698
commit
59eee6ebaf
@@ -52,7 +52,7 @@ import { Node } from '@alfresco/js-api';
|
||||
</ng-template>
|
||||
`,
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { class: 'adf-datatable-cell' }
|
||||
host: { class: 'adf-datatable-content-cell' }
|
||||
})
|
||||
export class DataTableCellComponent implements OnInit, OnDestroy {
|
||||
/** Data table adapter instance. */
|
||||
|
||||
@@ -19,6 +19,7 @@
|
||||
$data-table-card-padding: 24px !default;
|
||||
$data-table-cell-top: $data-table-card-padding / 2;
|
||||
$data-table-drag-border: 1px dashed rgb(68, 138, 255);
|
||||
$data-table-thumbnail-width: 50px !default;
|
||||
|
||||
.adf-datatable-card {
|
||||
|
||||
@@ -207,12 +208,14 @@
|
||||
padding-right: 20px;
|
||||
|
||||
.adf-datatable-checkbox {
|
||||
max-width: 50px;
|
||||
max-width: $data-table-thumbnail-width;
|
||||
width: $data-table-thumbnail-width;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable-cell {
|
||||
.adf-datatable-cell, .adf-datatable-cell-header {
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
|
||||
&--text {
|
||||
text-align: left;
|
||||
@@ -230,7 +233,8 @@
|
||||
&--image {
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
width: 10px;
|
||||
width: $data-table-thumbnail-width;
|
||||
min-width: $data-table-thumbnail-width;
|
||||
text-align: left;
|
||||
|
||||
}
|
||||
@@ -249,12 +253,11 @@
|
||||
font-weight: bold;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0;
|
||||
height: $data-table-row-height;
|
||||
min-height: $data-table-row-height !important;
|
||||
font-size: $data-table-header-font-size;
|
||||
color: $data-table-header-color;
|
||||
padding-bottom: 8px;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
|
||||
&:focus {
|
||||
outline-offset: -1px;
|
||||
@@ -280,7 +283,8 @@
|
||||
@include typo-icon;
|
||||
font-size: $data-table-header-sort-icon-size;
|
||||
content: '\e5d8';
|
||||
margin-right: 5px;
|
||||
left: 5px;
|
||||
position: relative;
|
||||
vertical-align: sub;
|
||||
}
|
||||
}
|
||||
@@ -335,7 +339,8 @@
|
||||
|
||||
.adf-datatable-cell-value {
|
||||
word-break: break-word;
|
||||
padding: 0 10px;
|
||||
padding: 10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@@ -348,15 +353,16 @@
|
||||
display: flex;
|
||||
min-height: inherit;
|
||||
align-items: center;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.adf-datatable__actions-cell, .adf-datatable-cell--image {
|
||||
max-width: 50px;
|
||||
max-width: $data-table-thumbnail-width;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.adf-datatable-cell--image {
|
||||
max-width: 50px;
|
||||
max-width: $data-table-thumbnail-width;
|
||||
}
|
||||
|
||||
.adf-location-cell {
|
||||
@@ -402,23 +408,20 @@
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
.adf-datatable-cell, .adf-datatable-cell-header {
|
||||
&.adf-datatable-cell-header,
|
||||
.adf-datatable-content-cell {
|
||||
max-width: calc(100% - 0.1px);
|
||||
overflow: hidden;
|
||||
|
||||
.adf-datatable-cell-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.adf-datatable-cell-value {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
width: calc(100% - 2em);
|
||||
position: absolute;
|
||||
// margin-top: -10px;
|
||||
}
|
||||
}
|
||||
.adf-datatable-content-cell {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* query for Microsoft IE 11*/
|
||||
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
|
||||
|
||||
@@ -48,7 +48,7 @@ import { AlfrescoApiService } from '../../../services/alfresco-api.service';
|
||||
</ng-template>
|
||||
`,
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { class: 'adf-date-cell adf-datatable-cell' }
|
||||
host: { class: 'adf-date-cell adf-datatable-content-cell' }
|
||||
})
|
||||
export class DateCellComponent extends DataTableCellComponent {
|
||||
currentLocale: string;
|
||||
|
||||
@@ -40,7 +40,7 @@ import { DataTableCellComponent } from './datatable-cell.component';
|
||||
`,
|
||||
styleUrls: ['./json-cell.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { class: 'adf-datatable-cell' }
|
||||
host: { class: 'adf-datatable-content-cell' }
|
||||
})
|
||||
export class JsonCellComponent extends DataTableCellComponent implements OnInit {
|
||||
|
||||
|
||||
@@ -37,7 +37,7 @@ import { AlfrescoApiService } from '../../../services/alfresco-api.service';
|
||||
</ng-container>
|
||||
`,
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { class: 'adf-location-cell' }
|
||||
host: { class: 'adf-location-cell adf-datatable-content-cell' }
|
||||
})
|
||||
export class LocationCellComponent extends DataTableCellComponent implements OnInit {
|
||||
@Input()
|
||||
|
||||
Reference in New Issue
Block a user