Add close button to notifications. Improve styling.

guacamole/src/main/webapp/client.xhtml

@@ -48,6 +48,7 @@
 
         <!-- Images which should be preloaded -->
         <div id="preload">
+            <img src="images/action-icons/guac-close.png"/>
             <img src="images/progress.png"/>
         </div>
         

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());
+        };
+
     };
 
     /*

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;
+
 };

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