From 46c459bd50546b662f58c908201fef7bee62f994 Mon Sep 17 00:00:00 2001 From: Artur Vieira Date: Fri, 12 Jul 2024 10:16:02 +0100 Subject: [PATCH 1/7] Add option to set color to Button, Icon and Text --- nodes/widgets/locales/en-US/ui_button.json | 8 ++- nodes/widgets/ui_button.html | 17 +++++- nodes/widgets/ui_button.js | 16 +++++- ui/src/widgets/ui-button/UIButton.vue | 65 ++++++++++++++++------ 4 files changed, 85 insertions(+), 21 deletions(-) diff --git a/nodes/widgets/locales/en-US/ui_button.json b/nodes/widgets/locales/en-US/ui_button.json index 701048d4b..f3975c6ff 100644 --- a/nodes/widgets/locales/en-US/ui_button.json +++ b/nodes/widgets/locales/en-US/ui_button.json @@ -22,7 +22,13 @@ "whenClicked": "When clicked, send:", "payload": "Payload", "topic": "Topic", - "emulateClick": "If msg arrives on input, emulate a button click:" + "emulateClick": "If msg arrives on input, emulate a button click:", + "buttonColor": "Button Color", + "optionalbuttonColor": "(Optional) e.g. 'green'/'#a5a5a5'/'rgb(165,165,165)'/'green-darken-2'", + "textColor": "Text Color", + "optionaltextColor": "(Optional) e.g. 'green'/'#a5a5a5'/'rgb(165,165,165)'/'green-darken-2'", + "iconColor": "Icon Color", + "optionaliconColor": "(Optional) e.g. 'green'/'#a5a5a5'/'rgb(165,165,165)'/'green-darken-2'" } } } \ No newline at end of file diff --git a/nodes/widgets/ui_button.html b/nodes/widgets/ui_button.html index b79f40172..65985b599 100644 --- a/nodes/widgets/ui_button.html +++ b/nodes/widgets/ui_button.html @@ -33,7 +33,10 @@ payload: { value: '', validate: (hasProperty(RED.validators, 'typedInput') ? RED.validators.typedInput('payloadType') : function (v) { return true }) }, payloadType: { value: 'str' }, topic: { value: 'topic', validate: (hasProperty(RED.validators, 'typedInput') ? RED.validators.typedInput('topicType') : function (v) { return true }) }, - topicType: { value: 'msg' } + topicType: { value: 'msg' }, + buttonColor: { value: '' }, + textColor: { value: '' }, + iconColor: { value: '' } }, inputs: 1, outputs: 1, @@ -127,6 +130,18 @@ +
+ + +
+
+ + +
+
+ + +
diff --git a/nodes/widgets/ui_button.js b/nodes/widgets/ui_button.js index 4dcbdeecb..7e99a6af0 100644 --- a/nodes/widgets/ui_button.js +++ b/nodes/widgets/ui_button.js @@ -55,13 +55,25 @@ module.exports = function (RED) { statestore.set(group.getBase(), node, msg, 'label', updates.label) } if (typeof updates.icon !== 'undefined') { - // dynamically set "label" property + // dynamically set "icon" property statestore.set(group.getBase(), node, msg, 'icon', updates.icon) } if (typeof updates.iconPosition !== 'undefined') { - // dynamically set "label" property + // dynamically set "iconPosition" property statestore.set(group.getBase(), node, msg, 'iconPosition', updates.iconPosition) } + if (typeof updates.buttonColor !== 'undefined') { + // dynamically set "buttonColor" property + statestore.set(group.getBase(), node, msg, 'buttonColor', updates.buttonColor) + } + if (typeof updates.textColor !== 'undefined') { + // dynamically set "textColor" property + statestore.set(group.getBase(), node, msg, 'textColor', updates.textColor) + } + if (typeof updates.iconColor !== 'undefined') { + // dynamically set "iconColor" property + statestore.set(group.getBase(), node, msg, 'iconColor', updates.iconColor) + } } if (!error) { diff --git a/ui/src/widgets/ui-button/UIButton.vue b/ui/src/widgets/ui-button/UIButton.vue index ec6af2d3d..fda553068 100644 --- a/ui/src/widgets/ui-button/UIButton.vue +++ b/ui/src/widgets/ui-button/UIButton.vue @@ -1,10 +1,14 @@ @@ -20,42 +24,58 @@ export default { props: { type: Object, default: () => ({}) }, state: { type: Object, default: () => ({}) } }, - data () { + data() { return { dynamic: { label: null, icon: null, + buttonColor: null, + textColor: null, + iconColor: null, iconPosition: null } } }, computed: { ...mapState('data', ['messages']), - prependIcon () { + prependIcon() { const icon = this.getPropertyValue('icon') const mdiIcon = this.makeMdiIcon(icon) return icon && this.iconPosition === 'left' ? mdiIcon : undefined }, - appendIcon () { + appendIcon() { const icon = this.getPropertyValue('icon') const mdiIcon = this.makeMdiIcon(icon) return icon && this.iconPosition === 'right' ? mdiIcon : undefined }, - label () { + label() { return this.getPropertyValue('label') }, - iconPosition () { + iconPosition() { return this.getPropertyValue('iconPosition') }, - iconOnly () { + iconOnly() { return this.getPropertyValue('icon') && !this.getPropertyValue('label') + }, + buttonColor() { + return this.getPropertyValue('buttonColor') + }, + iconColor() { + return this.getPropertyValue('iconColor') + }, + textClass() { + const textColor = this.getPropertyValue('textColor') + if (typeof textColor === 'string') { + return 'text-' + textColor + } + return undefined } }, - created () { + created() { useDataTracker(this.id, null, null, this.onDynamicProperties) }, methods: { - action ($evt) { + action($evt) { const evt = { type: $evt.type, clientX: $evt.clientX, @@ -66,10 +86,10 @@ export default { msg._event = evt this.$socket.emit('widget-action', this.id, msg) }, - makeMdiIcon (icon) { + makeMdiIcon(icon) { return 'mdi-' + icon.replace(/^mdi-/, '') }, - onDynamicProperties (msg) { + onDynamicProperties(msg) { const updates = msg.ui_update if (!updates) { return @@ -83,8 +103,17 @@ export default { if (typeof updates.iconPosition !== 'undefined') { this.dynamic.iconPosition = updates.iconPosition } + if (typeof updates.buttonColor !== 'undefined') { + this.dynamic.buttonColor = updates.buttonColor + } + if (typeof updates.textColor !== 'undefined') { + this.dynamic.textColor = updates.textColor + } + if (typeof updates.iconColor !== 'undefined') { + this.dynamic.iconColor = updates.iconColor + } }, - getPropertyValue (property) { + getPropertyValue(property) { return this.dynamic[property] !== null ? this.dynamic[property] : this.props[property] } } @@ -95,6 +124,7 @@ export default { .nrdb-ui-button--icon .v-btn__append { margin-left: 0; } + .nrdb-ui-button--icon .v-btn__prepend { margin-right: 0; } @@ -102,6 +132,7 @@ export default { .nrdb-ui-button .v-btn .v-icon { --v-icon-size-multiplier: 1; } + .nrdb-ui-button .nrdb-ui-button--icon .v-icon { --v-icon-size-multiplier: 1.1; } From c59db15155a7195b6e515f853b7dd38c74848785 Mon Sep 17 00:00:00 2001 From: Artur Vieira Date: Fri, 12 Jul 2024 10:37:40 +0100 Subject: [PATCH 2/7] Update Docs --- docs/nodes/widgets/ui-button.md | 18 ++++++++++++++++++ docs/user/migration/ui_button.json | 8 ++++---- nodes/widgets/locales/en-US/ui_button.html | 12 ++++++++++++ 3 files changed, 34 insertions(+), 4 deletions(-) diff --git a/docs/nodes/widgets/ui-button.md b/docs/nodes/widgets/ui-button.md index a96f17640..48d78ed31 100644 --- a/docs/nodes/widgets/ui-button.md +++ b/docs/nodes/widgets/ui-button.md @@ -12,6 +12,15 @@ props: Label: description: The text shown within the button. If not provided, then the button will only render the icon. dynamic: true + Button Color: + description: Button Color. If not provided, default theme color will be used. + dynamic: true + Text Color: + description: Text (Label) color. If not provided calculated automatically based on Button color to be Black or White. + dynamic: true + Icon Color: + description: Icon color. If not provided, will have the same color as text / label. + dynamic: true Emulate Button Click: If enabled, any received message will trigger a button click, emitting the relevant payload and topic. controls: enabled: @@ -27,6 +36,15 @@ dynamic: Label: payload: msg.ui_update.label structure: ["String"] + Button Color: + payload: msg.ui_update.buttonColor + structure: ["String"] + Text Color: + payload: msg.ui_update.textColor + structure: ["String"] + Icon Color: + payload: msg.ui_update.iconColor + structure: ["String"] Class: payload: msg.ui_update.class structure: ["String"] diff --git a/docs/user/migration/ui_button.json b/docs/user/migration/ui_button.json index 78f4dba56..bd7364584 100644 --- a/docs/user/migration/ui_button.json +++ b/docs/user/migration/ui_button.json @@ -33,13 +33,13 @@ }, { "property": "color", - "changes": -1, - "notes": "Issue #375" + "changes": "improved", + "notes": "Separeted property for text color and icon color" }, { "property": "background", - "changes": -1, - "notes": "Issue #375" + "changes": null, + "notes": null }, { "property": "payload", diff --git a/nodes/widgets/locales/en-US/ui_button.html b/nodes/widgets/locales/en-US/ui_button.html index 017f0884c..210051ee5 100644 --- a/nodes/widgets/locales/en-US/ui_button.html +++ b/nodes/widgets/locales/en-US/ui_button.html @@ -10,6 +10,12 @@

Properties

Renders a Material Design icon within the button. We use the Material Design Icons, you can see a full list of the available icons here. There is no need to include the "mdi-" prefix, just the name of the icon.
Icon Positionleft | right
If "Icon" is defined, this property controls which side of the "Label" the icon will render on
+
Button Colorstring
+
Background color for the button, valid values as green/#a5a5a5/rgb(165,165,165)/green-darken-2, check Vuetify Colors for help, send empty string to use default theme color
+
Text Colorstring
+
Color the text on the Button, valid values as green/#a5a5a5/rgb(165,165,165)/green-darken-2, check Vuetify Colors for help, send empty string to use default theme color
+
ICon Colorstring
+
Color for the Icon on the Button (if Icon configured), valid values as green/#a5a5a5/rgb(165,165,165)/green-darken-2, check Vuetify Colors for help, send empty string to use default theme color
Label string
The text shown within the button. If not provided, then the button will only render the icon
Emulate Button Click bool
@@ -24,6 +30,12 @@

Dynamic Properties (Inputs)

Override the icon defined in the initial configuration
iconPosition 'left' | 'right'
Change which side of the label the icon renders
+
buttonColor string
+
Override the default button color
+
textColor string
+
Override the button text default color
+
iconColor string
+
Override the icon (if present) default color
class string
Add a CSS class, or more, to the Button at runtime.
From 41d052fc9197672151c7dfe79a497c0aaa6a1326 Mon Sep 17 00:00:00 2001 From: Artur Vieira Date: Fri, 12 Jul 2024 10:40:40 +0100 Subject: [PATCH 3/7] Fix typo --- docs/user/migration/ui_button.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/user/migration/ui_button.json b/docs/user/migration/ui_button.json index bd7364584..a25f157ef 100644 --- a/docs/user/migration/ui_button.json +++ b/docs/user/migration/ui_button.json @@ -34,7 +34,7 @@ { "property": "color", "changes": "improved", - "notes": "Separeted property for text color and icon color" + "notes": "Separated property for text color and icon color" }, { "property": "background", From c7ba2db04491ec033a3c42c2e0abf59749190737 Mon Sep 17 00:00:00 2001 From: Artur Vieira Date: Fri, 12 Jul 2024 10:57:08 +0100 Subject: [PATCH 4/7] Rename property --- nodes/widgets/locales/en-US/ui_button.html | 3 ++- ui/src/widgets/ui-button/UIButton.vue | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/nodes/widgets/locales/en-US/ui_button.html b/nodes/widgets/locales/en-US/ui_button.html index 210051ee5..bb54edd0f 100644 --- a/nodes/widgets/locales/en-US/ui_button.html +++ b/nodes/widgets/locales/en-US/ui_button.html @@ -13,7 +13,8 @@

Properties

Button Colorstring
Background color for the button, valid values as green/#a5a5a5/rgb(165,165,165)/green-darken-2, check Vuetify Colors for help, send empty string to use default theme color
Text Colorstring
-
Color the text on the Button, valid values as green/#a5a5a5/rgb(165,165,165)/green-darken-2, check Vuetify Colors for help, send empty string to use default theme color
+
Color the text on the Button, valid values as green/#a5a5a5/rgb(165,165,165)/green-darken-2, check Vuetify Colors for help, send empty string to use default theme color. +
Possible to also add parameter to specify text font height and style Vuetify Text Helper Class, this extra property must be separated by a space from color, or if no color to be defined the string text must start with a space.
ICon Colorstring
Color for the Icon on the Button (if Icon configured), valid values as green/#a5a5a5/rgb(165,165,165)/green-darken-2, check Vuetify Colors for help, send empty string to use default theme color
Label string
diff --git a/ui/src/widgets/ui-button/UIButton.vue b/ui/src/widgets/ui-button/UIButton.vue index fda553068..61cb67ea4 100644 --- a/ui/src/widgets/ui-button/UIButton.vue +++ b/ui/src/widgets/ui-button/UIButton.vue @@ -8,7 +8,7 @@ - {{ label }} + {{ label }} @@ -63,7 +63,7 @@ export default { iconColor() { return this.getPropertyValue('iconColor') }, - textClass() { + textColor() { const textColor = this.getPropertyValue('textColor') if (typeof textColor === 'string') { return 'text-' + textColor From 8b6a1ddd56565f24f2dd6ffc0856153d6d66f307 Mon Sep 17 00:00:00 2001 From: Artur Vieira Date: Fri, 12 Jul 2024 10:57:43 +0100 Subject: [PATCH 5/7] Run Lint --- ui/src/widgets/ui-button/UIButton.vue | 34 ++++++++++++++------------- 1 file changed, 18 insertions(+), 16 deletions(-) diff --git a/ui/src/widgets/ui-button/UIButton.vue b/ui/src/widgets/ui-button/UIButton.vue index 61cb67ea4..0fc9b1c92 100644 --- a/ui/src/widgets/ui-button/UIButton.vue +++ b/ui/src/widgets/ui-button/UIButton.vue @@ -1,7 +1,9 @@ @@ -66,11 +66,7 @@ export default { return this.getPropertyValue('iconColor') }, textColor () { - const textColor = this.getPropertyValue('textColor') - if (typeof textColor === 'string') { - return 'text-' + textColor - } - return undefined + return this.getPropertyValue('textColor') } }, created () { From e1568b9632eea77a99b3557ada58879a357e3686 Mon Sep 17 00:00:00 2001 From: Joe Pavitt Date: Tue, 23 Jul 2024 15:08:36 +0100 Subject: [PATCH 7/7] Re-arrange NR config, lighten the placeholders, add v-if render logic --- nodes/widgets/locales/en-US/ui_button.html | 12 +++---- nodes/widgets/locales/en-US/ui_button.json | 12 +++---- nodes/widgets/ui_button.html | 39 ++++++++++------------ ui/src/widgets/ui-button/UIButton.vue | 10 +++--- 4 files changed, 35 insertions(+), 38 deletions(-) diff --git a/nodes/widgets/locales/en-US/ui_button.html b/nodes/widgets/locales/en-US/ui_button.html index 4412a4e43..27f6a5cd9 100644 --- a/nodes/widgets/locales/en-US/ui_button.html +++ b/nodes/widgets/locales/en-US/ui_button.html @@ -20,16 +20,16 @@

Properties

Renders a Material Design icon within the button. We use the Material Design Icons, you can see a full list of the available icons here. There is no need to include the "mdi-" prefix, just the name of the icon.
Icon Positionleft | right
If "Icon" is defined, this property controls which side of the "Label" the icon will render on
-
Button Colorstring
-
Background color for the button, valid values as green/#a5a5a5/rgb(165,165,165)/green-darken-2, check Vuetify Colors for help, send empty string to use default theme color
-
Text Colorstring
-
Color the text on the Button, valid values as green/#a5a5a5/rgb(165,165,165), send empty string to use default theme color. -
ICon Colorstring
-
Color for the Icon on the Button (if Icon configured), valid values as green/#a5a5a5/rgb(165,165,165)/green-darken-2, check Vuetify Colors for help, send empty string to use default theme color
Label string
The text shown within the button. If not provided, then the button will only render the icon. It supports HTML content
Emulate Button Click bool
If enabled, any received message will trigger a button click, emitting the relevant payload and topic
+
Background Colorstring
+
Background color for the button, valid values as green/#a5a5a5/rgb(165,165,165)/green-darken-2, check Vuetify Colors for help, send empty string to use default theme color
+
Text Colorstring
+
Color the text on the Button, valid values as green/#a5a5a5/rgb(165,165,165), send empty string to use default theme color. +
Icon Colorstring
+
Color for the Icon on the Button (if Icon configured), valid values as green/#a5a5a5/rgb(165,165,165)/green-darken-2, check Vuetify Colors for help, send empty string to use default theme color

Dynamic Properties (Inputs)

Any of the following can be appended to a msg.ui_update in order to override or set properties on this node at runtime.

diff --git a/nodes/widgets/locales/en-US/ui_button.json b/nodes/widgets/locales/en-US/ui_button.json index 7cbbad56e..5e3442eea 100644 --- a/nodes/widgets/locales/en-US/ui_button.json +++ b/nodes/widgets/locales/en-US/ui_button.json @@ -23,12 +23,12 @@ "payload": "Payload", "topic": "Topic", "emulateClick": "If msg arrives on input, emulate a button click:", - "buttonColor": "Button Color", - "optionalbuttonColor": "(Optional) e.g. 'green'/'#a5a5a5'/'rgb(165,165,165)'/'green-darken-2'", - "textColor": "Text Color", - "optionaltextColor": "(Optional) e.g. 'green'/'#a5a5a5'/'rgb(165,165,165)'", - "iconColor": "Icon Color", - "optionaliconColor": "(Optional) e.g. 'green'/'#a5a5a5'/'rgb(165,165,165)'/'green-darken-2'" + "buttonColor": "Background", + "optionalButtonColor": "(Optional) e.g. 'green'/'#a5a5a5'", + "textColor": "Text", + "optionalTextColor": "(Optional) e.g. 'green'/'#a5a5a5'", + "iconColor": "Icon", + "optionalIconColor": "(Optional) e.g. 'green'/'#a5a5a5'" } } } \ No newline at end of file diff --git a/nodes/widgets/ui_button.html b/nodes/widgets/ui_button.html index 65985b599..898e94c4f 100644 --- a/nodes/widgets/ui_button.html +++ b/nodes/widgets/ui_button.html @@ -100,6 +100,10 @@ \ No newline at end of file diff --git a/ui/src/widgets/ui-button/UIButton.vue b/ui/src/widgets/ui-button/UIButton.vue index 57208bd65..6df928bd7 100644 --- a/ui/src/widgets/ui-button/UIButton.vue +++ b/ui/src/widgets/ui-button/UIButton.vue @@ -1,16 +1,16 @@