From 5a53fc90121b333386e35e3cc57cd5cd44f635a5 Mon Sep 17 00:00:00 2001
From: Tobias Klika <cee@live.at>
Date: Sat, 22 Jan 2022 15:53:25 +0100
Subject: [PATCH] some fixes

---
 zero.Backoffice.UI/app/components/ui-button.vue  |  8 ++++++--
 zero.Backoffice.UI/app/components/ui-table.scss  |  7 ++++++-
 zero.Backoffice.UI/app/components/ui-table.vue   | 15 +++++++--------
 zero.Backoffice.UI/app/components/ui-trinity.vue |  5 +++++
 4 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/zero.Backoffice.UI/app/components/ui-button.vue b/zero.Backoffice.UI/app/components/ui-button.vue
index 0cae77bb..358bd92b 100644
--- a/zero.Backoffice.UI/app/components/ui-button.vue
+++ b/zero.Backoffice.UI/app/components/ui-button.vue
@@ -1,6 +1,6 @@
 <template>
   <button :type="buttonType" class="ui-button has-state" :class="buttonClass" :disabled="disabled || state == 'loading' || !isDefaultState" @click="tryClick">
-    <span v-if="label" class="ui-button-text" v-localize:html="label"></span>
+    <span v-if="label" class="ui-button-text" v-localize:html="{ key: label, tokens: tokens }"></span>
     <ui-icon v-if="caret" :symbol="caretSymbol" class="ui-button-caret" />
     <ui-icon v-if="icon" :symbol="icon" class="ui-button-icon" :stroke="stroke" />
     <span v-if="!isDefaultState" class="ui-button-state">
@@ -62,7 +62,11 @@
       attach: {
         type: Boolean,
         default: false
-      }
+      },
+      tokens: {
+        type: Object,
+        default: null
+      },
     },
 
     data: () => ({
diff --git a/zero.Backoffice.UI/app/components/ui-table.scss b/zero.Backoffice.UI/app/components/ui-table.scss
index ad8dc298..347a4f22 100644
--- a/zero.Backoffice.UI/app/components/ui-table.scss
+++ b/zero.Backoffice.UI/app/components/ui-table.scss
@@ -124,7 +124,12 @@ a.ui-table-row:hover, button.ui-table-row:hover
     flex: 0 1 40px;
     text-align: center;
     padding: 0;
-    justify-content: center;
+    justify-content: flex-end;
+
+    .ui-native-check-toggle
+    {
+      margin-right: 0;
+    }
   }
 
   &.is-options
diff --git a/zero.Backoffice.UI/app/components/ui-table.vue b/zero.Backoffice.UI/app/components/ui-table.vue
index 2352998b..5adabfb5 100644
--- a/zero.Backoffice.UI/app/components/ui-table.vue
+++ b/zero.Backoffice.UI/app/components/ui-table.vue
@@ -4,31 +4,31 @@
       <slot name="top"></slot>
 
       <header class="ui-table-row ui-table-head">      
-        <div v-for="column in columns" :key="column.path" class="ui-table-cell" :table-field="column.path" :style="column.flex" :class="column.options.class">
-          <span v-localize:html="column.label"></span>
-          <button :disabled="!column.options.canSort" @click="sort(column)" type="button" class="ui-table-sort" :class="query.orderBy == column.path ? 'sort-' + (query.orderIsDescending ? 'desc' : 'asc') : null">
-            <i class="arrow arrow-down"></i>
-          </button>
-        </div>
         <button type="button" v-if="listConfig.selectable" table-field="table_selectable" class="ui-table-cell is-head is-selectable" @click="select()">
           <span class="ui-native-check">
             <input type="checkbox" :checked="selected.length === items.length && selected.length > 0" />
             <span class="ui-native-check-toggle"></span>
           </span>
         </button>
+        <div v-for="column in columns" :key="column.path" class="ui-table-cell" :table-field="column.path" :style="column.flex" :class="column.options.class">
+          <span v-localize:html="column.label"></span>
+          <button :disabled="!column.options.canSort" @click="sort(column)" type="button" class="ui-table-sort" :class="query.orderBy == column.path ? 'sort-' + (query.orderIsDescending ? 'desc' : 'asc') : null">
+            <i class="arrow arrow-down"></i>
+          </button>
+        </div>
         <div v-if="listConfig.hasOptions" table-field="table_options" class="ui-table-cell is-head is-options"></div>
       </header>
 
       <slot name="topRow"></slot>
 
       <component :is="component" v-for="(item, index) in items" :key="index" :to="getLink(item)" type="button" class="ui-table-row" :class="{ 'is-selected': selected.indexOf(item) > -1 }" @click="onRowClick(item)">
-        <div v-for="column in columns" :key="column.path" class="ui-table-cell" :class="column.class" :style="column.flex" :table-field="column.path" :field-type="column.type" v-table-value="{ column, item }"></div>
         <button type="button" v-if="listConfig.selectable" table-field="table_selectable" class="ui-table-cell is-selectable" @click.prevent.stop="select(item)">
           <span class="ui-native-check">
             <input type="checkbox" :checked="selected.indexOf(item) > -1" />
             <span class="ui-native-check-toggle"></span>
           </span>
         </button>
+        <div v-for="column in columns" :key="column.path" class="ui-table-cell" :class="column.class" :style="column.flex" :table-field="column.path" :field-type="column.type" v-table-value="{ column, item }"></div>
         <div v-if="listConfig.hasOptions" table-field="table_options" class="ui-table-cell is-options">
           <slot name="options" v-bind="{ item, index }"></slot>
         </div>
@@ -280,7 +280,6 @@
       // set a new filter
       setFilter(filter)
       {
-        console.info('filter', filter);
         this.query.filter = filter;
         this.onChange();
       },
diff --git a/zero.Backoffice.UI/app/components/ui-trinity.vue b/zero.Backoffice.UI/app/components/ui-trinity.vue
index 49111f57..ef5869d9 100644
--- a/zero.Backoffice.UI/app/components/ui-trinity.vue
+++ b/zero.Backoffice.UI/app/components/ui-trinity.vue
@@ -38,6 +38,11 @@
       padding: 20px var(--padding);
       align-items: center;
       //background: var(--color-overlay-footer);
+
+      > * + *
+      {
+        margin-left: 15px;
+      }
     }
 
     > content