From 984ab06100f63501d9edff85fe725d755ca34a58 Mon Sep 17 00:00:00 2001
From: Michael Jumper <mike.jumper@guac-dev.org>
Date: Mon, 1 Jul 2013 12:15:00 -0700
Subject: [PATCH] Add close button to notifications. Improve styling.

---
 guacamole/src/main/webapp/client.xhtml        |   1 +
 .../webapp/images/action-icons/guac-close.png | Bin 0 -> 704 bytes
 .../src/main/webapp/scripts/client-ui.js      |   5 +++
 guacamole/src/main/webapp/scripts/guac-ui.js  |  40 ++++++++++++++++++
 guacamole/src/main/webapp/styles/client.css   |  33 ++++++++++++++-
 5 files changed, 78 insertions(+), 1 deletion(-)
 create mode 100644 guacamole/src/main/webapp/images/action-icons/guac-close.png

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 @@
 
         <!-- Images which should be preloaded -->
         <div id="preload">
+            <img src="images/action-icons/guac-close.png"/>
             <img src="images/progress.png"/>
         </div>
         
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 0000000000000000000000000000000000000000..ef29d0f874ba5b173f800cb35e72204ec842f655
GIT binary patch
literal 704
zcmV;x0zdtUP)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF00004b3#c}2nYxW
zd<bNS00009a7bBm000fw000fw0YWI7cmMzZ8FWQhbW?9;ba!ELWdL_~cP?peYja~^
zaAhuUa%Y?FJQ@H10zFAYK~#90?VC+*!Y~kpAKg{Tk-SE#dZL~n%bupH)HOFM5=(bs
zTSY*AJoD@^ah?>xg4pxEKp4+B2k$+4){Auj*4hDB2Vkuofa2T{fMW%skVA+?ChxuE
z`1C=)-g_q;gK@YRgO4#~kD)Q2WCh{cd{Q<9t$8a5kIai8FwED6FlRm+0?T|Y2y4t|
zL13CM4I#&T(jo-5`6M<3iTR{i2qnxXu^?#7Crv__nsii7n52ckFrPF&nqw*x`~q+m
zXIK9k0DME1F}ir}K#1dv;OSnK=;wYDs?FU@AXalWbu}u_wHiRJz)XH}R(Isv0L|_<
z2k*0rqU<~KTYS$R^R)JaTmS$U!X>`G62{6l56A!jTnG$_%meb0*eOoPNS3q`n+J3?
z!4@E>%mezWuq6bwd4N+Ew}3z~5AgZ|H6hT<1Kh?)4G2{80KYR-5(3>kAkPDq<N*AD
zli&a$VLF0r9@u+>MF6BMk#+SE$C6f-X2k|jGDX&u*CxdTP-A^Shrj|*b8$q4zyM&e
zGNeJ!0<c^bQy^#nv``aJLy!V!!F-Ymf&>7&Bz9T+)Uw17asjZ5qQ`jHwc*y5j|-Qs
z&C22}m~Xx@(sgUB>*i?J?Qu)<Rb!a?8+?aRukK3B^4fsl>0UEepzBRiS_qriCMSik
zsg07k5H`70b}fWWZ<bzy(8YH7DF|IXFmVgv=^vTVw8ln+?Wgp1Ri+$5lJg-sxm0iP
mX|(qStpl*u4!}A9YyANN&{!FBajrQ40000<MNUMnLSTZjK`SHx

literal 0
HcmV?d00001

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