Merge pull request #35 from rhamilto/xterm-v3.1

Upgrade xterm.js to v3.1.0

Author: spadgett

bower.json

@@ -1,6 +1,6 @@
 {
     "name": "kubernetes-container-terminal",
-    "version": "2.1.1",
+    "version": "3.0.0",
     "description": "Provides a terminal for a kubernetes container in a pod.",
     "moduleType": [
         "globals"
@@ -29,7 +29,7 @@
     ],
     "dependencies": {
         "angular": ">=1.3.8 <1.6",
-        "xterm.js": "^2.9.0",
+        "xterm.js-next": "^3.1.0",
         "font-awesome": "*"
     },
     "devDependencies": {

container-terminal.css

@@ -1,46 +1,13 @@
-kubernetes-container-terminal {
-    position: relative;
-    display: inline-block;
-}
-
-kubernetes-container-terminal .terminal {
-    font-family: "Monospace Regular", "DejaVu Sans Mono", Menlo, Monaco, Consolas, monospace;
-    font-size: 10px;
-    color: #F0F0F0;
-    text-align: left;
-    outline: medium none;
-    border: 3px solid black;
-    line-height: 1em;
-    display: inline-block;
-}
-
-@media (min-width: 568px) {
-    kubernetes-container-terminal .terminal {
-        font-size: 12px;
-    }
-}
-
-kubernetes-container-terminal .terminal-cursor {
-    background: #f0f0f0;
-    color: #000;
-}
-
+kubernetes-container-terminal,
 kubernetes-container-terminal .terminal-wrapper {
-    vertical-align: top;
-    display: inline-block;
-}
-
-kubernetes-container-terminal .terminal-actions {
-    display: inline-block;
-    vertical-align: top;
-    position: absolute;
-    top: 10px;
-    right: 34px;
-    z-index: 1;
+  display: inline-block;
+  position: relative;
 }
 
-kubernetes-container-terminal .terminal .xterm-viewport {
-    overflow-y: auto;
+kubernetes-container-terminal .terminal {
+  display: inline-block;
+  outline: medium none;
+  padding: 2px 0 2px 2px;
 }
 
 kubernetes-container-terminal .terminal .xterm-viewport::-webkit-scrollbar {
@@ -54,23 +21,24 @@ kubernetes-container-terminal .terminal .xterm-viewport::-webkit-scrollbar-corne
 }
 
 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);
+  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);
+  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;
-    border-left: 4px solid rgba(255, 255, 255, 0.25) !important;
-    border-right: 4px solid rgba(255, 255, 255, 0.25) !important;
-    border-top: 4px solid rgba(255, 255, 255, 0.75) !important;
-}
+kubernetes-container-terminal .terminal-actions {
+  display: inline-block;
+  position: absolute;
+  right: 34px;
+  top: 10px;
+  vertical-align: top;
+  z-index: 10;
+}

container-terminal.js

@@ -92,7 +92,7 @@
                         var outer = angular.element("<div class='terminal-wrapper'>");
                         element.append(outer);
 
-                        var spinner = angular.element("<div class='spinner spinner-white hidden'>");
+                        var spinner = angular.element("<div class='spinner spinner-inverse hidden'>");
 
                         var button = angular.element("<button class='btn btn-default fa fa-refresh'>");
                         button.on("click", connect).attr("title", "Connect");
@@ -109,6 +109,12 @@
                             cols: scope.cols || defaultCols,
                             rows: scope.rows || defaultRows,
                             cursorBlink: true,
+                            fontFamily: "'Courier New', 'Courier', monospace",
+                            fontSize: 12,
+                            lineHeight: 1,
+                            theme: {
+                              foreground: "#f0f0f0"
+                            },
                             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

dist/container-terminal.css

