fix some UI bugs

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
     },
 

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;
     }

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

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)
       {