Updated desktop connection lost warning

web/desktop.system

@@ -143,14 +143,29 @@
             padding-left: 8px;
             padding-right: 8px;
         }
-        
+
+        /* Connection loss indicator */
+        #connectionLost{
+            position: fixed;
+            z-index: 1000;
+            right: 1em;
+            top: calc(30px + 1em);
+            display: none;
+        }
+
+        #connectionLost .ts.card{
+            box-shadow: none;
+            border: 0px solid transparent;
+        }
+
+        /* Theme Color css settings */
         .themeColor {
-            background-color: rgba(14,14,14,0.5);
+            background-color: rgba(14,14,14,0.5) !important;
             backdrop-filter: blur(4px);
         }
 
         .themeColorSolid{
-            background-color: rgba(14,14,14,0.9);
+            background-color: rgba(14,14,14,0.9) !important;
             backdrop-filter: blur(4px);
         }
         
@@ -667,6 +682,62 @@
             background-color:#f5f5f5 !important;
         }
 
+         /* Offline blinking warning css */
+         @-moz-keyframes blink {
+                0% {
+                    opacity:1;
+                }
+                50% {
+                    opacity:0;
+                }
+                100% {
+                    opacity:1;
+                }
+            } 
+
+            @-webkit-keyframes blink {
+                0% {
+                    opacity:1;
+                }
+                50% {
+                    opacity:0;
+                }
+                100% {
+                    opacity:1;
+                }
+            }
+            /* IE */
+            @-ms-keyframes blink {
+                0% {
+                    opacity:1;
+                }
+                50% {
+                    opacity:0;
+                }
+                100% {
+                    opacity:1;
+                }
+            } 
+            /* Opera and prob css3 final iteration */
+            @keyframes blink {
+                0% {
+                    opacity:1;
+                }
+                50% {
+                    opacity:0;
+                }
+                100% {
+                    opacity:1;
+                }
+            } 
+            .blink-image {
+                -moz-animation: blink normal 2s infinite ease-in-out; /* Firefox */
+                -webkit-animation: blink normal 2s infinite ease-in-out; /* Webkit */
+                -ms-animation: blink normal 2s infinite ease-in-out; /* IE */
+                animation: blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */
+            }
+
+
         /*
                 Z-index layering
                 Layer -1 : Background Images
@@ -678,6 +749,8 @@
                 Layer 500: Top Mot FloatWindow drag drop layer
                 Layer 501: Top Most FloatWindow
                 ...
+                Layer 1000: Connection lost indicator
+                ...
                 Layer 1110: Navigation Bar
                 Layer 1112: Stacked Window List
                 Layer 1113: List Menu
@@ -706,7 +779,7 @@
             Welcome
         </div>
         <div class="clock statusbarpadding" style="display: table-cell; cursor:pointer; user-select: none;" onclick="toggleNotification();" ontouchstart="toggleNotification();">
-            ArOZ Online Desktop
+            ArozOS Desktop
         </div>
         <div class="quicktools" onclick="showToolPanel();" ontouchend="showToolPanel();">
             <div class="qtwrapper">
@@ -801,9 +874,21 @@
     </div>
 
     <!-- Disconnected. Reconnecting interface -->
-    <div id="connectionLost" class="ts active dimmer" style="display:none; z-index:999;">
-        <div class="ts text indeterminate loader">Connection Lost<br>
-            Reconnecting...</div>
+    <div id="connectionLost">
+        <div class="ts inverted card themeColor" style="width: 300px;">
+            <div class="content">
+                <div class="header"><img class="ts mini image blink-image" style="vertical-align:bottom; padding-right: 0.5em;" src="SystemAO/desktop/icons/connlost.svg"> Connection Lost</div>
+                <div class="description">
+                    Connection to server is lost. Please wait until this warning disappear before further operations.
+                </div>
+            </div>
+            <div class="ts fluid bottom attached buttons">
+                <button class="ts opinion button" onclick="handleManualCheckReconnect(this);">Check Again</button>
+                <button class="ts secondary opinion button">Wait</button>
+            </div>
+        </div>
+        
+      
     </div>
 
     <div id="quickAccessPanel" class="" style="display:none;">
@@ -939,6 +1024,17 @@
 
         //Login cookie expire check
         setInterval(function() {
+            checkConnection();
+        }, 15000);
+
+        function handleManualCheckReconnect(button){
+            $(button).addClass("loading");
+            checkConnection(undefined, function(status){
+                $(button).removeClass("loading");
+            });
+        }
+
+        function checkConnection(timeout=15000, callback=undefined){
             $.ajax({
                 url: 'system/auth/checkLogin',
                 success: function(data) {
@@ -951,15 +1047,21 @@
                     }
                     $("#connectionLost").hide();
                     document.title = hostInfo.Hostname;
+                    if (callback != undefined){
+                        callback(true);
+                    }
                 },
                 error: function(evt) {
                     //Server closed or freezed?
                     $("#connectionLost").show();
                     document.title = "Reconnecting...";
+                    if (callback != undefined){
+                        callback(false);
+                    }
                 },
-                timeout: 15000
+                timeout: timeout
             });
-        }, 15000);
+        }
 
         //Keep the clock updated
         setInterval(function(){