ssh: stow away the ports button (fixes #1932)

terminus-ssh/src/components/sshTab.component.pug

@@ -1,3 +1,10 @@
-button.btn.btn-outline-secondary((click)='showPortForwarding()')
+.ssh-tab-toolbar
-    i.fas.fa-plug
+    .btn.btn-outline-secondary.reveal-button
-    span Ports
+        i.fas.fa-ellipsis-h
+    .toolbar
+        i.fas.fa-circle.text-success.mr-2(*ngIf='session.open')
+        i.fas.fa-circle.text-danger.mr-2(*ngIf='!session.open')
+        strong.mr-auto {{session.connection.user}}@{{session.connection.host}}:{{session.connection.port}}
+        button.btn.btn-secondary((click)='showPortForwarding()')
+            i.fas.fa-plug
+            span Ports

terminus-ssh/src/components/sshTab.component.scss

@@ -13,10 +13,47 @@
         margin: 15px;
     }
 
-    &> button {
+    .ssh-tab-toolbar {
         position: absolute;
-        bottom: 20px;
+        top: 0;
-        right: 40px;
+        left: 0;
+        right: 0;
         z-index: 4;
+        pointer-events: none;
+
+        .reveal-button {
+            position: absolute;
+            top: 10px;
+            right: 30px;
+            border-radius: 50%;
+            width: 35px;
+            padding: 0;
+            height: 35px;
+            line-height: 35px;
+            transition: 0.125s opacity;
+            opacity: .5;
+            pointer-events: all;
+        }
+
+        &:hover .reveal-button {
+            opacity: 0;
+        }
+
+        &:hover .toolbar {
+            opacity: 1;
+        }
+
+        .toolbar {
+            opacity: 0;
+            background: rgba(0, 0, 0, .75);
+            padding: 10px 20px;
+            transition: 0.25s opacity;
+            display: flex;
+            align-items: center;
+
+            &>* {
+                pointer-events: all;
+            }
+        }
     }
 }