Add Japanese translations for table, text, form, button and template nodes

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

@@ -1,10 +1,19 @@
 {
-    "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"

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",

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

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",

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"
+        }
+    }
+}

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": "ラベルにページのパスを含める"

nodes/config/locales/ja/ui_group.json

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

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 @@ <h3>プロパティ</h3>
         </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クラス

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": "クラス",

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": "部品間の幅"
+        }
+    }
+}

nodes/config/ui_base.html

@@ -187,7 +187,7 @@
         category: 'config',
         defaults: {
             name: {
-                value: 'UI Name',
+                value: c_('label.uiName'),
                 required: true
             },
             path: {
@@ -228,13 +228,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 +652,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 +743,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 +764,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 +821,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,19 +1091,19 @@
 
 <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 form-row-flex" style="align-items: center;">
         <input style="margin: 8px 0 10px 16px; width:20px;" type="checkbox" id="node-config-input-showPathInSidebar">
-        <label style="width:auto" for="node-config-input-showPathInSidebar"><span data-i18n="ui-base.label.showPath"></span></label>
+        <label style="width:auto" for="node-config-input-showPathInSidebar" data-i18n="ui-base.label.showPath"></label>
     </div>
 </script>

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>

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: {
@@ -99,8 +99,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>