-
Notifications
You must be signed in to change notification settings - Fork 52
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1430 from FlowFuse/1415-spacer
Add ui-spacer
- Loading branch information
Showing
15 changed files
with
494 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,108 @@ | ||
| [ | ||
| { | ||
| "id": "node-red-tab-text", | ||
| "type": "tab", | ||
| "label": "UI Text", | ||
| "disabled": false, | ||
| "info": "", | ||
| "env": [] | ||
| }, | ||
| { | ||
| "id": "dashboard-ui-base", | ||
| "type": "ui-base", | ||
| "name": "UI Name", | ||
| "path": "/dashboard", | ||
| "includeClientData": true, | ||
| "acceptsClientConfig": [ | ||
| "ui-notification", | ||
| "ui-control" | ||
| ] | ||
| }, | ||
| { | ||
| "id": "dashboard-ui-group", | ||
| "type": "ui-group", | ||
| "name": "Group 1", | ||
| "page": "dashboard-ui-page-1", | ||
| "width": "6", | ||
| "height": "1", | ||
| "order": 1, | ||
| "showTitle": true, | ||
| "className": "", | ||
| "visible": "true", | ||
| "disabled": "false", | ||
| "groupType": "default" | ||
| }, | ||
| { | ||
| "id": "dashboard-ui-page-1", | ||
| "type": "ui-page", | ||
| "name": "Page 1", | ||
| "ui": "dashboard-ui-base", | ||
| "path": "/page1", | ||
| "icon": "", | ||
| "layout": "grid", | ||
| "theme": "dashboard-ui-theme", | ||
| "order": 1, | ||
| "className": "", | ||
| "visible": "true", | ||
| "disabled": false | ||
| }, | ||
| { | ||
| "id": "dashboard-ui-theme", | ||
| "type": "ui-theme", | ||
| "name": "Theme Name", | ||
| "colors": { | ||
| "surface": "#ffffff", | ||
| "primary": "#0094ce", | ||
| "bgPage": "#eeeeee", | ||
| "groupBg": "#ffffff", | ||
| "groupOutline": "#cccccc" | ||
| } | ||
| }, | ||
| { | ||
| "id": "dashboard-ui-spacer", | ||
| "type": "ui-spacer", | ||
| "group": "dashboard-ui-group", | ||
| "name": "spacer", | ||
| "order": 1, | ||
| "width": "3", | ||
| "height": "3", | ||
| "className": "class1 class2" | ||
| }, | ||
| { | ||
| "id": "2a04f859315b5a00", | ||
| "type": "ui-button", | ||
| "z": "node-red-tab-text", | ||
| "group": "dashboard-ui-group", | ||
| "name": "", | ||
| "label": "button", | ||
| "order": 2, | ||
| "width": "3", | ||
| "height": "3", | ||
| "emulateClick": false, | ||
| "tooltip": "", | ||
| "color": "", | ||
| "bgcolor": "", | ||
| "className": "", | ||
| "icon": "", | ||
| "iconPosition": "left", | ||
| "payload": "", | ||
| "payloadType": "str", | ||
| "topic": "topic", | ||
| "topicType": "msg", | ||
| "buttonColor": "", | ||
| "textColor": "", | ||
| "iconColor": "", | ||
| "enableClick": true, | ||
| "enablePointerdown": false, | ||
| "pointerdownPayload": "", | ||
| "pointerdownPayloadType": "str", | ||
| "enablePointerup": false, | ||
| "pointerupPayload": "", | ||
| "pointerupPayloadType": "str", | ||
| "x": 110, | ||
| "y": 100, | ||
| "wires": [ | ||
| [] | ||
| ] | ||
| } | ||
| ] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| describe('Node-RED Dashboard 2.0 - Spacer', () => { | ||
| beforeEach(() => { | ||
| cy.deployFixture('dashboard-spacer') | ||
| cy.visit('/dashboard/page1') | ||
| }) | ||
|
|
||
| it('Is rendered', () => { | ||
| // should have one child | ||
| cy.get('#nrdb-ui-widget-dashboard-ui-spacer').children().should('have.length', 1) | ||
| // and that child should be a div | ||
| cy.get('#nrdb-ui-widget-dashboard-ui-spacer').children().eq(0).should('have.prop', 'tagName', 'DIV') | ||
|
|
||
| // inner div should have no content and no children | ||
| cy.get('#nrdb-ui-widget-dashboard-ui-spacer').children().eq(0).should('not.have.text') | ||
| cy.get('#nrdb-ui-widget-dashboard-ui-spacer > div').children().should('not.exist') | ||
| }) | ||
|
|
||
| it('Has correct class names and styling', () => { | ||
| // default classes are applied to main widget | ||
| cy.get('#nrdb-ui-widget-dashboard-ui-spacer').should('have.class', 'nrdb-ui-widget') | ||
| cy.get('#nrdb-ui-widget-dashboard-ui-spacer').should('have.class', 'nrdb-ui-spacer') | ||
| // custom classes .class1 and .class2 are applied to main widget div | ||
| cy.get('#nrdb-ui-widget-dashboard-ui-spacer').should('have.class', 'class1') | ||
| cy.get('#nrdb-ui-widget-dashboard-ui-spacer').should('have.class', 'class2') | ||
| // check widget styling | ||
| cy.get('#nrdb-ui-widget-dashboard-ui-spacer').children().eq(0).should('have.css', 'grid-row-end', 'span 3') | ||
| // check inner div classes | ||
| cy.get('#nrdb-ui-widget-dashboard-ui-spacer > div').should('have.class', 'nrdb-spacer') | ||
| cy.get('#nrdb-ui-widget-dashboard-ui-spacer > div').should('have.class', 'v-spacer') // vuetify class | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| --- | ||
| description: The Spacer widget is a simple spacer to aid with element layout. | ||
| props: | ||
| Group: Defines which group of the UI Dashboard this widget will render in. | ||
| Size: Controls the width and height of the spacer with respect to the parent group. Maximum value is the width of the group. | ||
| --- | ||
|
|
||
| <script setup> | ||
| import AddedIn from '../../components/AddedIn.vue'; | ||
| import TryDemo from "./../../components/TryDemo.vue"; | ||
| </script> | ||
|
|
||
| <TryDemo href="spacer"> | ||
|
|
||
| # Spacer `ui-spacer` <AddedIn version="1.9.0" /> | ||
|
|
||
| </TryDemo> | ||
|
|
||
| This widget allows users to add a simple spacer to their dashboard groups, aiding with element layout. | ||
|
|
||
| ## Properties | ||
|
|
||
| <PropsTable/> | ||
|
|
||
|
|
||
| ## Current Limitations | ||
|
|
||
| _Currently_ | ||
| * the spacer widgets belong to the global flow and are not exported along with the group unless the entire flow is exported. This means that if you want to export a group with spacer widgets, you will need to either export the entire flow or add the spacer widgets manually after importing the group. | ||
| * Editing a spacer is only possible on the Dashboard 2.0 sidbar and not from the the Node-RED config sidebar. | ||
|
|
||
| ## Using the Spacer Widget | ||
|
|
||
| From the Dashboard 2.0 sidebar, hover over the group you want to add the spacer to and click the `↔ spacer` button. This will add a spacer to the group that you can then drag to the desired location. Opening the spacer's edit dialog will allow you to set the size of the spacer. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.