Fix menu padding to handle both icons and submenus

Fixes #3683

CHANGELOG.md

@@ -1,3 +1,42 @@
+#### 3.0.0-beta.3: Beta Release
+
+Editor
+
+ - Add Right-Click content menu (#3678) @knolleary
+ - Fix disable junction (#3671) @HiroyasuNishiyama
+ - Add Japanese translations for v2.2.3 (#3672) @kazuhitoyokoi
+ - Reset mouse state when switching tabs (#3643) @knolleary
+ - Fix uncorrect fix of junction to subflow conversion (#3666) @HiroyasuNishiyama
+ - Fix undoing junction to subflow (#3653) @HiroyasuNishiyama
+ - Fix conversion of junction to subflow (#3652) @HiroyasuNishiyama
+ - Fix to include junction to exported nodes (#3650) @HiroyasuNishiyama
+ - Fix z-index value for shade to cover nodes in palette (#3649) @kazuhitoyokoi
+ - Fix to extend escaped subflow category characters (#3647) @HiroyasuNishiyama
+ - Fix to sanitize tab name (#3646) @HiroyasuNishiyama
+ - Fix selector placement (#3644) @bonanitech
+ - Add Japanese translations for v3.0-beta.2 (#3622) @kazuhitoyokoi
+ - Fix new folder menu of save to library dialog (#3633) @HiroyasuNishiyama
+ - Fix layer of palette node (#3638) @HiroyasuNishiyama
+ - Fix to place a node dragged from palette within the workspace (#3637) @HiroyasuNishiyama
+ - Fix typo in CSS (#3628) @bonanitech
+ - Use the correct variable for the gutter text color (#3615) @bonanitech
+
+
+Runtime
+
+ - Support loading node modules from `nodesdir` (#3676) @Steve-Mcl
+ - fix buffer parse error message of evaluateNodeProperty (#3624) @HiroyasuNishiyama
+
+Nodes
+
+ - File: Further simplify file node filename entry UX (v3) (#3677) @Steve-Mcl
+ - Function: Fix initial cursor position of init/finalize tab of function node (#3674) @HiroyasuNishiyama
+ - Function: Fix ESM module loading in Function node (#3645) @knolleary
+ - Inject: Fix JSONata evaluation of inject button (#3632) @HiroyasuNishiyama
+ - TCP: Dont delete TCP socket twice (#3630) @Steve-Mcl
+ - MQTT Node: define noproxy variable (#3626) @Steve-Mcl
+ - Debug: i18n debug sidebar node label (#3623) @HiroyasuNishiyama
+
 #### 3.0.0-beta.2: Beta Release
 
 **Migration from 2.x**

package.json

@@ -1,6 +1,6 @@
 {
     "name": "node-red",
-    "version": "3.0.0-beta.2",
+    "version": "3.0.0-beta.3",
     "description": "Low-code programming for event-driven applications",
     "homepage": "http://nodered.org",
     "license": "Apache-2.0",
@@ -49,7 +49,7 @@
         "hash-sum": "2.0.0",
         "hpagent": "1.0.0",
         "https-proxy-agent": "5.0.1",
-        "i18next": "21.8.2",
+        "i18next": "21.8.10",
         "iconv-lite": "0.6.3",
         "is-utf8": "0.2.1",
         "js-yaml": "4.1.0",
@@ -62,7 +62,7 @@
         "moment": "2.29.3",
         "moment-timezone": "0.5.34",
         "mqtt": "4.3.7",
-        "multer": "1.4.4",
+        "multer": "1.4.5-lts.1",
         "mustache": "4.2.0",
         "node-red-admin": "^3.0.0",
         "node-watch": "0.7.3",
@@ -76,7 +76,7 @@
         "semver": "7.3.7",
         "tar": "6.1.11",
         "tough-cookie": "4.0.0",
-        "uglify-js": "3.15.5",
+        "uglify-js": "3.16.0",
         "uuid": "8.3.2",
         "ws": "7.5.6",
         "xml2js": "0.4.23"
@@ -105,16 +105,16 @@
         "grunt-sass": "~3.1.0",
         "grunt-simple-mocha": "~0.4.1",
         "grunt-simple-nyc": "^3.0.1",
-        "i18next-http-backend": "1.4.0",
+        "i18next-http-backend": "1.4.1",
         "jquery-i18next": "1.2.1",
         "jsdoc-nr-template": "github:node-red/jsdoc-nr-template",
-        "marked": "4.0.15",
+        "marked": "4.0.17",
         "minami": "1.2.3",
         "mocha": "9.2.2",
         "node-red-node-test-helper": "^0.2.7",
         "nodemon": "2.0.16",
         "proxy": "^1.0.2",
-        "sass": "1.51.0",
+        "sass": "1.52.3",
         "should": "13.2.3",
         "sinon": "11.1.2",
         "stoppable": "^1.1.0",

packages/node_modules/@node-red/editor-api/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@node-red/editor-api",
-    "version": "3.0.0-beta.2",
+    "version": "3.0.0-beta.3",
     "license": "Apache-2.0",
     "main": "./lib/index.js",
     "repository": {
@@ -16,8 +16,8 @@
         }
     ],
     "dependencies": {
-        "@node-red/util": "3.0.0-beta.2",
-        "@node-red/editor-client": "3.0.0-beta.2",
+        "@node-red/util": "3.0.0-beta.3",
+        "@node-red/editor-client": "3.0.0-beta.3",
         "bcryptjs": "2.4.3",
         "body-parser": "1.20.0",
         "clone": "2.1.2",
@@ -26,7 +26,7 @@
         "express": "4.18.1",
         "memorystore": "1.6.7",
         "mime": "3.0.0",
-        "multer": "1.4.4",
+        "multer": "1.4.5-lts.1",
         "mustache": "4.2.0",
         "oauth2orize": "1.11.1",
         "passport-http-bearer": "1.0.1",

packages/node_modules/@node-red/editor-client/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@node-red/editor-client",
-    "version": "3.0.0-beta.2",
+    "version": "3.0.0-beta.3",
     "license": "Apache-2.0",
     "repository": {
         "type": "git",

packages/node_modules/@node-red/editor-client/src/js/ui/common/menu.js

@@ -133,6 +133,8 @@ RED.menu = (function() {
             if (opt.options) {
                 item.addClass("red-ui-menu-dropdown-submenu"+(opt.direction!=='right'?" pull-left":""));
                 var submenu = $('<ul id="'+opt.id+'-submenu" class="red-ui-menu-dropdown"></ul>').appendTo(item);
+                var hasIcons = false
+                var hasSubmenus = false
 
                 for (var i=0;i<opt.options.length;i++) {
 
@@ -144,6 +146,8 @@ RED.menu = (function() {
                             opt.options[i].onpostselect = opt.onpostselect
                         }
                         opt.options[i].direction = opt.direction
+                        hasIcons = hasIcons || (opt.options[i].icon);
+                        hasSubmenus = hasSubmenus || (opt.options[i].options);
                     }
 
                     var li = createMenuItem(opt.options[i]);
@@ -151,6 +155,14 @@ RED.menu = (function() {
                         li.appendTo(submenu);
                     }
                 }
+                if (!hasIcons) {
+                    submenu.addClass("red-ui-menu-dropdown-noicons")
+                }
+                if (hasSubmenus) {
+                    submenu.addClass("red-ui-menu-dropdown-submenus")
+                }
+
+
             }
             if (opt.disabled) {
                 item.addClass("disabled");
@@ -191,6 +203,8 @@ RED.menu = (function() {
         }
 
         var lastAddedSeparator = false;
+        var hasSubmenus = false;
+        var hasIcons = false;
         for (var i=0;i<options.options.length;i++) {
             var opt = options.options[i];
             if (opt) {
@@ -203,6 +217,8 @@ RED.menu = (function() {
                 opt.direction = options.direction || 'left'
             }
             if (opt !== null || !lastAddedSeparator) {
+                hasIcons = hasIcons || (opt && opt.icon);
+                hasSubmenus = hasSubmenus || (opt && opt.options);
                 var li = createMenuItem(opt);
                 if (li) {
                     li.appendTo(topMenu);
@@ -210,7 +226,12 @@ RED.menu = (function() {
                 }
             }
         }
-
+        if (!hasIcons) {
+            topMenu.addClass("red-ui-menu-dropdown-noicons")
+        }
+        if (hasSubmenus) {
+            topMenu.addClass("red-ui-menu-dropdown-submenus")
+        }
         return topMenu;
     }
 

packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss

@@ -46,7 +46,7 @@
     & > li > a,
     & > li > a:focus {
         display: block;
-        padding: 4px 20px 4px 12px;
+        padding: 4px 12px 4px 32px;
         clear: both;
         font-weight: normal;
         line-height: 20px;
@@ -58,6 +58,18 @@
     & > li.pull-left > a:focus {
         padding: 4px 12px 4px 32px;
     }
+    &.red-ui-menu-dropdown-noicons > li > a,
+    &.red-ui-menu-dropdown-noicons > li > a:focus {
+        padding: 4px 12px 4px 12px;
+    }
+
+    &.red-ui-menu-dropdown-submenus > li > a,
+    &.red-ui-menu-dropdown-submenus > li > a:focus {
+        padding-right: 20px;
+    }
+
+
+
     & > .active > a,
     & > .active > a:hover,
     & > .active > a:focus {

packages/node_modules/@node-red/editor-client/src/tours/welcome.js

@@ -1,15 +1,27 @@
 export default {
-    version: "3.0.0-beta.1",
+    version: "3.0.0-beta.3",
     steps: [
         {
             titleIcon: "fa fa-map-o",
             title: {
-                "en-US": "Welcome to Node-RED 3.0 Beta 1!",
-                "ja": "Node-RED 3.0 ベータ1へようこそ!"
+                "en-US": "Welcome to Node-RED 3.0 Beta 3!",
+                "ja": "Node-RED 3.0 ベータ3へようこそ!"
             },
             description: {
-                "en-US": "<p>This is the first Beta release of Node-RED 3.0. It contains just about everything we have planned for the final release.</p><p>Let's take a moment to discover the new features in this release.</p>",
-                "ja": "<p>これはNode-RED 3.0の最初のベータリリースです。これには、最終リリースで計画しているほぼ全ての機能が含まれています。</p><p>本リリースの新機能を見つけてみましょう。</p>"
+                "en-US": "<p>This is the final beta release of Node-RED 3.0.</p><p>Let's take a moment to discover the new features in this release.</p>",
+                // "ja": "<p>これはNode-RED 3.0の最初のベータリリースです。これには、最終リリースで計画しているほぼ全ての機能が含まれています。</p><p>本リリースの新機能を見つけてみましょう。</p>"
+            }
+        },
+        {
+            title: {
+                "en-US": "Context Menu"
+            },
+            image: 'images/context-menu.png',
+            description: {
+                "en-US": `<p>The editor now has its own context menu when you
+                          right-click in the workspace.</p>
+                          <p>This makes many of the built-in actions much easier
+                          to access.</p>`
             }
         },
         {
@@ -19,12 +31,13 @@ export default {
             },
             image: 'images/junction-slice.gif',
             description: {
-                "en-US": `<p>To make it easier to route wires around your flows, it is now possible to
-                             add junction nodes that give you more control.</p>
-                          <p>Junctions can be added to wires by holding the Shift key, then click and drag with
-                          the right-hand mouse button across the wires.</p>`,
-                "ja": `<p>フローのワイヤーの経路をより制御しやすくするために、分岐点ノードを追加できるようになりました。</p>
-                       <p>シフトキーを押しながら、マウスの右ボタンをクリックし、ワイヤーを横切るようにドラッグすることで、分岐点を追加できます。</p>`
+                "en-US": `<p>To make it easier to route wires around your flows,
+                             it is now possible to add junction nodes that give
+                             you more control.</p>
+                          <p>Junctions can be added to wires by holding the Alt key
+                          then click and drag the mouse across the wires.</p>`,
+                // "ja": `<p>フローのワイヤーの経路をより制御しやすくするために、分岐点ノードを追加できるようになりました。</p>
+                //        <p>シフトキーを押しながら、マウスの右ボタンをクリックし、ワイヤーを横切るようにドラッグすることで、分岐点を追加できます。</p>`
             },
         },
         {

packages/node_modules/@node-red/nodes/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@node-red/nodes",
-    "version": "3.0.0-beta.2",
+    "version": "3.0.0-beta.3",
     "license": "Apache-2.0",
     "repository": {
         "type": "git",
@@ -36,7 +36,7 @@
         "js-yaml": "4.1.0",
         "media-typer": "1.1.0",
         "mqtt": "4.3.7",
-        "multer": "1.4.4",
+        "multer": "1.4.5-lts.1",
         "mustache": "4.2.0",
         "node-watch": "0.7.3",
         "on-headers": "1.0.2",

packages/node_modules/@node-red/registry/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@node-red/registry",
-    "version": "3.0.0-beta.2",
+    "version": "3.0.0-beta.3",
     "license": "Apache-2.0",
     "main": "./lib/index.js",
     "repository": {
@@ -16,11 +16,11 @@
         }
     ],
     "dependencies": {
-        "@node-red/util": "3.0.0-beta.2",
+        "@node-red/util": "3.0.0-beta.3",
         "clone": "2.1.2",
         "fs-extra": "10.1.0",
         "semver": "7.3.7",
         "tar": "6.1.11",
-        "uglify-js": "3.15.5"
+        "uglify-js": "3.16.0"
     }
 }

packages/node_modules/@node-red/runtime/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@node-red/runtime",
-    "version": "3.0.0-beta.2",
+    "version": "3.0.0-beta.3",
     "license": "Apache-2.0",
     "main": "./lib/index.js",
     "repository": {
@@ -16,8 +16,8 @@
         }
     ],
     "dependencies": {
-        "@node-red/registry": "3.0.0-beta.2",
-        "@node-red/util": "3.0.0-beta.2",
+        "@node-red/registry": "3.0.0-beta.3",
+        "@node-red/util": "3.0.0-beta.3",
         "async-mutex": "0.3.2",
         "clone": "2.1.2",
         "express": "4.18.1",

packages/node_modules/@node-red/util/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@node-red/util",
-    "version": "3.0.0-beta.2",
+    "version": "3.0.0-beta.3",
     "license": "Apache-2.0",
     "repository": {
         "type": "git",
@@ -16,7 +16,7 @@
     ],
     "dependencies": {
         "fs-extra": "10.1.0",
-        "i18next": "21.8.2",
+        "i18next": "21.8.10",
         "json-stringify-safe": "5.0.1",
         "jsonata": "1.8.6",
         "lodash.clonedeep": "^4.5.0",

packages/node_modules/node-red/package.json

@@ -1,6 +1,6 @@
 {
     "name": "node-red",
-    "version": "3.0.0-beta.2",
+    "version": "3.0.0-beta.3",
     "description": "Low-code programming for event-driven applications",
     "homepage": "http://nodered.org",
     "license": "Apache-2.0",
@@ -31,10 +31,10 @@
         "flow"
     ],
     "dependencies": {
-        "@node-red/editor-api": "3.0.0-beta.2",
-        "@node-red/runtime": "3.0.0-beta.2",
-        "@node-red/util": "3.0.0-beta.2",
-        "@node-red/nodes": "3.0.0-beta.2",
+        "@node-red/editor-api": "3.0.0-beta.3",
+        "@node-red/runtime": "3.0.0-beta.3",
+        "@node-red/util": "3.0.0-beta.3",
+        "@node-red/nodes": "3.0.0-beta.3",
         "basic-auth": "2.0.1",
         "bcryptjs": "2.4.3",
         "express": "4.18.1",