Merge pull request #1551 from bartbutenaers/selectable-header-content

Selectable header content
FlowFuse · Dec 23, 2024 · 6e66c17 · 6e66c17
2 parents 5829d5a + b820289
commit 6e66c17
Show file tree

Hide file tree

Showing 18 changed files with 75 additions and 41 deletions.
diff --git a/docs/examples/chart-bar-election-grouped.json b/docs/examples/chart-bar-election-grouped.json
@@ -144,7 +144,7 @@
             "ui-notification"
         ],
         "showPathInSidebar": false,
-        "showPageTitle": false,
+        "headerContent": "none",
         "navigationStyle": "icon",
         "titleBarStyle": "default"
     },
@@ -166,4 +166,4 @@
             "widgetGap": "12px"
         }
     }
-]
+]
diff --git a/docs/examples/chart-bar-finance-grouped.json b/docs/examples/chart-bar-finance-grouped.json
@@ -144,7 +144,7 @@
             "ui-notification"
         ],
         "showPathInSidebar": false,
-        "showPageTitle": false,
+        "headerContent": "none",
         "navigationStyle": "icon",
         "titleBarStyle": "default"
     },
@@ -166,4 +166,4 @@
             "widgetGap": "12px"
         }
     }
-]
+]
diff --git a/docs/examples/chart-bar-sw-characters.json b/docs/examples/chart-bar-sw-characters.json
@@ -207,7 +207,7 @@
             "ui-notification"
         ],
         "showPathInSidebar": false,
-        "showPageTitle": false,
+        "headerContent": "none",
         "navigationStyle": "icon",
         "titleBarStyle": "default"
     },
@@ -229,4 +229,4 @@
             "widgetGap": "12px"
         }
     }
-]
+]
diff --git a/docs/examples/chart-histogram-bins.json b/docs/examples/chart-histogram-bins.json
@@ -131,7 +131,7 @@
             "ui-notification"
         ],
         "showPathInSidebar": false,
-        "showPageTitle": false,
+        "headerContent": "none",
         "navigationStyle": "icon",
         "titleBarStyle": "default"
     },
@@ -153,4 +153,4 @@
             "widgetGap": "12px"
         }
     }
-]
+]
diff --git a/docs/examples/chart-histogram-categories.json b/docs/examples/chart-histogram-categories.json
@@ -325,7 +325,7 @@
             "ui-notification"
         ],
         "showPathInSidebar": false,
-        "showPageTitle": false,
+        "headerContent": "none",
         "navigationStyle": "icon",
         "titleBarStyle": "default"
     },
@@ -347,4 +347,4 @@
             "widgetGap": "12px"
         }
     }
-]
+]
diff --git a/docs/examples/chart-histogram-series.json b/docs/examples/chart-histogram-series.json
@@ -183,7 +183,7 @@
             "ui-notification"
         ],
         "showPathInSidebar": false,
-        "showPageTitle": false,
+        "headerContent": "none",
         "navigationStyle": "icon",
         "titleBarStyle": "default"
     },
@@ -205,4 +205,4 @@
             "widgetGap": "12px"
         }
     }
-]
+]
diff --git a/docs/examples/chart-line-multiple.json b/docs/examples/chart-line-multiple.json
@@ -177,7 +177,7 @@
             "ui-notification"
         ],
         "showPathInSidebar": false,
-        "showPageTitle": false,
+        "headerContent": "none",
         "navigationStyle": "icon",
         "titleBarStyle": "default"
     },
@@ -199,4 +199,4 @@
             "widgetGap": "12px"
         }
     }
-]
+]
diff --git a/docs/examples/chart-line-timestamp.json b/docs/examples/chart-line-timestamp.json
@@ -163,7 +163,7 @@
             "ui-notification"
         ],
         "showPathInSidebar": false,
-        "showPageTitle": false,
+        "headerContent": "none",
         "navigationStyle": "icon",
         "titleBarStyle": "default"
     },
@@ -185,4 +185,4 @@
             "widgetGap": "12px"
         }
     }
-]
+]
diff --git a/docs/examples/chart-pie-doughnut.json b/docs/examples/chart-pie-doughnut.json
@@ -251,7 +251,7 @@
             "ui-notification"
         ],
         "showPathInSidebar": false,
-        "showPageTitle": false,
+        "headerContent": "none",
         "navigationStyle": "icon",
         "titleBarStyle": "default"
     },
@@ -273,4 +273,4 @@
             "widgetGap": "12px"
         }
     }
-]
+]
diff --git a/docs/examples/chart-scatter-grouped.json b/docs/examples/chart-scatter-grouped.json
@@ -144,7 +144,7 @@
             "ui-notification"
         ],
         "showPathInSidebar": false,
-        "showPageTitle": false,
+        "headerContent": "none",
         "navigationStyle": "icon",
         "titleBarStyle": "default"
     },
@@ -166,4 +166,4 @@
             "widgetGap": "12px"
         }
     }
