From 3a8a08ef5e1a82ebd24dc96123defb68ea773153 Mon Sep 17 00:00:00 2001
From: Tobias Klika <cee@live.at>
Date: Sat, 11 Apr 2020 16:34:24 +0200
Subject: [PATCH] multiline for table cells

---
 zero.Web/App/Components/Tables/table-value.js |  2 +
 zero.Web/App/Components/Tables/table.vue      | 45 ++++++++++++-------
 zero.Web/App/Pages/lists.vue                  | 13 +++---
 3 files changed, 38 insertions(+), 22 deletions(-)

diff --git a/zero.Web/App/Components/Tables/table-value.js b/zero.Web/App/Components/Tables/table-value.js
index eed6f0cc..e192acc7 100644
--- a/zero.Web/App/Components/Tables/table-value.js
+++ b/zero.Web/App/Components/Tables/table-value.js
@@ -19,6 +19,8 @@ export default function (el, binding)
     }
   };
 
+  // set multiline for cell
+  el.classList.toggle('is-multiline', column.multiline === true);
 
   // render empty
   //if (isEmpty)
diff --git a/zero.Web/App/Components/Tables/table.vue b/zero.Web/App/Components/Tables/table.vue
index 1d9fb03e..60744715 100644
--- a/zero.Web/App/Components/Tables/table.vue
+++ b/zero.Web/App/Components/Tables/table.vue
@@ -4,16 +4,15 @@
       <header class="ui-table-row ui-table-head">      
         <div v-for="column in columns" class="ui-table-cell" :table-field="column.field">
           {{ column.label | localize }}
-          <button v-if="column.canSort" @click="sort(column)" type="button" class="ui-table-sort" :class="filter.orderBy == column.field ? 'sort-' + (filter.isDescending ? 'desc' : 'asc') : null">
+          <button :disabled="!column.canSort" @click="sort(column)" type="button" class="ui-table-sort" :class="filter.orderBy == column.field ? 'sort-' + (filter.isDescending ? 'desc' : 'asc') : null">
             <i class="arrow arrow-down"></i>
           </button>
         </div>
       </header>
-      <content class="ui-table-body">
-        <div class="ui-table-row" v-for="item in items">
-          <div v-for="column in columns" class="ui-table-cell" :table-field="column.field" v-table-value="{ item, column }"></div>
-        </div>
-      </content>
+
+      <div class="ui-table-row" v-for="item in items">
+        <div v-for="column in columns" class="ui-table-cell" :table-field="column.field" v-table-value="{ item, column }"></div>
+      </div>
     </div>
 
     <footer class="ui-table-pagination" v-if="pages > 1">
@@ -176,7 +175,7 @@
     width: 100%;
     border-bottom: 1px solid var(--color-line-light);
     position: relative;
-    min-height: 60px;
+    //min-height: 60px;
     outline: 1px solid transparent;
     transition: outline 0.1s ease, box-shadow 0.1s ease;
 
@@ -224,27 +223,36 @@
 
   .ui-table-cell
   {
-    display: inline-flex;
+    display: inline-block;
     align-items: center;
-    flex: 1 1 5%;
+    flex: 1 0 5%;
     position: relative;
     text-align: left;
-    overflow: hidden;
-    padding: 10px 20px;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    padding: 18px 20px 17px 20px;
     border-left: 1px solid var(--color-line-light);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 20px;
+    line-height: 20px;
 
     &:first-child
     {
       border-left: none;
     }
+
+    &.is-multiline
+    {
+      white-space: normal;
+      overflow: auto;
+      text-overflow: initial;
+    }
   }
 
   .ui-table-sort
   {
-    height: 29px;
-    width: 29px;
+    height: 20px;
+    width: 20px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -252,6 +260,13 @@
     border-radius: 15px;
     transition: background 0.2s ease;
 
+    &[disabled]
+    {
+      opacity: 0;
+      visibility: hidden;
+      pointer-events: none;
+    }
+
     .arrow
     {
       border-top-color: var(--color-fg);
diff --git a/zero.Web/App/Pages/lists.vue b/zero.Web/App/Pages/lists.vue
index d1d1bacf..61263071 100644
--- a/zero.Web/App/Pages/lists.vue
+++ b/zero.Web/App/Pages/lists.vue
@@ -27,19 +27,18 @@
           no: 'text',
           createdDate: {
             label: '@ui.createdDate',
-            as: 'datetime',
-            size: 's'
+            as: 'datetime'
+          },
+          username: {
+            as: 'text'
           },
-          username: 'text',
           price: {
             as: 'price',
-            size: 's',
             sort: false
           },
           isPublished: {
             label: 'Published',
-            as: 'bool',
-            size: 'xs'
+            as: 'bool'
           },
           status: {
             as: 'html',
@@ -79,7 +78,7 @@
             {
               no: 3,
               createdDate: '2020-03-07T17:17:25.229+01:00',
-              username: 'Christian Klika',
+              username: 'Christian Klika, das ist mein Name und der könnte noch viel länger sein',
               price: 123.00,
               status: 'Completed'
             },