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