frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Allow palette to be hidden

Browse Source
This commit is contained in:
Nick O'Leary 2018-10-17 11:03:09 +01:00
parent dc3128fb3e
commit 289583325d
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
9 changed files with 120 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/node_modules/@node-red/editor-client/locales/en-US/editor.json vendored
View File

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

1
packages/node_modules/@node-red/editor-client/src/js/keymap.json vendored
View File

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

1
packages/node_modules/@node-red/editor-client/src/js/red.js vendored
View File

@ -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
]});

36
packages/node_modules/@node-red/editor-client/src/js/ui/palette.js vendored
View File

@ -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) {

25
packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js vendored
View File

@ -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");

15
packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js vendored
View File

@ -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);

8
packages/node_modules/@node-red/editor-client/src/sass/palette.scss vendored
View File

@ -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;

27
packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss vendored
View File

@ -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;
}

6
packages/node_modules/@node-red/editor-client/src/sass/workspace.scss vendored
View File

@ -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;
}