mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
Allow palette to be hidden
This commit is contained in:
parent
dc3128fb3e
commit
289583325d
@ -46,6 +46,9 @@
|
|||||||
"sidebar": {
|
"sidebar": {
|
||||||
"show": "Show sidebar"
|
"show": "Show sidebar"
|
||||||
},
|
},
|
||||||
|
"palette": {
|
||||||
|
"show": "Show palette"
|
||||||
|
},
|
||||||
"settings": "Settings",
|
"settings": "Settings",
|
||||||
"userSettings": "User Settings",
|
"userSettings": "User Settings",
|
||||||
"nodes": "Nodes",
|
"nodes": "Nodes",
|
||||||
|
@ -14,6 +14,7 @@
|
|||||||
"ctrl-e": "core:show-export-dialog",
|
"ctrl-e": "core:show-export-dialog",
|
||||||
"ctrl-i": "core:show-import-dialog",
|
"ctrl-i": "core:show-import-dialog",
|
||||||
"ctrl-space": "core:toggle-sidebar",
|
"ctrl-space": "core:toggle-sidebar",
|
||||||
|
"ctrl-p": "core:toggle-palette",
|
||||||
"ctrl-,": "core:show-user-settings",
|
"ctrl-,": "core:show-user-settings",
|
||||||
"ctrl-alt-r": "core:show-remote-diff",
|
"ctrl-alt-r": "core:show-remote-diff",
|
||||||
"ctrl-alt-n": "core:new-project",
|
"ctrl-alt-n": "core:new-project",
|
||||||
|
@ -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")}}}
|
// {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,
|
// 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},
|
{id:"menu-item-sidebar",label:RED._("menu.label.sidebar.show"),toggle:true,onselect:"core:toggle-sidebar", selected: true},
|
||||||
null
|
null
|
||||||
]});
|
]});
|
||||||
|
@ -20,7 +20,7 @@ RED.palette = (function() {
|
|||||||
var coreCategories = ['subflows', 'input', 'output', 'function', 'social', 'mobile', 'storage', 'analysis', 'advanced'];
|
var coreCategories = ['subflows', 'input', 'output', 'function', 'social', 'mobile', 'storage', 'analysis', 'advanced'];
|
||||||
|
|
||||||
var categoryContainers = {};
|
var categoryContainers = {};
|
||||||
|
var sidebarControls;
|
||||||
|
|
||||||
function createCategory(originalCategory,rootCategory,category,ns) {
|
function createCategory(originalCategory,rootCategory,category,ns) {
|
||||||
if ($("#palette-base-category-"+rootCategory).length === 0) {
|
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;
|
var categoryList = coreCategories;
|
||||||
if (RED.settings.paletteCategories) {
|
if (RED.settings.paletteCategories) {
|
||||||
categoryList = 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.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() {
|
function getCategories() {
|
||||||
var categories = [];
|
var categories = [];
|
||||||
$("#palette-container .palette-category").each(function(i,d) {
|
$("#palette-container .palette-category").each(function(i,d) {
|
||||||
|
@ -105,6 +105,8 @@ RED.sidebar = (function() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
var sidebarSeparator = {};
|
var sidebarSeparator = {};
|
||||||
|
sidebarSeparator.dragging = false;
|
||||||
|
|
||||||
$("#sidebar-separator").draggable({
|
$("#sidebar-separator").draggable({
|
||||||
axis: "x",
|
axis: "x",
|
||||||
start:function(event,ui) {
|
start:function(event,ui) {
|
||||||
@ -114,6 +116,7 @@ RED.sidebar = (function() {
|
|||||||
sidebarSeparator.start = ui.position.left;
|
sidebarSeparator.start = ui.position.left;
|
||||||
sidebarSeparator.chartWidth = $("#workspace").width();
|
sidebarSeparator.chartWidth = $("#workspace").width();
|
||||||
sidebarSeparator.chartRight = winWidth-$("#workspace").width()-$("#workspace").offset().left-2;
|
sidebarSeparator.chartRight = winWidth-$("#workspace").width()-$("#workspace").offset().left-2;
|
||||||
|
sidebarSeparator.dragging = true;
|
||||||
|
|
||||||
if (!RED.menu.isSelected("menu-item-sidebar")) {
|
if (!RED.menu.isSelected("menu-item-sidebar")) {
|
||||||
sidebarSeparator.opening = true;
|
sidebarSeparator.opening = true;
|
||||||
@ -166,6 +169,7 @@ RED.sidebar = (function() {
|
|||||||
RED.events.emit("sidebar:resize");
|
RED.events.emit("sidebar:resize");
|
||||||
},
|
},
|
||||||
stop:function(event,ui) {
|
stop:function(event,ui) {
|
||||||
|
sidebarSeparator.dragging = false;
|
||||||
if (sidebarSeparator.closing) {
|
if (sidebarSeparator.closing) {
|
||||||
$("#sidebar").removeClass("closing");
|
$("#sidebar").removeClass("closing");
|
||||||
RED.menu.setSelected("menu-item-sidebar",false);
|
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) {
|
function toggleSidebar(state) {
|
||||||
if (!state) {
|
if (!state) {
|
||||||
$("#main-container").addClass("sidebar-closed");
|
$("#main-container").addClass("sidebar-closed");
|
||||||
|
@ -133,6 +133,7 @@ RED.sidebar.info = (function() {
|
|||||||
|
|
||||||
var table = $('<table class="node-info"></table>').appendTo(propertiesSection.content);
|
var table = $('<table class="node-info"></table>').appendTo(propertiesSection.content);
|
||||||
var tableBody = $('<tbody>').appendTo(table);
|
var tableBody = $('<tbody>').appendTo(table);
|
||||||
|
|
||||||
var subflowNode;
|
var subflowNode;
|
||||||
var subflowUserCount;
|
var subflowUserCount;
|
||||||
|
|
||||||
@ -313,6 +314,20 @@ RED.sidebar.info = (function() {
|
|||||||
$(".node-info-property-row").toggle(expandedSections["property"]);
|
$(".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) {
|
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);
|
var info = addTargetToExternalLinks($('<div class="node-help"><span class="bidiAware" dir=\"'+RED.text.bidi.resolveBaseTextDir(infoText)+'">'+infoText+'</span></div>')).appendTo(target);
|
||||||
|
@ -28,6 +28,14 @@
|
|||||||
transition: width 0.2s ease-in-out;
|
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-expanded {
|
||||||
& #palette {
|
& #palette {
|
||||||
width: 380px;
|
width: 380px;
|
||||||
|
@ -103,3 +103,30 @@
|
|||||||
.sidebar-shade {
|
.sidebar-shade {
|
||||||
@include 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;
|
||||||
|
}
|
||||||
|
@ -40,10 +40,14 @@
|
|||||||
right: 322px;
|
right: 322px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@include component-border;
|
@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 {
|
.workspace-footer-button {
|
||||||
@include component-footer-button;
|
@include component-footer-button;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user