Skip to content

Commit

Permalink
Merge pull request #1320 from FlowFuse/1236-switch-layout-configuration
Browse files Browse the repository at this point in the history 
Layout switching configuration with dynamic property support
  • Loading branch information
@joepavitt
joepavitt authored Oct 1, 2024
2 parents 1e6ee4c + af0b27f commit d72f779
Show file tree
Hide file tree
Showing 7 changed files with 539 additions and 26 deletions.
300 changes: 300 additions & 0 deletions cypress/fixtures/flows/dashboard-switches.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,293 @@
"wires": [
[]
]
},{
"id": "dashboard-ui-button-layout-left",
"type": "ui-button",
"z": "62c98d3bf1ed37c0",
"group": "dashboard-ui-group-4",
"name": "",
"label": "Button - Layout (Left)",
"order": 2,
"width": 0,
"height": 0,
"emulateClick": false,
"tooltip": "",
"color": "",
"bgcolor": "",
"className": "",
"icon": "",
"iconPosition": "left",
"payload": "true",
"payloadType": "bool",
"topic": "",
"topicType": "str",
"buttonColor": "",
"textColor": "",
"iconColor": "",
"x": 180,
"y": 400,
"wires": [
[
"e934c132f83bc548"
]
]
},
{
"id": "9e3d9eb72e4781b3",
"type": "function",
"z": "62c98d3bf1ed37c0",
"name": "Store Latest Msg",
"func": "global.set('msg', msg)\nreturn msg;",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 970,
"y": 320,
"wires": [
[]
]
},
{
"id": "dashboard-ui-switch-change-layout",
"type": "ui-switch",
"z": "62c98d3bf1ed37c0",
"name": "",
"label": "Change layout",
"group": "dashboard-ui-group-4",
"order": 1,
"width": "0",
"height": "0",
"passthru": false,
"decouple": true,
"topic": "topic",
"topicType": "str",
"style": "",
"className": "",
"layout": "",
"clickableArea": "switch",
"onvalue": "on",
"onvalueType": "str",
"onicon": "",
"oncolor": "",
"offvalue": "off",
"offvalueType": "str",
"officon": "",
"offcolor": "",
"x": 740,
"y": 480,
"wires": [
[
"9e3d9eb72e4781b3"
]
]
},
{
"id": "e934c132f83bc548",
"type": "change",
"z": "62c98d3bf1ed37c0",
"name": "",
"rules": [
{
"t": "set",
"p": "ui_update.layout",
"pt": "msg",
"to": "row-left",
"tot": "str"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 430,
"y": 400,
"wires": [
[
"dashboard-ui-switch-change-layout"
]
]
},
{
"id": "dashboard-ui-button-layout-left-swapped",
"type": "ui-button",
"z": "62c98d3bf1ed37c0",
"group": "dashboard-ui-group-4",
"name": "",
"label": "Button - Layout (Left Swapped)",
"order": 6,
"width": 0,
"height": 0,
"emulateClick": false,
"tooltip": "",
"color": "",
"bgcolor": "",
"className": "",
"icon": "",
"iconPosition": "left",
"payload": "true",
"payloadType": "bool",
"topic": "",
"topicType": "str",
"buttonColor": "",
"textColor": "",
"iconColor": "",
"x": 170,
"y": 440,
"wires": [
[
"0741382ee9cf8cd2"
]
]
},
{
"id": "0741382ee9cf8cd2",
"type": "change",
"z": "62c98d3bf1ed37c0",
"name": "",
"rules": [
{
"t": "set",
"p": "ui_update.layout",
"pt": "msg",
"to": "row-left-swapped",
"tot": "str"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 430,
"y": 440,
"wires": [
[
"dashboard-ui-switch-change-layout"
]
]
},
{
"id": "dashboard-ui-button-layout-spread",
"type": "ui-button",
"z": "62c98d3bf1ed37c0",
"group": "dashboard-ui-group-4",
"name": "",
"label": "Button - Layout (Spread)",
"order": 4,
"width": 0,
"height": 0,
"emulateClick": false,
"tooltip": "",
"color": "",
"bgcolor": "",
"className": "",
"icon": "",
"iconPosition": "left",
"payload": "true",
"payloadType": "bool",
"topic": "",
"topicType": "str",
"buttonColor": "",
"textColor": "",
"iconColor": "",
"x": 160,
"y": 520,
"wires": [
[
"cf50eac9097f2e04"
]
]
},
{
"id": "cf50eac9097f2e04",
"type": "change",
"z": "62c98d3bf1ed37c0",
"name": "",
"rules": [
{
"t": "set",
"p": "ui_update.layout",
"pt": "msg",
"to": "row-spread",
"tot": "str"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 430,
"y": 520,
"wires": [
[
"dashboard-ui-switch-change-layout"
]
]
},
{
"id": "dashboard-ui-button-layout-spread-swapped",
"type": "ui-button",
"z": "62c98d3bf1ed37c0",
"group": "dashboard-ui-group-4",
"name": "",
"label": "Button - Layout (Spread Swapped)",
"order": 3,
"width": 0,
"height": 0,
"emulateClick": false,
"tooltip": "",
"color": "",
"bgcolor": "",
"className": "",
"icon": "",
"iconPosition": "left",
"payload": "true",
"payloadType": "bool",
"topic": "",
"topicType": "str",
"buttonColor": "",
"textColor": "",
"iconColor": "",
"x": 170,
"y": 560,
"wires": [
[
"c8afc95375dcf813"
]
]
},
{
"id": "c8afc95375dcf813",
"type": "change",
"z": "62c98d3bf1ed37c0",
"name": "",
"rules": [
{
"t": "set",
"p": "ui_update.layout",
"pt": "msg",
"to": "row-spread-swapped",
"tot": "str"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 430,
"y": 560,
"wires": [
[
"dashboard-ui-switch-change-layout"
]
]
},
{
"id": "dashboard-ui-group",
Expand Down Expand Up @@ -267,6 +554,19 @@
"visible": "true",
"disabled": "false"
},
{
"id": "dashboard-ui-group-4",
"type": "ui-group",
"name": "Group 4",
"page": "dashboard-ui-page-1",
"width": "6",
"height": "1",
"order": -1,
"showTitle": true,
"className": "",
"visible": "true",
"disabled": "false"
},
{
"id": "dashboard-ui-button-show-input-on",
"type": "ui-button",
Expand Down
35 changes: 35 additions & 0 deletions cypress/tests/widgets/switch.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,3 +126,38 @@ describe('Node-RED Dashboard 2.0 - Switches in "Show Input" mode', () => {
cy.get('#nrdb-ui-widget-dashboard-ui-switch-show-input').find('.v-input.v-input--horizontal').should('have.class', 'active')
})
})

describe('Node-RED Dashboard 2.0 - Change the layout', () => {
beforeEach(() => {
cy.deployFixture('dashboard-switches')
cy.visit('/dashboard/page1')
})

it('change the layout to row-left', () => {
cy.resetContext()
cy.clickAndWait(cy.get('#nrdb-ui-widget-dashboard-ui-button-layout-left'))

cy.get('#nrdb-ui-widget-dashboard-ui-switch-change-layout .nrdb-switch').should('have.class', 'nrdb-ui-switch--row-left')
})

it('change the layout to row-left-swapped', () => {
cy.resetContext()
cy.clickAndWait(cy.get('#nrdb-ui-widget-dashboard-ui-button-layout-left-swapped'))

cy.get('#nrdb-ui-widget-dashboard-ui-switch-change-layout .nrdb-switch').should('have.class', 'nrdb-ui-switch--row-left-swapped')
})

it('change the layout to row-spread', () => {
cy.resetContext()
cy.clickAndWait(cy.get('#nrdb-ui-widget-dashboard-ui-button-layout-spread'))

cy.get('#nrdb-ui-widget-dashboard-ui-switch-change-layout .nrdb-switch').should('have.class', 'nrdb-ui-switch--row-spread')
})

it('change the layout to row-spread-swapped', () => {
cy.resetContext()
cy.clickAndWait(cy.get('#nrdb-ui-widget-dashboard-ui-button-layout-spread-swapped'))

cy.get('#nrdb-ui-widget-dashboard-ui-switch-change-layout .nrdb-switch').should('have.class', 'nrdb-ui-switch--row-spread-swapped')
})
})
30 changes: 24 additions & 6 deletions docs/nodes/widgets/ui-switch.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,27 @@ description: Utilize the ui-switch widget in Node-RED Dashboard 2.0 to create in
props:
Group: Defines which group of the UI Dashboard this widget will render in.
Size: Controls the width of the button with respect to the parent group. Maximum value is the width of the group.
Label: The text shown within the button.
Clickable: The clickable area (which will result in the switch toggling).
On Icon: If provided, this <a href="https://pictogrammers.com/library/mdi/" target="_blank">Material Design icon</a> will replace the default switch when in "on" state. No need to include the <code>mdi</code> prefix.
Off Icon: If provided, this <a href="https://pictogrammers.com/library/mdi/" target="_blank">Material Design icon</a> will replace the default switch when in "off" state. No need to include the <code>mdi</code> prefix.
On Color: If provided with a icons, this colour is used for the icon when in "on" state
Off Color: If provided with a icons, this colour is used for the icon when in "off" state
Label:
description: The text shown within the button.
dynamic: true
Layout:
description: Defines how the label and the switch are arranged. Users can choose between different layout options such as aligning elements to the left, left reversed, spread evenly or spread evenly but in reversed order.
dynamic: true
Clickable:
description: The clickable area (which will result in the switch toggling).
dynamic: true
On Icon:
description: If provided, this <a href="https://pictogrammers.com/library/mdi/" target="_blank">Material Design icon</a> will replace the default switch when in "on" state. No need to include the <code>mdi</code> prefix.
dynamic: true
Off Icon:
description: If provided, this <a href="https://pictogrammers.com/library/mdi/" target="_blank">Material Design icon</a> will replace the default switch when in "off" state. No need to include the <code>mdi</code> prefix.
dynamic: true
On Color:
description: If provided with a icons, this colour is used for the icon when in "on" state
dynamic: true
Off Color:
description: If provided with a icons, this colour is used for the icon when in "off" state
dynamic: true
Passthrough: If enabled, the widget will pass through the input message to the output.
Indicator: Only available when "Passthrough" is set to <code>false</code>. Defines whether the switch shows the status of the output, or any provided input via <code>msg.payload</code>.
On Payload: The type & value to output in <code>msg.payload</code> when the switch is turned on.
Expand All @@ -24,6 +39,9 @@ dynamic:
Label:
payload: msg.ui_update.label
structure: ["Boolean"]
Layout:
payload: msg.ui_update.layout
structure: ["String"]
Clickable:
payload: msg.ui_update.clickableArea
structure: ["String"]
Expand Down
Loading

0 comments on commit d72f779

Please sign in to comment.