Skip to content

Commit 392098a

Browse files
joepavittjoepavitt
authored
Merge pull request #77 from flowforge/ui-text
Include custom styling for ui-text & update docs
2 parents b000dc2 + c299a55 commit 392098a

File tree

6 files changed

+79
-28
lines changed

6 files changed

+79
-28
lines changed

‎docs/.vitepress/config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ export default {
4646
{ text: 'ui-button', link: '/nodes/widgets/ui-button' },
4747
{ text: 'ui-dropdown', link: '/nodes/widgets/ui-dropdown' },
4848
{ text: 'ui-slider', link: '/nodes/widgets/ui-slider' },
49+
{ text: 'ui-text', link: '/nodes/widgets/ui-text' },
4950
{ text: 'ui-text-input', link: '/nodes/widgets/ui-text-input' },
5051
{ text: 'ui-markdown', link: '/nodes/widgets/ui-markdown' },
5152
]

‎docs/assets/images/node-examples/ui-text.png‎

57.2 KB
Loading

‎docs/nodes/widgets/ui-text.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
---
2+
props:
3+
Group: Defines which group of the UI Dashboard this widget will render in.
4+
Size: Controls the width of the button with respect to the parent group. Maximum value is the width of the group.
5+
Label: The text shown within the button.
6+
Layout: Choose how to layout your label (if deifned) & value.
7+
Style: Checkbox to define whether or not to include custom styling for the text. Enabling this will then show the below options.
8+
Font: If "style" is enabled, this will define the font of the text.
9+
Text Size: If "style" is enabled, this will define the size of the text.
10+
Text Color: If "style" is enabled, this will define the color of the text.
11+
---
12+
13+
<script setup>
14+
</script>
15+
16+
# Text `ui-text`
17+
18+
Displays a non-editable text field on the user interface. Each received `msg.payload` will update the value shown alongside the (optional) label.
19+
20+
## Properties
21+
22+
<PropsTable/>
23+
24+
## Example
25+
26+
![Examples of Text](../../assets/images/node-examples/ui-text.png "Examples of Text"){data-zoomable}
27+
*Examples of variants of ui-text rendered in a Dashboard.*

‎nodes/widgets/ui_text.html‎

Lines changed: 31 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -120,51 +120,51 @@
120120
});
121121

122122
const select = $("#node-select-font");
123+
124+
// add font options
123125
fonts.forEach((font) => {
124126
var name = font.name;
125127
var val = font.value;
126128
$("<option/>", {
127129
value: val,
128130
}).text(name).appendTo(select);
129131
});
132+
133+
// when a font is selected
130134
$(select).change(() => {
131135
const val = $("#node-select-font").val();
136+
// update hidden input
132137
$("#node-input-font").val(val);
138+
// update test text
133139
$("#node-test-text").css({
134140
"font-family": val,
135141
});
136142
});
137143
$(select).val(this.font);
138144
$(select).change();
139145

146+
// make the fontsize a numeric spinner
140147
$("#node-input-fontSize").spinner({
141148
min: 1,
142149
max: 100,
143150
spin: () => {
151+
// update the test text when value is changed
144152
const val = $("#node-input-fontSize").val();
145153
$("#node-test-text").css({
146154
"font-size": val +"px",
147155
});
148156
}
149157
});
150-
if (this.fontSize) {
151-
$("#node-test-text").css({
152-
"font-size": this.fontSize +"px",
153-
});
154-
}
155158

159+
// add change handler to color picker to update test text
156160
$("#node-input-color").change(() => {
157161
const val = $("#node-input-color").val();
158162
$("#node-test-text").css({
159163
"color": val,
160164
});
161165
});
162-
if (this.color) {
163-
$("#node-test-text").css({
164-
"color": this.color
165-
});
166-
}
167166

167+
// add change handler to show/hide style config options
168168
$("#node-input-style").change(() => {
169169
const val = $("#node-input-style").prop("checked");
170170
if (val) {
@@ -176,11 +176,26 @@
176176
});
177177
$("#node-input-style").change();
178178

179+
// when opening the config, make sure the test text is updated
180+
if (this.fontSize) {
181+
$("#node-test-text").css({
182+
"font-size": this.fontSize +"px",
183+
});
184+
}
185+
if (this.color) {
186+
$("#node-test-text").css({
187+
"color": this.color
188+
});
189+
}
179190
}
180191
});
181192
</script>
182193