@@ -1,46 +1,13 @@
-kubernetes-container-terminal {
-    position: relative;
-    display: inline-block;
-}
-
-kubernetes-container-terminal .terminal {
-    font-family: "Monospace Regular", "DejaVu Sans Mono", Menlo, Monaco, Consolas, monospace;
-    font-size: 10px;
-    color: #F0F0F0;
-    text-align: left;
-    outline: medium none;
-    border: 3px solid black;
-    line-height: 1em;
-    display: inline-block;
-}
-
-@media (min-width: 568px) {
-    kubernetes-container-terminal .terminal {
-        font-size: 12px;
-    }
-}
-
-kubernetes-container-terminal .terminal-cursor {
-    background: #f0f0f0;
-    color: #000;
-}
-
+kubernetes-container-terminal,
 kubernetes-container-terminal .terminal-wrapper {
-    vertical-align: top;
-    display: inline-block;
-}
-
-kubernetes-container-terminal .terminal-actions {
-    display: inline-block;
-    vertical-align: top;
-    position: absolute;
-    top: 10px;
-    right: 34px;
-    z-index: 1;
+  display: inline-block;
+  position: relative;
 }
 
-kubernetes-container-terminal .terminal .xterm-viewport {
-    overflow-y: auto;
+kubernetes-container-terminal .terminal {
+  display: inline-block;
+  outline: medium none;
+  padding: 2px 0 2px 2px;
 }
 
 kubernetes-container-terminal .terminal .xterm-viewport::-webkit-scrollbar {
@@ -54,23 +21,24 @@ kubernetes-container-terminal .terminal .xterm-viewport::-webkit-scrollbar-corne
 }
 
 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);
+  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);
+  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;
-    border-left: 4px solid rgba(255, 255, 255, 0.25) !important;
-    border-right: 4px solid rgba(255, 255, 255, 0.25) !important;
-    border-top: 4px solid rgba(255, 255, 255, 0.75) !important;
-}
+kubernetes-container-terminal .terminal-actions {
+  display: inline-block;
+  position: absolute;
+  right: 34px;
+  top: 10px;
+  vertical-align: top;
+  z-index: 10;
+}

dist/container-terminal.js

@@ -92,7 +92,7 @@
                         var outer = angular.element("<div class='terminal-wrapper'>");
                         element.append(outer);
 
-                        var spinner = angular.element("<div class='spinner spinner-white hidden'>");
+                        var spinner = angular.element("<div class='spinner spinner-inverse hidden'>");
 
                         var button = angular.element("<button class='btn btn-default fa fa-refresh'>");
                         button.on("click", connect).attr("title", "Connect");
@@ -109,6 +109,12 @@
                             cols: scope.cols || defaultCols,
                             rows: scope.rows || defaultRows,
                             cursorBlink: true,
+                            fontFamily: "'Courier New', 'Courier', monospace",
+                            fontSize: 12,
+                            lineHeight: 1,
+                            theme: {
+                              foreground: "#f0f0f0"
+                            },
                             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

index.html

@@ -15,10 +15,10 @@
     </style>
     <link rel="stylesheet" href="bower_components/patternfly/dist/css/patternfly.css">
     <link rel="stylesheet" href="bower_components/patternfly/dist/css/patternfly-additions.css">
-    <link rel="stylesheet" href="bower_components/xterm.js/dist/xterm.css">
+    <link rel="stylesheet" href="bower_components/xterm.js-next/xterm.css">
     <link rel="stylesheet" href="container-terminal.css">
     <script src="bower_components/angular/angular.js"></script>
-    <script src="bower_components/xterm.js/dist/xterm.js"></script>
+    <script src="bower_components/xterm.js-next/xterm.js"></script>
     <script src="container-terminal.js"></script>
 </head>
 <body ng-app="exampleApp">

package.json

@@ -2,7 +2,7 @@
   "name": "kubernetes-container-terminal",
   "description": "Provides a terminal for a kubernetes container in a pod.",
   "author": "Stef Walter",
-  "version": "2.1.1",
+  "version": "3.0.0",
   "license": "LGPL-2.1-or-later",
   "main": "dist/container-terminal.js",
   "devDependencies": {
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "angular": ">=1.3.8 <1.6",
-    "xterm": "^2.9.0",
+    "xterm.js-next": "^3.1.0",
     "font-awesome": "*"
   }
 }