diff --git a/guacamole/src/main/webapp/client.xhtml b/guacamole/src/main/webapp/client.xhtml index 1b2c5ee70..9bf3e3aea 100644 --- a/guacamole/src/main/webapp/client.xhtml +++ b/guacamole/src/main/webapp/client.xhtml @@ -139,7 +139,7 @@ } catch (e) { - GuacUI.Client.showError(e.message); + GuacUI.Client.showError("Cannot Connect", e.message); } }, 0); diff --git a/guacamole/src/main/webapp/scripts/client-ui.js b/guacamole/src/main/webapp/scripts/client-ui.js index f24b9b59a..31139111d 100644 --- a/guacamole/src/main/webapp/scripts/client-ui.js +++ b/guacamole/src/main/webapp/scripts/client-ui.js @@ -525,21 +525,26 @@ GuacUI.StateManager.setState(GuacUI.Client.states.INTERACTIVE); * @constructor * @augments GuacUI.Component */ -GuacUI.Client.ModalStatus = function(text, classname) { +GuacUI.Client.ModalStatus = function(title_text, text, classname) { // Create element hierarchy var outer = GuacUI.createElement("div", "dialogOuter"); var middle = GuacUI.createChildElement(outer, "div", "dialogMiddle"); var dialog = GuacUI.createChildElement(middle, "div", "dialog"); + + // Add title if given + if (title_text) { + var title = GuacUI.createChildElement(dialog, "p", "title"); + title.textContent = title_text; + } + var status = GuacUI.createChildElement(dialog, "p", "status"); + status.textContent = text; // Set classname if given if (classname) GuacUI.addClass(outer, classname); - // Set status text - status.textContent = text; - this.show = function() { document.body.appendChild(outer); }; @@ -641,21 +646,21 @@ GuacUI.Client.hideStatus = function() { /** * Displays a status overlay with the given text. */ -GuacUI.Client.showStatus = function(status) { +GuacUI.Client.showStatus = function(title, status) { GuacUI.Client.hideStatus(); - GuacUI.Client.visibleStatus = new GuacUI.Client.ModalStatus(status); + GuacUI.Client.visibleStatus = new GuacUI.Client.ModalStatus(title, status); GuacUI.Client.visibleStatus.show(); }; /** * Displays an error status overlay with the given text. */ -GuacUI.Client.showError = function(status) { +GuacUI.Client.showError = function(title, status) { GuacUI.Client.hideStatus(); GuacUI.Client.visibleStatus = - new GuacUI.Client.ModalStatus(status, "guac-error"); + new GuacUI.Client.ModalStatus(title, status, "guac-error"); GuacUI.Client.visibleStatus.show(); } @@ -691,19 +696,19 @@ GuacUI.Client.attach = function(guac) { // Idle case 0: - GuacUI.Client.showStatus("Idle."); + GuacUI.Client.showStatus(null, "Idle."); GuacUI.Client.titlePrefix = "[Idle]"; break; // Connecting case 1: - GuacUI.Client.showStatus("Connecting..."); + GuacUI.Client.showStatus("Connecting", "Connecting to server..."); GuacUI.Client.titlePrefix = "[Connecting...]"; break; // Connected + waiting case 2: - GuacUI.Client.showStatus("Connected, waiting for first update..."); + GuacUI.Client.showStatus("Waiting", "Connected. Waiting for first frame..."); GuacUI.Client.titlePrefix = "[Waiting...]"; break; @@ -721,19 +726,19 @@ GuacUI.Client.attach = function(guac) { // Disconnecting case 4: - GuacUI.Client.showStatus("Disconnecting..."); + GuacUI.Client.showStatus(null, "Disconnecting..."); GuacUI.Client.titlePrefix = "[Disconnecting...]"; break; // Disconnected case 5: - GuacUI.Client.showStatus("Disconnected."); + GuacUI.Client.showStatus("Disconnected", "Guacamole has been manually disconnected. Reload the page to reconnect."); GuacUI.Client.titlePrefix = "[Disconnected]"; break; // Unknown status code default: - GuacUI.Client.showStatus("[UNKNOWN STATUS]"); + GuacUI.Client.showStatus("Unknown Status", "An unknown status code was received. This is most likely a bug."); } @@ -761,7 +766,7 @@ GuacUI.Client.attach = function(guac) { guac.disconnect(); // Display error message - GuacUI.Client.showError(error); + GuacUI.Client.showError("Connection Error", error); }; diff --git a/guacamole/src/main/webapp/styles/client.css b/guacamole/src/main/webapp/styles/client.css index 0de307642..e2ff460e1 100644 --- a/guacamole/src/main/webapp/styles/client.css +++ b/guacamole/src/main/webapp/styles/client.css @@ -256,15 +256,42 @@ div#viewportClone { visibility: hidden; } -.status { - text-shadow: 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black; - font-size: xx-large; - color: white; +@keyframes show-dialog { + 0% {transform: scale(0.5); } + 100% {transform: scale(1); } } -.guac-error .status { - text-shadow: 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black; - color: #D44; +@-webkit-keyframes show-dialog { + 0% {-webkit-transform: scale(0.5); } + 100% {-webkit-transform: scale(1); } +} + +.dialog { + + animation-name: show-dialog; + animation-duration: 0.125s; + -webkit-animation-name: show-dialog; + -webkit-animation-duration: 0.125s; + + max-height: none; + width: 4in; + font-size: 0.75em; + -moz-border-radius: 0.2em; + -webkit-border-radius: 0.2em; + -khtml-border-radius: 0.2em; + border-radius: 0.2em; +} + +.guac-error .dialog { + background: #FDD; + border: 1px solid #964040; +} + +.dialog .title { + font-size: 1.1em; + font-weight: bold; + border-bottom: 1px solid black; + margin-bottom: 0.5em; } p.hint {