Add a "reconnect" snackbar while reconnecting to the server

app/views/page.tpl

@@ -35,12 +35,18 @@
         <?php } ?>
         <div id="hiddendiv"></div>
         <div id="snackbar" class="snackbar"></div>
-        <div id="error_websocket" class="snackbar hide" onclick="MovimUtils.reloadThis()">
+        <div id="status_websocket" class="snackbar hide" onclick="MovimUtils.reloadThis()">
             <ul class="list">
                 <li>
+                    <span class="control icon gray">
+                        <i class="material-icons">signal_cellular_null</i>
+                    </span>
                     <span class="control icon gray">
                         <i class="material-icons">signal_cellular_off</i>
                     </span>
+                    <p class="normal">
+                        <?php echo __('error.websocket_connect'); ?>
+                    </p>
                     <p class="normal">
                         <?php echo __('error.websocket'); ?>
                     </p>

locales/locales.ini

@@ -39,6 +39,7 @@ widget_load_error = "Requested widget '%s' doesn’t exist."
 widget_call_error = "Requested event '%s' not registered."
 whoops            = "Whoops!"
 websocket         = Movim cannot talk with the server, please try again later
+websocket_connect = Reconnection to the server…
 oops              = Oops!
 
 [button]

public/scripts/movim_websocket.js

@@ -32,10 +32,11 @@ var MovimWebsocket = {
     attempts: 1,
     pong: false,
     closed: false,
+    statusBar: null,
 
     launchAttached : function() {
         // We hide the Websocket error
-        document.getElementById('error_websocket').classList.add('hide');
+        this.statusBar.classList.add('hide');
 
         for(var i = 0; i < MovimWebsocket.attached.length; i++) {
             MovimWebsocket.attached[i]();
@@ -116,7 +117,7 @@ var MovimWebsocket = {
             if (e.code == 1008) {
                 // The server closed the connection and asked to keep it this way
                 this.closed = true;
-                document.getElementById('error_websocket').classList.remove('hide');
+                this.statusBar.classList.remove('hide');
                 MovimWebsocket.connection.close();
             } if (e.code == 1006) {
                 MovimWebsocket.reconnect();
@@ -129,7 +130,7 @@ var MovimWebsocket = {
             console.log("Connection error!");
 
             // We show the Websocket error
-            document.getElementById('error_websocket').classList.remove('hide');
+            this.statusBar.classList.remove('hide');
 
             MovimWebsocket.reconnect();
 
@@ -244,6 +245,10 @@ var MovimWebsocket = {
     reconnect : function() {
         var interval = MovimWebsocket.generateInterval();
         console.log("Try to reconnect");
+
+        this.statusBar.classList.remove('hide');
+        this.statusBar.classList.add('connect');
+
         setTimeout(function () {
             // We've tried to reconnect so increment the attempts by 1
             MovimWebsocket.attempts++;
@@ -281,6 +286,8 @@ window.addEventListener('focus', function() {
 });
 
 document.addEventListener("DOMContentLoaded", function(event) {
+    MovimWebsocket.statusBar = document.getElementById('status_websocket');
+
     // And we start it
     MovimWebsocket.init();
 });

public/theme/css/notification.css

@@ -57,23 +57,34 @@
     transform: translateY(100%);
 }
 
-.snackbar#error_websocket {
+.snackbar#status_websocket {
     max-height: initial;
 }
 
-.snackbar#error_websocket p {
-    line-height: 2.5rem;
+.snackbar#status_websocket p {
+    line-height: 2.55rem;
     white-space: initial;
 }
 
-.snackbar#error_websocket:not(.hide) ~ main,
-.snackbar#error_websocket:not(.hide) ~ div.drawer,
-.snackbar#error_websocket:not(.hide) ~ div.dialog {
+.snackbar#status_websocket:not(.hide) ~ main,
+.snackbar#status_websocket:not(.hide) ~ div.drawer,
+.snackbar#status_websocket:not(.hide) ~ div.dialog {
     opacity: 0.5;
     pointer-events: none;
     filter: grayscale(1);
 }
 
+.snackbar#status_websocket span.control {
+    right: 0;
+}
+
+.snackbar#status_websocket:not(.connect) span.control:nth-child(1),
+.snackbar#status_websocket.connect span.control:nth-child(2),
+.snackbar#status_websocket:not(.connect) p:nth-child(3),
+.snackbar#status_websocket.connect p:nth-child(4) {
+    display: none;
+}
+
 @media screen and (max-width: 1024px) {
     .snackbar,
     .toast {