mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
Improve edit tray size handling for small screens
This commit is contained in:
parent
74b7500181
commit
ea41a0e842
@ -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});
|
||||
|
@ -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;
|
||||
|
@ -22,8 +22,8 @@
|
||||
<option value="target" data-i18n="catch.scope.selected"></options>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-row node-input-target-row" style="display: none;min-height: 100px;">
|
||||
<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 class="form-row node-input-target-row" style="display: none;">
|
||||
<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;">
|
||||
<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>
|
||||
|
@ -22,8 +22,8 @@
|
||||
<option value="target" data-i18n="status.scope.selected"></options>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-row node-input-target-row" style="display: none; min-height: 100px;">
|
||||
<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 class="form-row node-input-target-row" style="display: none;">
|
||||
<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;">
|
||||
<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>
|
||||
|
@ -25,7 +25,7 @@
|
||||
<input type="hidden" id="node-input-noerr">
|
||||
</div>
|
||||
<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 class="form-row">
|
||||
<label for="node-input-outputs"><i class="fa fa-random"></i> <span data-i18n="function.label.outputs"></span></label>
|
||||
|
@ -40,7 +40,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<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 class="form-row">
|
||||
<label for="node-input-syntax"><i class="fa fa-code"></i> <span data-i18n="template.label.syntax"></span></label>
|
||||
|
@ -24,7 +24,7 @@
|
||||
<input type="hidden" id="node-input-info" autofocus="autofocus">
|
||||
</div>
|
||||
<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 class="form-tips" data-i18n="[html]comment.tip"></div>
|
||||
</script>
|
||||
|
@ -23,7 +23,7 @@
|
||||
<span data-i18n="switch.label.property"></span> <input type="text" id="node-input-property" style="width: 300px;"/>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -23,7 +23,7 @@
|
||||
<label><i class="fa fa-list"></i> <span data-i18n="change.label.rules"></span></label>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user