Login screen style improvements.

guacamole/src/main/webapp/index.xhtml

@@ -52,7 +52,7 @@
                                 </tr>
                             </table>
 
-                            <img class="logo" src="images/guacamole-logo-64.png" alt=""/>
+                            <img class="logo" src="images/guac-mono-192.png" alt=""/>
                         </div>
 
                         <div id="buttons">

guacamole/src/main/webapp/scripts/interface.js

@@ -734,6 +734,46 @@ GuacamoleUI.attach = function(guac) {
 
     }
 
+    function updateThumbnail() {
+
+        // Get screenshot
+        var canvas = guac.flatten();
+
+        // Calculate scale of thumbnail (max 320x240, max zoom 100%)
+        var scale = Math.min(
+            320 / canvas.width,
+            240 / canvas.height,
+            1
+        );
+
+        // Create thumbnail canvas
+        var thumbnail = document.createElement("canvas");
+        thumbnail.width  = canvas.width*scale;
+        thumbnail.height = canvas.height*scale;
+
+        // Scale screenshot to thumbnail
+        var context = thumbnail.getContext("2d");
+        context.drawImage(canvas,
+            0, 0, canvas.width, canvas.height,
+            0, 0, thumbnail.width, thumbnail.height
+        );
+
+        // Get thumbnail set from local storage
+        var thumbnails = {};
+        try {
+            var thumbnail_json = localStorage.getItem("GUAC_THUMBNAILS");
+            if (thumbnail_json)
+                thumbnails = JSON.parse(thumbnail_json);
+        }
+        catch (e) {}
+
+        // Save thumbnail to local storage
+        var id = decodeURIComponent(window.location.search.substring(4));
+        thumbnails[id] = thumbnail.toDataURL();
+        localStorage.setItem("GUAC_THUMBNAILS", JSON.stringify(thumbnails));
+
+    }
+
     // Enable keyboard by default
     enableKeyboard();
 
@@ -781,47 +821,10 @@ GuacamoleUI.attach = function(guac) {
                 GuacamoleUI.hideStatus();
                 title_prefix = null;
 
-                if (localStorage) {
+                // Regularly update screenshot if storage available
-                    window.setTimeout(function() {
+                if (localStorage)
+                    window.setInterval(updateThumbnail, 5000);
 
-                        // Get screenshot
-                        var canvas = guac.flatten();
-
-                        // Calculate scale of thumbnail (max 320x240, max zoom 100%)
-                        var scale = Math.min(
-                            320 / canvas.width,
-                            240 / canvas.height,
-                            1
-                        );
-
-                        // Create thumbnail canvas
-                        var thumbnail = document.createElement("canvas");
-                        thumbnail.width  = canvas.width*scale;
-                        thumbnail.height = canvas.height*scale;
-
-                        // Scale screenshot to thumbnail
-                        var context = thumbnail.getContext("2d");
-                        context.drawImage(canvas,
-                            0, 0, canvas.width, canvas.height,
-                            0, 0, thumbnail.width, thumbnail.height
-                        );
-
-                        // Get thumbnail set from local storage
-                        var thumbnails = {};
-                        try {
-                            var thumbnail_json = localStorage.getItem("GUAC_THUMBNAILS");
-                            if (thumbnail_json)
-                                thumbnails = JSON.parse(thumbnail_json);
-                        }
-                        catch (e) {}
-
-                        // Save thumbnail to local storage
-                        var id = decodeURIComponent(window.location.search.substring(4));
-                        thumbnails[id] = thumbnail.toDataURL();
-                        localStorage.setItem("GUAC_THUMBNAILS", JSON.stringify(thumbnails));
-
-                    }, 5000);
-                }
                 break;
 
             // Disconnecting
@@ -862,9 +865,14 @@ GuacamoleUI.attach = function(guac) {
         
     };
 
-    // Disconnect on close
+    // Disconnect and update thumbnail on close
     window.onunload = function() {
+        
+        if (localStorage)
+            updateThumbnail();
+
         guac.disconnect();
+
     };
 
     // Send size events on resize

guacamole/src/main/webapp/styles/login.css

@@ -25,7 +25,6 @@ body {
 }
 
 div#login-ui {
-    background: #BCA;
     height: 100%;
     width: 100%;
     position: fixed;
@@ -76,45 +75,72 @@ div#login-dialog #buttons {
 
 div#login-dialog #buttons input,
 div#logout-panel button {
-    background: #9A8;
+
-    border: 1px solid #676;
+    background: #8A6;
-    color: black; 
+    border: 1px solid rgba(0, 0, 0, 0.4);
-    padding: 0.25em;
+    border-radius: 0.6em;
+
+    color: rgba(255, 255, 255, 0.95);
+    text-shadow: -1px -1px rgba(0, 0, 0, 0.3);
+    font-weight: bold;
+    font-size: 1.125em;
+
+    box-shadow: inset -1px -1px 0.25em rgba(0, 0, 0, 0.25),
+                inset 1px 1px 0.25em rgba(255, 255, 255, 0.25),
+                -1px -1px 0.25em rgba(0, 0, 0, 0.25),
+                1px 1px 0.25em rgba(255, 255, 255, 0.25);
+    
+    padding: 0.35em;
     padding-right: 1em;
     padding-left: 1em;
+    min-width: 5em;
+
 }
 
 div#login-dialog #buttons input:hover,
 div#logout-panel button:hover {
-    background: #CDB;
+    background: #9C7;
-    border: 1px solid #9A8;
 }
 
 div#login-dialog #buttons input:active,
 div#logout-panel button:active {
-    padding-top: 0.35em;
-    padding-left: 1.1em;
 
-    padding-bottom: 0.15em;
+    padding-left: 1.1em;
     padding-right: 0.9em;
+    padding-top: 0.45em;
+    padding-bottom: 0.25em;
+    
+    box-shadow: 
+                inset 1px 1px 0.25em rgba(0, 0, 0, 0.25),
+                1px 1px 0.25em rgba(0, 0, 0, 0.25);
 }
 
 div#login-dialog #login-fields {
     
-    background: #CDB;
     vertical-align: middle;
 
     padding: 1em;
-    border: 1px solid #676;
+    background: #DDD;
+    border: 1px solid #999;
+    border-radius: 0.25em;
 
 }
 
+div#login-dialog th {
+    text-shadow: 1px 1px white;
+}
+
 div#login-dialog #login-fields input {
-    border: 1px solid #676;
+    border: 1px solid #777;
+    border-radius: 0.2em;
 }
 
 div#login-dialog #login-fields img.logo {
-    float: left;
+    position: fixed;
+    margin: 10px;
+    left: 0;
+    bottom: 0;
+    opacity: 0.1;
 }
 
 div#version-dialog {