Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Selectable header content #1551

Merged
merged 3 commits into from
Dec 23, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/examples/chart-bar-election-grouped.json
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@
"ui-notification"
],
"showPathInSidebar": false,
"showPageTitle": false,
"headerContent": "none",
"navigationStyle": "icon",
"titleBarStyle": "default"
},
Expand All @@ -166,4 +166,4 @@
"widgetGap": "12px"
}
}
]
]
4 changes: 2 additions & 2 deletions docs/examples/chart-bar-finance-grouped.json
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@
"ui-notification"
],
"showPathInSidebar": false,
"showPageTitle": false,
"headerContent": "none",
"navigationStyle": "icon",
"titleBarStyle": "default"
},
Expand All @@ -166,4 +166,4 @@
"widgetGap": "12px"
}
}
]
]
4 changes: 2 additions & 2 deletions docs/examples/chart-bar-sw-characters.json
Original file line number Diff line number Diff line change
Expand Up @@ -207,7 +207,7 @@
"ui-notification"
],
"showPathInSidebar": false,
"showPageTitle": false,
"headerContent": "none",
"navigationStyle": "icon",
"titleBarStyle": "default"
},
Expand All @@ -229,4 +229,4 @@
"widgetGap": "12px"
}
}
]
]
4 changes: 2 additions & 2 deletions docs/examples/chart-histogram-bins.json
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@
"ui-notification"
],
"showPathInSidebar": false,
"showPageTitle": false,
"headerContent": "none",
"navigationStyle": "icon",
"titleBarStyle": "default"
},
Expand All @@ -153,4 +153,4 @@
"widgetGap": "12px"
}
}
]
]
4 changes: 2 additions & 2 deletions docs/examples/chart-histogram-categories.json
Original file line number Diff line number Diff line change
Expand Up @@ -325,7 +325,7 @@
"ui-notification"
],
"showPathInSidebar": false,
"showPageTitle": false,
"headerContent": "none",
"navigationStyle": "icon",
"titleBarStyle": "default"
},
Expand All @@ -347,4 +347,4 @@
"widgetGap": "12px"
}
}
]
]
4 changes: 2 additions & 2 deletions docs/examples/chart-histogram-series.json
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,7 @@
"ui-notification"
],
"showPathInSidebar": false,
"showPageTitle": false,
"headerContent": "none",
"navigationStyle": "icon",
"titleBarStyle": "default"
},
Expand All @@ -205,4 +205,4 @@
"widgetGap": "12px"
}
}
]
]
4 changes: 2 additions & 2 deletions docs/examples/chart-line-multiple.json
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,7 @@
"ui-notification"
],
"showPathInSidebar": false,
"showPageTitle": false,
"headerContent": "none",
"navigationStyle": "icon",
"titleBarStyle": "default"
},
Expand All @@ -199,4 +199,4 @@
"widgetGap": "12px"
}
}
]
]
4 changes: 2 additions & 2 deletions docs/examples/chart-line-timestamp.json
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@
"ui-notification"
],
"showPathInSidebar": false,
"showPageTitle": false,
"headerContent": "none",
"navigationStyle": "icon",
"titleBarStyle": "default"
},
Expand All @@ -185,4 +185,4 @@
"widgetGap": "12px"
}
}
]
]
4 changes: 2 additions & 2 deletions docs/examples/chart-pie-doughnut.json
Original file line number Diff line number Diff line change
Expand Up @@ -251,7 +251,7 @@
"ui-notification"
],
"showPathInSidebar": false,
"showPageTitle": false,
"headerContent": "none",
"navigationStyle": "icon",
"titleBarStyle": "default"
},
Expand All @@ -273,4 +273,4 @@
"widgetGap": "12px"
}
}
]
]
4 changes: 2 additions & 2 deletions docs/examples/chart-scatter-grouped.json
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@
"ui-notification"
],
"showPathInSidebar": false,
"showPageTitle": false,
"headerContent": "none",
"navigationStyle": "icon",
"titleBarStyle": "default"
},
Expand All @@ -166,4 +166,4 @@
"widgetGap": "12px"
}
}
]
]
4 changes: 2 additions & 2 deletions docs/examples/group-dialog-type.json
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,7 @@
"ui-notification"
],
"showPathInSidebar": false,
"showPageTitle": false,
"headerContent": "none",
"navigationStyle": "icon",
"titleBarStyle": "default"
},
Expand Down Expand Up @@ -212,4 +212,4 @@
"density": "default"
}
}
]
]
4 changes: 2 additions & 2 deletions docs/examples/ui-button-hold.json
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,7 @@
"ui-notification"
],
"showPathInSidebar": false,
"showPageTitle": false,
"headerContent": "none",
"navigationStyle": "icon",
"titleBarStyle": "default"
},
Expand All @@ -260,4 +260,4 @@
"density": "default"
}
}
]
]
4 changes: 2 additions & 2 deletions docs/examples/ui-text-suffix.json
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@
"ui-notification"
],
"showPathInSidebar": false,
"showPageTitle": false,
"headerContent": "none",
"navigationStyle": "default",
"titleBarStyle": "default"
},
Expand All @@ -131,4 +131,4 @@
"widgetGap": "6px"
}
}
]
]
8 changes: 6 additions & 2 deletions nodes/config/locales/en-US/ui_base.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -63,4 +67,4 @@
"darkest": "var(--nrdb-node-darkest)"
}
}
}
}
34 changes: 23 additions & 11 deletions nodes/config/ui_base.html
Original file line number Diff line number Diff line change
Expand Up @@ -339,8 +339,8 @@
showPathInSidebar: {
value: false
},
showPageTitle: {
value: true
headerContent: {
value: 'page'
},
navigationStyle: {
value: 'default'
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -2437,9 +2444,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>
Expand Down
11 changes: 11 additions & 0 deletions nodes/config/ui_base.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
9 changes: 8 additions & 1 deletion ui/src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
Expand Down
2 changes: 1 addition & 1 deletion ui/src/layouts/Baseline.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
Loading