Merge pull request #969 from FlowFuse/794-teleport-title

Teleport - Add "app-bar-title" teleport option & ability to hide page name

docs/nodes/widgets/ui-template.md

@@ -230,11 +230,74 @@ We use a `computed` variable which will automatically update whenever the `count
 
 ### Teleports
 
-You can use [Vue's Teleport](https://v3.vuejs.org/guide/teleport.html) feature to render content to a specific location in the DOM. We provide some pre-defined locations that you can use:
+You can use [Vue's Teleport](https://v3.vuejs.org/guide/teleport.html) feature to render content to a specific location in the DOM.
 
-- `#app-bar-actions` - Renders content to the right-hand side of the Dashboard's App Bar.
+The code can be written into a `ui-template` node, and the scope set to "group", "page" or "UI" depending on when you want this `<Teleport>` to be active.
 
-To use a teleport, you can use the following syntax:
+We provide some pre-defined locations that you can use:
+
+#### Page Name (`#app-bar-title`)
+
+Add content to the left-side of the navigation bar of the Dashboard. `<Teleport>` can be used as follows:
+
+```vue
+<template>
+    <Teleport v-if="mounted" to="#app-bar-title">
+        <v-btn>Button 1</v-btn>
+        <v-btn>Button 2</v-btn>
+    </Teleport>
+</template>
+<script>
+    export default {
+        data() {
+            return {
+                mounted: false
+            }
+        },
+        mounted() {
+            this.mounted = true
+        }
+    }
+</script>
+```
+
+This would result in:
+
+![Example of Teleporting content to the App Bar Title](/assets/images/appbar-title-teleport-actions.png "Example of Teleporting content to the App Bar Title"){data-zoomable}
+_Example of Teleporting content to the App Bar Title, adding to the existing page name_
+
+We can also turn off the rendering of the page name under the Dashboard's main settings, so, when using the teleport, this would be the only content rendered in the top-left.
+
+Here, we can render an image (injected via `msg.payload`) instead of the page name:
+
+```vue
+<template>
+    <Teleport v-if="mounted" to="#app-bar-title">
+        <img height="32px" :src="msg.payload"></img>
+    </Teleport>
+</template>
+<script>
+    export default {
+        data() {
+            return {
+                mounted: false
+            }
+        },
+        mounted() {
+            this.mounted = true
+        }
+    }
+</script>
+```
+
+This would result in:
+
+![Example of Teleporting content to the App Bar Title](/assets/images/appbar-title-teleport-img.png "Example of Teleporting content to the App Bar Title"){data-zoomable}
+_Example of Teleporting content to the App Bar Title, and hiding hte page name_
+
+#### App Bar - Actions (`#app-bar-actions`)
+
+Renders content to the right-hand side of the Dashboard's App Bar. To use this teleport, you can use the following syntax:
 
 ```vue
 <template>

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

@@ -17,13 +17,14 @@
             "page": "Page",
             "pages": "Pages",
             "settings": "Settings",
-            "navigation": "Navigation Options",
+            "navigation": "Navigation Bar Options",
             "titleBarStyle": "Style",
             "titleBarStyleDefault": "Default",
             "titleBarStyleHidden": "Hidden",
             "titleBarStyleFixed": "Fixed",
             "sidebar": "Sidebar Options",
             "showPath": "Include Page Path in Label",
+            "showPageTitle": "Show Page Name in Navigation Bar",
             "navigationStyle": "Style",
             "navigationStyleDefault": "Collapsing (default)",
             "navigationStyleFixed": "Fixed",

nodes/config/ui_base.html

@@ -305,6 +305,9 @@
             showPathInSidebar: {
                 value: false
             },
+            showPageTitle: {
+                value: true
+            },
             navigationStyle: {
                 value: 'default'
             },
@@ -323,6 +326,14 @@
                 // update the jquery dropdown
                 $('#node-config-input-titleBarStyle').val('default')
             }
+
+            // backward compatibility for including page name
+            if (this.showPageTitle === undefined) {
+                // set to true
+                this.showPageTitle = true
+                // update the jquery checkbox
+                $('#node-config-input-showPageTitle').prop('checked', true)
+            }
         },
         onpaletteadd: function () {
             // add the Dashboard 2.0 sidebar
@@ -1948,6 +1959,10 @@
             <option value="fixed" data-i18n="ui-base.label.titleBarStyleFixed"></option>
         </select>
     </div>
+    <div class="form-row form-row-flex" style="align-items: center;">
+        <input style="margin: 8px 0 10px 16px; width:20px;" type="checkbox" id="node-config-input-showPageTitle">
+        <label style="width:auto" for="node-config-input-showPageTitle"><span data-i18n="ui-base.label.showPageTitle"></span></label>
+    </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

@@ -4,7 +4,12 @@
             <template v-if="!['none', 'fixed', 'hidden'].includes(navigationStyle)" #prepend>
                 <v-app-bar-nav-icon @click="handleNavigationClick" />
             </template>
-            <v-app-bar-title>{{ pageTitle }}</v-app-bar-title>
+            <v-app-bar-title>
+                <template v-if="dashboard.showPageTitle === true || dashboard.showPageTitle === undefined">
+                    {{ pageTitle }}
+                </template>
+                <div id="app-bar-title" />
+            </v-app-bar-title>
             <template #append>
                 <div id="app-bar-actions" />
             </template>

ui/src/stylesheets/common.css

@@ -29,7 +29,14 @@ main {
     padding: var(--nrdb-main-padding);
 }
 
-#app-bar-actions {
+.v-toolbar-title__placeholder {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+}
+
+#app-bar-actions,
+#app-bar-title {
     display: flex;
     gap: 6px;
 }