From 57e8a570680e19d54922790499870725d1d4dd02 Mon Sep 17 00:00:00 2001
From: Michael Jumper <mike.jumper@guac-dev.org>
Date: Wed, 23 Apr 2014 14:12:43 -0700
Subject: [PATCH] GUAC-326: Add illustration. Fix labels.

---
 guacamole/src/main/webapp/client.xhtml           |  10 ++++++----
 .../main/webapp/images/settings/tablet-keys.png  | Bin 0 -> 3175 bytes
 guacamole/src/main/webapp/styles/client.css      |  10 ++++++++++
 3 files changed, 16 insertions(+), 4 deletions(-)
 create mode 100644 guacamole/src/main/webapp/images/settings/tablet-keys.png

diff --git a/guacamole/src/main/webapp/client.xhtml b/guacamole/src/main/webapp/client.xhtml
index 980ccfad2..b9241354b 100644
--- a/guacamole/src/main/webapp/client.xhtml
+++ b/guacamole/src/main/webapp/client.xhtml
@@ -67,21 +67,23 @@
 
                 <!-- No IME -->
                 <div class="choice">
-                    <input name="input-method" type="radio" value="ime-none" checked="checked" id="ime-none"/> None
+                    <label><input name="input-method" type="radio" value="ime-none" checked="checked" id="ime-none"/> None</label>
                     <p class="caption"><label for="ime-none">No input method is used. Keyboard input is accepted from
                             a connected, physical keyboard.</label></p>
                 </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
+                    <div class="figure"><label for="ime-text"><img src="images/settings/tablet-keys.png" alt=""/></label></div>
+                    <label><input name="input-method" type="radio" value="ime-text" id="ime-text"/> Text input</label>
+                    <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
+                    <label><input name="input-method" type="radio" value="ime-osk" id="ime-osk"/> On-screen keyboard</label>
                     <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>
diff --git a/guacamole/src/main/webapp/images/settings/tablet-keys.png b/guacamole/src/main/webapp/images/settings/tablet-keys.png
new file mode 100644
index 0000000000000000000000000000000000000000..14eb5777e737c6d8290f31b7bd16efb343f5c516
GIT binary patch
literal 3175
zcmeHKiC0rs8h=y^iU`Dxpn%YZ7K?hM2t@=WEe4S#P{9-_#jr<Z39=YuNt~h7M=9VG
zl(Lz&3@%}pB|;>@5@9T8M3k^4fus;2CNYJOKnTnY?HSviPG|mrdFQ;7bMMW!+~4>6
zmY4UDzt>iMGkpkxwt62!2SSieBzR3X>4Kfo7XMA)XJd+o_lZs5$=VbRgZ1X5V<9OJ
z^p_s(tFt``;{i5zrh1-C4I;#*5+jmhAR>{t|4d?BN>oHr%zi>LzC!9|20>eX^hSSp
zBE3?=WyehrNqusq()G5N<-RK?J~4wan@VazisQUHAGBXS;=S3|cidN&yK2|5Z{dj)
zciBTfQ-037*reU|P+LTt&$s@9uUOvj_6H7T-t(G;%h+-&v(e$_Vx^Zuk=_oIxP>Q|
z6fY|ud>MP)wua?~8FEC(t6^0SVP&bRgAaXxW*tXoSs<7&Oeqaq6}E0UxI6dGneqtq
z%0A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

literal 0
HcmV?d00001

diff --git a/guacamole/src/main/webapp/styles/client.css b/guacamole/src/main/webapp/styles/client.css
index da3b01e41..dec924d57 100644
--- a/guacamole/src/main/webapp/styles/client.css
+++ b/guacamole/src/main/webapp/styles/client.css
@@ -633,6 +633,16 @@ p.hint {
 
 }
 
+#keyboard-settings .figure {
+    float: right;
+    max-width: 30%;
+    margin: 1em;
+}
+
+#keyboard-settings .figure img {
+    max-width: 100%;
+}
+
 #target {
     position: fixed;
     left: 0;