#156 added row alignment

headwirecom · Sep 3, 2020 · c681126 · c681126
1 parent 5cbca32
commit c681126
Show file tree

Hide file tree

Showing 7 changed files with 137 additions and 5 deletions.
diff --git a/core/src/main/java/com/themecleanflex/models/DatalistModel.java b/core/src/main/java/com/themecleanflex/models/DatalistModel.java
@@ -84,6 +84,27 @@
             }
           }
         },
+        "rowalignment": {
+          "type": "string",
+          "x-source": "inject",
+          "x-form-label": "Row alignment",
+          "x-form-type": "materialselect",
+          "x-default": "top",
+          "properties": {
+            "top": {
+              "x-form-name": "top",
+              "x-form-value": "top"
+            },
+            "center": {
+              "x-form-name": "center",
+              "x-form-value": "center"
+            },
+            "bottom": {
+              "x-form-name": "bottom",
+              "x-form-value": "bottom"
+            }
+          }
+        },
         "stripedrows": {
           "type": "string",
           "x-source": "inject",
@@ -484,6 +505,11 @@ public class DatalistModel extends AbstractComponent {
 	@Inject
 	private List<IComponent> columns;
 
+	/* {"type":"string","x-source":"inject","x-form-label":"Row alignment","x-form-type":"materialselect","x-default":"top","properties":{"top":{"x-form-name":"top","x-form-value":"top"},"center":{"x-form-name":"center","x-form-value":"center"},"bottom":{"x-form-name":"bottom","x-form-value":"bottom"}}} */
+	@Inject
+	@Default(values ="top")
+	private String rowalignment;
+
 	/* {"type":"string","x-source":"inject","x-form-label":"Striped Rows","x-form-type":"materialswitch","x-default":false} */
 	@Inject
 	private String stripedrows;
@@ -652,6 +678,11 @@ public List<IComponent> getColumns() {
 		return columns;
 	}
 
+	/* {"type":"string","x-source":"inject","x-form-label":"Row alignment","x-form-type":"materialselect","x-default":"top","properties":{"top":{"x-form-name":"top","x-form-value":"top"},"center":{"x-form-name":"center","x-form-value":"center"},"bottom":{"x-form-name":"bottom","x-form-value":"bottom"}}} */
+	public String getRowalignment() {
+		return rowalignment;
+	}
+
 	/* {"type":"string","x-source":"inject","x-form-label":"Striped Rows","x-form-type":"materialswitch","x-default":false} */
 	public String getStripedrows() {
 		return stripedrows;

diff --git a/fragments/datalist/hatch.js b/fragments/datalist/hatch.js
@@ -35,7 +35,16 @@ module.exports = {
         f.mapField(mobileTd, 'data[col.value]', false)
 
         mobileTr.prepend("<td class='mobile-header'>{{col.header}}</td>")
-        f.bindAttribute($.find('.mobile-table td'), 'class', `{ 'border': model.cellborders === 'true', 'p-3': model.densetable !== 'true', 'p-1': model.densetable === 'true'}`, false)
+
+        const mobileTdClasses = `{
+            'border': model.cellborders === 'true', 
+            'p-3': model.densetable !== 'true', 
+            'p-1': model.densetable === 'true',
+            'align-top':  model.rowalignment === 'top' ||  model.rowalignment === '',
+            'align-center':  model.rowalignment === 'center',
+            'align-bottom':  model.rowalignment === 'bottom'
+        }`
+        f.bindAttribute($.find('.mobile-table td'), 'class', mobileTdClasses, false)
 
         const table = $.find('table')
         const tableClasses = `{
@@ -81,6 +90,9 @@ module.exports = {
             'text-left':  (col && col.textalignment === 'left') ||  (col && col.textalignment === ''),
             'text-center':  col && col.textalignment === 'center',
             'text-right':  col && col.textalignment === 'right',
+            'align-top':  model.rowalignment === 'top' ||  model.rowalignment === '',
+            'align-center':  model.rowalignment === 'center',
+            'align-bottom':  model.rowalignment === 'bottom'
         }`    
         f.bindAttribute(tdItem, 'class', tdClasses, false)
         f.addStyle(tdItem, 'background', "active[j] ? 'var(--color-red-500) !important' : ''")

diff --git a/fragments/datalist/model.json b/fragments/datalist/model.json
@@ -67,6 +67,27 @@
             }
           }
         },
+        "rowalignment": {
+          "type": "string",
+          "x-source": "inject",
+          "x-form-label": "Row alignment",
+          "x-form-type": "materialselect",
+          "x-default": "top",
+          "properties":{
+            "top": {
+              "x-form-name": "top",
+              "x-form-value": "top"
+            },
+            "center": {
+              "x-form-name": "center",
+              "x-form-value": "center"
+            },
+            "bottom": {
+              "x-form-name": "bottom",
+              "x-form-value": "bottom"
+            }
+          }
+        },
         "stripedrows": {
           "type": "string",
           "x-source": "inject",

diff --git a/fragments/datalist/template.vue b/fragments/datalist/template.vue
@@ -70,6 +70,9 @@
             'text-left':  (col &amp;&amp; col.textalignment === 'left') ||  (col &amp;&amp; col.textalignment === ''),
             'text-center':  col &amp;&amp; col.textalignment === 'center',
             'text-right':  col &amp;&amp; col.textalignment === 'right',
+            'align-top':  model.rowalignment === 'top' ||  model.rowalignment === '',
+            'align-center':  model.rowalignment === 'center',
+            'align-bottom':  model.rowalignment === 'bottom'
         }">
               <span class="action relative cursor-pointer" v-on:click="toggleRow(j)">
                 <input type="checkbox" data-indeterminate="false" value class="h-100 m-0 opacity-0 p-0 z-10 w-48 absolute">
@@ -91,6 +94,9 @@
             'text-left':  (col &amp;&amp; col.textalignment === 'left') ||  (col &amp;&amp; col.textalignment === ''),
             'text-center':  col &amp;&amp; col.textalignment === 'center',
             'text-right':  col &amp;&amp; col.textalignment === 'right',
+            'align-top':  model.rowalignment === 'top' ||  model.rowalignment === '',
+            'align-center':  model.rowalignment === 'center',
+            'align-bottom':  model.rowalignment === 'bottom'
         }" v-bind:style="`background:${active[j] ? 'var(--color-red-500) !important' : ''};`">
               <span class="item-text" v-bind:style="`color:${active[j] ? 'var(--text-secondary-color) !important' : ''};`">{{data[col.value]}}</span>
             </td>
