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

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
Show Stats 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() { RED.tray = (function() {
var stack = []; var stack = [];
var editorStack = $("#editor-stack");
function resize() { function resize() {
@ -23,7 +24,8 @@ RED.tray = (function() {
function showTray(options) { function showTray(options) {
var el = $('<div class="editor-tray"></div>'); var el = $('<div class="editor-tray"></div>');
var header = $('<div class="editor-tray-header"></div>').appendTo(el); 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 footer = $('<div class="editor-tray-footer"></div>').appendTo(el);
var resizer = $('<div class="editor-tray-resize-handle"></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); // 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 = { var tray = {
tray: el, tray: el,
header: header, header: header,
@ -68,8 +70,12 @@ RED.tray = (function() {
el.width('auto'); el.width('auto');
}, },
drag: function(event,ui) { 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) { } else if (tray.options.resize) {
setTimeout(function() { setTimeout(function() {
tray.options.resize({width: -ui.position.left}); tray.options.resize({width: -ui.position.left});
@ -94,28 +100,42 @@ RED.tray = (function() {
$("#header-shade").show(); $("#header-shade").show();
$("#editor-shade").show(); $("#editor-shade").show();
RED.sidebar.config.disable(); 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) {
if (options.width > $("#editor-stack").position().left-8) { if (options.width > $("#editor-stack").position().left-8) {
options.width = $("#editor-stack").position().left-8; options.width = $("#editor-stack").position().left-8;
} }
el.width(options.width); el.width(options.width);
} else {
el.width(tray.preferredWidth);
} }
console.log("preferred width",tray.preferredWidth)
tray.width = el.width(); 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({ el.css({
right: -(el.width()+10)+"px", right: -(el.width()+10)+"px",
transition: "right 0.2s ease" transition: "right 0.2s ease"
}); });
$("#workspace").scrollLeft(0); $("#workspace").scrollLeft(0);
handleWindowResize();
var trayHeight = el.height()-header.outerHeight()-footer.outerHeight();
body.height(trayHeight-40);
setTimeout(function() { setTimeout(function() {
setTimeout(function() { setTimeout(function() {
if (!options.width) { if (!options.width) {
el.width(tray.preferredWidth); el.width(Math.min(tray.preferredWidth,$("#editor-stack").position().left-8));
} }
if (options.resize) { if (options.resize) {
options.resize({width:el.width()}); options.resize({width:el.width()});
@ -156,10 +176,14 @@ RED.tray = (function() {
var tray = stack[stack.length-1]; var tray = stack[stack.length-1];
var trayHeight = tray.tray.height()-tray.header.outerHeight()-tray.footer.outerHeight(); var trayHeight = tray.tray.height()-tray.header.outerHeight()-tray.footer.outerHeight();
tray.body.height(trayHeight-40); tray.body.height(trayHeight-40);
if (tray.width > $("#editor-stack").position().left-8) { 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.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) { if (tray.options.resize) {
tray.options.resize({width:tray.width}); tray.options.resize({width:tray.width});

15
editor/sass/editor.scss
View File

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

4
nodes/core/core/25-catch.html
View File

@ -22,8 +22,8 @@
<option value="target" data-i18n="catch.scope.selected"></options> <option value="target" data-i18n="catch.scope.selected"></options>
</select> </select>
</div> </div>
<div class="form-row node-input-target-row" style="display: none;min-height: 100px;"> <div class="form-row node-input-target-row" style="display: none;">
<div id="node-input-catch-target-container-div" style="position: relative; box-sizing: border-box; border-radius: 2px; height: 180px; border: 1px solid #ccc;overflow:hidden; "> <div id="node-input-catch-target-container-div" style="min-height: 100px;position: relative; box-sizing: border-box; border-radius: 2px; height: 180px; border: 1px solid #ccc;overflow:hidden; ">
<div style="box-sizing: border-box; line-height: 20px; font-size: 0.8em; border-bottom: 1px solid #ddd; height: 20px;"> <div style="box-sizing: border-box; line-height: 20px; font-size: 0.8em; border-bottom: 1px solid #ddd; height: 20px;">
<input type="checkbox" data-i18n="[title]catch.label.selectAll" id="node-input-target-node-checkbox-all" style="width: 30px; margin: 0 2px 1px 2px;"> <input type="checkbox" data-i18n="[title]catch.label.selectAll" id="node-input-target-node-checkbox-all" style="width: 30px; margin: 0 2px 1px 2px;">
<div style="display: inline-block;"><a id="node-input-target-sort-label" href="#" data-i18n="[title]catch.label.sortByLabel"><span data-i18n="catch.label.node"></span> <i class="node-input-catch-sort-label-a fa fa-caret-down"></i><i class="node-input-catch-sort-label-d fa fa-caret-up"></i></a></div> <div style="display: inline-block;"><a id="node-input-target-sort-label" href="#" data-i18n="[title]catch.label.sortByLabel"><span data-i18n="catch.label.node"></span> <i class="node-input-catch-sort-label-a fa fa-caret-down"></i><i class="node-input-catch-sort-label-d fa fa-caret-up"></i></a></div>

4
nodes/core/core/25-status.html
View File

@ -22,8 +22,8 @@
<option value="target" data-i18n="status.scope.selected"></options> <option value="target" data-i18n="status.scope.selected"></options>
</select> </select>
</div> </div>
<div class="form-row node-input-target-row" style="display: none; min-height: 100px;"> <div class="form-row node-input-target-row" style="display: none;">
<div id="node-input-status-target-container-div" style="position: relative; box-sizing: border-box; border-radius: 2px; height: 180px; border: 1px solid #ccc;overflow:hidden; "> <div id="node-input-status-target-container-div" style=" min-height: 100px;position: relative; box-sizing: border-box; border-radius: 2px; height: 180px; border: 1px solid #ccc;overflow:hidden; ">
<div style="box-sizing: border-box; line-height: 20px; font-size: 0.8em; border-bottom: 1px solid #ddd; height: 20px;"> <div style="box-sizing: border-box; line-height: 20px; font-size: 0.8em; border-bottom: 1px solid #ddd; height: 20px;">
<input type="checkbox" data-i18n="[title]status.label.selectAll" id="node-input-target-node-checkbox-all" style="width: 30px; margin: 0 2px 1px 2px;"> <input type="checkbox" data-i18n="[title]status.label.selectAll" id="node-input-target-node-checkbox-all" style="width: 30px; margin: 0 2px 1px 2px;">
<div style="display: inline-block;"><a id="node-input-target-sort-label" href="#" data-i18n="[title]status.label.sortByLabel"><span data-i18n="status.label.node"></span> <i class="node-input-status-sort-label-a fa fa-caret-down"></i><i class="node-input-status-sort-label-d fa fa-caret-up"></i></a></div> <div style="display: inline-block;"><a id="node-input-target-sort-label" href="#" data-i18n="[title]status.label.sortByLabel"><span data-i18n="status.label.node"></span> <i class="node-input-status-sort-label-a fa fa-caret-down"></i><i class="node-input-status-sort-label-d fa fa-caret-up"></i></a></div>

2
nodes/core/core/80-function.html
View File

@ -25,7 +25,7 @@
<input type="hidden" id="node-input-noerr"> <input type="hidden" id="node-input-noerr">
</div> </div>
<div class="form-row node-text-editor-row"> <div class="form-row node-text-editor-row">
<div style="height: 250px;" class="node-text-editor" id="node-input-func-editor" ></div> <div style="height: 250px; min-height:150px;" class="node-text-editor" id="node-input-func-editor" ></div>
</div> </div>
<div class="form-row"> <div class="form-row">
<label for="node-input-outputs"><i class="fa fa-random"></i> <span data-i18n="function.label.outputs"></span></label> <label for="node-input-outputs"><i class="fa fa-random"></i> <span data-i18n="function.label.outputs"></span></label>

2
nodes/core/core/80-template.html
View File

@ -40,7 +40,7 @@
</div> </div>
</div> </div>
<div class="form-row node-text-editor-row"> <div class="form-row node-text-editor-row">
<div style="height: 250px;" class="node-text-editor" id="node-input-template-editor" ></div> <div style="height: 250px; min-height:150px;" class="node-text-editor" id="node-input-template-editor" ></div>
</div> </div>
<div class="form-row"> <div class="form-row">
<label for="node-input-syntax"><i class="fa fa-code"></i> <span data-i18n="template.label.syntax"></span></label> <label for="node-input-syntax"><i class="fa fa-code"></i> <span data-i18n="template.label.syntax"></span></label>

2
nodes/core/core/90-comment.html
View File

@ -24,7 +24,7 @@
<input type="hidden" id="node-input-info" autofocus="autofocus"> <input type="hidden" id="node-input-info" autofocus="autofocus">
</div> </div>
<div class="form-row node-text-editor-row"> <div class="form-row node-text-editor-row">
<div style="height: 250px;" class="node-text-editor" id="node-input-info-editor"></div> <div style="height: 250px; min-height:150px;" class="node-text-editor" id="node-input-info-editor"></div>
</div> </div>
<div class="form-tips" data-i18n="[html]comment.tip"></div> <div class="form-tips" data-i18n="[html]comment.tip"></div>
</script> </script>

2
nodes/core/logic/10-switch.html
View File

@ -23,7 +23,7 @@
<span data-i18n="switch.label.property"></span> <input type="text" id="node-input-property" style="width: 300px;"/> <span data-i18n="switch.label.property"></span> <input type="text" id="node-input-property" style="width: 300px;"/>
</div> </div>
<div class="form-row node-input-rule-container-row" style="margin-bottom: 0px;"> <div class="form-row node-input-rule-container-row" style="margin-bottom: 0px;">
<div id="node-input-rule-container-div" style="box-sizing: border-box; border-radius: 5px; height: 310px; padding: 5px; border: 1px solid #ccc; overflow-y:scroll;"> <div id="node-input-rule-container-div" style="min-height: 200px; box-sizing: border-box; border-radius: 5px; height: 310px; padding: 5px; border: 1px solid #ccc; overflow-y:scroll;">
<ol id="node-input-rule-container" style=" list-style-type:none; margin: 0;"></ol> <ol id="node-input-rule-container" style=" list-style-type:none; margin: 0;"></ol>
</div> </div>
</div> </div>

2
nodes/core/logic/15-change.html
View File

@ -23,7 +23,7 @@
<label><i class="fa fa-list"></i> <span data-i18n="change.label.rules"></span></label> <label><i class="fa fa-list"></i> <span data-i18n="change.label.rules"></span></label>
</div> </div>
<div class="form-row node-input-rule-container-row" style="margin-bottom:0px;"> <div class="form-row node-input-rule-container-row" style="margin-bottom:0px;">
<div id="node-input-rule-container-div" style="box-sizing:border-box; border-radius:5px; height:300px; padding:5px; border:1px solid #ccc; overflow-y:scroll;"> <div id="node-input-rule-container-div" style="min-height: 200px; box-sizing:border-box; border-radius:5px; height:300px; padding:5px; border:1px solid #ccc; overflow-y:scroll;">
<ol id="node-input-rule-container" style=" list-style-type:none; margin:0;"></ol> <ol id="node-input-rule-container" style=" list-style-type:none; margin:0;"></ol>
</div> </div>
</div> </div>