Merge pull request #852 from FlowFuse/645-title-bar-options

UI Base - Add option to control title bar behaviour/styling

docs/nodes/config/ui-base.md

@@ -17,9 +17,34 @@ props:
 
 <PropsTable :hide-dynamic="true"/>
 
+## Title Bar Style Options <AddedIn version="1.10.0" />
+
+### Title Bar - Default
+
+The title bar will appear as the first element, and scroll _with_ the content, meaning that on longer pages, the title bar will not be visible when the page is scrolled.
+
+![Example of how the 'Default' option looks](/images/node-examples/ui-base-appbar-default.png "Example of how the 'Default' option looks"){data-zoomable}
+_Example of how the 'Default' option looks_
+
+### Title Bar - Fixed
+
+The title bar will _always_ be visible, even when the page is scrolled. This is useful for when you want to always have access to the title bar, regardless of the page's length.
+
+![Example of how the 'Fixed' option looks](/images/node-examples/ui-base-appbar-fixed.png "Example of how the 'Fixed' option looks"){data-zoomable}
+_Example of how the 'Fixed' option looks_
+
+### Title Bar - Hidden
+
+The title bar is not visible at all. Note that it is still possible to see the navigation menu in this state by choosing the [Fixed](#fixed) option.
+
+![Example of how the 'Hidden' option looks](/images/node-examples/ui-base-appbar-hidden.png "Example of how the 'Hidden' option looks"){data-zoomable}
+_Example of how the 'Hidden' option looks_
+
+
+
 ## Navigation Style Options <AddedIn version="1.2.0" />
 
-### Collapsing (default)
+### Navigation - Collapsing (default)
 
 <SideBySideImages
     caption="Example of how the 'Collapsing' option looks when open (left) and closed (right)."
@@ -29,14 +54,14 @@ props:
 
 This open will shift the entire content of the Dashboard when opened, and not be visisble at all when closed.
 
-### Fixed
+### Navigation - Fixed
 
 ![Example of how the 'Fixed' option looks at all times](/images/node-examples/ui-base-layout-fixed.png "Example of how the 'Fixed' option looks at all times"){data-zoomable}
 _Example of how the 'Fixed' option looks at all times_
 
 Will always remain open. At our mobile breakdpoint (768px), this value is overriden, and an "Appear Over" option is used. Note that at mobile-scale (screen width less than 768px), then the Fixed layout will revert back to the "Default" option.
 
-### Collapse to icons
+### Navigation - Collapse to Icons
 
 Similar to "Collapsing" when opened, but when closed, the icons for each page still show.
 
@@ -46,7 +71,7 @@ Similar to "Collapsing" when opened, but when closed, the icons for each page st
     right="/images/node-examples/ui-base-layout-icon-closed.png"
 />
 
-### Appear over content
+### Navigation - Appear over Content
 
 <SideBySideImages
     caption="Example of how the 'Collapsing' option looks when open (left) and closed (right)."
@@ -56,7 +81,7 @@ Similar to "Collapsing" when opened, but when closed, the icons for each page st
 
 Not visible when closed, and when open, will appear over the Dashboard content, without shifting it.
 
-### Always Hide
+### Navigation - Always Hide
 
 ![Example of how the 'Always Hide' option looks](/images/node-examples/ui-base-layout-hide.png "Example of how the 'Always Hide' option looks"){data-zoomable}
 _Example of how the 'Always Hide' option looks_

nodes/config/locales/en-US/ui_base.json

@@ -16,6 +16,11 @@
             "page": "Page",
             "pages": "Pages",
             "settings": "Settings",
+            "navigation": "Navigation Options",
+            "titleBarStyle": "Style",
+            "titleBarStyleDefault": "Default",
+            "titleBarStyleHidden": "Hidden",
+            "titleBarStyleFixed": "Fixed",
             "sidebar": "Sidebar Options",
             "showPath": "Include Page Path in Label",
             "navigationStyle": "Style",

nodes/config/ui_base.html

@@ -248,11 +248,23 @@
             },
             navigationStyle: {
                 value: 'default'
+            },
+            titleBarStyle: {
+                value: 'default'
             }
         },
         label: function () {
             return `${this.name} [${this.path}]` || 'UI Config'
         },
+        oneditprepare: function () {
+            // backward compatability for navigation style
+            if (!this.titleBarStyle) {
+                // set to default
+                this.titleBarStyle = 'default'
+                // update the jquery dropdown
+                $('#node-config-input-titleBarStyle').val('default')
+            }
+        },
         onpaletteadd: function () {
             // add the Dashboard 2.0 sidebar
             if (RED._db2debug) { console.log('dashboard 2: ui_base.html: onpaletteadd ()') }
@@ -1678,6 +1690,17 @@
         <input type="text" id="node-config-input-path" disabled>
         <span style="display: block; margin-left: 105px; margin-top: 0px; font-style: italic; color: #bbb; font-size: 8pt;">This option is currently disabled and still in-development.</span>
     </div>
+    <div class="form-row" style="margin-bottom: 0;">
+        <label style="font-weight: 600; width: auto;" data-i18n="ui-base.label.navigation"></label>
+    </div>
+    <div class="form-row" style="align-items: center;">
+        <label style="margin-right: 5px; margin-bottom: 0px;" for="node-config-input-titleBarStyle"><span data-i18n="ui-base.label.titleBarStyle"></span></label>
+        <select id="node-config-input-titleBarStyle">
+            <option value="default" data-i18n="ui-base.label.titleBarStyleDefault"></option>
+            <option value="hidden" data-i18n="ui-base.label.titleBarStyleHidden"></option>
+            <option value="fixed" data-i18n="ui-base.label.titleBarStyleFixed"></option>
+        </select>
+    </div>
     <div class="form-row" style="margin-bottom: 0;">
         <label style="font-weight: 600; width: auto;" data-i18n="ui-base.label.sidebar"></label>
     </div>

ui/src/layouts/Baseline.vue

@@ -8,7 +8,7 @@
             Loaded site template '{{ pageTemplate.id }}'
             <component :is="pageTemplate.component" :id="pageTemplate.id" :props="pageTemplate.props" :state="pageTemplate.state" />
         </div>
-        <v-app-bar :elevation="1">
+        <v-app-bar v-if="appBarStyle !== 'hidden'" :style="{'position': navPosition}" :elevation="1">
             <template v-if="!['none', 'fixed', 'hidden'].includes(navigationStyle)" #prepend>
                 <v-app-bar-nav-icon @click="handleNavigationClick" />
             </template>
@@ -28,6 +28,7 @@
                 :mobile-breakpoint="['none', 'fixed'].includes(navigationStyle) ? '0' : 'md'"
                 :temporary="navigationStyle === 'temporary'"
                 :permanent="navigationStyle === 'icon'"
+                :style="{'position': navPosition}"
             >
                 <v-list nav>
                     <v-list-item
@@ -153,13 +154,19 @@ export default {
             const dId = Object.keys(this.dashboards)[0]
             return this.dashboards[dId]
         },
+        appBarStyle: function () {
+            return this.dashboard.titleBarStyle || 'default'
+        },
         navigationStyle: function () {
             const style = this.dashboard.navigationStyle
             if (![null, 'default', 'fixed', 'icon', 'temporary', 'none'].includes(style)) {
                 console.warn(`Invalid navigationStyle value: ${style}`)
                 return 'default'
             }
             return style
+        },
+        navPosition: function () {
+            return this.appBarStyle === 'fixed' ? 'fixed' : 'absolute'
         }
     },
     watch: {