From a0652b918a5dcb10c71e67f5284e121b2b18293b Mon Sep 17 00:00:00 2001 From: Michael Jumper Date: Sat, 3 Nov 2012 22:19:29 -0700 Subject: [PATCH] Login screen style improvements. --- .../src/main/webapp/images/guac-mono-192.png | Bin 0 -> 6041 bytes guacamole/src/main/webapp/index.xhtml | 2 +- .../src/main/webapp/scripts/interface.js | 90 ++++++++++-------- guacamole/src/main/webapp/styles/login.css | 54 ++++++++--- 4 files changed, 90 insertions(+), 56 deletions(-) create mode 100644 guacamole/src/main/webapp/images/guac-mono-192.png diff --git a/guacamole/src/main/webapp/images/guac-mono-192.png b/guacamole/src/main/webapp/images/guac-mono-192.png new file mode 100644 index 0000000000000000000000000000000000000000..428396041273fc733b16fa87b1912b13c72b524c GIT binary patch literal 6041 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 TUTKO|00000NkvXXu0mjf&YTfe literal 0 HcmV?d00001 diff --git a/guacamole/src/main/webapp/index.xhtml b/guacamole/src/main/webapp/index.xhtml index 5474cd775..c1890d68a 100644 --- a/guacamole/src/main/webapp/index.xhtml +++ b/guacamole/src/main/webapp/index.xhtml @@ -52,7 +52,7 @@ - +
diff --git a/guacamole/src/main/webapp/scripts/interface.js b/guacamole/src/main/webapp/scripts/interface.js index bea35fb30..45b2a5f00 100644 --- a/guacamole/src/main/webapp/scripts/interface.js +++ b/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) { - window.setTimeout(function() { + // Regularly update screenshot if storage available + 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 diff --git a/guacamole/src/main/webapp/styles/login.css b/guacamole/src/main/webapp/styles/login.css index 029522ed0..49e0ae2c9 100644 --- a/guacamole/src/main/webapp/styles/login.css +++ b/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; - color: black; - padding: 0.25em; + + background: #8A6; + border: 1px solid rgba(0, 0, 0, 0.4); + 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; - border: 1px solid #9A8; + background: #9C7; } 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 {