From 6c917360cf20b594389d289991626b2ce751a607 Mon Sep 17 00:00:00 2001
From: Michael Jumper <mike.jumper@guac-dev.org>
Date: Tue, 22 Apr 2014 15:34:47 -0700
Subject: [PATCH] GUAC-326: Add event target. Add placeholder input method
 radio buttons. Add more menu styling.

---
 guacamole/src/main/webapp/client.xhtml        | 87 +++++++++++++------
 .../src/main/webapp/scripts/client-ui.js      |  1 +
 guacamole/src/main/webapp/styles/client.css   | 40 +++++++--
 3 files changed, 94 insertions(+), 34 deletions(-)
diff --git a/guacamole/src/main/webapp/client.xhtml b/guacamole/src/main/webapp/client.xhtml
index 1667a4bae..980ccfad2 100644
--- a/guacamole/src/main/webapp/client.xhtml
+++ b/guacamole/src/main/webapp/client.xhtml
@@ -37,14 +37,19 @@
 
     <body>
 
-        <!-- Display -->
         <div id="main">
+
+            <!-- Event target -->
+            <textarea id="target"></textarea>
+            
+            <!-- Display -->
             <div class="displayOuter">
                 <div class="displayMiddle">
                     <div id="display">
                     </div>
                 </div>
             </div>
+
         </div>
 
         <!-- Dimensional clone of viewport -->
@@ -57,35 +62,61 @@
         <div id="menu">
             <h2 id="menu-title">Guacamole ${project.version}</h2>
 
-            <div class="content">
-                <h3>Clipboard</h3>
-                <div id="clipboardDiv">
-                    <p>Text copied/cut within Guacamole will appear here. Changes to the text below will affect the remote clipboard.</p>
-                    <textarea rows="10" cols="40" id="clipboard"></textarea>
+            <h3>Input method</h3>
+            <div class="content" id="keyboard-settings">
+
+                <!-- No IME -->
+                <div class="choice">
+                    <input name="input-method" type="radio" value="ime-none" checked="checked" id="ime-none"/> None
+                    <p class="caption"><label for="ime-none">No input method is used. Keyboard input is accepted from
+                            a connected, physical keyboard.</label></p>
                 </div>
-                <h3>Mouse emulation mode</h3>
-                <div id="mouse-settings">
-                    <p>Determines how the remote mouse behaves with respect to touches.</p>
-
-                    <!-- Touchscreen -->
-                    <div class="choice">
-                        <input name="mouse-mode" type="radio" value="absolute" checked="checked" id="absolute"/>
-                        <div class="figure">
-                            <label for="absolute"><img src="images/settings/touchscreen.png" alt=""/></label>
-                            <p class="caption"><label for="absolute">Tap to click. The click occurs at the location of the touch.</label></p>
-                        </div>
-                    </div>
-
-                    <!-- Touchpad -->
-                    <div class="choice">
-                        <input name="mouse-mode" type="radio" value="relative" id="relative"/>
-                        <div class="figure">
-                            <label for="relative"><img src="images/settings/touchpad.png" alt=""/></label>
-                            <p class="caption"><label for="relative">Drag to move the mouse pointer and tap to click. The click occurs at the location of the pointer.</label></p>
-                        </div>
-                    </div>
 
+                <!-- Text input -->
+                <div class="choice">
+                    <input name="input-method" type="radio" value="ime-text" id="ime-text"/> Text input
+                    <p class="caption"><label for="ime-text">Allow typing of text, and emulate keyboard events based on the
+                            typed text. This is necessary for devices such as mobile phones that lack a physical keyboard.</label></p>
                 </div>
