#254 UI improvements

- out-of-box ‘ellipsis-cell’ class for styling columns
- extended demo with long column text truncation
- table cell layout improvements

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

@@ -24,7 +24,7 @@
             <content-column
                     title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
                     source="name"
-                    class="full-width name-column">
+                    class="full-width ellipsis-cell">
             </content-column>
             <!--
             <content-column

ng2-components/ng2-alfresco-documentlist/demo/src/main.ts

@@ -62,7 +62,7 @@ import {
                     <content-column
                             title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
                             source="name"
-                            class="full-width name-column">
+                            class="full-width ellipsis-cell">
                     </content-column>
                     <content-column
                             title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"

ng2-components/ng2-alfresco-documentlist/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ng2-alfresco-documentlist",
   "description": "Alfresco Angular2 Document List Component",
-  "version": "0.1.27",
+  "version": "0.1.28",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
     "clean": "rimraf dist node_modules typings",

ng2-components/ng2-alfresco-documentlist/src/components/document-list.css

@@ -23,11 +23,6 @@
 }
 :host .cell-value {}
 
-:host .data-cell.name-column {
-    font-size: 15px;
-    cursor: default;
-}
-
 /* Empty folder */
 
 :host .empty-folder-content {
@@ -58,3 +53,34 @@
     clip: rect(0,0,0,0);
     border: 0;
 }
+
+
+:host .ellipsis-cell > div
+{
+    position: relative;
+    overflow: hidden;
+    height: 1em;
+}
+
+
+/* visible content */
+:host .ellipsis-cell > div > span
+{
+    display: block;
+    position: absolute;
+    max-width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 1em;		/* for vertical align of text */
+}
+
+
+/* cell stretching content */
+:host .ellipsis-cell > div:after
+{
+    content: attr(title);
+    overflow: hidden;
+    height: 0;
+    display: block;
+}

ng2-components/ng2-alfresco-documentlist/src/components/document-list.html

@@ -31,12 +31,12 @@
             <div *ngSwitchCase="'image'" class="cell-value">
                 <img class="thumbnail" [src]="getCellValue(content, col)">
             </div>
-            <span *ngSwitchCase="'date'" class="cell-value">
+            <div *ngSwitchCase="'date'" class="cell-value">
-                {{ getCellValue(content, col) }}
+                <span>{{ getCellValue(content, col) }}</span>
-            </span>
+            </div>
-            <span *ngSwitchDefault class="cell-value">
+            <div *ngSwitchDefault class="cell-value">
-                {{ getCellValue(content, col) }}
+                <span>{{ getCellValue(content, col) }}</span>
-            </span>
+            </div>
         </td>
 
         <!-- Actions: folder -->