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

joepavitt · web-flow · commit 6e66c17846b2 · 2024-12-23T16:57:31.000Z
Selectable header content
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" />

Original file line number	Diff line number	Diff line change
`@@ -144,7 +144,7 @@`
`144`	`144`	`"ui-notification"`
`145`	`145`	`],`
`146`	`146`	`"showPathInSidebar": false,`
`147`		`- "showPageTitle": false,`
	`147`	`+ "headerContent": "none",`
`148`	`148`	`"navigationStyle": "icon",`
`149`	`149`	`"titleBarStyle": "default"`
`150`	`150`	`},`
`@@ -166,4 +166,4 @@`
`166`	`166`	`"widgetGap": "12px"`
`167`	`167`	`}`
`168`	`168`	`}`
`169`		`-]`
	`169`	`+]`
Original file line number	Diff line number	Diff line change
`@@ -207,7 +207,7 @@`
`207`	`207`	`"ui-notification"`
`208`	`208`	`],`
`209`	`209`	`"showPathInSidebar": false,`
`210`		`- "showPageTitle": false,`
	`210`	`+ "headerContent": "none",`
`211`	`211`	`"navigationStyle": "icon",`
`212`	`212`	`"titleBarStyle": "default"`
`213`	`213`	`},`
`@@ -229,4 +229,4 @@`
`229`	`229`	`"widgetGap": "12px"`
`230`	`230`	`}`
`231`	`231`	`}`
`232`		`-]`
	`232`	`+]`
Original file line number	Diff line number	Diff line change
`@@ -131,7 +131,7 @@`
`131`	`131`	`"ui-notification"`
`132`	`132`	`],`
`133`	`133`	`"showPathInSidebar": false,`
`134`		`- "showPageTitle": false,`
	`134`	`+ "headerContent": "none",`
`135`	`135`	`"navigationStyle": "icon",`
`136`	`136`	`"titleBarStyle": "default"`
`137`	`137`	`},`
`@@ -153,4 +153,4 @@`
`153`	`153`	`"widgetGap": "12px"`
`154`	`154`	`}`
`155`	`155`	`}`
`156`		`-]`
	`156`	`+]`
Original file line number	Diff line number	Diff line change
`@@ -325,7 +325,7 @@`
`325`	`325`	`"ui-notification"`
`326`	`326`	`],`
`327`	`327`	`"showPathInSidebar": false,`
`328`		`- "showPageTitle": false,`
	`328`	`+ "headerContent": "none",`
`329`	`329`	`"navigationStyle": "icon",`
`330`	`330`	`"titleBarStyle": "default"`
`331`	`331`	`},`
`@@ -347,4 +347,4 @@`
`347`	`347`	`"widgetGap": "12px"`
`348`	`348`	`}`
`349`	`349`	`}`
`350`		`-]`
	`350`	`+]`
Original file line number	Diff line number	Diff line change
`@@ -183,7 +183,7 @@`
`183`	`183`	`"ui-notification"`
`184`	`184`	`],`
`185`	`185`	`"showPathInSidebar": false,`
`186`		`- "showPageTitle": false,`
	`186`	`+ "headerContent": "none",`
`187`	`187`	`"navigationStyle": "icon",`
`188`	`188`	`"titleBarStyle": "default"`
`189`	`189`	`},`
`@@ -205,4 +205,4 @@`
`205`	`205`	`"widgetGap": "12px"`
`206`	`206`	`}`
`207`	`207`	`}`
`208`		`-]`
	`208`	`+]`
Original file line number	Diff line number	Diff line change
`@@ -177,7 +177,7 @@`
`177`	`177`	`"ui-notification"`
`178`	`178`	`],`
`179`	`179`	`"showPathInSidebar": false,`
`180`		`- "showPageTitle": false,`
	`180`	`+ "headerContent": "none",`
`181`	`181`	`"navigationStyle": "icon",`
`182`	`182`	`"titleBarStyle": "default"`
`183`	`183`	`},`
`@@ -199,4 +199,4 @@`
`199`	`199`	`"widgetGap": "12px"`
`200`	`200`	`}`
`201`	`201`	`}`
`202`		`-]`
	`202`	`+]`
Original file line number	Diff line number	Diff line change
`@@ -163,7 +163,7 @@`
`163`	`163`	`"ui-notification"`
`164`	`164`	`],`
`165`	`165`	`"showPathInSidebar": false,`
`166`		`- "showPageTitle": false,`
	`166`	`+ "headerContent": "none",`
`167`	`167`	`"navigationStyle": "icon",`
`168`	`168`	`"titleBarStyle": "default"`
`169`	`169`	`},`
`@@ -185,4 +185,4 @@`
`185`	`185`	`"widgetGap": "12px"`
`186`	`186`	`}`
`187`	`187`	`}`
`188`		`-]`
	`188`	`+]`
Original file line number	Diff line number	Diff line change
`@@ -251,7 +251,7 @@`
`251`	`251`	`"ui-notification"`
`252`	`252`	`],`
`253`	`253`	`"showPathInSidebar": false,`
`254`		`- "showPageTitle": false,`
	`254`	`+ "headerContent": "none",`
`255`	`255`	`"navigationStyle": "icon",`
`256`	`256`	`"titleBarStyle": "default"`
`257`	`257`	`},`
`@@ -273,4 +273,4 @@`
`273`	`273`	`"widgetGap": "12px"`
`274`	`274`	`}`
`275`	`275`	`}`
`276`		`-]`
	`276`	`+]`