safebox/guacamole-client
4
0
Fork 0
mirror of https://github.com/gyurix1968/guacamole-client.git synced 2025-09-06 13:17:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Login screen style improvements.

Browse Source
This commit is contained in:
Michael Jumper
2012-11-03 22:19:29 -07:00
parent a1894549a2
commit a0652b918a
4 changed files with 90 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
guacamole/src/main/webapp/images/guac-mono-192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

2
guacamole/src/main/webapp/index.xhtml
View File

@@ -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">

90
guacamole/src/main/webapp/scripts/interface.js
View File

@@ -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

54
guacamole/src/main/webapp/styles/login.css
View File

@@ -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 {