From 663a479452927555f6b8982e95f4beb010fa64d6 Mon Sep 17 00:00:00 2001 From: Steve-Mcl Date: Mon, 4 Nov 2024 11:54:36 +0000 Subject: [PATCH 1/4] remove Editor as a layout choice --- nodes/config/ui_page.html | 1 - nodes/widgets/ui_control.js | 14 ++++++++------ 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/nodes/config/ui_page.html b/nodes/config/ui_page.html index b4bdff3a9..8d8fbbfb7 100644 --- a/nodes/config/ui_page.html +++ b/nodes/config/ui_page.html @@ -97,7 +97,6 @@ types: [{ value: 'layout', options: [ - { value: 'wysiwyg', label: RED._('@flowfuse/node-red-dashboard/ui-page:ui-page.label.wysiwyg') }, { value: 'grid', label: RED._('@flowfuse/node-red-dashboard/ui-page:ui-page.label.grid') }, { value: 'flex', label: RED._('@flowfuse/node-red-dashboard/ui-page:ui-page.label.fixed') }, { value: 'tabs', label: RED._('@flowfuse/node-red-dashboard/ui-page:ui-page.label.tabs') }, diff --git a/nodes/widgets/ui_control.js b/nodes/widgets/ui_control.js index a62d08df4..1f068b80a 100644 --- a/nodes/widgets/ui_control.js +++ b/nodes/widgets/ui_control.js @@ -177,13 +177,15 @@ module.exports = function (RED) { // this message was sent by this particular node if (evt === 'change') { const wNode = RED.nodes.getNode(node.id) - let msg = { - payload: 'change', - tab: payload.page, // index of tab - name: payload.name // page name + if (wNode && payload && wNode.send) { + let msg = { + payload: 'change', + tab: payload.page, // index of tab + name: payload.name // page name + } + msg = addConnectionCredentials(RED, msg, conn, ui) + wNode.send(msg) } - msg = addConnectionCredentials(RED, msg, conn, ui) - wNode.send(msg) } } } From 0a0970a7378958f4f7c9e8dc105ddd0fa0d8753c Mon Sep 17 00:00:00 2001 From: Steve-Mcl Date: Mon, 4 Nov 2024 12:45:30 +0000 Subject: [PATCH 2/4] remove temp dev i18n --- nodes/config/locales/en-US/ui_page.json | 1 - 1 file changed, 1 deletion(-) diff --git a/nodes/config/locales/en-US/ui_page.json b/nodes/config/locales/en-US/ui_page.json index 0465ae0bb..fed5b28f8 100644 --- a/nodes/config/locales/en-US/ui_page.json +++ b/nodes/config/locales/en-US/ui_page.json @@ -7,7 +7,6 @@ "icon": "Icon", "theme": "Theme", "layout": "Layout", - "wysiwyg": "Editor", "grid": "Grid", "fixed": "Fixed", "tabs": "Tabs", From fc3bde91febb050d079f81f6f8f222658929ceb1 Mon Sep 17 00:00:00 2001 From: Steve-Mcl Date: Mon, 4 Nov 2024 13:32:59 +0000 Subject: [PATCH 3/4] fix edit revert --- ui/src/layouts/Flex.vue | 3 ++- ui/src/layouts/Grid.vue | 3 ++- ui/src/layouts/wysiwyg/index.js | 16 +++++++++++++++- 3 files changed, 19 insertions(+), 3 deletions(-) diff --git a/ui/src/layouts/Flex.vue b/ui/src/layouts/Flex.vue index 0b299f3bd..2d4b4e954 100644 --- a/ui/src/layouts/Flex.vue +++ b/ui/src/layouts/Flex.vue @@ -109,8 +109,8 @@ export default { } }, mounted () { - this.pageGroups = this.getPageGroups() if (this.editMode) { // mixin property + this.pageGroups = this.getPageGroups() this.initializeEditTracking() // Mixin method } }, @@ -197,6 +197,7 @@ export default { }, discardEdits () { this.revertEdits() // Mixin method + this.pageGroups = this.getPageGroups() }, async leaveEditMode () { let leave = true diff --git a/ui/src/layouts/Grid.vue b/ui/src/layouts/Grid.vue index 9e3efc1da..e6afc56ad 100644 --- a/ui/src/layouts/Grid.vue +++ b/ui/src/layouts/Grid.vue @@ -109,8 +109,8 @@ export default { } }, mounted () { - this.pageGroups = this.getPageGroups() if (this.editMode) { // mixin property + this.pageGroups = this.getPageGroups() this.initializeEditTracking() // Mixin method } }, @@ -197,6 +197,7 @@ export default { }, discardEdits () { this.revertEdits() // Mixin method + this.pageGroups = this.getPageGroups() }, async leaveEditMode () { let leave = true diff --git a/ui/src/layouts/wysiwyg/index.js b/ui/src/layouts/wysiwyg/index.js index 0485aabf3..ace1421f3 100644 --- a/ui/src/layouts/wysiwyg/index.js +++ b/ui/src/layouts/wysiwyg/index.js @@ -41,7 +41,21 @@ export default { exitEditMode() // EditTracking method }, revertEdits () { - this.pageGroups = JSON.parse(JSON.stringify(originalGroups.value)) + const originals = originalGroups.value || [] + // scan through each group and revert changes + const propertiesOfInterest = ['width', 'height', 'order'] + originals.forEach((originalGroup, index) => { + const pageGroup = this.pageGroups?.find(group => group.id === originalGroup.id) + if (!pageGroup) { + console.warn('Group not found in pageGroups - as we do not currently support adding/removing groups, this should not happen!') + return + } + propertiesOfInterest.forEach(property => { + if (originalGroup[property] !== pageGroup[property]) { + pageGroup[property] = originalGroup[property] + } + }) + }) }, deployChanges ({ dashboard, page, groups }) { return NodeRedApi.deployChanges({ dashboard, page, groups, key: editKey.value, editorPath: editorPath.value }) From de76e2ea605808b39ad865371d260aa87e36990e Mon Sep 17 00:00:00 2001 From: Joe Pavitt Date: Mon, 4 Nov 2024 15:19:44 +0000 Subject: [PATCH 4/4] Fix column sizing issue for widgets --- ui/src/layouts/Group.vue | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/ui/src/layouts/Group.vue b/ui/src/layouts/Group.vue index a7972c9a4..d0aca8a0a 100644 --- a/ui/src/layouts/Group.vue +++ b/ui/src/layouts/Group.vue @@ -7,7 +7,7 @@ class="nrdb-ui-widget" :class="getWidgetClass(w)" style="display: grid" - :style="`grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(${w.props.height}, minmax(var(--widget-row-height), auto)); grid-row-end: span ${w.props.height}; grid-column-end: span min(${ w.props.width || columns }, var(--layout-columns))`" + :style="`grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(${w.props.height}, minmax(var(--widget-row-height), auto)); grid-row-end: span ${w.props.height}; grid-column-end: span min(${ getWidgetWidth(w.props.width) }, var(--layout-columns))`" > @@ -70,6 +70,13 @@ export default { classes.push(widget.state.class) } return classes.join(' ') + }, + getWidgetWidth (width) { + if (width) { + return Math.min(width, this.columns) + } else { + return this.columns + } } } }