Blocking transition screen when connecting/disconnecting

diff --git a/app/locale/locale-de-DE.js b/app/locale/locale-de-DE.js
index 906d906d692309b9494ef5cabddd17caf5c8c978..c9d75aa69a7d89d8ca1a5f8b0fdf1af5b152f32d 100644 (file)
--- a/app/locale/locale-de-DE.js
+++ b/app/locale/locale-de-DE.js
@@ -5,7 +5,7 @@ Language = {
     "Disconnect timeout": "Timeout beim trennen",
     "Password is required": "Passwort ist erforderlich",
     "Forcing clipping mode since scrollbars aren't supported by IE in fullscreen": "'Clipping-Modus' aktiviert, Scrollbalken in 'IE-Vollbildmodus' werden nicht unterstützt",
-    "Connecting": "Verbunden",
-    "Disconnecting": "Verbindung trennen",
+    "Connecting...": "Verbunden...",
+    "Disconnecting...": "Verbindung trennen...",
     "Disconnected": "Verbindung zum Server getrennt",
 };

diff --git a/app/locale/locale-el-GR.js b/app/locale/locale-el-GR.js
index 0010ea5d2e67680da28eb44a67982d4bcddf226e..a27fe5a1d7064a60381684eaae1fe39a58b2fa51 100644 (file)
--- a/app/locale/locale-el-GR.js
+++ b/app/locale/locale-el-GR.js
@@ -5,7 +5,7 @@ Language = {
        "Disconnect timeout": "Παρέλευση χρονικού ορίου αποσύνδεσης",
        "Password is required": "Απαιτείται ο κωδικός",
        "Forcing clipping mode since scrollbars aren't supported by IE in fullscreen": "Εφαρμογή λειτουργίας αποκοπής αφού δεν υποστηρίζονται οι λωρίδες κύλισης σε πλήρη οθόνη στον IE",
-       "Connecting": "Συνδέεται",
-       "Disconnecting": "Aποσυνδέεται",
+       "Connecting...": "Συνδέεται...",
+       "Disconnecting...": "Aποσυνδέεται...",
        "Disconnected": "Αποσυνδέθηκε",
 };

diff --git a/app/locale/locale-en-GB.js b/app/locale/locale-en-GB.js
index 7a18d361ddea1c47640dc29433b116a92de68a26..57ce697806e6d5209dd33535848f1beb4355e09a 100644 (file)
--- a/app/locale/locale-en-GB.js
+++ b/app/locale/locale-en-GB.js
@@ -5,7 +5,7 @@ Language = {
     "Disconnect timeout": "Disconnect timeout",
     "Password is required": "Password is required",
     "Forcing clipping mode since scrollbars aren't supported by IE in fullscreen": "Forcing clipping mode since scrollbars aren't supported by IE in fullscreen",
-    "Connecting": "Connecting",
-    "Disconnecting": "Disconnecting",
+    "Connecting...": "Connecting...",
+    "Disconnecting...": "Disconnecting...",
     "Disconnected": "Disconnected",
 };

diff --git a/app/locale/locale-nl-NL.js b/app/locale/locale-nl-NL.js
index a0af39cb5197aa8fbd86cce076e8de15114acf00..24ad903e45781d76923aa5985d5535963c64a630 100644 (file)
--- a/app/locale/locale-nl-NL.js
+++ b/app/locale/locale-nl-NL.js
@@ -5,7 +5,7 @@ Language = {
     "Disconnect timeout": "Timeout tijdens verbreken van verbinding",
     "Password is required": "Wachtwoord is vereist",
     "Forcing clipping mode since scrollbars aren't supported by IE in fullscreen": "''Clipping mode' ingeschakeld, omdat schuifbalken in volledige-scherm-modus in IE niet worden ondersteund",
-    "Connecting": "Verbinden",
-    "Disconnecting": "Verbinding verbreken",
+    "Connecting...": "Verbinden...",
+    "Disconnecting...": "Verbinding verbreken...",
     "Disconnected": "Verbinding verbroken",
 };

diff --git a/app/locale/locale-sv-SE.js b/app/locale/locale-sv-SE.js
index fac8be63086f815b1876cf6f05a83cf4bd1f9f6f..eee7f15ea7f7a78e68e4d1d5b6d14fb35661a119 100644 (file)
--- a/app/locale/locale-sv-SE.js
+++ b/app/locale/locale-sv-SE.js
@@ -5,7 +5,7 @@ Language = {
     "Disconnect timeout": "Det tog för lång tid att koppla ner",
     "Password is required": "Lösenord krävs",
     "Forcing clipping mode since scrollbars aren't supported by IE in fullscreen": "Tvingar 'Clipping mode' eftersom skrollning inte stödjs av IE i fullskärm",
-    "Connecting": "Ansluter",
-    "Disconnecting": "Kopplar ner",
+    "Connecting...": "Ansluter...",
+    "Disconnecting...": "Kopplar ner...",
     "Disconnected": "Frånkopplad",
 };

