Improve styling and handling of missing history.

This commit is contained in:
Michael Jumper
2012-11-03 19:24:30 -07:00
parent a9c2f5ab8d
commit a1894549a2
3 changed files with 72 additions and 48 deletions

View File

@@ -74,6 +74,7 @@
<h2>Recent Connections</h2>
<div id="recent-connections">
<p id="no-recent">No recent connections.</p>
</div>
<h2>Other Connections</h2>
@@ -133,16 +134,20 @@
// Remove all rows from connections list
var recent_connections = document.getElementById("recent-connections");
var other_connections = document.getElementById("other-connections");
var no_recent_connections = document.getElementById("no-recent");
// Get thumbnail set from local storage
var thumbnails = {};
try {
thumbnails = JSON.parse(localStorage.getItem("GUAC_THUMBNAILS"));
if (localStorage) {
var thumbnails = {};
try {
var thumbnail_json = localStorage.getItem("GUAC_THUMBNAILS");
if (thumbnail_json)
thumbnails = JSON.parse(thumbnail_json);
}
catch (e) {}
}
catch (e) {
}
for (var test in thumbnails)
console.log(test);
else
document.body.className += " history-unavailable";
// Add connection icons
for (var i=0; i<configs.length; i++) {
@@ -166,15 +171,18 @@
var thumbnail = document.createElement("div");
thumbnail.className = "thumbnail";
// Create link to client
var url = getClientURL(configs[i].id)
var clientLink = document.createElement("a");
clientLink.setAttribute("href", url);
connection.onclick = function() {
window.location = url;
};
function redirect(url) {
return function() {
window.location = url;
};
}
// Create link to client
var clientLink = document.createElement("a");
var url = getClientURL(configs[i].id)
clientLink.setAttribute("href", url);
connection.onclick = redirect(url);
protocol.appendChild(protocolIcon);
clientLink.textContent = configs[i].id;
@@ -197,6 +205,7 @@
thumbnail.appendChild(img);
recent_connections.appendChild(connection);
no_recent_connections.style.display = "none";
}
else
other_connections.appendChild(connection);

View File

@@ -781,45 +781,47 @@ GuacamoleUI.attach = function(guac) {
GuacamoleUI.hideStatus();
title_prefix = null;
window.setTimeout(function() {
if (localStorage) {
window.setTimeout(function() {
// Get screenshot
var canvas = guac.flatten();
// 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
);
// 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;
// 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
);
// 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 {
thumbnails = JSON.parse(localStorage.getItem("GUAC_THUMBNAILS"));
}
catch (e) {
}
// 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);
// 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

View File

@@ -225,11 +225,24 @@ div#connection-list-ui h2 {
}
.history-unavailable div#recent-connections {
display: none;
}
div#recent-connections {
margin: 1em;
margin-top: 0;
text-align: center;
min-height: 240px;
}
#no-recent {
color: black;
text-shadow: 1px 1px white;
opacity: 0.5;
font-size: 2em;
font-weight: bolder;
}
div#recent-connections div.connection {