Change the browser tab title to match the page title

FlowFuse · Dec 23, 2024 · b820289 · b820289
1 parent c3b1976
commit b820289
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/ui/src/App.vue b/ui/src/App.vue
@@ -185,12 +185,19 @@ export default {
                     const route = (this.setup.basePath + page.path).replace(/\/\//g, '/')
 
                     const routeName = 'Page:' + page.name
+                    let title = page.name
+                    const headerStyle = payload.dashboards[page.ui].headerContent
+                    if (headerStyle === 'dashboard') {
+                        title = payload.dashboards[page.ui].name
+                    } else if (headerStyle === 'dashpage') {
+                        title = `${payload.dashboards[page.ui].name} (${page.name})`
+                    }
                     this.$router?.addRoute({
                         path: route,
                         name: routeName,
                         component: layouts[page.layout],
                         meta: {
-                            title: page.name, // the page name
+                            title, // the page name
                             id: page.id, // the pages id
                             dashboard: page.ui // the dashboard id - to simplify determining which dashboard we're on
                         }

diff --git a/ui/src/layouts/Baseline.vue b/ui/src/layouts/Baseline.vue
@@ -5,15 +5,9 @@
                 <v-app-bar-nav-icon @click="handleNavigationClick" />
             </template>
             <v-app-bar-title>
-                <template v-if="dashboard.headerContent === 'page'">
+                <template v-if="dashboard.headerContent !== 'none' && dashboard.headerContent !== false">
                     {{ pageTitle }}
                 </template>
-                <template v-else-if="dashboard.headerContent === 'dashboard'">
-                    {{ dashboard.name }}
-                </template>
-                <template v-else-if="dashboard.headerContent === 'dashpage'">
-                    {{ dashboard.name }} ({{ pageTitle }})
-                </template>
                 <div id="app-bar-title" />
             </v-app-bar-title>
             <template #append>