diff --git a/bower.json b/bower.json
index 601a8df..f33f46e 100644
--- a/bower.json
+++ b/bower.json
@@ -29,17 +29,10 @@
],
"dependencies": {
"angular": ">=1.3.8 <1.6",
- "term.js": "#0.0.7",
+ "xterm.js": "#2.8.0",
"font-awesome": "*"
},
"devDependencies": {
"patternfly": ">=1.2.1"
- },
- "overrides": {
- "term.js": {
- "main": [
- "src/term.js"
- ]
- }
}
}
diff --git a/container-terminal.css b/container-terminal.css
index dcec95b..2489036 100644
--- a/container-terminal.css
+++ b/container-terminal.css
@@ -1,6 +1,6 @@
kubernetes-container-terminal {
position: relative;
- display: block;
+ display: inline-block;
}
kubernetes-container-terminal .terminal {
@@ -9,11 +9,9 @@ kubernetes-container-terminal .terminal {
color: #F0F0F0;
text-align: left;
outline: medium none;
- background-color: black;
- border: 1px solid black;
- padding: 10px;
- display: inline-block; /* size DIV to contents */
+ border: 3px solid black;
line-height: 1em;
+ display: inline-block;
}
@media (min-width: 568px) {
@@ -28,8 +26,8 @@ kubernetes-container-terminal .terminal-cursor {
}
kubernetes-container-terminal .terminal-wrapper {
- display: inline-block;
vertical-align: top;
+ display: inline-block;
}
kubernetes-container-terminal .terminal-actions {
@@ -41,6 +39,34 @@ kubernetes-container-terminal .terminal-actions {
z-index: 1;
}
+kubernetes-container-terminal .terminal .xterm-viewport {
+ overflow-y: auto;
+}
+
+kubernetes-container-terminal .terminal .xterm-viewport::-webkit-scrollbar {
+ height: 10px;
+ overflow: visible;
+ width: 15px;
+}
+
+kubernetes-container-terminal .terminal .xterm-viewport::-webkit-scrollbar-corner {
+ background: transparent;
+}
+
+kubernetes-container-terminal .terminal .xterm-viewport::-webkit-scrollbar-thumb {
+ background-color: rgba(255,255,255,.25);
+ box-shadow: inset 1px 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(255,255,255,.07);
+}
+
+kubernetes-container-terminal .terminal .xterm-viewport::-webkit-scrollbar-thumb:active,
+kubernetes-container-terminal .terminal .xterm-viewport::-webkit-scrollbar-thumb:hover {
+ background-color: rgba(255,255,255,.35);
+}
+
+kubernetes-container-terminal .terminal .xterm-viewport::-webkit-scrollbar-track {
+ background: transparent;
+}
+
/* https://github.com/patternfly/patternfly/pull/135 */
.spinner-white {
border-bottom: 4px solid rgba(255, 255, 255, 0.25) !important;
diff --git a/container-terminal.js b/container-terminal.js
index 7f35909..b0e3d16 100644
--- a/container-terminal.js
+++ b/container-terminal.js
@@ -108,7 +108,10 @@
var term = new Terminal({
cols: scope.cols || defaultCols,
rows: scope.rows || defaultRows,
- screenKeys: scope.screenKeys || true
+ cursorBlink: true,
+ screenKeys: scope.screenKeys || true,
+ applicationCursor: true, // Needed for proper scrollback behavior in applications like vi
+ mouseEvents: true // Needed for proper scrollback behavior in applications like vi
});
outer.empty();
@@ -121,10 +124,24 @@
ws.send("0" + utf8_to_b64(data));
});
+ var sizeViewport = function () {
+ var cols = scope.cols || defaultCols;
+ if (!term.charMeasure.width) {
+ return;
+ }
+ var xtermViewport = document.getElementsByClassName("xterm-viewport")[0];
+ // character width * number of columns + space for a scrollbar
+ // TODO determine the max width of a scrollbar across browsers
+ xtermViewport.style.width = (term.charMeasure.width * cols + 17) + "px";
+ };
+
+ term.charMeasure.on('charsizechanged', sizeViewport);
+
var sizeTerminal = function() {
var cols = scope.cols || defaultCols;
var rows = scope.rows || defaultRows;
term.resize(cols, rows);
+ sizeViewport();
if (ws && ws.readyState === 1) {
ws.send("4" + window.btoa('{"Width":' + cols + ',"Height":' + rows + '}'));
}
diff --git a/dist/container-terminal.css b/dist/container-terminal.css
index dcec95b..2489036 100644
--- a/dist/container-terminal.css
+++ b/dist/container-terminal.css
@@ -1,6 +1,6 @@
kubernetes-container-terminal {
position: relative;
- display: block;
+ display: inline-block;
}
kubernetes-container-terminal .terminal {
@@ -9,11 +9,9 @@ kubernetes-container-terminal .terminal {
color: #F0F0F0;
text-align: left;
outline: medium none;
- background-color: black;
- border: 1px solid black;
- padding: 10px;
- display: inline-block; /* size DIV to contents */
+ border: 3px solid black;
line-height: 1em;
+ display: inline-block;
}
@media (min-width: 568px) {
@@ -28,8 +26,8 @@ kubernetes-container-terminal .terminal-cursor {
}
kubernetes-container-terminal .terminal-wrapper {
- display: inline-block;
vertical-align: top;
+ display: inline-block;
}
kubernetes-container-terminal .terminal-actions {
@@ -41,6 +39,34 @@ kubernetes-container-terminal .terminal-actions {
z-index: 1;
}
+kubernetes-container-terminal .terminal .xterm-viewport {
+ overflow-y: auto;
+}
+
+kubernetes-container-terminal .terminal .xterm-viewport::-webkit-scrollbar {
+ height: 10px;
+ overflow: visible;
+ width: 15px;
+}
+
+kubernetes-container-terminal .terminal .xterm-viewport::-webkit-scrollbar-corner {
+ background: transparent;
+}
+
+kubernetes-container-terminal .terminal .xterm-viewport::-webkit-scrollbar-thumb {
+ background-color: rgba(255,255,255,.25);
+ box-shadow: inset 1px 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(255,255,255,.07);
+}
+
+kubernetes-container-terminal .terminal .xterm-viewport::-webkit-scrollbar-thumb:active,
+kubernetes-container-terminal .terminal .xterm-viewport::-webkit-scrollbar-thumb:hover {
+ background-color: rgba(255,255,255,.35);
+}
+
+kubernetes-container-terminal .terminal .xterm-viewport::-webkit-scrollbar-track {
+ background: transparent;
+}
+
/* https://github.com/patternfly/patternfly/pull/135 */
.spinner-white {
border-bottom: 4px solid rgba(255, 255, 255, 0.25) !important;
diff --git a/dist/container-terminal.js b/dist/container-terminal.js
index 7f35909..b0e3d16 100644
--- a/dist/container-terminal.js
+++ b/dist/container-terminal.js
@@ -108,7 +108,10 @@
var term = new Terminal({
cols: scope.cols || defaultCols,
rows: scope.rows || defaultRows,
- screenKeys: scope.screenKeys || true
+ cursorBlink: true,
+ screenKeys: scope.screenKeys || true,
+ applicationCursor: true, // Needed for proper scrollback behavior in applications like vi
+ mouseEvents: true // Needed for proper scrollback behavior in applications like vi
});
outer.empty();
@@ -121,10 +124,24 @@
ws.send("0" + utf8_to_b64(data));
});
+ var sizeViewport = function () {
+ var cols = scope.cols || defaultCols;
+ if (!term.charMeasure.width) {
+ return;
+ }
+ var xtermViewport = document.getElementsByClassName("xterm-viewport")[0];
+ // character width * number of columns + space for a scrollbar
+ // TODO determine the max width of a scrollbar across browsers
+ xtermViewport.style.width = (term.charMeasure.width * cols + 17) + "px";
+ };
+
+ term.charMeasure.on('charsizechanged', sizeViewport);
+
var sizeTerminal = function() {
var cols = scope.cols || defaultCols;
var rows = scope.rows || defaultRows;
term.resize(cols, rows);
+ sizeViewport();
if (ws && ws.readyState === 1) {
ws.send("4" + window.btoa('{"Width":' + cols + ',"Height":' + rows + '}'));
}
diff --git a/index.html b/index.html
index 3e79191..79d4bd6 100644
--- a/index.html
+++ b/index.html
@@ -15,9 +15,10 @@
+
-
+