frodovdr
/
node-red
mirror of https://github.com/node-red/node-red.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Add sidebar grip and make drag-openable

This commit is contained in:
Nick O'Leary 2014-05-13 00:01:05 +01:00
parent 59eccb116a
commit aa4bf4d640
2 changed files with 59 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
public/red/ui/sidebar.js
View File

@ -41,50 +41,88 @@ RED.sidebar = function() {
$("#sidebar-separator").draggable({ $("#sidebar-separator").draggable({
axis: "x", axis: "x",
start:function(event,ui) { start:function(event,ui) {
sidebarSeparator.closing = false;
sidebarSeparator.opening = false;
var winWidth = $(window).width(); var winWidth = $(window).width();
sidebarSeparator.start = ui.position.left; sidebarSeparator.start = ui.position.left;
sidebarSeparator.width = $("#sidebar").width();
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.closing = false;
if (!btnSidebar.hasClass("active")) {
sidebarSeparator.opening = true;
var newChartRight = 15;
$("#sidebar").addClass("closing");
$("#workspace").css("right",newChartRight);
$("#chart-zoom-controls").css("right",newChartRight+20);
$("#sidebar").width(0);
toggleSidebar();
RED.view.resize();
}
sidebarSeparator.width = $("#sidebar").width();
}, },
drag: function(event,ui) { drag: function(event,ui) {
var d = ui.position.left-sidebarSeparator.start; var d = ui.position.left-sidebarSeparator.start;
var newSidebarWidth = sidebarSeparator.width-d; var newSidebarWidth = sidebarSeparator.width-d;
if (sidebarSeparator.opening) {
newSidebarWidth -= 13;
}
if (newSidebarWidth > 180 && sidebarSeparator.chartWidth+d > 200) { if (newSidebarWidth > 150) {
var newChartRight = sidebarSeparator.chartRight-d; if (sidebarSeparator.chartWidth+d < 200) {
$("#workspace").css("right",newChartRight); ui.position.left = 200+sidebarSeparator.start-sidebarSeparator.chartWidth;
$("#chart-zoom-controls").css("right",newChartRight+20); d = ui.position.left-sidebarSeparator.start;
$("#sidebar").width(newSidebarWidth); newSidebarWidth = sidebarSeparator.width-d;
}
} }
if (newSidebarWidth < 150 && !sidebarSeparator.closing) {
$("#sidebar").addClass("closing"); if (newSidebarWidth < 150) {
sidebarSeparator.closing = true; if (!sidebarSeparator.closing) {
} $("#sidebar").addClass("closing");
if (newSidebarWidth >= 150 && sidebarSeparator.closing) { sidebarSeparator.closing = true;
}
if (!sidebarSeparator.opening) {
newSidebarWidth = 150;
ui.position.left = sidebarSeparator.width-(150 - sidebarSeparator.start);
d = ui.position.left-sidebarSeparator.start;
}
} else if (newSidebarWidth > 150 && (sidebarSeparator.closing || sidebarSeparator.opening)) {
sidebarSeparator.closing = false; sidebarSeparator.closing = false;
$("#sidebar").removeClass("closing"); $("#sidebar").removeClass("closing");
} }
var newChartRight = sidebarSeparator.chartRight-d;
$("#workspace").css("right",newChartRight);
$("#chart-zoom-controls").css("right",newChartRight+20);
$("#sidebar").width(newSidebarWidth);
sidebar_tabs.resize(); sidebar_tabs.resize();
RED.view.resize(); RED.view.resize();
}, },
stop:function(event,ui) { stop:function(event,ui) {
$("#sidebar-separator").css("left","auto"); RED.view.resize();
$("#sidebar-separator").css("right",($("#sidebar").width()+15)+"px");
if (sidebarSeparator.closing) { if (sidebarSeparator.closing) {
$("#sidebar").removeClass("closing"); $("#sidebar").removeClass("closing");
toggleSidebar(); toggleSidebar();
if ($("#sidebar").width() < 180) {
$("#sidebar").width(180);
$("#workspace").css("right",208);
$("#chart-zoom-controls").css("right",228);
}
} }
$("#sidebar-separator").css("left","auto");
$("#sidebar-separator").css("right",($("#sidebar").width()+13)+"px");
} }
}); });
var btnSidebar = $("#btn-sidebar");
function toggleSidebar() { function toggleSidebar() {
//if ($('#sidebar').tabs( "option", "active" ) === false) { //if ($('#sidebar').tabs( "option", "active" ) === false) {
// $('#sidebar').tabs( "option", "active",0); // $('#sidebar').tabs( "option", "active",0);
//} //}
var btnSidebar = $("#btn-sidebar");
btnSidebar.toggleClass("active"); btnSidebar.toggleClass("active");
if (!btnSidebar.hasClass("active")) { if (!btnSidebar.hasClass("active")) {

11
public/style.css
View File

@ -287,16 +287,17 @@ a.brand img {
right: 10px; top: 5px; bottom:10px; right: 10px; top: 5px; bottom:10px;
} }
#sidebar-separator { #sidebar-separator {
width: 10px; width: 15px;
background: url(grip.png) no-repeat 50% 50%;
position: absolute; position: absolute;
right: 320px; top: 5px; bottom:10px; right: 316px; top: 5px; bottom:10px;
cursor: col-resize; cursor: col-resize;
} }
.sidebar-closed > #sidebar { display: none; } .sidebar-closed > #sidebar { display: none; }
.sidebar-closed > #sidebar-separator { display: none; } .sidebar-closed > #sidebar-separator { right: 0px !important; }
.sidebar-closed > #workspace { right: 10px !important; } .sidebar-closed > #workspace { right: 15px !important; }
.sidebar-closed > #chart-zoom-controls { right: 30px !important; } .sidebar-closed > #chart-zoom-controls { right: 35px !important; }
/* ---------- end layout ---------- */ /* ---------- end layout ---------- */