frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2025-03-01 10:36:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve edit tray size handling for small screens

Browse Source
This commit is contained in:
Nick O'Leary
2016-05-06 17:19:32 +01:00
parent 74b7500181
commit ea41a0e842
9 changed files with 52 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
editor/js/ui/tray.js
View File

@@ -16,6 +16,7 @@
RED.tray = (function() {
var stack = [];
var editorStack = $("#editor-stack");
function resize() {
@@ -23,7 +24,8 @@ RED.tray = (function() {
function showTray(options) {
var el = $('<div class="editor-tray"></div>');
var header = $('<div class="editor-tray-header"></div>').appendTo(el);
var body = $('<div class="editor-tray-body"></div>').appendTo(el);
var bodyWrapper = $('<div class="editor-tray-body-wrapper"></div>').appendTo(el);
var body = $('<div class="editor-tray-body"></div>').appendTo(bodyWrapper);
var footer = $('<div class="editor-tray-footer"></div>').appendTo(el);
var resizer = $('<div class="editor-tray-resize-handle"></div>').appendTo(el);
// var growButton = $('<a class="editor-tray-resize-button" style="cursor: w-resize;"><i class="fa fa-angle-left"></i></a>').appendTo(resizer);
@@ -51,7 +53,7 @@ RED.tray = (function() {
}
}
}
el.appendTo("#editor-stack");
el.appendTo(editorStack);
var tray = {
tray: el,
header: header,
@@ -68,8 +70,12 @@ RED.tray = (function() {
el.width('auto');
},
drag: function(event,ui) {
if (ui.position.left > -tray.preferredWidth-1) {
ui.position.left = -tray.preferredWidth-1;
var absolutePosition = editorStack.position().left+ui.position.left
if (absolutePosition < 7) {
ui.position.left += 7-absolutePosition;
} else if (ui.position.left > -tray.preferredWidth-1) {
ui.position.left = -Math.min(editorStack.position().left-7,tray.preferredWidth-1);
} else if (tray.options.resize) {
setTimeout(function() {
tray.options.resize({width: -ui.position.left});
@@ -94,28 +100,42 @@ RED.tray = (function() {
$("#header-shade").show();
$("#editor-shade").show();
RED.sidebar.config.disable();
console.log("init width",el.width())
tray.preferredWidth = Math.max(el.width(),500);
body.css({"minWidth":tray.preferredWidth-40});
tray.preferredWidth = el.width();
if (options.width) {
if (options.width > $("#editor-stack").position().left-8) {
options.width = $("#editor-stack").position().left-8;
}
el.width(options.width);
} else {
el.width(tray.preferredWidth);
}
console.log("preferred width",tray.preferredWidth)
tray.width = el.width();
if (tray.width > $("#editor-stack").position().left-8) {
tray.width = Math.max(0/*tray.preferredWidth*/,$("#editor-stack").position().left-8);
console.log("setting width on create",tray.width);
el.width(tray.width);
}
// tray.body.parent().width(Math.min($("#editor-stack").position().left-8,tray.width));
el.css({
right: -(el.width()+10)+"px",
transition: "right 0.2s ease"
});
$("#workspace").scrollLeft(0);
var trayHeight = el.height()-header.outerHeight()-footer.outerHeight();
body.height(trayHeight-40);
handleWindowResize();
setTimeout(function() {
setTimeout(function() {
if (!options.width) {
el.width(tray.preferredWidth);
el.width(Math.min(tray.preferredWidth,$("#editor-stack").position().left-8));
}
if (options.resize) {
options.resize({width:el.width()});
@@ -156,10 +176,14 @@ RED.tray = (function() {
var tray = stack[stack.length-1];
var trayHeight = tray.tray.height()-tray.header.outerHeight()-tray.footer.outerHeight();
tray.body.height(trayHeight-40);
if (tray.width > $("#editor-stack").position().left-8) {
tray.width = Math.max(tray.preferredWidth,$("#editor-stack").position().left-8);
tray.width = $("#editor-stack").position().left-8;
tray.tray.width(tray.width);
// tray.body.parent().width(tray.width);
} else if (tray.width < tray.preferredWidth) {
tray.width = Math.min($("#editor-stack").position().left-8,tray.preferredWidth);
tray.tray.width(tray.width);
// tray.body.parent().width(tray.width);
}
if (tray.options.resize) {
tray.options.resize({width:tray.width});

15
editor/sass/editor.scss
View File

@@ -28,7 +28,7 @@
position:absolute;
margin: 0;
top: 0;
min-width: 500px;
//min-width: 500px;
width: auto;
right: -1000px;
bottom: 0;
@@ -40,12 +40,13 @@
.editor-tray.open {
right: 0;
}
.editor-tray-body {
width: auto;
padding: 20px;
min-width: 500px;
.editor-tray-body-wrapper {
width: 100%;
box-sizing: border-box;
overflow-y: scroll;
overflow: auto;
}
.editor-tray-body {
margin: 20px;
}
.editor-tray-header {
@include disable-selection;
@@ -68,7 +69,7 @@
.editor-tray-toolbar {
text-align: right;
padding: 8px;
padding: 6px;
button {
@include workspace-button;