Make SOL layout responsive to the window changes
The current version of a SOL window layout have several
downsides:
-terminal content doesn't resize with the window changes
-when opened in a separate window terminal content doesn't
use full viewport space
-when opened in a separate window terminal viewport takes
only a small part of the window
Screenshots with the problems descriptions are documented in
the github issue:
https://github.com/openbmc/phosphor-webui/issues/125
This commit adds responsiveness to the SOL layout.
The main SOL tab:
-terminal content automatically resizes with the viewport changes
The separate SOL window:
-XTERM always use full terminal viewport space
-terminal viewport width always equals window space width
-terminal viewport automatically resizes on window size changes
-terminal content automatically resizes with the viewport changes
As SOL UI is resposive now, this commit also removes fixed size
configurations for the SOL terminal via JSON 'customConsoleDisplaySize'
variable. It is worth noting that in reality it wasn't really
used anyway.
Signed-off-by: Konstantin Aladyshev <aladyshev22@gmail.com>
Change-Id: Ia5d929e9a309281366a9d3119ac326ebd73c73f0
diff --git a/app/common/directives/serial-console.html b/app/common/directives/serial-console.html
index 68e8304..98206ab 100644
--- a/app/common/directives/serial-console.html
+++ b/app/common/directives/serial-console.html
@@ -1,8 +1,8 @@
<div class="serial-lan__wrapper">
<div id="terminal"></div>
- <div class="serial-lan__actions float-right">
- <button class="btn btn-tertiary" ng-click="openTerminalWindow()" ng-show="showTabBtn === true">
- <icon file="icon-launch.svg"></icon>Open in new tab
- </button>
- </div>
-</div>
\ No newline at end of file
+</div>
+<div class="serial-lan__actions float-right">
+ <button class="btn btn-tertiary" ng-click="openTerminalWindow()" ng-show="showTabBtn === true">
+ <icon file="icon-launch.svg"></icon>Open in new tab
+ </button>
+</div>
diff --git a/app/common/directives/serial-console.js b/app/common/directives/serial-console.js
index 8d322f1..5cfbbb3 100644
--- a/app/common/directives/serial-console.js
+++ b/app/common/directives/serial-console.js
@@ -148,22 +148,6 @@
var termContainer;
term.open(terminal);
- customConsole = configJSON.customConsoleDisplaySize;
-
- if (customConsole != null) {
- charSize = measureChar(term);
- termContainer = document.getElementById('term-container');
- if (termContainer != null) {
- if (customConsole.width) {
- termContainer.style.width =
- (charSize.width * customConsole.width + border) + 'px';
- }
- if (customConsole.height) {
- terminal.style.height =
- (charSize.height * customConsole.height + border) + 'px';
- }
- }
- }
term.fit();
if (configJSON.customKeyEnable == true) {
term.attachCustomKeyEventHandler(customKeyHandlers);
@@ -191,11 +175,26 @@
} catch (error) {
console.log(JSON.stringify(error));
}
+
+ $window.onresize = function() {
+ termContainer = document.getElementById('term-container');
+ termContainer.style.width = window.innerWidth;
+ termContainer.style.height = window.innerHeight;
+ term.fit();
+ };
+
$scope.openTerminalWindow = function() {
- $window.open(
+ var sol_window = $window.open(
'#/server-control/remote-console-window',
'Remote Console Window',
'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=yes,width=600,height=550');
+
+ sol_window.onresize = function() {
+ termContainer = document.getElementById('term-container');
+ termContainer.style.width = sol_window.innerWidth;
+ termContainer.style.height = sol_window.innerHeight;
+ term.fit();
+ };
};
}
]
diff --git a/app/server-control/styles/remote-console.scss b/app/server-control/styles/remote-console.scss
index 1a5f6ae..e265bc2 100644
--- a/app/server-control/styles/remote-console.scss
+++ b/app/server-control/styles/remote-console.scss
@@ -3,6 +3,7 @@
.btn-export {
margin: 1.8em 0 1.8em 2em;
}
+ height: 100%;
}
.serial-lan__copy {
@@ -18,13 +19,15 @@
.terminal-container {
position: relative;
width: 100%;
+ height: 25em;
}
.window-terminal-container {
position: relative;
- max-width: 70em;
+ max-width: 100%;
+ height: 80vh;
}
#terminal{
- height:25em;
+ height: 100%;
}