@@ -114,9 +120,23 @@
         }">
         <tbody>
           <tr v-for="(col, i) in model.columns" :key="col.path || i">
-            <td class="mobile-header" v-bind:class="{ 'border': model.cellborders === 'true', 'p-3': model.densetable !== 'true', 'p-1': model.densetable === 'true'}">{{col.header}}</td>
+            <td class="mobile-header" v-bind:class="{
+            'border': model.cellborders === 'true', 
+            'p-3': model.densetable !== 'true', 
+            'p-1': model.densetable === 'true',
+            'align-top':  model.rowalignment === 'top' ||  model.rowalignment === '',
+            'align-center':  model.rowalignment === 'center',
+            'align-bottom':  model.rowalignment === 'bottom'
+        }">{{col.header}}</td>
             <td v-for="(data, i) in storageData" :key="data.path || i"
-            v-bind:class="{ 'border': model.cellborders === 'true', 'p-3': model.densetable !== 'true', 'p-1': model.densetable === 'true'}">{{data[col.value]}}</td>
+            v-bind:class="{
+            'border': model.cellborders === 'true', 
+            'p-3': model.densetable !== 'true', 
+            'p-1': model.densetable === 'true',
+            'align-top':  model.rowalignment === 'top' ||  model.rowalignment === '',
+            'align-center':  model.rowalignment === 'center',
+            'align-bottom':  model.rowalignment === 'bottom'
+        }">{{data[col.value]}}</td>
           </tr>
         </tbody>
         <caption v-bind:class="{

diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/datalist/dialog.json b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/datalist/dialog.json
@@ -70,6 +70,26 @@
       "label": "Table Configuration",
       "model": "columns"
     },
