From 002bf56fcdb42676f8f23c72ff85cf59af6fb0cd Mon Sep 17 00:00:00 2001
From: Tobias Klika <cee@live.at>
Date: Fri, 5 Jun 2020 15:34:13 +0200
Subject: [PATCH] fix some UI bugs

---
 zero.Core/Entities/ListQuery.cs               |  3 +++
 zero.Core/Entities/PreviewModel.cs            | 15 +++++++++++
 zero.Core/Entities/SelectModel.cs             |  9 +++++++
 .../Extensions/RavenQueryableExtensions.cs    |  6 ++++-
 .../App/components/buttons/select-button.vue  | 10 +++++---
 .../App/components/buttons/state-button.vue   | 12 ++++++---
 zero.Web.UI/App/components/tree/tree-item.vue | 25 ++++++++++++++-----
 zero.Web.UI/App/components/tree/tree.vue      | 11 +++++---
 zero.Web.UI/Sass/Core/_settings.scss          |  2 +-
 zero.Web.UI/Sass/Modules/Buttons/_button.scss |  3 ++-
 zero.Web.UI/Sass/Modules/_box.scss            | 11 +++++++-
 .../Resources/Localization/zero.en-us.json    |  7 +++++-
 12 files changed, 93 insertions(+), 21 deletions(-)
 create mode 100644 zero.Core/Entities/PreviewModel.cs
 create mode 100644 zero.Core/Entities/SelectModel.cs

diff --git a/zero.Core/Entities/ListQuery.cs b/zero.Core/Entities/ListQuery.cs
index 814f2c3a..3698cbb9 100644
--- a/zero.Core/Entities/ListQuery.cs
+++ b/zero.Core/Entities/ListQuery.cs
@@ -2,6 +2,7 @@
 using Newtonsoft.Json;
 using System;
 using System.Collections.Generic;
+using System.Linq;
 using System.Linq.Expressions;
 
 namespace zero.Core.Entities
@@ -24,6 +25,8 @@ namespace zero.Core.Entities
 
     public bool OrderIsDescending { get; set; } = true;
 
+    public Func<IQueryable<T>, IQueryable<T>> OrderQuery = null;
+
     public int Page { get; set; } = 1;
 
     public int PageSize { get; set; } = 30;
diff --git a/zero.Core/Entities/PreviewModel.cs b/zero.Core/Entities/PreviewModel.cs
new file mode 100644
index 00000000..efeb61ca
--- /dev/null
+++ b/zero.Core/Entities/PreviewModel.cs
@@ -0,0 +1,15 @@
+namespace zero.Core.Entities
+{
+  public class PreviewModel
+  {
+    public string Id { get; set; }
+
+    public string Icon { get; set; }
+
+    public string Text { get; set; }
+
+    public string Name { get; set; }
+
+    public bool HasError { get; set; }
+  }
+}
diff --git a/zero.Core/Entities/SelectModel.cs b/zero.Core/Entities/SelectModel.cs
new file mode 100644
index 00000000..80872200
--- /dev/null
+++ b/zero.Core/Entities/SelectModel.cs
@@ -0,0 +1,9 @@
+namespace zero.Core.Entities
+{
+  public class SelectModel
+  {
+    public string Id { get; set; }
+
+    public string Name { get; set; }
+  }
+}
diff --git a/zero.Core/Extensions/RavenQueryableExtensions.cs b/zero.Core/Extensions/RavenQueryableExtensions.cs
index 1b491b2c..5d7b4de7 100644
--- a/zero.Core/Extensions/RavenQueryableExtensions.cs
+++ b/zero.Core/Extensions/RavenQueryableExtensions.cs
@@ -80,7 +80,11 @@ namespace zero.Core.Extensions
           }
         }
 
-        if (!query.OrderBy.IsNullOrEmpty())
+        if (query.OrderQuery != null)
+        {
+          rawQuery = query.OrderQuery(rawQuery);
+        }
+        else if (!query.OrderBy.IsNullOrEmpty())
         {
           rawQuery = rawQuery.OrderBy(query.OrderBy, query.OrderIsDescending, query.OrderType == ListQueryOrderType.String ? OrderingType.String : OrderingType.Double);
         }
diff --git a/zero.Web.UI/App/components/buttons/select-button.vue b/zero.Web.UI/App/components/buttons/select-button.vue
index deba8a94..c3ef8844 100644
--- a/zero.Web.UI/App/components/buttons/select-button.vue
+++ b/zero.Web.UI/App/components/buttons/select-button.vue
@@ -2,8 +2,8 @@
   <button type="button" class="ui-select-button type-light" :disabled="disabled" @click="tryClick">
     <i class="ui-select-button-icon" :class="icon"></i>
     <content class="ui-select-button-content">
