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

Make all dialogs handle smaller height screens better 

Covers library, clipboard and project dialogs
This commit is contained in:
Nick O'Leary 2020-05-21 15:14:39 +01:00
parent 38872049fd
commit 50aaef5103
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
5 changed files with 63 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js vendored
View File

@ -184,7 +184,7 @@ RED.clipboard = (function() {
'</div>'+
'<div id="red-ui-clipboard-dialog-export-tabs-content" class="red-ui-clipboard-dialog-tabs-content">'+
'<div id="red-ui-clipboard-dialog-export-tab-clipboard" class="red-ui-clipboard-dialog-tab-clipboard">'+
'<div class="form-row">'+
'<div class="form-row" style="height:calc(100% - 30px)">'+
'<textarea readonly id="red-ui-clipboard-dialog-export-text"></textarea>'+
'</div>'+
'<div class="form-row" style="text-align: right;">'+
@ -216,7 +216,7 @@ RED.clipboard = (function() {
' <a class="red-ui-button" id="red-ui-clipboard-dialog-import-file-upload-btn"><i class="fa fa-upload"></i> <span data-i18n="clipboard.selectFile"></span></a>'+
'<input type="file" id="red-ui-clipboard-dialog-import-file-upload" accept=".json" style="display:none">'+
'</div>'+
'<div class="form-row">'+
'<div class="form-row" style="height:calc(100% - 47px)">'+
'<textarea id="red-ui-clipboard-dialog-import-text"></textarea>'+
'</div>'+
'</div>'+
@ -474,6 +474,12 @@ RED.clipboard = (function() {
},100)
}
var dialogHeight = 400;
var winHeight = $(window).height();
if (winHeight < 600) {
dialogHeight = 400 - (600 - winHeight);
}
$(".red-ui-clipboard-dialog-box").height(dialogHeight);
dialog.dialog("option","title",RED._("clipboard.importNodes")).dialog("open");
popover = RED.popover.create({
@ -639,6 +645,14 @@ RED.clipboard = (function() {
$("#red-ui-clipboard-dialog-export-fmt-mini").trigger("click");
}
tabs.activateTab("red-ui-clipboard-dialog-export-tab-"+mode);
var dialogHeight = 400;
var winHeight = $(window).height();
if (winHeight < 600) {
dialogHeight = 400 - (600 - winHeight);
}
$(".red-ui-clipboard-dialog-box").height(dialogHeight);
dialog.dialog("option","title",RED._("clipboard.exportNodes")).dialog( "open" );
$("#red-ui-clipboard-dialog-export-text").trigger("focus");

20
packages/node_modules/@node-red/editor-client/src/js/ui/library.js vendored
View File

@ -22,7 +22,7 @@ RED.library = (function() {
var _libraryLookup = '<div id="red-ui-library-dialog-load" class="hide">'+
'<form class="form-horizontal">'+
'<div style="height: 400px; position:relative; ">'+
'<div class="red-ui-library-dialog-box" style="height: 400px; position:relative; ">'+
'<div id="red-ui-library-dialog-load-panes">'+
'<div class="red-ui-panel" id="red-ui-library-dialog-load-browser"></div>'+
'<div class="red-ui-panel">'+
@ -41,7 +41,7 @@ RED.library = (function() {
var _librarySave = '<div id="red-ui-library-dialog-save" class="hide">'+
'<form class="form-horizontal">'+
'<div style="height: 400px; position:relative; ">'+
'<div class="red-ui-library-dialog-box" style="height: 400px; position:relative; ">'+
'<div id="red-ui-library-dialog-save-browser"></div>'+
'<div class="form-row">'+
'<label data-i18n="clipboard.export.exportAs"></label><input id="red-ui-library-dialog-save-filename" type="text">'+
@ -254,6 +254,13 @@ RED.library = (function() {
libraryEditor.renderer.$cursorLayer.element.style.opacity=0;
libraryEditor.$blockScrolling = Infinity;
var dialogHeight = 400;
var winHeight = $(window).height();
if (winHeight < 570) {
dialogHeight = 400 - (570 - winHeight);
}
$("#red-ui-library-dialog-load .red-ui-library-dialog-box").height(dialogHeight);
$( "#red-ui-library-dialog-load" ).dialog("option","title",RED._("library.typeLibrary", {type:options.type})).dialog( "open" );
}
},
@ -293,6 +300,15 @@ RED.library = (function() {
saveLibraryBrowser.select(listing[0].children[0]);
},200);
});
var dialogHeight = 400;
var winHeight = $(window).height();
if (winHeight < 570) {
dialogHeight = 400 - (570 - winHeight);
}
$("#red-ui-library-dialog-save .red-ui-library-dialog-box").height(dialogHeight);
$( "#red-ui-library-dialog-save" ).dialog( "open" );
}
}

17
packages/node_modules/@node-red/editor-client/src/js/ui/projects/projects.js vendored
View File

@ -1673,16 +1673,27 @@ RED.projects = (function() {
if (typeof buttons === 'function') {
buttons = buttons(options||{});
}
dialog.dialog('option','buttons',buttons);
dialogBody.append(container);
var dialogHeight = 590;
var winHeight = $(window).height();
if (winHeight < 750) {
dialogHeight = 590 - (750 - winHeight);
}
$(".red-ui-projects-dialog-box").height(dialogHeight);
$(".red-ui-projects-dialog-project-list-inner-container").height(Math.max(500,dialogHeight) - 180);
dialog.dialog('option','title',screen.title||"");
dialog.dialog("open");
dialog.dialog({position: { 'my': 'center top', 'at': 'center top+20', 'of': window }});
}
function createProjectList(options) {
options = options||{};
var height = options.height || "300px";
var height = options.height || "200px";
var container = $('<div></div>',{class:"red-ui-projects-dialog-project-list-container" });
var filterTerm = "";
@ -2227,7 +2238,7 @@ RED.projects = (function() {
}
function init() {
dialog = $('<div id="red-ui-projects-dialog" class="hide red-ui-projects-edit-form"><form class="form-horizontal"></form><div class="red-ui-component-spinner hide"><img src="red/images/spin.svg"/></div></div>')
dialog = $('<div id="red-ui-projects-dialog" class="hide red-ui-projects-edit-form"><div class="red-ui-projects-dialog-box"><form class="form-horizontal"></form><div class="red-ui-component-spinner hide"><img src="red/images/spin.svg"/></div></div></div>')
.appendTo("#red-ui-editor")
.dialog({
modal: true,

3
packages/node_modules/@node-red/editor-client/src/sass/library.scss vendored
View File

@ -37,7 +37,7 @@
border-radius: 4px;
font-family: $monospace-font !important;
font-size: 13px !important;
height: 300px;
height: 100%;
line-height: 1.3em;
padding: 6px 10px;
background: $clipboard-textarea-background;
@ -62,6 +62,7 @@
background: $form-input-background;
&>div {
height: 100%;
box-sizing: border-box;
}
}
.red-ui-clipboard-dialog-box {

15
packages/node_modules/@node-red/editor-client/src/sass/projects.scss vendored
View File

@ -18,7 +18,12 @@
.red-ui-editableList-container {
padding: 0px;
}
padding: 0;
.red-ui-projects-dialog-box {
box-sizing: border-box;
overflow-y: auto;
padding: 25px 25px 10px 25px;
}
}
#red-ui-project-settings-tab-settings {
overflow-y: scroll;
@ -99,6 +104,7 @@
.red-ui-projects-dialog-screen-create {
min-height: 500px;
button.red-ui-projects-dialog-screen-create-type {
position: relative;
height: auto;
padding: 10px;
}
@ -169,9 +175,14 @@
.red-ui-projects-dialog-project-list-container {
border: 1px solid $secondary-border-color;
border-radius: 2px;
display: flex;
flex-direction: column;
.red-ui-search-container {
flex-grow: 0;
}
}
.red-ui-projects-dialog-project-list-inner-container {
height: 300px;
flex-grow: 1 ;
overflow-y: scroll;
position:relative;
.red-ui-editableList-border {