From 23a4615dae784338bd1452e0771b935ea33a143c Mon Sep 17 00:00:00 2001
From: Tobias Klika <cee@live.at>
Date: Sat, 29 Jan 2022 15:26:12 +0100
Subject: [PATCH] allow sticky headers

---
 .../app/components/ui-form-header.vue           |  6 +++++-
 .../app/components/ui-header-bar.vue            | 17 +++++++++++++++--
 .../app/editor/ui-editor-page.vue               |  2 +-
 .../modules/media/pages/overview/overview.vue   |  2 +-
 zero.Backoffice.UI/app/modules/pages/page.vue   |  2 +-
 5 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/zero.Backoffice.UI/app/components/ui-form-header.vue b/zero.Backoffice.UI/app/components/ui-form-header.vue
index 2b76446b..d7929f9f 100644
--- a/zero.Backoffice.UI/app/components/ui-form-header.vue
+++ b/zero.Backoffice.UI/app/components/ui-form-header.vue
@@ -1,5 +1,5 @@
 <template>
-  <ui-header-bar class="ui-form-header" :back-button="true">
+  <ui-header-bar class="ui-form-header" :back-button="true" :sticky="sticky">
     <template v-slot:title>
       <h2 class="ui-header-bar-title" :class="{'is-empty': title && !value.name && !titleDisabled}">
         <template v-for="prefix in prefixes">
@@ -77,6 +77,10 @@
       hasAlias: {
         type: Boolean,
         default: true
+      },
+      sticky: {
+        type: Boolean,
+        default: false
       }
     },
 
diff --git a/zero.Backoffice.UI/app/components/ui-header-bar.vue b/zero.Backoffice.UI/app/components/ui-header-bar.vue
index 67ac0dce..8a29ebeb 100644
--- a/zero.Backoffice.UI/app/components/ui-header-bar.vue
+++ b/zero.Backoffice.UI/app/components/ui-header-bar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="ui-header-bar">
+  <div class="ui-header-bar" :class="{ 'is-sticky': sticky }">
     <div class="ui-header-bar-inner">
       <div class="ui-header-bar-main">
         <ui-icon-button v-if="backButton" type="light onbg" @click="onBack" :size="15" />
@@ -60,6 +60,10 @@
       closeButton: {
         type: Boolean,
         default: false
+      },
+      sticky: {
+        type: Boolean,
+        default: false
       }
     },
 
@@ -94,13 +98,22 @@
 
     & + .ui-view-box
     {
-      padding-top: 0; 
+      padding-top: 0;
     }
 
     .app-tree &
     {
       margin-bottom: 8px;
     }
+
+    &.is-sticky
+    {
+      position: sticky;
+      top: 0;
+      z-index: 2;
+      background: var(--color-bg);
+      background: linear-gradient(0deg, transparent, var(--color-bg) 40%);
+    }
   }
 
   .ui-header-bar-inner
diff --git a/zero.Backoffice.UI/app/editor/ui-editor-page.vue b/zero.Backoffice.UI/app/editor/ui-editor-page.vue
index 930142dd..08922c90 100644
--- a/zero.Backoffice.UI/app/editor/ui-editor-page.vue
+++ b/zero.Backoffice.UI/app/editor/ui-editor-page.vue
@@ -1,7 +1,7 @@
 <template>
   <ui-form ref="form" class="editor-page" v-slot="form" @submit="onInternalSubmit" @load="onInternalLoad" :route="route">
     <slot name="header" v-bind="dataObj" v-bind:form="form">
-      <ui-form-header v-model:value="model" :prefix="prefix" :title="title" :disabled="readonly" :is-create="!id" :state="form.state" :can-delete="canDelete" @delete="onInternalDelete" />
+      <ui-form-header v-model:value="model" :prefix="prefix" :title="title" :disabled="readonly" :is-create="!id" :state="form.state" :can-delete="canDelete" @delete="onInternalDelete" :sticky="true" />
     </slot>
     <ui-editor :config="editor" v-model="model" :meta="meta" :disabled="readonly" :scope="true">
       <template v-slot:below>
diff --git a/zero.Backoffice.UI/app/modules/media/pages/overview/overview.vue b/zero.Backoffice.UI/app/modules/media/pages/overview/overview.vue
index 173c0336..c78c1f2e 100644
--- a/zero.Backoffice.UI/app/modules/media/pages/overview/overview.vue
+++ b/zero.Backoffice.UI/app/modules/media/pages/overview/overview.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="media-content">
-    <ui-header-bar :back-button="!!parentId">
+    <ui-header-bar :back-button="!!parentId" :sticky="true">
       <template v-slot:title>
         <h2 class="ui-header-bar-title">
           <span class="media-items-hierarchy-item">
diff --git a/zero.Backoffice.UI/app/modules/pages/page.vue b/zero.Backoffice.UI/app/modules/pages/page.vue
index 122cb5a8..a15f8b51 100644
--- a/zero.Backoffice.UI/app/modules/pages/page.vue
+++ b/zero.Backoffice.UI/app/modules/pages/page.vue
@@ -1,6 +1,6 @@
 <template>
   <ui-form :key="id" ref="form" class="page page-editor" v-slot="form" @submit="onSubmit" @load="onLoad" :route="route">
-    <ui-form-header v-model:value="model" title="@page.name" :disabled="disabled" :is-create="!id" :state="form.state" :active-toggle="!isFolder" :can-delete="meta.canDelete" @delete="onDelete">
+    <ui-form-header v-model:value="model" title="@page.name" :disabled="disabled" :is-create="!id" :state="form.state" :active-toggle="!isFolder" :can-delete="meta.canDelete" @delete="onDelete" :sticky="true">
       <template v-slot:actions>
         <!--<ui-dropdown-button v-if="!isFolder" label="@page.preview.title" icon="fth-eye" :disabled="disabled" @click="openPreview" />
       <ui-dropdown-separator v-if="!isFolder" />-->