From 7657f1a5fce077a92f93506d2ee45a4ae845aa15 Mon Sep 17 00:00:00 2001
From: Michael Jumper <mike.jumper@guac-dev.org>
Date: Fri, 16 May 2014 11:45:44 -0700
Subject: [PATCH] GUAC-692: Add Ctrl/Alt/Esc/Tab buttons to text input UI.

---
 guacamole/src/main/webapp/client.xhtml      |  2 +-
 guacamole/src/main/webapp/styles/client.css | 40 ++++++++++++++++++---
 2 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/guacamole/src/main/webapp/client.xhtml b/guacamole/src/main/webapp/client.xhtml
index 51b6877e7..d275ad882 100644
--- a/guacamole/src/main/webapp/client.xhtml
+++ b/guacamole/src/main/webapp/client.xhtml
@@ -50,7 +50,7 @@
         </div>
 
         <!-- Text input target -->
-        <div id="text-input"><div id="sent-history"></div><textarea rows="1" id="target"></textarea></div>
+        <div id="text-input"><div id="text-input-field"><div id="sent-history"></div><textarea rows="1" id="target"></textarea></div><div id="text-input-buttons"><button id="text-ctrl">Ctrl</button><button id="text-alt">Alt</button><button id="text-esc">Esc</button><button id="text-tab">Tab</button></div></div>
         
         <!-- Dimensional clone of viewport -->
         <div id="viewportClone"/>
diff --git a/guacamole/src/main/webapp/styles/client.css b/guacamole/src/main/webapp/styles/client.css
index 0b9733e96..4c0e00385 100644
--- a/guacamole/src/main/webapp/styles/client.css
+++ b/guacamole/src/main/webapp/styles/client.css
@@ -691,15 +691,31 @@ p.hint {
 
 }
 
+#text-input-field,
+#text-input-buttons {
+    width: 50%;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+#text-input-field {
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+#text-input-buttons {
+    text-align: right;
+}
+
 #target {
 
     border: none;
     border-radius: 0;
 
     display: inline-block;
-    vertical-align: bottom;
+    vertical-align: middle;
     font-size: 12pt;
-    width: 50%;
+    width: 100%;
     height: auto;
     resize: none;
     outline: none;
@@ -718,14 +734,14 @@ p.hint {
 
 #sent-history {
     display: inline-block;
-    vertical-align: bottom;
+    vertical-align: middle;
     padding: 0.25em;
     padding-right: 0;
 }
 
 #sent-history .sent-text {
     display: inline-block;
-    vertical-align: bottom;
+    vertical-align: baseline;
     white-space: pre;
     font-size: 12pt;
 
@@ -734,6 +750,22 @@ p.hint {
     opacity: 0;
 }
 
+#text-input-buttons button {
+    border: 1px solid rgba(0, 0, 0, 0.5);
+    background: none;
+    color: black;
+    box-shadow: none;
+    text-shadow: none;
+    padding: 0.25em;
+}
+
+#text-input-buttons button:active,
+#text-input-buttons button.pressed {
+    border: 1px solid rgba(255, 255, 255, 0.5);
+    background: rgba(0, 0, 0, 0.75);
+    color: white;
+}
+
 .notification.message {
     background: #DFD;
     animation: fadein 0.125s linear, fadeout 2s 3s linear;