+    {
+      "type": "material-select",
+      "values": [
+        {
+          "name": "top",
+          "value": "top"
+        },
+        {
+          "name": "center",
+          "value": "center"
+        },
+        {
+          "name": "bottom",
+          "value": "bottom"
+        }
+      ],
+      "placeholder": "rowalignment",
+      "label": "Row alignment",
+      "model": "rowalignment"
+    },
     {
       "type": "materialswitch",
       "textOn": "yes",

diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/datalist/template.vue b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/datalist/template.vue
@@ -70,6 +70,9 @@
             'text-left':  (col &amp;&amp; col.textalignment === 'left') ||  (col &amp;&amp; col.textalignment === ''),
             'text-center':  col &amp;&amp; col.textalignment === 'center',
             'text-right':  col &amp;&amp; col.textalignment === 'right',
+            'align-top':  model.rowalignment === 'top' ||  model.rowalignment === '',
+            'align-center':  model.rowalignment === 'center',
+            'align-bottom':  model.rowalignment === 'bottom'
         }">
               <span class="action relative cursor-pointer" v-on:click="toggleRow(j)">
                 <input type="checkbox" data-indeterminate="false" value class="h-100 m-0 opacity-0 p-0 z-10 w-48 absolute">
@@ -91,6 +94,9 @@
             'text-left':  (col &amp;&amp; col.textalignment === 'left') ||  (col &amp;&amp; col.textalignment === ''),
             'text-center':  col &amp;&amp; col.textalignment === 'center',
             'text-right':  col &amp;&amp; col.textalignment === 'right',
+            'align-top':  model.rowalignment === 'top' ||  model.rowalignment === '',
+            'align-center':  model.rowalignment === 'center',
+            'align-bottom':  model.rowalignment === 'bottom'
         }" v-bind:style="`background:${active[j] ? 'var(--color-red-500) !important' : ''};`">
               <span class="item-text" v-bind:style="`color:${active[j] ? 'var(--text-secondary-color) !important' : ''};`">{{data[col.value]}}</span>
             </td>
@@ -114,9 +120,23 @@
         }">
         <tbody>
           <tr v-for="(col, i) in model.columns" :key="col.path || i">
-            <td class="mobile-header" v-bind:class="{ 'border': model.cellborders === 'true', 'p-3': model.densetable !== 'true', 'p-1': model.densetable === 'true'}">{{col.header}}</td>
+            <td class="mobile-header" v-bind:class="{
+            'border': model.cellborders === 'true', 
+            'p-3': model.densetable !== 'true', 
+            'p-1': model.densetable === 'true',
+            'align-top':  model.rowalignment === 'top' ||  model.rowalignment === '',
+            'align-center':  model.rowalignment === 'center',
+            'align-bottom':  model.rowalignment === 'bottom'
+        }">{{col.header}}</td>
             <td v-for="(data, i) in storageData" :key="data.path || i"
-            v-bind:class="{ 'border': model.cellborders === 'true', 'p-3': model.densetable !== 'true', 'p-1': model.densetable === 'true'}">{{data[col.value]}}</td>
+            v-bind:class="{
+            'border': model.cellborders === 'true', 
+            'p-3': model.densetable !== 'true', 
+            'p-1': model.densetable === 'true',
+            'align-top':  model.rowalignment === 'top' ||  model.rowalignment === '',
+            'align-center':  model.rowalignment === 'center',
+            'align-bottom':  model.rowalignment === 'bottom'
+        }">{{data[col.value]}}</td>
           </tr>
         </tbody>
         <caption v-bind:class="{

diff --git a/ui.apps/src/main/content/jcr_root/etc/felibs/themecleanflex/css/build.css b/ui.apps/src/main/content/jcr_root/etc/felibs/themecleanflex/css/build.css
@@ -1202,6 +1202,14 @@ video {
   text-decoration: underline;
 }
 
+.align-top {
+  vertical-align: top;
+}
+
+.align-bottom {
+  vertical-align: bottom;
+}
+
 .visible {
   visibility: visible;
 }