diff --git a/app/styles/base.css b/app/styles/base.css
index 185b982f9c00f992477952539fe06902509fd68f..03f6583e3ef24f6c45bf7c67ace6ce82f8d42fe6 100644 (file)
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -27,6 +27,37 @@ html {
   display: none;
 }
 
+/* ----------------------------------------
+ * Spinner
+ * ----------------------------------------
+ */
+
+.noVNC_spinner {
+  position: relative;
+}
+.noVNC_spinner, .noVNC_spinner::before, .noVNC_spinner::after {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  animation: noVNC_spinner 1.0s ease-in-out alternate infinite;
+}
+.noVNC_spinner::before {
+  content: "";
+  position: absolute;
+  left: -20px;
+  animation-delay: -0.2s;
+}
+.noVNC_spinner::after {
+  content: "";
+  position: absolute;
+  left: 20px;
+  animation-delay: 0.2s;
+}
+@keyframes noVNC_spinner {
+  0% { box-shadow: 0 10px 0 white; }
+  100% { box-shadow: 0 30px 0 white; }
+}
+
 /* ----------------------------------------
  * Input Elements
  * ----------------------------------------
@@ -499,6 +530,34 @@ input[type=button]:active, select:active {
  * ----------------------------------------
  */
 
+/* Transition screen */
+#noVNC_transition {
+  display: none;
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+
+  color: white;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+
+  /*display: flex;*/
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+:root.noVNC_connecting #noVNC_transition,
+:root.noVNC_disconnecting #noVNC_transition {
+  display: flex;
+}
+#noVNC_transition_text {
+  font-size: 1.5em;
+}
+
+/* Main container */
 #noVNC_container {
   display: table;
   width: 100%;

diff --git a/app/ui.js b/app/ui.js
index 29b9f3e7c57d684e879c337f10bf3bede704ce99..5f6a433b74207a60c3c279f47be819d77844b2be 100644 (file)
--- a/app/ui.js
+++ b/app/ui.js
@@ -363,12 +363,19 @@ var UI;
 
         updateState: function(rfb, state, oldstate) {
             var msg;
+
+            document.documentElement.classList.remove("noVNC_connecting");
+            document.documentElement.classList.remove("noVNC_connected");
+            document.documentElement.classList.remove("noVNC_disconnecting");
+
             switch (state) {
                 case 'connecting':
-                    UI.showStatus(Util.Localisation.get("Connecting"));
+                    document.getElementById("noVNC_transition_text").innerHTML = Util.Localisation.get("Connecting...");
+                    document.documentElement.classList.add("noVNC_connecting");
                     break;
                 case 'connected':
                     UI.connected = true;
+                    document.documentElement.classList.add("noVNC_connected");
                     if (rfb && rfb.get_encrypt()) {
                         msg = Util.Localisation.get("Connected (encrypted) to ") + UI.desktopName;
                     } else {
@@ -377,7 +384,8 @@ var UI;
                     UI.showStatus(msg);
                     break;
                 case 'disconnecting':
-                    UI.showStatus(Util.Localisation.get("Disconnecting"));
+                    document.getElementById("noVNC_transition_text").innerHTML = Util.Localisation.get("Disconnecting...");
+                    document.documentElement.classList.add("noVNC_disconnecting");
                     break;
                 case 'disconnected':
                     UI.connected = false;
@@ -413,14 +421,12 @@ var UI;
             document.getElementById('noVNC_setting_repeaterID').disabled = UI.connected;
 
             if (UI.connected) {
-                document.documentElement.classList.add("noVNC_connected");
                 UI.updateViewClip();
                 UI.setMouseButton(1);
 
                 // Hide the controlbar after 2 seconds
                 UI.closeControlbarTimeout = setTimeout(UI.closeControlbar, 2000);
             } else {
-                document.documentElement.classList.remove("noVNC_connected");
                 UI.updateXvpButton(0);
                 UI.keepControlbar();
             }

diff --git a/vnc.html b/vnc.html
index 6796e10f564044b37a7eb1d010987c481d9aca3b..01828b4406c4bc575fe03c69c0f3859b27fc2b2c 100644 (file)
--- a/vnc.html
+++ b/vnc.html
@@ -291,6 +291,12 @@
     </div>
     </div>
 
+    <!-- Transition Screens -->
+    <div id="noVNC_transition">
+        <div id="noVNC_transition_text"></div>
+        <div class="noVNC_spinner"></div>
+    </div>
+
     <div id="noVNC_container">
         <h1 id="noVNC_logo" class="noVNC_logo"><span>no</span><br />VNC</h1>