-]
+]
diff --git a/docs/examples/group-dialog-type.json b/docs/examples/group-dialog-type.json
@@ -162,7 +162,7 @@
             "ui-notification"
         ],
         "showPathInSidebar": false,
-        "showPageTitle": false,
+        "headerContent": "none",
         "navigationStyle": "icon",
         "titleBarStyle": "default"
     },
@@ -212,4 +212,4 @@
             "density": "default"
         }
     }
-]
+]
diff --git a/docs/examples/ui-button-hold.json b/docs/examples/ui-button-hold.json
@@ -237,7 +237,7 @@
             "ui-notification"
         ],
         "showPathInSidebar": false,
-        "showPageTitle": false,
+        "headerContent": "none",
         "navigationStyle": "icon",
         "titleBarStyle": "default"
     },
@@ -260,4 +260,4 @@
             "density": "default"
         }
     }
-]
+]
diff --git a/docs/examples/ui-text-suffix.json b/docs/examples/ui-text-suffix.json
@@ -109,7 +109,7 @@
             "ui-notification"
         ],
         "showPathInSidebar": false,
-        "showPageTitle": false,
+        "headerContent": "none",
         "navigationStyle": "default",
         "titleBarStyle": "default"
     },
@@ -131,4 +131,4 @@
             "widgetGap": "6px"
         }
     }
-]
+]
diff --git a/nodes/config/locales/en-US/ui_base.json b/nodes/config/locales/en-US/ui_base.json
@@ -25,7 +25,11 @@
             "titleBarStyleFixed": "Fixed",
             "sidebar": "Sidebar Options",
             "showPath": "Include Page Path in Label",
-            "showPageTitle": "Show Page Name in Header",
+            "headerContent": "Content",
+            "headerDashboard": "Dashboard name",
+            "headerPage": "Page name",
+            "headerDashboardPage": "Dashboard name (Page name)",
+            "headerNone": "None",
             "navigationStyle": "Style",
             "navigationStyleDefault": "Collapsing (default)",
             "navigationStyleFixed": "Fixed",
@@ -63,4 +67,4 @@
             "darkest": "var(--nrdb-node-darkest)"
         }
     }
-}
+}
diff --git a/nodes/config/ui_base.html b/nodes/config/ui_base.html
@@ -339,8 +339,8 @@
             showPathInSidebar: {
                 value: false
             },
-            showPageTitle: {
-                value: true
+            headerContent: {
+                value: 'page'
             },
             navigationStyle: {
                 value: 'default'
@@ -370,12 +370,19 @@
                 $('#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)
+            // backward compatibility for including header content
+            // The headerContent replaces the old (boolean) showPageTitle
+            if (this.headerContent === undefined) {
+                let showPageTitle = (this.showPageTitle === undefined) ? true : this.showPageTitle
+
+                if (showPageTitle) {
+                    this.headerContent = 'page'
+                    $('#node-config-input-headerContent').val('page')
+                }
+                else {
+                    this.headerContent = 'none'
+                    $('#node-config-input-headerContent').val('none')
+                }
             }
 
             if (this.appIcon) {
@@ -2438,9 +2445,14 @@
             <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 class="form-row" style="align-items: center;">
+        <label style="margin-right: 5px; margin-bottom: 0px;" for="node-config-input-headerContent"><span data-i18n="ui-base.label.headerContent"></span></label>
+        <select id="node-config-input-headerContent">
+            <option value="page" data-i18n="ui-base.label.headerPage"></option>
+            <option value="dashboard" data-i18n="ui-base.label.headerDashboard"></option>
+            <option value="dashpage" data-i18n="ui-base.label.headerDashboardPage"></option>
+            <option value="none" data-i18n="ui-base.label.headerNone"></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>

diff --git a/nodes/config/ui_base.js b/nodes/config/ui_base.js
@@ -80,6 +80,17 @@ module.exports = function (RED) {
             config.notificationDisplayTime = 5 // Show for 5 seconds
         }
 
+        // The headerContent replaces the old (boolean) showPageTitle
+        if (!('headerContent' in config)) {
+            const showPageTitle = ('showPageTitle' in config) ? config.showPageTitle : true
+
+            if (showPageTitle) {
+                config.headerContent = 'page'
+            } else {
+                config.headerContent = 'none'
+            }
+        }
+
         // expose these properties at runtime
         node.acceptsClientConfig = config.acceptsClientConfig // which node types can be scoped to a specific client
         node.includeClientData = config.includeClientData // whether to include client data in msg payloads

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,7 +5,7 @@
                 <v-app-bar-nav-icon @click="handleNavigationClick" />
             </template>
             <v-app-bar-title>
-                <template v-if="dashboard.showPageTitle === true || dashboard.showPageTitle === undefined">
+                <template v-if="dashboard.headerContent !== 'none' && dashboard.headerContent !== false">
                     {{ pageTitle }}
                 </template>
                 <div id="app-bar-title" />