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

View File

@@ -781,6 +781,7 @@ GuacamoleUI.attach = function(guac) {
GuacamoleUI.hideStatus(); GuacamoleUI.hideStatus();
title_prefix = null; title_prefix = null;
if (localStorage) {
window.setTimeout(function() { window.setTimeout(function() {
// Get screenshot // Get screenshot
@@ -808,10 +809,11 @@ GuacamoleUI.attach = function(guac) {
// Get thumbnail set from local storage // Get thumbnail set from local storage
var thumbnails = {}; var thumbnails = {};
try { try {
thumbnails = JSON.parse(localStorage.getItem("GUAC_THUMBNAILS")); var thumbnail_json = localStorage.getItem("GUAC_THUMBNAILS");
} if (thumbnail_json)
catch (e) { thumbnails = JSON.parse(thumbnail_json);
} }
catch (e) {}
// Save thumbnail to local storage // Save thumbnail to local storage
var id = decodeURIComponent(window.location.search.substring(4)); var id = decodeURIComponent(window.location.search.substring(4));
@@ -819,7 +821,7 @@ GuacamoleUI.attach = function(guac) {
localStorage.setItem("GUAC_THUMBNAILS", JSON.stringify(thumbnails)); localStorage.setItem("GUAC_THUMBNAILS", JSON.stringify(thumbnails));
}, 5000); }, 5000);
}
break; break;
// Disconnecting // Disconnecting

View File

@@ -225,11 +225,24 @@ div#connection-list-ui h2 {
} }
.history-unavailable div#recent-connections {
display: none;
}
div#recent-connections { div#recent-connections {
margin: 1em; margin: 1em;
margin-top: 0; margin-top: 0;
text-align: center; 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 { div#recent-connections div.connection {