start preview pane

zero.Web.UI/App/components/messages/message.vue

@@ -10,6 +10,7 @@
   const TYPE_ICONS = {
     neutral: 'fth-info',
     info: 'fth-info',
+    primary: 'fth-info',
     warn: 'fth-alert-circle',
     error: 'fth-alert-circle',
     success: 'fth-check-circle'
@@ -101,6 +102,12 @@
       color: var(--color-fg);
     }
 
+    &.type-primary
+    {
+      background: var(--color-primary-low);
+      color: var(--color-primary);
+    }
+
     &.block
     {
       display: grid;

zero.Web.UI/App/components/overlays/dropdown-button.vue

@@ -133,7 +133,7 @@
 
       &:not([disabled]):hover .ui-dropdown-button-icon
       {
-        color: var(--color-primary);
+        color: var(--color-fg);
       }
     }
 
@@ -191,7 +191,7 @@
     font-weight: 400;
     position: relative;
     top: -1px;
-    color: var(--color-fg);
+    color: var(--color-fg-dim);
   }
 
   .ui-dropdown-button-progress

zero.Web.UI/App/directives/clickoutside.js

@@ -16,7 +16,7 @@ Vue.directive('click-outside', {
       var elements = e.path || (e.composedPath && e.composedPath());
       elements && elements.length > 0 && elements.unshift(e.target);
 
-      if (el.contains(e.target) || Helpers.isPopup(vNode.context.popupItem, elements))
+      if (el.contains(e.target) || Helpers.isPopup(vNode.context.popupItem, elements) || !el.__vueClickOutside__)
       {
         return;
       }

zero.Web.UI/App/pages/pages/page.vue

@@ -10,6 +10,17 @@
       </template>
     </ui-form-header>
 
+    <div v-if="preview" class="page-editor-preview-message">
+      <div class="-text">
+        <span>To update the <b>preview</b> with your unsaved changes click the <b>Refresh</b> button.</span>
+      </div>
+      <div class="-buttons">
+        <ui-button type="small blank" label="Exit" />
+        <ui-button type="small blank" label="Open" />
+        <ui-button type="small" label="Refresh" icon="fth-rotate-cw" />
+      </div>
+    </div>
+
     <ui-editor v-if="!loading" :config="renderer" v-model="model" :meta="meta" :is-page="true" infos="none" :on-configure="onEditorConfigure" />
   </ui-form>
 </template>
@@ -45,7 +56,8 @@
           hideInNavigation: false
         },
         link: null
-      }
+      },
+      preview: false
     }),
 
 
@@ -182,4 +194,30 @@
       padding: 0;
     }
   }
+
+  .page-editor-preview-message
+  {
+    margin: -10px var(--padding) var(--padding);
+    background: var(--color-primary-low);
+    color: var(--color-primary);
+    font-size: var(--font-size);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 20px;
+    border-radius: var(--radius);
+    position: relative;
+    line-height: 20px;
+    text-align: left;
+
+    .-buttons
+    {
+      display: flex;
+    }
+
+    .ui-button.type-blank
+    {
+      background: var(--color-primary-low);
+    }
+  }
 </style>

zero.Web.UI/Sass/Core/_settings.scss

@@ -64,10 +64,14 @@
 
 :root
 {
+  $color-primary: #18a471;
+  $color-shade-base: #262c34;
+  $color-bg: #191e25;
+
   // accent colors
-  --color-primary: #18a471; // #fdd330; //linear-gradient(75deg, #48da9c, #3eb8ad); //#484c5b; // #292b2c; // #00aea2
+  --color-primary: #{$color-primary}; // #fdd330; //linear-gradient(75deg, #48da9c, #3eb8ad); //#484c5b; // #292b2c; // #00aea2
   --color-primary-fg: #fff;
-  --color-primary-low: rgba(229, 225, 221, 0.3);
+  --color-primary-low: #{rgba($color-primary, 0.2)};
   --color-primary-two: #e5e4df;
   --color-primary-line: #e0dfda;
   --color-secondary: #f9e0c4;
@@ -80,8 +84,8 @@
   --color-fg-dim-two: #898b8c;
   
   // background colors
-  $color-shade-base: #262c34;
-  --color-bg: #191e25;
+  
+  --color-bg: #{$color-bg};
   --color-bg-bright: #{darken($color-shade-base, 2%)};
   --color-bg-bright-two: #{desaturate(lighten($color-shade-base, 2%), 3%)};
   --color-bg-bright-three: #{desaturate(lighten($color-shade-base, 6%), 5%)};

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

@@ -159,6 +159,13 @@ button::-moz-focus-inner
     /*color: var(--color-fg-dim);*/
   }
 
+  &.type-small .ui-button-icon
+  {
+    margin-left: 10px;
+    margin-right: -2px;
+    font-size: var(--font-size);
+  }
+
   &.no-label .ui-button-icon
   {
     margin: 0 -5px !important;