Allow palette to be hidden

packages/node_modules/@node-red/editor-client/locales/en-US/editor.json

@@ -46,6 +46,9 @@
             "sidebar": {
                 "show": "Show sidebar"
             },
+            "palette": {
+                "show": "Show palette"
+            },
             "settings": "Settings",
             "userSettings": "User Settings",
             "nodes": "Nodes",

packages/node_modules/@node-red/editor-client/src/js/keymap.json

@@ -14,6 +14,7 @@
         "ctrl-e": "core:show-export-dialog",
         "ctrl-i": "core:show-import-dialog",
         "ctrl-space": "core:toggle-sidebar",
+        "ctrl-p": "core:toggle-palette",
         "ctrl-,": "core:show-user-settings",
         "ctrl-alt-r": "core:show-remote-diff",
         "ctrl-alt-n": "core:new-project",

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

@@ -434,6 +434,7 @@ var RED = (function() {
             //     {id:"menu-item-bidi-auto",toggle:"text-direction",label:RED._("menu.label.view.auto"), onselect:function(s) { if(s){RED.text.bidi.setTextDirection("auto")}}}
             // ]},
             // null,
+            {id:"menu-item-palette",label:RED._("menu.label.palette.show"),toggle:true,onselect:"core:toggle-palette", selected: true},
             {id:"menu-item-sidebar",label:RED._("menu.label.sidebar.show"),toggle:true,onselect:"core:toggle-sidebar", selected: true},
             null
         ]});

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

