diff --git a/guacamole/src/main/webapp/client.xhtml b/guacamole/src/main/webapp/client.xhtml index 25a539b8d..414603d19 100644 --- a/guacamole/src/main/webapp/client.xhtml +++ b/guacamole/src/main/webapp/client.xhtml @@ -48,6 +48,7 @@
+
diff --git a/guacamole/src/main/webapp/images/action-icons/guac-close.png b/guacamole/src/main/webapp/images/action-icons/guac-close.png new file mode 100644 index 000000000..ef29d0f87 Binary files /dev/null and b/guacamole/src/main/webapp/images/action-icons/guac-close.png differ diff --git a/guacamole/src/main/webapp/scripts/client-ui.js b/guacamole/src/main/webapp/scripts/client-ui.js index 6568e1005..dd7716ca9 100644 --- a/guacamole/src/main/webapp/scripts/client-ui.js +++ b/guacamole/src/main/webapp/scripts/client-ui.js @@ -808,6 +808,11 @@ GuacUI.Client.attach = function(guac) { download.complete(blob.mimetype, url.createObjectURL(blob.getBlob())); }; + // When close clicked, remove from notification area + download.onclose = function() { + GuacUI.Client.notification_area.removeChild(download.getElement()); + }; + }; /* diff --git a/guacamole/src/main/webapp/scripts/guac-ui.js b/guacamole/src/main/webapp/scripts/guac-ui.js index aae7832f9..5398f012e 100644 --- a/guacamole/src/main/webapp/scripts/guac-ui.js +++ b/guacamole/src/main/webapp/scripts/guac-ui.js @@ -700,10 +700,44 @@ GuacUI.Pager = function(container) { */ GuacUI.Download = function(filename) { + /** + * Reference to this GuacUI.Download. + * @private + */ + var guac_download = this; + + /** + * The outer div representing the notification. + * @private + */ var element = GuacUI.createElement("div", "download notification"); + + /** + * Title bar describing the notification. + * @private + */ + var title = GuacUI.createChildElement(element, "div", "title-bar"); + + /** + * Close button for removing the notification. + * @private + */ + var close_button = GuacUI.createChildElement(title, "div", "close"); + close_button.onclick = function() { + if (guac_download.onclose) + guac_download.onclose(); + }; + + GuacUI.createChildElement(title, "div", "title").textContent = + "File Transfer"; + GuacUI.createChildElement(element, "div", "caption").textContent = filename + " "; + /** + * Progress bar and status. + * @private + */ var progress = GuacUI.createChildElement(element, "div", "progress"); /** @@ -745,4 +779,10 @@ GuacUI.Download = function(filename) { return element; }; + /** + * Called when the close button of this notification is clicked. + * @event + */ + this.onclose = null; + }; \ No newline at end of file diff --git a/guacamole/src/main/webapp/styles/client.css b/guacamole/src/main/webapp/styles/client.css index dce325759..b05bbde48 100644 --- a/guacamole/src/main/webapp/styles/client.css +++ b/guacamole/src/main/webapp/styles/client.css @@ -317,10 +317,40 @@ p.hint { display: inline-block; } +.notification .title-bar { + display: block; + white-space: nowrap; + font-weight: bold; + + border-bottom: 1px solid white; + padding-bottom: 0.5em; + margin-bottom: 0.5em; +} + +.notification .title-bar * { + vertical-align: middle; +} + .notification .caption { color: silver; } +.notification .close { + + background: url('../images/action-icons/guac-close.png'); + background-size: 10px 10px; + -moz-background-size: 10px 10px; + -webkit-background-size: 10px 10px; + -khtml-background-size: 10px 10px; + + width: 10px; + height: 10px; + + float: right; + cursor: pointer; + +} + @keyframes progress { from {background-position: 0px 0px;} to {background-position: 64px 0px;} @@ -332,7 +362,7 @@ p.hint { } .download.notification .caption { - max-width: 20em; + width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -376,6 +406,7 @@ p.hint { .download.notification .download { background: rgb(16, 87, 153); + cursor: pointer; } .download.notification .download a[href] {