Simple and stupid overlay notificatoin when the session is closed

5 years ago · 35d20eea67
parent 71ebda8e8f
commit 35d20eea67
3 changed files with 43 additions and 3 deletions
--- a/frontend/templates/tty-receiver.in.html
+++ b/frontend/templates/tty-receiver.in.html
@ -5,7 +5,12 @@
        <title>Terminal</title>
    </head>
    <body>
-        <div id="terminal"></div>
+        <div id="terminal">
+            <div id="center-notification">
+                <span>Session closed.</span>
+            </div>
+        </div>
+
        <div id="settings"></div>
        <script type="text/javascript">
            window.ttyInitialData = {
--- a/frontend/tty-receiver/main.css
+++ b/frontend/tty-receiver/main.css
@ -9,4 +9,32 @@ html, body {
    top: 0;
    width: 100%;
    height: 100%;
-}
+}
+
+#center-notification {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    background-color: white;
+    border-radius: 10px;
+    border: 2ppx;
+    width: 300px;
+    height: 150px;
+    text-align: center;
+    transform: translate(-50%, -50%);
+    visibility: visible;
+    opacity: 0.8;
+    z-index: 10; /* */
+
+    display:flex;
+    align-items: center; /* Vertical center alignment */
+    justify-content: center; /* Horizontal center alignment */
+
+    visibility: hidden;
+}
+
+#center-notification > span {
+    font-size: 28px;
+    color: darkslategray;
+}
+
--- a/frontend/tty-receiver/tty-receiver.ts
+++ b/frontend/tty-receiver/tty-receiver.ts
@ -26,7 +26,14 @@ class TTYReceiver {
        this.xterminal.open(container);

        connection.onclose =  (evt: CloseEvent) => {
-           // TODO: notify the user that the session was closed.
+
+           this.xterminal.blur();
+           this.xterminal.setOption('cursorBlink', false);
+           this.xterminal.clear();
+
+           // TODO: notify the user properly, not with this miserable hack
+           let msg: any = this.containerElement.querySelector('#center-notification');
+           msg.style.visibility = 'visible';
        }

        this.xterminal.focus();