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

Modify RED.panels to use flexbox position

This commit is contained in:
Nick O'Leary 2020-05-01 17:38:23 +01:00
parent 73dde4de51
commit aca61c0354
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
2 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/node_modules/@node-red/editor-client/src/js/ui/common/panels.js vendored
View File

@ -52,11 +52,11 @@ RED.panels = (function() {
var newSizes = [panelSizes[0]+delta,panelSizes[1]-delta]; var newSizes = [panelSizes[0]+delta,panelSizes[1]-delta];
if (vertical) { if (vertical) {
$(children[0]).height(newSizes[0]); $(children[0]).height(newSizes[0]);
$(children[1]).height(newSizes[1]); // $(children[1]).height(newSizes[1]);
ui.position.top -= delta; ui.position.top -= delta;
} else { } else {
$(children[0]).width(newSizes[0]); $(children[0]).width(newSizes[0]);
$(children[1]).width(newSizes[1]); // $(children[1]).width(newSizes[1]);
ui.position.left -= delta; ui.position.left -= delta;
} }
if (options.resize) { if (options.resize) {
@ -99,10 +99,10 @@ RED.panels = (function() {
panelSizes = [topPanelSize,bottomPanelSize]; panelSizes = [topPanelSize,bottomPanelSize];
if (vertical) { if (vertical) {
$(children[0]).outerHeight(panelSizes[0]); $(children[0]).outerHeight(panelSizes[0]);
$(children[1]).outerHeight(panelSizes[1]); // $(children[1]).outerHeight(panelSizes[1]);
} else { } else {
$(children[0]).outerWidth(panelSizes[0]); $(children[0]).outerWidth(panelSizes[0]);
$(children[1]).outerWidth(panelSizes[1]); // $(children[1]).outerWidth(panelSizes[1]);
} }
} }
if (options.resize) { if (options.resize) {

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

@ -22,9 +22,19 @@
// border: 1px solid red; // border: 1px solid red;
box-sizing: border-box; box-sizing: border-box;
} }
display: flex;
flex-direction: column;
>.red-ui-panel:first-child {
flex: 0 0 auto;
}
>.red-ui-panel:last-child {
flex: 1 1 auto;
}
} }
.red-ui-panels-separator { .red-ui-panels-separator {
flex: 0 0 auto;
border-top: 1px solid $secondary-border-color; border-top: 1px solid $secondary-border-color;
border-bottom: 1px solid $secondary-border-color; border-bottom: 1px solid $secondary-border-color;
height: 7px; height: 7px;
@ -41,6 +51,8 @@
.red-ui-panels.red-ui-panels-horizontal { .red-ui-panels.red-ui-panels-horizontal {
height: 100%; height: 100%;
flex-direction: row;
&>.red-ui-panel { &>.red-ui-panel {
vertical-align: top; vertical-align: top;
display: inline-block; display: inline-block;