Skip to content

Commit b4b9a83

Browse files
HiroyasuNishiyamaHiroyasuNishiyama
authored
add text styling feature to ui_text (#805)
1 parent 3bc679f commit b4b9a83

File tree

3 files changed

+175
-2
lines changed

3 files changed

+175
-2
lines changed

‎nodes/ui_text.html‎

Lines changed: 161 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,72 @@
11
<script type="text/javascript">
2+
const fonts = [
3+
{
4+
value: "Arial,Arial,Helvetica,sans-serif",
5+
name: "Arial"
6+
},
7+
{
8+
value: "Arial Black,Arial Black,Gadget,sans-serif",
9+
name: "Arial Black"
10+
},
11+
{
12+
value: "Arial Narrow,Nimbus Sans L,sans-serif",
13+
name: "Arial Narrow"
14+
},
15+
{
16+
value: "Century Gothic,CenturyGothic,AppleGothic,sans-serif",
17+
name: "Century Gothic"
18+
},
19+
{
20+
value: "Copperplate,Copperplate Gothic Light,fantasy",
21+
name: "Copperplate"
22+
},
23+
{
24+
value: "Courier,monospace",
25+
name: "Courier"
26+
},
27+
{
28+
value: "Georgia,Georgia,serif",
29+
name: "Georgia"
30+
},
31+
{
32+
value: "Gill Sans,Geneva,sans-serif",
33+
name: "Gill Sans"
34+
},
35+
{
36+
value: "Impact,Impact,Charcoal,sans-serif",
37+
name: "Impact"
38+
},
39+
{
40+
value: "Lucida Sans Typewriter,Lucida Console,Monaco,monospace",
41+
name: "Lucida Console"
42+
},
43+
{
44+
value: "Lucida Sans Unicode,Lucida Grande,sans-serif",
45+
name: "Lucida Sans"
46+
},
47+
{
48+
value: "Palatino Linotype,Palatino,Book Antiqua,serif",
49+
name: "Palatino Linotype"
50+
},
51+
{
52+
value: "Tahoma,Geneva,sans-serif",
53+
name: "Tahoma"
54+
},
55+
{
56+
value: "Times New Roman,Times,serif",
57+
name: "Times New Roman"
58+
},
59+
{
60+
value: "Trebuchet MS,Helvetica,sans-serif",
61+
name: "Trebuchet MS"
62+
},
63+
{
64+
value: "Verdana,Verdana,Geneva,sans-serif",
65+
name: "Verdana"
66+
},
67+
];
68+
69+
270
RED.nodes.registerType('ui_text',{
371
category: RED._("node-red-dashboard/ui_base:ui_base.label.category"),
472
color: 'rgb(119, 198, 204)',
@@ -19,7 +87,12 @@
1987
label: {value: 'text'},
2088
format: {value: '{{msg.payload}}'},
2189
layout: {value:'row-spread'},
22-
className: {value: ''}
90+
className: {value: ''},
91+
92+
style: { value: false },
93+
font: { value: "" },
94+
fontSize: { value: 16 },
95+
color: { value: "#000" },
2396
},
2497
inputs:1,
2598
outputs:0,
@@ -45,7 +118,65 @@
45118
$('#node-input-layout').val(id.substring(".nr-db-text-layout-".length));
46119
e.preventDefault();
47120
})
48-
})
121+
});
122+
123+
const select = $("#node-select-font");
124+
fonts.forEach((font) => {
125+
var name = font.name;
126+
var val = font.value;
127+
$("<option/>", {
128+
value: val,
129+
}).text(name).appendTo(select);
130+
});
131+
$(select).change(() => {
132+
const val = $("#node-select-font").val();
133+
$("#node-input-font").val(val);
134+
$("#node-test-text").css({
135+
"font-family": val,
136+
});
137+
});
138+
$(select).val(this.font);
139+
$(select).change();
140+
141+
$("#node-input-fontSize").spinner({
142+
min: 1,
143+
max: 100,
144+
spin: () => {
145+
const val = $("#node-input-fontSize").val();
146+
$("#node-test-text").css({
147+
"font-size": val +"px",
148+
});
149+
}
150+
});
151+
if (this.fontSize) {
152+
$("#node-test-text").css({
153+
"font-size": this.fontSize +"px",
154+
});
155+
}
156+
157+
$("#node-input-color").change(() => {
158+
const val = $("#node-input-color").val();
159+
$("#node-test-text").css({
160+
"color": val,
161+
});
162+
});
163+
if (this.color) {
164+
$("#node-test-text").css({
165+
"color": this.color
166+
});
167+
}
168+
169+
$("#node-input-style").change(() => {
170+
const val = $("#node-input-style").prop("checked");
171+
if (val) {
172+
$("#node-styles").show();
173+
}
174+
else {
175+
$("#node-styles").hide();
176+
}
177+
});
178+
$("#node-input-style").change();
179+
49180
}
50181
});
51182
</script>
@@ -104,6 +235,34 @@
104235
</div>
105236
</div>
106237
</div>
238+
239+
<div class="form-row">
240+
<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;"/>
242+
<label for="node-input-style" style="width: 70%;"> Apply Style</label>
243+
</div>
244+
245+
<div id="node-styles">
246+
<div class="form-row">
247+
<label for="node-input-font"><i class="fa fa-font"></i> Font</label>
248+
<select id="node-select-font">
249+
</select>
250+
<input type="hidden" id="node-input-font"/>
251+
</div>
252+
<div class="form-row">
253+
<label for="node-input-fontSize"><i class="fa fa-text-height"></i> Text Size</label>
254+
<input id="node-input-fontSize" value="16" style="width: 50px;"/>
255+
</div>
256+
<div class="form-row">
257+
<label for="node-input-color"><i class="fa fa-tint"></i> Text Color</label>
258+
<input type="color" id="node-input-color" style="width: 50px;"/>
259+
</div>
260+
<div class="form-row">
261+
<label>&nbsp;</label>
262+
<input id="node-test-text" value="Enter Sample Here"/ style="width: 280px;">
263+
</div>
264+
</div>
265+
107266
<div class="form-row">
108267
<label for="node-input-className"><i class="fa fa-code"></i> Class</label>
109268
<input type="text" id="node-input-className" placeholder="Optional CSS class name(s) for widget"/>

