@flowfuse/node-red-dashboard 1.1.0 → 1.1.1-443cd97-202402211638.0

package/nodes/config/locales/en-US/ui_base.html

@@ -0,0 +1,20 @@
+<script type="text/html" data-help-name="ui-base">
+    <p>UI Base</p>
+    <p>This is the foundational element for a Dashboard in Node-RED Dashboard 2.0</p>
+    <p>A Dashboard is driven by a baseline layout which can be modified with some of the following settings</p>
+    <dl class="message-properties">
+        <dt>
+            Sidebar Style
+            <span class="property-type">option</span>
+        </dt>
+        <dd>
+            <ul>
+                <li><b>Collapsing: </b>(default) This open will shift the entire content of the Dashboard when opened, and not be visisble at all when closed.</li>
+                <li><b>Fixed: </b>Will always remain open. At our mobile breakdpoint (768px), this value is overriden, and an "Appear Over" option is used.</li>
+                <li><b>Collapse to icons: </b>Similar to "Collapsing" when opened, but when closed, the icons for each page still show.</li>
+                <li><b>Appear over content: </b>Not visible when closed, and when open, will appear over the Dashboard content, without shifting it.</li>
+                <li><b>Always hide: </b>The sidebar will not be visible under any circumstances. All pages are still accesible via their direct links or a <code>ui-control</code> node.</li>
+            </ul>
+        </dd>
+    </dl>
+</script>

package/nodes/config/locales/en-US/ui_base.json

