documentation and example (#2081)

demo-shell-ng2/app/components/files/files.component.css

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

demo-shell-ng2/app/components/files/files.component.html

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