-      <strong class="ui-select-button-label" v-localize="label"></strong>
-      <span class="ui-select-button-description" v-if="description" v-localize:html="description"></span>
+      <strong class="ui-select-button-label" v-localize="{ key: label, tokens: tokens }"></strong>
+      <span class="ui-select-button-description" v-if="description" v-localize:html="{ key: description, tokens: tokens }"></span>
     </content>
   </button>
 </template>
@@ -11,7 +11,7 @@
 
 <script>
   export default {
-    name: 'uiIconButton',
+    name: 'uiSelectButton',
 
     props: {
       icon: {
@@ -25,6 +25,10 @@
         type: String,
         default: null
       },
+      tokens: {
+        type: Object,
+        default: () => {}
+      },
       disabled: Boolean
     },
 
diff --git a/zero.Web.UI/App/components/buttons/state-button.vue b/zero.Web.UI/App/components/buttons/state-button.vue
index 5e92fb57..9378a5ab 100644
--- a/zero.Web.UI/App/components/buttons/state-button.vue
+++ b/zero.Web.UI/App/components/buttons/state-button.vue
@@ -54,11 +54,16 @@
 
   button.ui-state-button-item
   {
-    background: var(--color-bg-mid);
-    border: 1px solid transparent; // var(--color-line);
+    background: var(--color-bg-light);
+    border: 1px solid var(--color-line); // var(--color-line);
     padding: 10px 16px;
     color: var(--color-fg-mid);
 
+    & + .ui-state-button-item
+    {
+      border-left: none;
+    }
+
     &:first-of-type
     {
       border-top-left-radius: var(--radius);
@@ -73,10 +78,9 @@
 
     &.is-active
     {
+      background: var(--color-bg-mid);
       /*background: var(--color-primary);
       border-color: var(--color-primary);*/
-      border-color: var(--color-line);
-      background: var(--color-bg-light);
       color: var(--color-fg);
       font-weight: bold;
     }
diff --git a/zero.Web.UI/App/components/tree/tree-item.vue b/zero.Web.UI/App/components/tree/tree-item.vue
index daf88b2a..4d841a86 100644
--- a/zero.Web.UI/App/components/tree/tree-item.vue
+++ b/zero.Web.UI/App/components/tree/tree-item.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="ui-tree-item" :class="getClasses(value)" v-on:contextmenu="onRightClicked(value, $event)">
-    <button v-if="value.hasChildren" @click="toggle(value)" type="button" class="ui-tree-item-toggle">
+    <button :disabled="value.disabled" v-if="value.hasChildren" @click="toggle(value)" type="button" class="ui-tree-item-toggle">
       <i class="ui-tree-item-arrow" :class="['fth-chevron-' + (value.isOpen ? 'up' : 'down')]"></i>
     </button>
-    <component :is="tag" type="button" :to="value.url" class="ui-tree-item-link" @click="onClick(value, $event)">
+    <component :disabled="value.disabled" :is="tag" type="button" :to="value.url" class="ui-tree-item-link" @click="onClick(value, $event)">
       <i class="ui-tree-item-icon" :class="value.icon"></i>
       <i v-if="value.modifier" :title="value.modifier.name" class="ui-tree-item-modifier" :class="value.modifier.icon"></i>
       <span class="ui-tree-item-text">{{value.name | localize}}</span>
     </component>
-    <ui-dot-button class="ui-tree-item-actions" v-if="value.hasActions" @click="onActionsClicked(value, $event)" />
+    <ui-dot-button :disabled="value.disabled" class="ui-tree-item-actions" v-if="value.hasActions" @click="onActionsClicked(value, $event)" />
   </div>
 </template>
 
@@ -56,7 +56,9 @@
         return {
           'has-children': item.hasChildren,
           'is-inactive': item.isInactive,
-          'is-open': item.isOpen
+          'is-open': item.isOpen,
+          'is-selected': item.isSelected,
+          'is-disabled': item.disabled
         };
       },
 
@@ -69,13 +71,19 @@
       // right clicked on an item
       onRightClicked(item, ev)
       {
-        this.$emit('rightclick', item, ev);
+        if (!item.disabled)
+        {
+          this.$emit('rightclick', item, ev);
+        }
       },
 
       // actions button clicked on item
       onActionsClicked(item, ev)
       {
-        this.$emit('actions', item, ev);
+        if (!item.disabled)
+        {
+          this.$emit('actions', item, ev);
+        }
       }
     }
   }
@@ -118,6 +126,11 @@
     {
       transform: rotate(180deg);
     }
+
+    &.is-disabled
+    {
+      cursor: not-allowed;
+    }
   }
 
   .ui-tree-item-link
diff --git a/zero.Web.UI/App/components/tree/tree.vue b/zero.Web.UI/App/components/tree/tree.vue
index 31a18315..dd9944e3 100644
--- a/zero.Web.UI/App/components/tree/tree.vue
+++ b/zero.Web.UI/App/components/tree/tree.vue
@@ -6,8 +6,8 @@
     <slot></slot>
     <span v-if="status === 'loading'" class="ui-tree-item-loading"><i></i></span>
     <template v-for="item in items">
