From c11a10144ebf9087273dc520cdc3389a98077359 Mon Sep 17 00:00:00 2001
From: Eugene Pankov <john.pankov@gmail.com>
Date: Tue, 31 Dec 2019 13:27:34 +0100
Subject: [PATCH] ssh: stow away the ports button (fixes #1932)

---
 .../src/components/sshTab.component.pug       | 13 ++++--
 .../src/components/sshTab.component.scss      | 43 +++++++++++++++++--
 2 files changed, 50 insertions(+), 6 deletions(-)

diff --git a/terminus-ssh/src/components/sshTab.component.pug b/terminus-ssh/src/components/sshTab.component.pug
index f03fee33..e4cfa3c6 100644
--- a/terminus-ssh/src/components/sshTab.component.pug
+++ b/terminus-ssh/src/components/sshTab.component.pug
@@ -1,3 +1,10 @@
-button.btn.btn-outline-secondary((click)='showPortForwarding()')
-    i.fas.fa-plug
-    span Ports
+.ssh-tab-toolbar
+    .btn.btn-outline-secondary.reveal-button
+        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
diff --git a/terminus-ssh/src/components/sshTab.component.scss b/terminus-ssh/src/components/sshTab.component.scss
index 1664b366..d4fab312 100644
--- a/terminus-ssh/src/components/sshTab.component.scss
+++ b/terminus-ssh/src/components/sshTab.component.scss
@@ -13,10 +13,47 @@
         margin: 15px;
     }
 
-    &> button {
+    .ssh-tab-toolbar {
         position: absolute;
-        bottom: 20px;
-        right: 40px;
+        top: 0;
+        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;
+            }
+        }
     }
 }