update buttons

zero.Web/App/Components/Buttons/button.vue

@@ -2,6 +2,7 @@
   <button class="ui-button" :class="buttonClass" @click="click">
     <span v-html="label"></span>
     <i v-if="caret" :class="caretClass"></i>
+    <i v-if="icon" :class="icon"></i>
   </button>
 </template>
 
@@ -23,6 +24,9 @@
         type: String,
         default: 'action'
       },
+      icon: {
+        type: String
+      },
       caret: String,
       caretPosition: {
         type: String,
@@ -36,7 +40,7 @@
     },
 
     computed: {
-      buttonClass() { return 'type-' + this.type.split(' ').join(' type-') + ' caret-' + this.caretPosition; },
+      buttonClass() { return 'type-' + this.type.split(' ').join(' type-') + ' caret-' + this.caretPosition + (!!this.icon ? ' has-icon' : ''); },
       caretClass() { return 'fth-chevron-' + this.caret; }
     },
 

zero.Web/App/Components/Buttons/icon-button.vue

@@ -0,0 +1,42 @@
+<template>
+  <button class="ui-icon-button" @click="click" :title="title | localize">
+    <span class="sr-only" v-localize="title"></span>
+    <i :class="icon"></i>
+  </button>
+</template>
+
+
+<script>
+  export default {
+    name: 'uiIconButton',
+
+    props: {
+      state: {
+        type: String,
+        default: 'default'
+      },
+      icon: {
+        type: String,
+        default: 'fth-arrow-left'
+      },
+      title: {
+        type: String,
+        default: '@ui.back'
+      },
+      disabled: Boolean,
+      click: {
+        type: Function,
+        default: () => { }
+      }
+    },
+
+    mounted ()
+    {
+      
+    },
+
+    methods: {
+
+    }
+  }
+</script>

zero.Web/App/Components/header-bar.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="ui-header-bar">
-    <h2 v-if="title" class="ui-header-bar-title" v-localize="title"></h2>
-    <slot></slot>
+    <div class="ui-header-bar-main">
+      <ui-icon-button v-if="onBack" :click="onBack" />
+      <h2 v-if="title" class="ui-header-bar-title" v-localize="title"></h2>
+    </div>
+    <div class="ui-header-bar-aside">
+      <slot></slot>
+    </div>
   </div>
 </template>
 
@@ -14,6 +19,9 @@
       title: {
         type: String
       },
+      onBack: {
+        type: Function
+      }
     },
 
     mounted ()
@@ -38,6 +46,26 @@
     width: 100%;
     height: 80px;
     padding: 0 var(--padding);
+    background: var(--color-bg-light);
+  }
+
+  .ui-header-bar-main
+  {
+    display: flex;
+    align-items: center;
+    height: 100%;
+
+    .ui-icon-button
+    {
+      margin-right: var(--padding);
+    }
+  }
+
+  .ui-header-bar-aside
+  {
+    display: flex;
+    align-items: center;
+    height: 100%;
   }
 
   .ui-header-bar-title

zero.Web/App/Components/tree.vue

@@ -251,7 +251,6 @@
   .ui-tree-item-actions
   {
     transition: opacity 0.2s ease 0;
-    margin-right: -8px;
     opacity: 0;
     color: var(--color-fg-mid);
   }

zero.Web/App/Pages/page.vue

@@ -2,11 +2,18 @@
   <div class="page-container">
     <div class="page-container-tree" v-resizable="resizable">
       <ui-header-bar title="Pages">
-        <ui-dot-button style="margin-right: -8px;" />
+        <ui-dot-button />
       </ui-header-bar>
       <ui-tree :get="getItems" />
       <div class="page-container-tree-resizable ui-resizable"></div>
     </div>
+    <div>
+      <ui-header-bar title="Checkout" :on-back="onBack">
+        <ui-button type="light" label="Actions" caret="down" />
+        <ui-button type="light" label="Preview" icon="fth-eye" />
+        <ui-button label="Save" />
+      </ui-header-bar>
+    </div>
   </div>
 </template>
 
@@ -44,6 +51,11 @@
           this.cache[key] = response;
           return response;
         });
+      },
+
+      onBack()
+      {
+        console.info('back');
       }
 
     }
@@ -56,6 +68,7 @@
   {
     display: grid;
     grid-template-columns: auto 1fr;
+    grid-gap: 1px;
     justify-content: stretch;
     height: 100%;
   }
@@ -71,6 +84,11 @@
     {
       margin-top: 2px;
     }
+
+    .ui-dot-button
+    {
+      margin-right: -8px;
+    }
   }
 
   .page-container-tree-resizable

zero.Web/Resources/Localization/zero.en-us.json

@@ -5,7 +5,8 @@
 
   "ui": {
     "more": "More",
-    "actions": "Actions"
+    "actions": "Actions",
+    "back": "Go back"
   },
 
   "sections": {

zero.Web/Sass/Canvas/_navigation.scss

@@ -74,11 +74,6 @@ a.app-nav-item
     font-weight: 700;
   }
 
-  .app-nav-item-arrow
-  {
-    transition: transform 0.2s ease;
-  }
-
   &.is-active .app-nav-item-arrow
   {
     transform: rotate(180deg);

zero.Web/Sass/Core/_settings.scss

@@ -3,6 +3,7 @@
 {
   // accent colors
   --color-primary: #f7f8f9;
+  --color-primary-fg: #222;
   --color-secondary: #292b2c;
   --color-negative: #d82853; 
 

zero.Web/Sass/Modules/Buttons/_button.scss

@@ -16,7 +16,7 @@ button
   display: inline-flex;
   justify-content: space-between;
   align-items: center;
-  color: white;
+  color: var(--color-primary-fg);
   background: var(--color-primary);
   padding: 0 24px;
   height: 42px;
@@ -68,6 +68,13 @@ button
     padding: 0 30px;
   }
 
+  &.type-light
+  {
+    background: var(--color-bg-mid);
+    color: var(--color-fg);
+    border: none;
+  }
+
   &.type-block
   {
     display: flex;
@@ -76,14 +83,15 @@ button
 
   & + .ui-button
   {
-    margin-left: 10px;
+    margin-left: 15px;
   }
 
   [class^="fth-"]
   {
-    margin-left: 12px;
+    margin-left: 15px;
     margin-right: -7px;
     position: relative;
+    font-size: var(--font-size-l);
     top: -1px;
     color: var(--color-fg-mid);
   }
@@ -124,6 +132,33 @@ button
 }
 
 
+.ui-icon-button
+{
+  @extend .ui-button;
+  background: var(--color-bg-mid);
+  padding: 0;
+  height: 32px;
+  width: 32px;
+  border-radius: 16px;
+  text-align: center;
+  justify-content: center;
+  font-size: var(--font-size-l);
+
+  &:hover
+  {
+    opacity: 1;
+  }
+
+  [class^="fth-"]
+  {
+    color: var(--color-fg);
+    margin: 0;
+    top: 0;
+  }
+}
+
+
+
 /*button
 {
   @extend %font;