Merge pull request #711 from CendioOssman/spinners

Blocking transition screen when connecting/disconnecting

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",
+    "Connecting...": "Verbunden...",
-    "Disconnecting": "Verbindung trennen",
+    "Disconnecting...": "Verbindung trennen...",
     "Disconnected": "Verbindung zum Server getrennt",
 };

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": "Συνδέεται",
+	"Connecting...": "Συνδέεται...",
-	"Disconnecting": "Aποσυνδέεται",
+	"Disconnecting...": "Aποσυνδέεται...",
 	"Disconnected": "Αποσυνδέθηκε",
 };

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",
+    "Connecting...": "Connecting...",
-    "Disconnecting": "Disconnecting",
+    "Disconnecting...": "Disconnecting...",
     "Disconnected": "Disconnected",
 };

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",
+    "Connecting...": "Verbinden...",
-    "Disconnecting": "Verbinding verbreken",
+    "Disconnecting...": "Verbinding verbreken...",
     "Disconnected": "Verbinding verbroken",
 };

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",
+    "Connecting...": "Ansluter...",
-    "Disconnecting": "Kopplar ner",
+    "Disconnecting...": "Kopplar ner...",
     "Disconnected": "Frånkopplad",
 };

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%;

app/ui.js

@@ -367,12 +367,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 {
@@ -381,7 +388,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;
@@ -417,14 +425,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();
             }

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>