-      <ui-tree-item :value="item" @rightclick="onRightClicked" @actions="onActionsClicked" @open="toggle" />
-      <ui-tree v-if="item.hasChildren && item.isOpen" :get="get" :parent="item.id" :depth="depth + 1" :active="active" :config="config" />
+      <ui-tree-item :value="item" @rightclick="onRightClicked" @click="onSelect(item, $event)" @actions="onActionsClicked" @open="toggle" />
+      <ui-tree v-if="item.hasChildren && item.isOpen" :get="get" :parent="item.id" :depth="depth + 1" :active="active" :config="config" @select="onSelect" />
     </template>
     <slot name="bottom"></slot>
     <div ref="dropdown" class="ui-dropdown ui-tree-dropdown theme-dark align-top" role="dialog" v-click-outside="hideActions" v-if="actionsOpen">
@@ -77,7 +77,7 @@
 
       initialize()
       {
-        this.configuration = _extend(defaultConfig, this.config);
+        this.configuration = _extend(defaultConfig, this.config || {});
       },
 
       refresh()
@@ -128,6 +128,11 @@
         item.isOpen = !item.isOpen;
       },
 
+      onSelect(item, ev)
+      {
+        this.$emit('select', item, ev);
+      },
+
       // right clicked on an item
       onRightClicked(item, ev)
       {
diff --git a/zero.Web.UI/Sass/Core/_settings.scss b/zero.Web.UI/Sass/Core/_settings.scss
index b26e8be6..90ed49d4 100644
--- a/zero.Web.UI/Sass/Core/_settings.scss
+++ b/zero.Web.UI/Sass/Core/_settings.scss
@@ -79,7 +79,7 @@
 
   // background color shades
   --color-bg: #1c1e1f;
-  --color-bg-dark: #fff;
+  --color-bg-dark: #1c1e1f;
   --color-bg-xmid: #292b2c;
   --color-bg-mid: #292b2c;
   --color-bg-light: #242526;
diff --git a/zero.Web.UI/Sass/Modules/Buttons/_button.scss b/zero.Web.UI/Sass/Modules/Buttons/_button.scss
index d0936475..b69c3335 100644
--- a/zero.Web.UI/Sass/Modules/Buttons/_button.scss
+++ b/zero.Web.UI/Sass/Modules/Buttons/_button.scss
@@ -6,6 +6,7 @@ button
   color: var(--color-fg);
   outline: 0 solid transparent !important;
   display: inline-block;
+  font-size: var(--font-size);
 
   &:visited, &:link
   {
@@ -40,7 +41,7 @@ button::-moz-focus-inner
   padding: 0 20px;
   height: 42px;
   border-radius: 3px;
-  font-size: 14px;
+  font-size: var(--font-size);
   font-weight: 700;
   margin: 0;
   -webkit-backface-visibility: hidden;
diff --git a/zero.Web.UI/Sass/Modules/_box.scss b/zero.Web.UI/Sass/Modules/_box.scss
index ab9c467e..92023247 100644
--- a/zero.Web.UI/Sass/Modules/_box.scss
+++ b/zero.Web.UI/Sass/Modules/_box.scss
@@ -9,7 +9,6 @@
   border-radius: var(--radius);
   box-shadow: var(--color-shadow-short);
   /*max-width: 1104px;*/
-
   h2
   {
     margin: -5px -32px var(--padding);
@@ -31,6 +30,16 @@
     background: transparent;
     box-shadow: none;
   }
+
+  &.is-light
+  {
+    background: var(--color-bg);
+  }
+}
+
+.ui-box + .ui-box.is-connected
+{
+  margin-top: -31px;
 }
 
 .ui-blank-box
diff --git a/zero.Web/Resources/Localization/zero.en-us.json b/zero.Web/Resources/Localization/zero.en-us.json
index efc79e60..ac0373a3 100644
--- a/zero.Web/Resources/Localization/zero.en-us.json
+++ b/zero.Web/Resources/Localization/zero.en-us.json
@@ -29,6 +29,7 @@
       "button": "Search"
     },
     "name": "Name",
+    "select": "Select",
     "icon": "Icon",
     "icon_select": "Select an icon",
     "tab_general": "General"
@@ -63,6 +64,10 @@
       "emptyfields": "Please fill out all fields",
       "nouser": "User is invalid",
       "newpasswordsnotmatching": "The new password does not match the confirmation"
+    },
+    "preview": {
+      "notfound": "Not found",
+      "notfound_text": "Could not find entity with ID \"{id}\""
     }
   },
 
@@ -77,7 +82,7 @@
     "close": "Cancel",
     "confirm": "Delete",
     "title": "Delete entity",
-    "text": "Are you sure you want to delete this entity?",
+    "text": "Are you sure you want to delete this entity?"
   },
 
   "changepasswordoverlay": {