header bar updates

zero.Web.UI/App/components/header-bar.vue

@@ -6,9 +6,9 @@
         <div class="ui-header-bar-main-title">
           <slot name="title">
             <h2 class="ui-header-bar-title" :class="{'is-empty': !title && titleEmpty}">
-              <span v-if="prefix" class="-minor" v-localize:html="prefix"></span>
+              <span v-if="prefix" class="-minor -prefix"><span v-localize:html="prefix"></span> <ui-icon symbol="fth-chevron-right" /></span>
               <span v-localize="title || titleEmpty"></span>
-              <span v-if="suffix" class="-minor" v-localize:html="suffix"></span>
+              <span v-if="suffix" class="-minor -suffix" v-localize:html="suffix"></span>
               <span v-if="count > 0" class="-minor -count">{{count}}</span>
             </h2>
           </slot>
@@ -116,6 +116,7 @@
     .ui-icon-button
     {
       margin-right: var(--padding-s);
+      margin-top: -2px;
     }
   }
 
@@ -147,6 +148,9 @@
     font-weight: 700;
     //display: flex;
     //align-items: center;
+    font-size: var(--font-size-xl);
+    font-weight: 900;
+    //text-transform: uppercase;
 
     &.is-empty, .-minor
     {
@@ -160,7 +164,7 @@
       font-size: 11px;
       font-weight: 700;
       text-transform: uppercase;
-      background: var(--color-bg-shade-5); 
+      background: var(--color-box); 
       //box-shadow: var(--shadow-short);
       color: var(--color-text);
       height: 22px;
@@ -174,6 +178,13 @@
       position: relative;
       top: -1px;
     }
+
+    .ui-icon
+    {
+      position: relative;
+      top: 2px;
+      margin: 0 5px;
+    }
   }
 
   .ui-header-bar-description

zero.Web.UI/App/components/overlays/overlay-editor.vue

@@ -24,7 +24,7 @@
   {
     display: grid;
     grid-template-rows: auto 1fr auto;
-    height: calc(100vh - 20px); 
+    height: 100vh; 
 
     > header
     {
@@ -37,7 +37,6 @@
       justify-content: flex-end;
       padding: 20px var(--padding);
       //background: var(--color-overlay-footer);
-      border-radius: 0 0 var(--radius) var(--radius);
     }
 
     > content

zero.Web.UI/App/components/overlays/overlay-holder.vue

@@ -108,13 +108,11 @@
     right: 0; 
     top: 0;
     bottom: 0;
-    border-radius: var(--radius);
     box-shadow: var(--shadow-overlay);
     background: var(--color-overlay-editor);
     text-align: left;
     padding: 0;
-    margin: 10px;
-    height: calc(100vh - 20px);
+    height: 100vh;
     max-width: 100%;
   }
 

zero.Web.UI/App/components/tables/table.scss

@@ -272,6 +272,7 @@ a.ui-table-row:hover, button.ui-table-row:hover
 .ui-table-cell .-minor
 {
   color: var(--color-text-dim-one);
+  font-weight: 400;
 }
 
 .ui-table-field-image

zero.Web.UI/App/editor/editor-aside.vue

@@ -1,28 +1,12 @@
 <template>
-  <aside v-if="!nested && infos && infos != 'none'" class="editor-infos">
-    <component v-if="component" :is="component" :editor="editor" v-model="value" :meta="meta" :disabled="disabled" />
-    <slot name="info-boxes"></slot>
-    <div class="ui-box editor-active-toggle" v-if="activeToggle" :class="{'is-active': value.isActive }">
-      <slot name="settings">
-        <ui-property v-if="activeToggle" field="isActive" label="@ui.active" :is-text="true" class="is-toggle">
-          <ui-toggle v-model="value.isActive" class="is-primary" :disabled="disabled" />
-        </ui-property>
-      </slot>
-      <slot name="settings-properties"></slot>
-    </div>
-    <div class="ui-box is-light" v-if="value.id">
-      <slot name="infos">
-        <ui-property v-if="value.id && value.lastModifiedDate"  field="lastModifiedDate" label="@ui.modifiedDate" :is-text="true">
-          <ui-date v-model="value.lastModifiedDate" />
-        </ui-property>
-        <ui-property v-if="value.id" label="@ui.createdDate" field="createdDate" :is-text="true">
-          <ui-date v-model="value.createdDate" />
-        </ui-property>
-        <slot name="infos-more"></slot>
-      </slot>
-    </div>
-    <slot name="infos-after"></slot>
-  </aside>
+  <div>
+    <ui-property v-if="value.id && value.lastModifiedDate"  field="lastModifiedDate" label="@ui.modifiedDate" :is-text="true" :vertical="true">
+      <ui-date v-model="value.lastModifiedDate" />
+    </ui-property>
+    <ui-property v-if="value.id" label="@ui.createdDate" field="createdDate" :is-text="true" :vertical="true">
+      <ui-date v-model="value.createdDate" />
+    </ui-property>
+  </div>
 </template>
 
 
@@ -72,4 +56,17 @@
       this.component = zero.overrides['editor-aside'] || null;
     }
   }
-</script>
+</script>
+
+<style lang="scss">
+  .editor-aside
+  {
+    padding-top: var(--padding);
+    padding-left: var(--padding-s);
+  }
+
+  .editor-aside .ui-property + .ui-property
+  {
+    margin-top: var(--padding-m);
+  }
+</style>

zero.Web.UI/App/editor/editor.scss

@@ -26,10 +26,10 @@
 
   &.has-sidebar
   {
-    max-width: 1460px;
+    max-width: 1580px;
     display: grid;
-    grid-template-columns: minmax(auto, 1fr) 200px;
-    grid-gap: var(--padding);
+    grid-template-columns: minmax(auto, 1fr) 260px;
+    grid-gap: 0 var(--padding);
   }
 }
 

zero.Web.UI/App/pages/settings/country.vue

@@ -5,6 +5,9 @@
       <template v-slot:below>
         <ui-editor-infos v-model="model" :disabled="disabled" />
       </template>
+      <!--<template v-slot:aside>
+        <ui-editor-aside v-model="model" :disabled="disabled" />
+      </template>-->
     </ui-editor>
   </ui-form>
 </template>
@@ -12,6 +15,7 @@
 
 <script>
   import CountriesApi from 'zero/api/countries.js';
+  import UiEditorAside from 'zero/editor/editor-aside.vue';
 
   export default {
     props: ['id'],
@@ -23,6 +27,8 @@
       disabled: false
     }),
 
+    components: { UiEditorAside },
+
     methods: {
 
       onLoad(form)