GUAC-685: Align typing to the left, just fade out as text is sent.

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>
 

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

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 {