‎nodes/ui_text.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,18 @@ module.exports = function(RED) {
1818
else if (layout === "row-center") { angLayout = 'row'; angLayoutAlign = 'center center'}
1919
else if (layout === "row-right") { angLayout = 'row'; angLayoutAlign = 'end center'}
2020
else if (layout === "col-center") { angLayout = 'column'; angLayoutAlign = 'center center'}
21+
let style = "";
22+
if (config.style) {
23+
if (config.color) {
24+
style += `color: ${config.color};`
25+
}
26+
if (config.fontSize) {
27+
style += `font-size: ${config.fontSize}px;`
28+
}
29+
if (config.font) {
30+
style += `font-family: ${config.font};`
31+
}
32+
}
2133
var done = ui.add({
2234
emitOnlyNewValues: false,
2335
node: node,
@@ -33,6 +45,7 @@ module.exports = function(RED) {
3345
layout: angLayout,
3446
layoutAlign: angLayoutAlign,
3547
className: config.className || '',
48+
style: style,
3649
},
3750
convert: function(value,oldValue,msg) {
3851
if (value !== undefined && value !== null) {

‎src/components/ui-component/templates/text.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
ui-card-size="{{ me.item.width }}x{{ me.item.height }}"
33
layout="{{ me.item.layout }}"
44
layout-align="{{ me.item.layoutAlign }}"
5+
style="{{ me.item.style }}"
56
class="nr-dashboard-text"
67
ng-class="[ me.item.safeLabel, {'nr-dashboard-disabled':me.item.disabled}, me.item.className]"
78
node-id="{{me.item.id}}">

0 commit comments

Comments
 (0)