+
+                <!-- Guac OSK -->
+                <div class="choice">
+                    <input name="input-method" type="radio" value="ime-osk" id="ime-osk"/> On-screen keyboard
+                    <p class="caption"><label for="ime-osk">Display and accept input from the built-in Guacamole on-screen
+                            keyboard. The on-screen keyboard allows typing of key combinations that may otherwise be impossible
+                            (such as Ctrl-Alt-Del).</label></p>
+                </div>
+
+            </div>
+
+            <h3>Clipboard</h3>
+            <div class="content" id="clipboard-settings">
+                <p class="description">Text copied/cut within Guacamole will appear here. Changes to the text below will affect the remote clipboard.</p>
+                <textarea rows="10" cols="40" id="clipboard"></textarea>
+            </div>
+
+            <h3>Mouse emulation mode</h3>
+            <div class="content" id="mouse-settings">
+                <p class="description">Determines how the remote mouse behaves with respect to touches.</p>
+
+                <!-- Touchscreen -->
+                <div class="choice">
+                    <input name="mouse-mode" type="radio" value="absolute" checked="checked" id="absolute"/>
+                    <div class="figure">
+                        <label for="absolute"><img src="images/settings/touchscreen.png" alt=""/></label>
+                        <p class="caption"><label for="absolute">Tap to click. The click occurs at the location of the touch.</label></p>
+                    </div>
+                </div>
+
+                <!-- Touchpad -->
+                <div class="choice">
+                    <input name="mouse-mode" type="radio" value="relative" id="relative"/>
+                    <div class="figure">
+                        <label for="relative"><img src="images/settings/touchpad.png" alt=""/></label>
+                        <p class="caption"><label for="relative">Drag to move the mouse pointer and tap to click. The click occurs at the location of the pointer.</label></p>
+                    </div>
+                </div>
+
             </div>
 
         </div>
@@ -115,7 +146,7 @@
             // Start connect after control returns from onload (allow browser
             // to consider the page loaded).
             window.onload = function() {
-                window.setTimeout(GuacUI.Client.connect, 0);
+                window.setTimeout(GuacUI.Client.connect, 10);
             };
 
         /* ]]> */ </script>
diff --git a/guacamole/src/main/webapp/scripts/client-ui.js b/guacamole/src/main/webapp/scripts/client-ui.js
index 5f6636d05..1e1130637 100644
--- a/guacamole/src/main/webapp/scripts/client-ui.js
+++ b/guacamole/src/main/webapp/scripts/client-ui.js
@@ -223,6 +223,7 @@ GuacUI.Client = {
     "menu"              : document.getElementById("menu"),
     "menu_title"        : document.getElementById("menu-title"),
     "display"           : document.getElementById("display"),
+    "target"            : document.getElementById("target"),
     "clipboard"         : document.getElementById("clipboard"),
     "relative_radio"    : document.getElementById("relative"),
     "absolute_radio"    : document.getElementById("absolute"),
diff --git a/guacamole/src/main/webapp/styles/client.css b/guacamole/src/main/webapp/styles/client.css
index be12d8394..064e2b9cc 100644
--- a/guacamole/src/main/webapp/styles/client.css
+++ b/guacamole/src/main/webapp/styles/client.css
@@ -549,6 +549,10 @@ p.hint {
     padding: 1em;
 }
 
+#menu .content > * {
+    margin: 1em 0;
+}
+
 #menu, #menu.closed {
     left: -480px;
     opacity: 0;
@@ -577,12 +581,7 @@ p.hint {
     -webkit-animation-duration: 0.05s;
 }
 
-div#mouse-settings,
-div#clipboardDiv {
-    padding: 0;
-}
-
-#clipboardDiv textarea {
+#clipboard-settings textarea {
     width: 100%;
     border: 1px solid #AAA;
     -moz-border-radius: 0.25em;
@@ -590,6 +589,7 @@ div#clipboardDiv {
     -khtml-border-radius: 0.25em;
     border-radius: 0.25em;
     white-space: pre;
+    display: block;
 }
 
 #mouse-settings .choice {
@@ -602,6 +602,12 @@ div#clipboardDiv {
     max-width: 80%;
 }
 
+#keyboard-settings .caption {
+    font-size: 0.9em;
+    margin-left: 2em;
+    margin-right: 2em;
+}
+
 #mouse-settings .figure .caption {
     text-align: center;
     font-size: 0.9em;
@@ -611,4 +617,26 @@ div#clipboardDiv {
     display: block;
     max-width: 100%;
     margin: 1em auto;
+}
+
+#menu h3 {
+
+    background: rgba(0, 0, 0, 0.4);
+
+    padding: 0.25em 0.5em;
+    margin: 0;
+    font-size: 1em;
+
+    color: white;
+    font-weight: bold;
+
+}
+
+#target {
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 0;
 }
\ No newline at end of file