@@ -20,7 +20,7 @@ RED.palette = (function() {
     var coreCategories = ['subflows', 'input', 'output', 'function', 'social', 'mobile', 'storage', 'analysis', 'advanced'];
 
     var categoryContainers = {};
-
+    var sidebarControls;
 
     function createCategory(originalCategory,rootCategory,category,ns) {
         if ($("#palette-base-category-"+rootCategory).length === 0) {
@@ -502,6 +502,20 @@ RED.palette = (function() {
             }
         })
 
+        sidebarControls = $('<div class="sidebar-control-left"><i class="fa fa-chevron-left"</div>').appendTo($("#palette"));
+        sidebarControls.click(function() {
+            RED.menu.toggleSelected("menu-item-palette");
+        })
+        $("#palette").on("mouseenter", function() {
+            sidebarControls.toggle("slide", { direction: "left" }, 100);
+        })
+        $("#palette").on("mouseleave", function() {
+            sidebarControls.hide();
+        })
+
+
+
+
         var categoryList = coreCategories;
         if (RED.settings.paletteCategories) {
             categoryList = RED.settings.paletteCategories;
@@ -534,7 +548,27 @@ RED.palette = (function() {
             }
         });
         RED.popover.tooltip($("#palette-expand-all"),RED._('palette.actions.expand-all'));
+
+        RED.actions.add("core:toggle-palette", function(state) {
+            if (state === undefined) {
+                RED.menu.toggleSelected("menu-item-palette");
+            } else {
+                togglePalette(state);
             }
+        });
+    }
+    function togglePalette(state) {
+        if (!state) {
+            $("#main-container").addClass("palette-closed");
+            sidebarControls.find("i").addClass("fa-chevron-right").removeClass("fa-chevron-left");
+        } else {
+            $("#main-container").removeClass("palette-closed");
+            sidebarControls.find("i").removeClass("fa-chevron-right").addClass("fa-chevron-left");
+        }
+        setTimeout(function() { $(window).resize(); } ,200);
+    }
+
+
     function getCategories() {
         var categories = [];
         $("#palette-container .palette-category").each(function(i,d) {

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

@@ -105,6 +105,8 @@ RED.sidebar = (function() {
     }
 
     var sidebarSeparator =  {};
+    sidebarSeparator.dragging = false;
+
     $("#sidebar-separator").draggable({
             axis: "x",
             start:function(event,ui) {
@@ -114,6 +116,7 @@ RED.sidebar = (function() {
                 sidebarSeparator.start = ui.position.left;
                 sidebarSeparator.chartWidth = $("#workspace").width();
                 sidebarSeparator.chartRight = winWidth-$("#workspace").width()-$("#workspace").offset().left-2;
+                sidebarSeparator.dragging = true;
 
                 if (!RED.menu.isSelected("menu-item-sidebar")) {
                     sidebarSeparator.opening = true;
@@ -166,6 +169,7 @@ RED.sidebar = (function() {
                 RED.events.emit("sidebar:resize");
             },
             stop:function(event,ui) {
+                sidebarSeparator.dragging = false;
                 if (sidebarSeparator.closing) {
                     $("#sidebar").removeClass("closing");
                     RED.menu.setSelected("menu-item-sidebar",false);
@@ -181,6 +185,27 @@ RED.sidebar = (function() {
             }
     });
 
+    var sidebarControls = $('<div class="sidebar-control-right"><i class="fa fa-chevron-right"</div>').appendTo($("#sidebar-separator"));
+    sidebarControls.click(function() {
+        sidebarControls.hide();
+        RED.menu.toggleSelected("menu-item-sidebar");
+    })
+    $("#sidebar-separator").on("mouseenter", function() {
+        if (!sidebarSeparator.dragging) {
+            if (RED.menu.isSelected("menu-item-sidebar")) {
+                sidebarControls.find("i").addClass("fa-chevron-right").removeClass("fa-chevron-left");
+            } else {
+                sidebarControls.find("i").removeClass("fa-chevron-right").addClass("fa-chevron-left");
+            }
+            sidebarControls.toggle("slide", { direction: "right" }, 100);
+        }
+    })
+    $("#sidebar-separator").on("mouseleave", function() {
+        if (!sidebarSeparator.dragging) {
+            sidebarControls.hide();
+        }
+    })
+
     function toggleSidebar(state) {
         if (!state) {
             $("#main-container").addClass("sidebar-closed");

packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js

@@ -133,6 +133,7 @@ RED.sidebar.info = (function() {
 
         var table = $('<table class="node-info"></table>').appendTo(propertiesSection.content);
         var tableBody = $('<tbody>').appendTo(table);
+
         var subflowNode;
         var subflowUserCount;
 
@@ -313,6 +314,20 @@ RED.sidebar.info = (function() {
                 $(".node-info-property-row").toggle(expandedSections["property"]);
             });
         }
+
+
+        $('<tr class="blank"><th colspan="2"></th></tr>').appendTo(tableBody);
+        propRow = $('<tr class="node-info-node-row"><td>Actions</td><td></td></tr>').appendTo(tableBody);
+        var actionBar = $(propRow.children()[1]);
+
+        // var actionBar = $('<div>',{style:"background: #fefefe; padding: 3px;"}).appendTo(propertiesSection.content);
+        $('<button type="button" class="editor-button"><i class="fa fa-code"></i></button>').appendTo(actionBar);
+        $('<button type="button" class="editor-button"><i class="fa fa-code"></i></button>').appendTo(actionBar);
+        $('<button type="button" class="editor-button"><i class="fa fa-code"></i></button>').appendTo(actionBar);
+        $('<button type="button" class="editor-button"><i class="fa fa-code"></i></button>').appendTo(actionBar);
+
+
+
     }
     function setInfoText(infoText,target) {
         var info = addTargetToExternalLinks($('<div class="node-help"><span class="bidiAware" dir=\"'+RED.text.bidi.resolveBaseTextDir(infoText)+'">'+infoText+'</span></div>')).appendTo(target);

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

@@ -28,6 +28,14 @@
     transition: width 0.2s ease-in-out;
 }
 
+.palette-closed {
+    #palette { width: 8px; }
+    #palette-search { display: none; }
+    #palette-container { display: none; }
+    #palette-collapse-all { display: none; }
+    #palette-expand-all { display: none; }
+}
+
 .palette-expanded {
     & #palette {
         width: 380px;

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

@@ -103,3 +103,30 @@
 .sidebar-shade {
     @include shade;
 }
+
+
+@mixin sidebar-control {
+    display: none;
+    position: absolute;
+    top: calc(50% - 26px);
+
+    padding:15px 8px;
+    border:1px solid #ccc;
+    background:#f9f9f9;
+    color: #999;
+    text-align: center;
+    cursor: pointer;
+}
+
+.sidebar-control-right {
+    @include sidebar-control;
+    right: calc(100%);
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+}
+.sidebar-control-left {
+    @include sidebar-control;
+    left: calc(100%);
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+}

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

@@ -40,10 +40,14 @@
     right: 322px;
     overflow: hidden;
     @include component-border;
-    transition: left 0.2s ease-in-out;
+    transition: left 0.1s ease-in-out;
 
 }
 
+.palette-closed  #workspace {
+    left: 7px;
+}
+
 .workspace-footer-button {
     @include component-footer-button;
 }