documentation and example (#2081)

This commit is contained in:
Denys Vuika 2017-07-13 20:35:31 +01:00 committed by Eugenio Romano
parent f6c3fafe32
commit ef518ea822
4 changed files with 84 additions and 3 deletions

View File

@ -19,3 +19,25 @@
.adf-not-overlay-viewer {
height:900px;
}
adf-document-list >>> adf-datatable .alfresco-datatable__row--selected .image-table-cell {
position: relative;
}
adf-document-list >>> adf-datatable .alfresco-datatable__row--selected .image-table-cell::before {
content: "\E876"; /* "done" */
font-family: "Material Icons";
font-size: 24px;
line-height: 32px;
text-align: center;
color: white;
position: absolute;
width: 32px;
height: 32px;
top: 50%;
left: 50%;
margin-top: -16px;
margin-left: -14px;
border-radius: 100%;
background: #00bcd4;
}

View File

@ -40,7 +40,7 @@
</md-menu>
</adf-toolbar>
</ng-container>
<alfresco-document-list
<adf-document-list
#documentList
[creationMenuActions]="!useCustomToolbar"
[currentFolderId]="currentFolderId"
@ -52,7 +52,12 @@
(preview)="showFile($event)"
(permissionError)="handlePermissionError($event)">
<data-columns>
<data-column key="$thumbnail" type="image" [sortable]="false"></data-column>
<data-column
key="$thumbnail"
type="image"
[sortable]="false"
class="image-table-cell">
</data-column>
<data-column
title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
key="name"
@ -111,7 +116,7 @@
handler="delete">
</content-action>
</content-actions>
</alfresco-document-list>
</adf-document-list>
</alfresco-upload-drag-area>
</div>

View File

@ -201,6 +201,60 @@ It helps examining other valuable information you can have access to if needed:
**Important note**: for this particular scenario you must also trigger `changeDetector.detectChanges()` as in the example above.
## Custom icons for selected rows
You can use the "class" property of the "DataColumn" component to apply your custom css.
As an example, this feature can be used to change the look and feel of the icon for the selected rows.
Let's start by assigning an "image-table-cell" class to the thumbnail column:
```html
<adf-document-list ...>
<data-columns>
<data-column
key="$thumbnail"
type="image"
[sortable]="false"
class="image-table-cell">
</data-column>
...
</data-columns>
</adf-document-list>
```
Now your application can define custom styles to change the content of the column based on some other conditions, like selection state:
```css
adf-document-list >>> adf-datatable .alfresco-datatable__row--selected .image-table-cell {
position: relative;
}
adf-document-list >>> adf-datatable .alfresco-datatable__row--selected .image-table-cell::before {
content: "\E876"; /* "done" */
font-family: "Material Icons";
font-size: 24px;
line-height: 32px;
text-align: center;
color: white;
position: absolute;
width: 32px;
height: 32px;
top: 50%;
left: 50%;
margin-top: -16px;
margin-left: -14px;
border-radius: 100%;
background: #00bcd4;
}
```
Once your application starts you should see the following icon for each selected row:
![view-child](docs/assets/document-list-custom-icon.png)
## Calling DocumentList api directly
Typically you will be binding DocumentList properties to your application/component class properties:

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB