From 9a3bc7a080933d290b4a0ceda88094a381203e5c Mon Sep 17 00:00:00 2001
From: Tobias Klika <cee@live.at>
Date: Wed, 3 Jun 2020 15:55:49 +0200
Subject: [PATCH] start catalogue

---
 zero.Web.UI/App/components/buttons/button.vue | 2 +-
 zero.Web.UI/App/components/header-bar.vue     | 6 +++++-
 zero.Web.UI/App/components/tree.vue           | 1 +
 zero.Web.UI/App/editor/editor.vue             | 9 ++++++++-
 zero.Web.UI/Sass/Canvas/_navigation.scss      | 2 +-
 zero.Web.UI/Sass/Modules/Buttons/_button.scss | 2 +-
 6 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/zero.Web.UI/App/components/buttons/button.vue b/zero.Web.UI/App/components/buttons/button.vue
index d60b8a3e..e7fd0f08 100644
--- a/zero.Web.UI/App/components/buttons/button.vue
+++ b/zero.Web.UI/App/components/buttons/button.vue
@@ -1,6 +1,6 @@
 <template>
   <button :type="buttonType" class="ui-button has-state" :class="buttonClass" :disabled="disabled || state == 'loading'" @click="tryClick">
-    <span class="ui-button-text" v-localize="label"></span>
+    <span class="ui-button-text" v-localize:html="label"></span>
     <i v-if="caret" class="ui-button-caret" :class="caretClass"></i>
     <i v-if="icon" class="ui-button-icon" :class="icon"></i>
     <span v-if="!isDefaultState" class="ui-button-state">
diff --git a/zero.Web.UI/App/components/header-bar.vue b/zero.Web.UI/App/components/header-bar.vue
index 2f9d4d24..482eeac8 100644
--- a/zero.Web.UI/App/components/header-bar.vue
+++ b/zero.Web.UI/App/components/header-bar.vue
@@ -5,8 +5,9 @@
         <ui-icon-button v-if="backButton" type="white" @click="onBack" />
         <div>
           <h2 class="ui-header-bar-title" :class="{'is-empty': !title && titleEmpty}">
-            <span v-if="prefix" class="-minor" v-localize="prefix"></span>
+            <span v-if="prefix" class="-minor" v-localize:html="prefix"></span>
             <span v-localize="title || titleEmpty"></span>
+            <span v-if="suffix" class="-minor" v-localize:html="suffix"></span>
           </h2>
           <p v-if="description" class="ui-header-bar-description" v-localize="description"></p>
         </div>
@@ -36,6 +37,9 @@
       prefix: {
         type: String
       },
+      suffix: {
+        type: String
+      },
       description: {
         type: String
       },
diff --git a/zero.Web.UI/App/components/tree.vue b/zero.Web.UI/App/components/tree.vue
index 70b6e0d1..59373b53 100644
--- a/zero.Web.UI/App/components/tree.vue
+++ b/zero.Web.UI/App/components/tree.vue
@@ -3,6 +3,7 @@
     <ui-header-bar class="ui-tree-header" :title="header" :back-button="false" v-if="header">
       <ui-dot-button @click="onActionsClicked(null, $event)" />
     </ui-header-bar>
+    <slot></slot>
     <span v-if="status === 'loading'" class="ui-tree-item-loading"><i></i></span>
     <template v-for="item in items">
       <div class="ui-tree-item" :class="getClasses(item)" v-on:contextmenu="onRightClicked(item, $event)">
diff --git a/zero.Web.UI/App/editor/editor.vue b/zero.Web.UI/App/editor/editor.vue
index 37676546..276b6a6b 100644
--- a/zero.Web.UI/App/editor/editor.vue
+++ b/zero.Web.UI/App/editor/editor.vue
@@ -120,4 +120,11 @@
       }
     }
   }
-</script>
\ No newline at end of file
+</script>
+
+<style lang="scss">
+  .editor > .ui-view-box
+  {
+    padding-top: 0;
+  }
+</style>
\ No newline at end of file
diff --git a/zero.Web.UI/Sass/Canvas/_navigation.scss b/zero.Web.UI/Sass/Canvas/_navigation.scss
index 45e7166e..abe77c07 100644
--- a/zero.Web.UI/Sass/Canvas/_navigation.scss
+++ b/zero.Web.UI/Sass/Canvas/_navigation.scss
@@ -37,7 +37,7 @@
 
 .app-nav-switch
 {
-  padding: 20px var(--padding) 0;
+  padding: 26px var(--padding) 0;
   margin-bottom: 30px;
 
   .ui-button.type-action
diff --git a/zero.Web.UI/Sass/Modules/Buttons/_button.scss b/zero.Web.UI/Sass/Modules/Buttons/_button.scss
index c0a8e1a9..d0936475 100644
--- a/zero.Web.UI/Sass/Modules/Buttons/_button.scss
+++ b/zero.Web.UI/Sass/Modules/Buttons/_button.scss
@@ -100,7 +100,7 @@ button::-moz-focus-inner
 
   &.type-light
   {
-    background: var(--color-bg-mid);
+    background: var(--color-bg);
     color: var(--color-fg);
     border: none;
   }