183194
<script type="text/html" data-template-name="ui-text">
195+
<div class="form-row">
196+
<label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
197+
<input type="text" id="node-input-name">
198+
</div>
184199
<div class="form-row">
185200
<label for="node-input-group"><i class="fa fa-table"></i> Group</label>
186201
<input type="text" id="node-input-group">
@@ -195,10 +210,10 @@
195210
<label for="node-input-label"><i class="fa fa-i-cursor"></i> Label</label>
196211
<input type="text" id="node-input-label">
197212
</div>
198-
<div class="form-row">
213+
<!--<div class="form-row">
199214
<label for="node-input-format"><i class="fa fa-i-cursor"></i> Value format</label>
200215
<input type="text" id="node-input-format" placeholder="{{msg.payload}}">
201-
</div>
216+
</div>-->
202217
<div class="form-row">
203218
<label style="vertical-align: top"><i class="fa fa-th-large"></i> Layout</label>
204219
<div style="display:inline-block">
@@ -236,11 +251,11 @@
236251
</div>
237252
</div>
238253

239-
<!--<div class="form-row">
254+
<div class="form-row">
240255
<label><i class="fa fa-cog"></i> Style</label>
241-
<input type="checkbox" id="node-input-style" style="display: inline-block; width: auto; vertical-align: top;"/>
256+
<input type="checkbox" id="node-input-style" style="display: inline-block; width: auto; vertical-align: top; margin: 0 3px 0 0;"/>
242257
<label for="node-input-style" style="width: 70%;"> Apply Style</label>
243-
</div>-->
258+
</div>
244259

245260
<div id="node-styles">
246261
<div class="form-row">
@@ -262,18 +277,8 @@
262277
<input id="node-test-text" value="Enter Sample Here"/ style="width: 280px;">
263278
</div>
264279
</div>
265-
266-
<div class="form-row">
267-
<label for="node-input-className"><i class="fa fa-code"></i> Class</label>
268-
<input type="text" id="node-input-className" placeholder="Optional CSS class name(s) for widget"/>
269-
</div>
270-
<div class="form-row">
271-
<label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
272-
<input type="text" id="node-input-name">
273-
</div>
274-
275-
276280
</script>
281+
277282
<style>
278283
.nr-db-text-layout {
279284
position:relative;

‎nodes/widgets/ui_text.js‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,23 @@ module.exports = function(RED) {
44

55
RED.nodes.createNode(this, config);
66

7+
let style = "";
8+
if (config.style) {
9+
if (config.color) {
10+
style += `color: ${config.color};`
11+
}
12+
if (config.fontSize) {
13+
style += `font-size: ${config.fontSize}px;`
14+
style += `line-height: ${config.fontSize}px;`
15+
}
16+
if (config.font) {
17+
style += `font-family: ${config.font};`
18+
}
19+
config.style = style
20+
}
21+
722
// which group are we rendering this widget
823
var group = RED.nodes.getNode(config.group);
9-
1024
// inform the dashboard UI that we are adding this node
1125
group.register(node, config)
1226
}

‎ui/src/widgets/ui-text/UIText.vue‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="nrdb-ui-widget nrdb-ui-text" :class="'nrdb-ui-text--' + props.layout">
2+
<div class="nrdb-ui-widget nrdb-ui-text" :class="'nrdb-ui-text--' + props.layout" :style="props.style">
33
<label class="nrdb-ui-text-label">{{ props.label }}</label>
44
<span class="nrdb-ui-text-value">{{ (values && values[id]) || 'No Message Received' }}</span>
55
</div>
@@ -46,6 +46,10 @@
4646
align-items: center;
4747
justify-content: center;
4848
}
49+
.nrdb-ui-text--row-center label,
50+
.nrdb-ui-text--row-center span {
51+
text-align: center;
52+
}
4953
.nrdb-ui-text--row-right {
5054
align-items: center;
5155
justify-content: flex-end;

0 commit comments

Comments
 (0)