From 8d54118cb7afcf1790afab7a0097b34c5e0707c7 Mon Sep 17 00:00:00 2001
From: Michael Jumper <mike.jumper@guac-dev.org>
Date: Wed, 14 May 2014 17:06:29 -0700
Subject: [PATCH] GUAC-685: Align typing to the left, just fade out as text is
 sent.

---
 guacamole/src/main/webapp/client.xhtml        |  2 +-
 .../src/main/webapp/scripts/client-ui.js      |  3 +-
 guacamole/src/main/webapp/styles/client.css   | 52 ++++++++-----------
 3 files changed, 25 insertions(+), 32 deletions(-)

diff --git a/guacamole/src/main/webapp/client.xhtml b/guacamole/src/main/webapp/client.xhtml
index 2734aa213..430abb6d6 100644
--- a/guacamole/src/main/webapp/client.xhtml
+++ b/guacamole/src/main/webapp/client.xhtml
@@ -48,7 +48,7 @@
             </div>
 
             <!-- Text input target -->
-            <div id="text-input"><textarea rows="1" id="target"></textarea><div id="sent-overlay"></div></div>
+            <div id="text-input"><div id="sent-history"></div><textarea rows="1" id="target"></textarea></div>
             
         </div>
 
diff --git a/guacamole/src/main/webapp/scripts/client-ui.js b/guacamole/src/main/webapp/scripts/client-ui.js
index f48898d88..c96c789ea 100644
--- a/guacamole/src/main/webapp/scripts/client-ui.js
+++ b/guacamole/src/main/webapp/scripts/client-ui.js
@@ -207,6 +207,7 @@ GuacUI.Client = {
     "notification_area" : document.getElementById("notificationArea"),
     "target"            : document.getElementById("target"),
     "text_input"        : document.getElementById("text-input"),
+    "sent_history"      : document.getElementById("sent-history"),
 
     /* Menu */
 
@@ -1969,7 +1970,7 @@ GuacUI.Client.attach = function(guac) {
         }
 
         // Display the text that was sent
-        var notify_sent = GuacUI.createChildElement(GuacUI.Client.text_input, "div", "sent-text");
+        var notify_sent = GuacUI.createChildElement(GuacUI.Client.sent_history, "div", "sent-text");
         notify_sent.textContent = sent_text;
 
         // Remove text after one second
diff --git a/guacamole/src/main/webapp/styles/client.css b/guacamole/src/main/webapp/styles/client.css
index 5e417522a..0b9733e96 100644
--- a/guacamole/src/main/webapp/styles/client.css
+++ b/guacamole/src/main/webapp/styles/client.css
@@ -679,46 +679,34 @@ p.hint {
     font-size: 2em;
 }
 
-/**
- * off-to-the-ether: Move away and disappear
- */
-@keyframes off-to-the-ether {
-    from { left: 0;      opacity: 1; }
-    to   { left: -200px; opacity: 0; }
-}
-@-moz-keyframes off-to-the-ether {
-    from { left: 0;      opacity: 1; }
-    to   { left: -200px; opacity: 0; }
-}
-@-webkit-keyframes off-to-the-ether {
-    from { left: 0;      opacity: 1; }
-    to   { left: -200px; opacity: 0; }
-}
-
 #text-input {
     display: none;
     position: fixed;
     left: 0;
     bottom: 0;
     width: 100%;
+
+    border-top: 1px solid rgba(0, 0, 0, 0.5);
+    background: #CDA;
+
 }
 
 #target {
 
     border: none;
     border-radius: 0;
-    border-top: 1px solid rgba(0, 0, 0, 0.5);
 
     display: inline-block;
     vertical-align: bottom;
-    text-align: center;
     font-size: 12pt;
-    width: 100%;
+    width: 50%;
     height: auto;
     resize: none;
+    outline: none;
 
     margin: 0;
     padding: 0.25em;
+    padding-left: 0;
     opacity: 0.75;
     background: #CDA;
 
@@ -728,18 +716,22 @@ p.hint {
     display: block;
 }
 
-#text-input .sent-text {
-    position: absolute;
-    bottom: 0;
-    left: -200px;
-    width: 100%;
-    white-space: pre;
-    animation: off-to-the-ether 1s linear;
-    -webkit-animation: off-to-the-ether 1s linear;
-    opacity: 0;
-    text-align: center;
-    font-size: 12pt;
+#sent-history {
+    display: inline-block;
+    vertical-align: bottom;
     padding: 0.25em;
+    padding-right: 0;
+}
+
+#sent-history .sent-text {
+    display: inline-block;
+    vertical-align: bottom;
+    white-space: pre;
+    font-size: 12pt;
+
+    animation: fadeout 1s linear;
+    -webkit-animation: fadeout 1s linear;
+    opacity: 0;
 }
 
 .notification.message {