mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-06-30 18:15:11 +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
Eugenio Romano
parent
cc53d96698
commit
59eee6ebaf
@ -38,7 +38,7 @@ import { Node } from '@alfresco/js-api';
|
||||
`,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { class: 'adf-datatable-cell adf-datatable-link adf-name-column' }
|
||||
host: { class: 'adf-datatable-content-cell adf-datatable-link adf-name-column' }
|
||||
})
|
||||
export class NameColumnComponent implements OnInit, OnDestroy {
|
||||
@Input()
|
||||
|
||||
@ -288,7 +288,7 @@
|
||||
*ngIf="searchTerm"
|
||||
key="search"
|
||||
title="Search"
|
||||
class="adf-desktop-only">
|
||||
class="adf-desktop-only adf-expand-cell-3">
|
||||
<ng-template let-entry="$implicit">
|
||||
<div [innerHTML]="searchResultsHighlight(entry.row.node.entry.search) | highlight:searchTerm">
|
||||
</div>
|
||||
|
||||
@ -61,7 +61,8 @@
|
||||
key="name"
|
||||
title="DOCUMENT_LIST.COLUMNS.DISPLAY_NAME">
|
||||
<ng-template let-value="value" let-context>
|
||||
<span class="adf-datatable-cell" title="{{ context?.row?.obj | adfNodeNameTooltip }}">{{ value }}</span>
|
||||
<span title="{{ context?.row?.obj | adfNodeNameTooltip }}"
|
||||
class="adf-datatable-cell-value">{{ value }}</span>
|
||||
</ng-template>
|
||||
</data-column>
|
||||
|
||||
|
||||
@ -248,8 +248,19 @@ export class DataTableDemo {
|
||||
|
||||
### [Transclusions](../../user-guide/transclusion.md)
|
||||
|
||||
You can add [Data column component](data-column.component.md) instances to define columns for the
|
||||
table as described in the usage examples and the [Customizing columns](#customizing-columns) section.
|
||||
You can add [Data column component](data-column.component.md) instances to define columns for thetable as described in the usage examples and the [Customizing columns](#customizing-columns) section.
|
||||
|
||||
```html
|
||||
<adf-datatable ...>
|
||||
<data-column>
|
||||
<!--Add your custom empty template here-->
|
||||
<ng-template>
|
||||
<div></div>
|
||||
<span> My custom value </spam>
|
||||
</ng-template>
|
||||
</data-column>
|
||||
</adf-datatable>
|
||||
```
|
||||
|
||||
You can also supply a `<adf-no-content-template>` or an
|
||||
[Empty list component](empty-list.component.md) sub-component to show when the table is empty:
|
||||
@ -300,9 +311,32 @@ while the data for the table is loading:
|
||||
}
|
||||
```
|
||||
|
||||
###Styling transcluded content
|
||||
|
||||
When adding your custom templates you can style them as you like. However, for an out of the box experience, if you want to apply datatable styles to your column you will need to follow this structure:
|
||||
|
||||
```html
|
||||
<adf-datatable ...>
|
||||
<data-column>
|
||||
<!--Add your custom empty template here-->
|
||||
<ng-template>
|
||||
<div class="adf-datatable-content-cell">
|
||||
<span class="adf-datatable-cell-value"> My custom value </span>
|
||||
</div>
|
||||
</ng-template>
|
||||
</data-column>
|
||||
</adf-datatable>
|
||||
```
|
||||
|
||||
Notice above those two classes. Apply `adf-datatable-content-cell` for the container of the value that you are going to place in that column and `adf-datatable-cell-value` for the value itself.
|
||||
|
||||
If you follow these structure you will be able to apply classes like `.adf-ellipsis-cell` and much more.
|
||||
|
||||
Note that you can use both the `<adf-no-content-template>` and the `<adf-loading-content-template>`
|
||||
together in the same datatable.
|
||||
|
||||
Learm more about styling your datatable: [Customizing the component's styles](#customizing-the-components-styles)
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
@ -27,7 +27,7 @@ import { DataRow } from '@alfresco/adf-core';
|
||||
styleUrls: ['./name-location-cell.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
host: { class: 'adf-name-location-cell' }
|
||||
host: { class: 'adf-name-location-cell adf-datatable-content-cell' }
|
||||
})
|
||||
export class NameLocationCellComponent implements OnInit {
|
||||
|
||||
|
||||
@ -39,7 +39,7 @@ import { BehaviorSubject, Subscription } from 'rxjs';
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: {
|
||||
class: 'adf-datatable-cell adf-datatable-link adf-library-name-column'
|
||||
class: 'adf-datatable-content-cell adf-datatable-link adf-library-name-column'
|
||||
}
|
||||
})
|
||||
export class LibraryNameColumnComponent implements OnInit, OnDestroy {
|
||||
|
||||
@ -37,7 +37,7 @@ import { ShareDataRow } from '../../data/share-data-row.model';
|
||||
`,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { class: 'adf-library-role-column' }
|
||||
host: { class: 'adf-library-role-column adf-datatable-content-cell' }
|
||||
})
|
||||
export class LibraryRoleColumnComponent implements OnInit, OnDestroy {
|
||||
@Input()
|
||||
|
||||
@ -28,7 +28,7 @@ import { ShareDataRow } from '../../data/share-data-row.model';
|
||||
{{ (displayText$ | async) | translate }}
|
||||
</span>
|
||||
`,
|
||||
host: { class: 'adf-library-status-column' }
|
||||
host: { class: 'adf-library-status-column adf-datatable-content-cell' }
|
||||
})
|
||||
export class LibraryStatusColumnComponent implements OnInit, OnDestroy {
|
||||
@Input()
|
||||
|
||||
@ -39,7 +39,7 @@ import { ShareDataRow } from '../../data/share-data-row.model';
|
||||
`,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { class: 'adf-datatable-cell adf-datatable-link adf-name-column' }
|
||||
host: { class: 'adf-datatable-content-cell adf-datatable-link adf-name-column' }
|
||||
})
|
||||
export class NameColumnComponent implements OnInit, OnDestroy {
|
||||
@Input()
|
||||
|
||||
@ -37,7 +37,7 @@ import { ShareDataRow } from '../../data/share-data-row.model';
|
||||
`,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { class: 'adf-datatable-cell adf-trashcan-name-column' }
|
||||
host: { class: 'adf-datatable-content-cell adf-trashcan-name-column' }
|
||||
})
|
||||
export class TrashcanNameColumnComponent implements OnInit {
|
||||
@Input()
|
||||
|
||||
@ -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()
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user