@@ -1,13 +1,28 @@
 {
-    "ui-base" : {
+    "ui-base": {
         "auto": "auto",
         "label": {
+            "uiName": "UI Name",
+            "path": "Path",
             "category": "dashboard 2",
+            "dashboard2": "Dashboard 2.0",
+            "editSettings": "Edit Settings",
+            "openDashboard": "Open Dashboard",
             "layout": "Layout",
+            "layoutMessage": "Here you can re-order and move your widgets, groups and pages.",
             "theming": "Theming",
+            "themingMessage": "Here you can can get quick access to your UI Themes, defined on your Dashboard.",
+            "page": "Page",
+            "pages": "Pages",
             "settings": "Settings",
             "sidebar": "Sidebar Options",
-            "showPath": "Include Page Path in Label"
+            "showPath": "Include Page Path in Label",
+            "navigationStyle": "Style",
+            "navigationStyleDefault": "Collapsing (default)",
+            "navigationStyleFixed": "Fixed",
+            "navigationStyleIcon": "Collapse to icons",
+            "navigationStyleTemporary": "Appear over content",
+            "navigationStyleNone": "Always hide"
         },
         "layout": {
             "pages": "Pages",

package/nodes/config/locales/en-US/ui_group.json

@@ -1,7 +1,7 @@
 {
     "ui-group": {
         "label": {
-            "name": "Name",
+            "groupName": "Group Name",
             "page": "Page",
             "size": "Size",
             "display-name": "Display group name",

package/nodes/config/locales/en-US/ui_page.html

@@ -3,26 +3,19 @@
     <p>A single screen of content within your Dashboard.</p>
     <h3>Properties</h3>
     <dl class="message-properties">
-        <dt>
-            Name
-            <span class="property-type">string</span>
-        </dt>
-        <dd>
-            Description of "Name"
-        </dd>
         <dt>
             UI
             <span class="property-type">ui-base</span>
         </dt>
         <dd>
-            Description of "UI"
+            The UI (ui-base) that this page will be added to.
         </dd>
         <dt>
             Path
             <span class="property-type">string</span>
         </dt>
         <dd>
-            Description of "Path"
+            Extending the parent UI path, defines where this page renders
         </dd>
         <dt>
             Icon

package/nodes/config/locales/en-US/ui_page.json

@@ -1,7 +1,7 @@
 {
     "ui-page": {
         "label": {
-            "name": "Name",
+            "pageName": "Page Name",
             "ui": "UI",
             "path": "Path",
             "icon": "Icon",

package/nodes/config/locales/en-US/ui_theme.json

@@ -0,0 +1,20 @@
+{
+    "ui-theme": {
+        "label": {
+            "themeName": "Theme Name",
+            "colors": "Colors",
+            "dashboard": "Dashboard",
+            "navigation": "Navigation",
+            "primary": "Primary",
+            "pages": "Pages",
+            "background": "Background",
+            "groups": "Groups",
+            "outline": "Outline",
+            "sizings": "Sizings",
+            "pagePadding": "Page Padding",
+            "groupGap": "Group Gap",
+            "groupBorderRadius": "Group Border Radius",
+            "widgetGap": "Widget Gap"
+        }
+    }
+}

package/nodes/config/locales/ja/ui_base.json

@@ -2,9 +2,18 @@
     "ui-base": {
         "auto": "自動",
         "label": {
+            "uiName": "画面名",
+            "path": "パス",
             "category": "ダッシュボード2",
+            "dashboard2": "ダッシュボード2.0",
+            "editSettings": "設定を編集",
+            "openDashboard": "ダッシュボードを開く",
             "layout": "配置",
+            "layoutMessage": "部品やグループ、ページの並び替えや移動が可能です。",
             "theming": "テーマ",
+            "themingMessage": "ダッシュボードで定義した画面テーマを参照できます。",
+            "page": "ページ",
+            "pages": "ページ",
             "settings": "設定",
             "sidebar": "サイドバーの設定",
             "showPath": "ラベルにページのパスを含める"

package/nodes/config/locales/ja/ui_group.json

@@ -1,7 +1,7 @@
 {
     "ui-group": {
         "label": {
-            "name": "名前",
+            "groupName": "グループ名",
             "page": "ページ",
             "size": "サイズ",
             "display-name": "グループ名を表示",

package/nodes/config/locales/ja/ui_page.html

@@ -4,29 +4,22 @@
     <h3>プロパティ</h3>
     <dl class="message-properties">
         <dt>
-            名前
-            <span class="property-type">string</span>
-        </dt>
-        <dd>
-            Description of "Name"
-        </dd>
-        <dt>
-            UI
+            画面
             <span class="property-type">ui-base</span>
         </dt>
         <dd>
-            Description of "UI"
+            本ページを追加する画面 (ui-base) 
         </dd>
         <dt>
             パス
-            <span class="property-type">string</span>
+            <span class="property-type">文字列</span>
         </dt>
         <dd>
-            Description of "Path"
+            親画面のパスに追加してページを表示する場所を定義します。
         </dd>
         <dt>
             アイコン
-            <span class="property-type">string</span>
+            <span class="property-type">文字列</span>
         </dt>
         <dd>
             サイドバーUIのページ名の横に表示されるアイコン。
@@ -42,14 +35,14 @@
         </dd>
         <dt>
             配置
-            <span class="property-type">グリッド | 固定 | ノートブック</span>
+            <span class="property-type">格子 | 固定 | ノートブック</span>
         </dt>
         <dd>
             利用可能なダッシュボード様式から1つを選択します。様式の詳細については、<a href="https://dashboard.flowfuse.com/layouts/grid.html">ここ</a> を参照してください。
         </dd>
         <dt>
             クラス
-            <span class="property-type">string</span>
+            <span class="property-type">文字列</span>
         </dt>
         <dd>
             レンダグリング時にページの様式に追加するカスタムCSSクラス

package/nodes/config/locales/ja/ui_page.json

@@ -1,13 +1,13 @@
 {
     "ui-page": {
         "label": {
-            "name": "名前",
-            "ui": "UI",
+            "pageName": "ページ名",
+            "ui": "画面",
             "path": "パス",
             "icon": "アイコン",
             "theme": "テーマ",
             "layout": "配置",
-            "grid": "グリッド",
+            "grid": "格子",
             "fixed": "固定",
             "notebook": "ノートブック",
             "class": "クラス",

package/nodes/config/locales/ja/ui_theme.json

@@ -0,0 +1,20 @@
+{
+    "ui-theme": {
+        "label": {
+            "themeName": "テーマ名",
+            "colors": "配色",
+            "dashboard": "ダッシュボード",
+            "navigation": "案内",
+            "primary": "基本",
+            "pages": "ページ",
+            "background": "背景",
+            "groups": "グループ",
+            "outline": "輪郭",
+            "sizings": "サイズ",
+            "pagePadding": "ページの余白",
+            "groupGap": "グループ間の幅",
+            "groupBorderRadius": "グループの角丸",
+            "widgetGap": "部品間の幅"
+        }
+    }
+}

package/nodes/config/ui_base.html

@@ -187,7 +187,7 @@
         category: 'config',
         defaults: {
             name: {
-                value: 'UI Name',
+                value: c_('label.uiName'),
                 required: true
             },
             path: {
@@ -202,6 +202,9 @@
             },
             showPathInSidebar: {
                 value: false
+            },
+            navigationStyle: {
+                value: 'default'
             }
         },
         label: function () {
@@ -228,13 +231,15 @@
 
         const actions = $('<div class="red-ui-sidebar-header-actions"></div>')
 
-        const editSettingsButton = $('<a id="edit-ui-base" class="editor-button editor-button-small nr-db-sb-list-header-button">Edit Settings <i style="margin-left: 3px;" class="fa fa-cog"></i></a>')
+        const editSettingsButton = $('<a id="edit-ui-base" class="editor-button editor-button-small nr-db-sb-list-header-button">'
+            + c_('label.editSettings') + ' <i style="margin-left: 3px;" class="fa fa-cog"></i></a>')
 
         editSettingsButton.on('click', function () {
             RED.editor.editConfig('', 'ui-base', id)
         })
 
-        const openDashboardButton = $(`<a id="open-dashboard" href="${fullPath}" target="nr-dashboard" class="editor-button editor-button-small nr-db-sb-list-header-button">Open Dashboard<i style="margin-left: 3px;" class="fa fa-external-link"></i></a>`)
+        const openDashboardButton = $(`<a id="open-dashboard" href="${fullPath}" target="nr-dashboard" class="editor-button editor-button-small nr-db-sb-list-header-button">`
+            + c_('label.openDashboard') +` <i style="margin-left: 3px;" class="fa fa-external-link"></i></a>`)
 
         label.appendTo(header)
         editSettingsButton.appendTo(actions)
@@ -650,7 +655,7 @@
             .appendTo(buttonGroup)
         RED.popover.tooltip(buttonExpand, c_('layout.expand'))
 
-        divTabs.append('<div class="nrdb2-layout-helptext">Here you can re-order and move your widgets, groups and pages.</div>')
+        divTabs.append('<div class="nrdb2-layout-helptext">' + c_('label.layoutMessage') + '</div>')
 
         const pages = {}
         const groupsByPage = {}
@@ -741,7 +746,7 @@
         const themeHeader = $('<div>', { class: 'nrdb2-sidebar-header' }).appendTo(divTabs)
         $('<b>').html(c_('themes.header')).appendTo(themeHeader)
 
-        divTabs.append('<div class="nrdb2-layout-helptext">Here you can can get quick access to your UI Themes, defined on your Dashboard.</div>')
+        divTabs.append('<div class="nrdb2-layout-helptext">' + c_('label.themingMessage') + '</div>')
 
         const themes = {}
 
@@ -762,7 +767,7 @@
                 const tabicon = 'fa-paint-brush'
                 $('<i>', { class: 'nrdb2-sb-icon nrdb2-sb-tab-icon fa ' + tabicon }).appendTo(titleRow)
                 $('<span>', { class: 'nrdb2-sb-title' }).text(theme.name || theme.id).appendTo(titleRow)
-                $('<span>', { class: 'nrdb2-sb-info' }).text(theme.users.length + ' Page' + (theme.users.length > 1 ? 's' : '')).appendTo(titleRow)
+                $('<span>', { class: 'nrdb2-sb-info' }).text(theme.users.length + ' ' + (theme.users.length > 1 ? c_('label.pages') : c_('label.page'))).appendTo(titleRow)
 
                 const palette = $('<div>', { class: 'nrdb2-sb-palette' }).appendTo(titleRow)
                 const colors = theme.colors
@@ -819,8 +824,8 @@
     function addSidebar () {
         RED.sidebar.addTab({
             id: 'dashboard-2.0',
-            label: 'Dashboard 2.0',
-            name: 'Dashboard 2.0',
+            label: c_('label.dashboard2'),
+            name: c_('label.dashboard2'),
             content: sidebar,
             closeable: true,
             pinned: true,
@@ -1089,16 +1094,26 @@
 
 <script type="text/html" data-template-name="ui-base">
     <div class="form-row">
-        <label for="node-config-input-name"><i class="fa fa-bookmark"></i> Name</label>
-        <input type="text" id="node-config-input-name">
+        <label for="node-config-input-name"><i class="fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></label>
+        <input type="text" id="node-config-input-name" data-i18n="[placeholder]node-red:common.label.name">
     </div>
     <div class="form-row">
-        <label for="node-config-input-path"><i class="fa fa-bookmark"></i> Path</label>
+        <label for="node-config-input-path"><i class="fa fa-bookmark"></i> <span data-i18n="ui-base.label.path"></label>
         <input type="text" id="node-config-input-path" disabled>
         <span style="display: block; margin-left: 105px; margin-top: 0px; font-style: italic; color: #bbb; font-size: 8pt;">This option is currently disabled and still in-development.</span>
     </div>
     <div class="form-row" style="margin-bottom: 0;">
-        <label style="font-weight: 600; width: auto;"><span data-i18n="ui-base.label.sidebar"></span></label>
+        <label style="font-weight: 600; width: auto;" data-i18n="ui-base.label.sidebar"></label>
+    </div>
+    <div class="form-row" style="align-items: center;">
+        <label style="margin-right: 5px; margin-bottom: 0px;" for="node-config-input-navigationStyle"><span data-i18n="ui-base.label.navigationStyle"></span></label>
+        <select id="node-config-input-navigationStyle">
+            <option value="default" data-i18n="ui-base.label.navigationStyleDefault"></option>
+            <option value="fixed" data-i18n="ui-base.label.navigationStyleFixed"></option>
+            <option value="icon" data-i18n="ui-base.label.navigationStyleIcon"></option>
+            <option value="temporary" data-i18n="ui-base.label.navigationStyleTemporary"></option>
+            <option value="none" data-i18n="ui-base.label.navigationStyleNone"></option>
+        </select>
     </div>
     <div class="form-row form-row-flex" style="align-items: center;">
         <input style="margin: 8px 0 10px 16px; width:20px;" type="checkbox" id="node-config-input-showPathInSidebar">

package/nodes/config/ui_base.js

@@ -13,6 +13,17 @@ function join (...paths) {
     }).join('/')
 }
 
+/**
+ * Check if an object has a property
+ * TODO: move to test-able utility lib
+ * @param {Object} obj - Object to check for property
+ * @param {String} prop - Property to check for
+ * @returns {boolean}
+ */
+function hasProperty (obj, prop) {
+    return Object.prototype.hasOwnProperty.call(obj, prop)
+}
+
 module.exports = function (RED) {
     const express = require('express')
     const { Server } = require('socket.io')
@@ -117,9 +128,14 @@ module.exports = function (RED) {
             uiShared.app.use(config.path, uiShared.httpMiddleware, express.static(path.join(__dirname, '../../dist')))
 
             uiShared.app.get(config.path + '/_setup', uiShared.httpMiddleware, (req, res) => {
+                let socketPath = join(RED.settings.httpNodeRoot, config.path, 'socket.io')
+                // if no leading /, add one (happens sometimes depending on httpNodeRoot in settings.js)
+                if (socketPath[0] !== '/') {
+                    socketPath = '/' + socketPath
+                }
                 let resp = {
                     socketio: {
-                        path: `${config.path}/socket.io`
+                        path: socketPath
                     }
                 }
                 // Hook API - onSetup(RED, config, req, res)
@@ -259,6 +275,8 @@ module.exports = function (RED) {
 
         node._created = Date.now()
 
+        n.root = RED.settings.httpNodeRoot || '/'
+
         /** @type {Object.<string, Socket>} */
         // node.connections = {} // store socket.io connections for this node
         // // re-map existing connections for this base node
@@ -544,7 +562,7 @@ module.exports = function (RED) {
             msg = addConnectionCredentials(RED, msg, conn, n)
 
             async function defaultHandler (value) {
-                if (typeof (value) === 'object' && value !== null && Object.hasOwn(value, 'payload')) {
+                if (typeof (value) === 'object' && value !== null && hasProperty(value, 'payload')) {
                     msg.payload = value.payload
                 } else {
                     msg.payload = value
@@ -886,13 +904,13 @@ module.exports = function (RED) {
                         }
 
                         // standard dynamic property handlers
-                        if (Object.prototype.hasOwnProperty.call(msg, 'enabled')) {
+                        if (hasProperty(msg, 'enabled')) {
                             statestore.set(n, widgetNode, msg, 'enabled', msg.enabled)
                         }
-                        if (Object.prototype.hasOwnProperty.call(msg, 'visible')) {
+                        if (hasProperty(msg, 'visible')) {
                             statestore.set(n, widgetNode, msg, 'visible', msg.visible)
                         }
-                        if (Object.prototype.hasOwnProperty.call(msg, 'class')) {
+                        if (hasProperty(msg, 'class')) {
                             statestore.set(n, widgetNode, msg, 'class', msg.class)
                         }
 
@@ -908,7 +926,7 @@ module.exports = function (RED) {
                                 if (widgetConfig.topic || widgetConfig.topicType) {
                                     msg = await appendTopic(RED, widgetConfig, wNode, msg)
                                 }
-                                if (Object.hasOwn(widgetConfig, 'passthru')) {
+                                if (hasProperty(widgetConfig, 'passthru')) {
                                     if (widgetConfig.passthru) {
                                         send(msg)
                                     }

package/nodes/config/ui_group.html

@@ -3,7 +3,7 @@
         category: 'config',
         defaults: {
             name: {
-                value: 'Group Name',
+                value: RED._('@flowfuse/node-red-dashboard/ui-group:ui-group.label.groupName'),
                 required: true
             },
             page: { type: 'ui-page', required: true },
@@ -68,8 +68,8 @@
 
 <script type="text/html" data-template-name="ui-group">
     <div class="form-row">
-        <label for="node-config-input-name"><i class="fa fa-bookmark"></i> <span data-i18n="ui-group.label.name"></label>
-        <input type="text" id="node-config-input-name">
+        <label for="node-config-input-name"><i class="fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></label>
+        <input type="text" id="node-config-input-name" data-i18n="[placeholder]node-red:common.label.name">
     </div>
     <div class="form-row">
         <label for="node-config-input-page"><i class="fa fa-bookmark"></i> <span data-i18n="ui-group.label.page"></label>

package/nodes/config/ui_page.html

@@ -3,7 +3,7 @@
         category: 'config',
         defaults: {
             name: {
-                value: 'Page Name',
+                value: RED._('@flowfuse/node-red-dashboard/ui-page:ui-page.label.pageName'),
                 required: true
             },
             ui: {
@@ -44,7 +44,6 @@
                 })
                 this.path = '/page' + (pageCount + 1)
                 $('#node-config-input-path').val(this.path)
-                console.log('setting path to', this.path)
             }
 
             $('#node-config-input-layout').typedInput({
@@ -99,8 +98,8 @@
 
 <script type="text/html" data-template-name="ui-page">
     <div class="form-row">
-        <label for="node-config-input-name"><i class="w-16 fa fa-bookmark"></i> <span data-i18n="ui-page.label.name"></label>
-        <input type="text" id="node-config-input-name">
+        <label for="node-config-input-name"><i class="w-16 fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></label>
+        <input type="text" id="node-config-input-name" data-i18n="[placeholder]node-red:common.label.name">
     </div>
     <div class="form-row">
         <label for="node-config-input-ui"><i class="w-16 fa fa-sitemap"></i> <span data-i18n="ui-page.label.ui"></label>

package/nodes/config/ui_theme.html

@@ -3,7 +3,7 @@
         category: 'config',
         defaults: {
             name: {
-                value: 'Theme Name',
+                value: RED._('@flowfuse/node-red-dashboard/ui-theme:ui-theme.label.themeName'),
                 required: true
             },
             // colors
@@ -105,68 +105,68 @@
 
 <script type="text/html" data-template-name="ui-theme">
     <div class="form-row">
-        <label for="node-config-input-name"><i class="fa fa-bookmark"></i> Name</label>
-        <input type="text" id="node-config-input-name">
+        <label for="node-config-input-name"><i class="fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></label>
+        <input type="text" id="node-config-input-name" data-i18n="[placeholder]node-red:common.label.name">
     </div>
-    <h3 style="margin: 0; margin-bottom: 6px; border-bottom: 1px solid #eee; padding-bottom: 3px;">Colors</h3>
+    <h3 style="margin: 0; margin-bottom: 6px; border-bottom: 1px solid #eee; padding-bottom: 3px;" data-i18n="ui-theme.label.colors"></h3>
     <div class="form-row" style="margin-bottom: 3px;">
-        <h4 style="margin-bottom: 0;"><i class="fa fa-bar-chart"></i> Dashboard</h4>
+        <h4 style="margin-bottom: 0;"><i class="fa fa-bar-chart"></i> <span data-i18n="ui-theme.label.dashboard"></h4>
     </div>
     <div class="form-row form-row-flex labels-right" style="margin-bottom: 3px; gap: 9px;">
         <div>
-            <label>Navigation</label>
+            <label data-i18n="ui-theme.label.navigation"></label>
             <label class="color-picker-wrapper" for="node-config-input-primary" style="width: 100px; height: 32px; border-radius: 6px; border: 1px solid #ccc">
                 <input type="color" id="node-config-input-surface" style="opacity: 0; width: 100%;"/>
             </label>
         </div>
         <div>
-            <label>Primary</label>
+            <label data-i18n="ui-theme.label.primary"></label>
             <label class="color-picker-wrapper" for="node-config-input-primary" style="width: 100px; height: 32px; border-radius: 6px; border: 1px solid #ccc">
                 <input type="color" id="node-config-input-primary" style="opacity: 0; width: 100%;"/>
             </label>
         </div>
     </div>
     <div class="form-row" style="margin-bottom: 3px;">
-        <h4 style="margin-bottom: 0;"><i class="fa fa-object-group"></i> Pages</h4>
+        <h4 style="margin-bottom: 0;"><i class="fa fa-object-group"></i> <span data-i18n="ui-theme.label.pages"></h4>
     </div>
     <div class="form-row labels-right" style="margin-bottom: 3px;">
-        <label>Background</label>
+        <label data-i18n="ui-theme.label.background"></label>
         <label class="color-picker-wrapper" for="node-config-input-background" style="width: 100px; height: 32px; border-radius: 6px; border: 1px solid #ccc">
             <input type="color" id="node-config-input-bgPage" style="opacity: 0; width: 100%;"/>
         </label>
     </div>
     <div class="form-row" style="margin-bottom: 3px;">
-        <h4 style="margin-bottom: 0;"><i class="fa fa-table"></i> Groups</h4>
+        <h4 style="margin-bottom: 0;"><i class="fa fa-table"></i> <span data-i18n="ui-theme.label.groups"></h4>
     </div>
     <div class="form-row form-row-flex labels-right" style="margin-bottom: 3px; gap: 9px;">
         <div>
-            <label>Background</label>
+            <label data-i18n="ui-theme.label.background"></label>
             <label class="color-picker-wrapper" for="node-config-input-background" style="width: 100px; height: 32px; border-radius: 6px; border: 1px solid #ccc">
                 <input type="color" id="node-config-input-groupBg" style="opacity: 0; width: 100%;"/>
             </label>
         </div>
         <div>
-            <label>Outline</label>
+            <label data-i18n="ui-theme.label.outline"></label>
             <label class="color-picker-wrapper" for="node-config-input-background" style="width: 100px; height: 32px; border-radius: 6px; border: 1px solid #ccc">
                 <input type="color" id="node-config-input-groupOutline" style="opacity: 0; width: 100%;"/>
             </label>
         </div>
     </div>
-    <h3 style="margin: 12px 0 6px; border-bottom: 1px solid #eee; padding-bottom: 3px;">Sizings</h3>
+    <h3 style="margin: 12px 0 6px; border-bottom: 1px solid #eee; padding-bottom: 3px;" data-i18n="ui-theme.label.sizings"></h3>
     <div class="form-row">
-        <label for="node-config-input-pagePadding">Page Padding</label>
+        <label for="node-config-input-pagePadding" data-i18n="ui-theme.label.pagePadding"></label>
         <input type="text" id="node-config-input-pagePadding">
     </div>
     <div class="form-row">
-        <label for="node-config-input-groupGap">Group Gap</label>
+        <label for="node-config-input-groupGap" data-i18n="ui-theme.label.groupGap"></label>
         <input type="text" id="node-config-input-groupGap">
     </div>
     <div class="form-row">
-        <label for="node-config-input-groupBorderRadius">Group Border Radius</label>
+        <label for="node-config-input-groupBorderRadius" data-i18n="ui-theme.label.groupBorderRadius"></label>
         <input type="text" id="node-config-input-groupBorderRadius">
     </div>
     <div class="form-row">
-        <label for="node-config-input-widgetGap">Widget Gap</label>
+        <label for="node-config-input-widgetGap" data-i18n="ui-theme.label.widgetGap"></label>
         <input type="text" id="node-config-input-widgetGap">
     </div>
 </script>

package/nodes/widgets/locales/en-US/ui_button.json

@@ -7,6 +7,9 @@
             "optionalIcon": "optional icon",
             "label": "Label",
             "optionalLabel": "optional label",
+            "button": "button",
+            "className": "Class",
+            "classNamePlaceholder": "Optional CSS class name(s)",
             "tooltip": "Tooltip",
             "optionalTooltip": "optional tooltip",
             "color": "Color",
@@ -16,9 +19,7 @@
             "whenClicked": "When clicked, send:",
             "payload": "Payload",
             "topic": "Topic",
-            "emulateClick": "If msg arrives on input, emulate a button click:",
-            "className": "Class",
-            "classNamePlaceholder": "Optional CSS class name(s) for widget"
+            "emulateClick": "If msg arrives on input, emulate a button click:"
         }
     }
 }

package/nodes/widgets/locales/en-US/ui_form.html

@@ -17,6 +17,6 @@
     <p>Any of the following can be appended to a <code>msg.</code> in order to override or set properties on this node at runtime.</p>
     <dl class="message-properties">
         <dt class="optional">class <span class="property-type">string</span></dt>
-        <dd>Add a CSS class, or more, to the Button at runtime.</dd>
+        <dd>Add a CSS class, or more, to the form at runtime.</dd>
     </dl>
 </script>

package/nodes/widgets/locales/en-US/ui_form.json

@@ -5,6 +5,8 @@
             "size": "Size",
             "label": "Label",
             "optionalLabel": "optional label",
+            "className": "Class",
+            "classNamePlaceholder": "Optional CSS class name(s)",
             "formElements": "Form elements",
             "type": "Type",
             "required": "Required",
@@ -23,14 +25,14 @@
             "time": "Time",
             "element": "element",
             "buttons": "Buttons",
+            "submit": "submit",
             "submitButtonText": "submit button text",
+            "cancel": "clear",
             "cancelButtonText": "cancel button text",
             "topic": "Topic",
             "optionalMsgTopic": "optional msg.topic",
-            "splitLayout":"Place the form elements in two columns",
-            "resetOnSubmit":"Reset the form when submitted",
-            "className": "Class",
-            "classNamePlaceholder": "Optional CSS class name(s) for widget"
+            "splitLayout": "Place the form elements in two columns",
+            "resetOnSubmit": "Reset the form when submitted"
         }
     }
-  }
+}