From 0beb9165f4f9bbd9e3c81aa40775d9329433fb14 Mon Sep 17 00:00:00 2001
From: Michael Jumper <zhangmaike@users.sourceforge.net>
Date: Mon, 23 Jan 2012 10:05:01 -0800
Subject: [PATCH] Experimental mobile-friendly keyboard layout.

---
 .../webapp/layouts/en-us-qwerty-mobile.xml    | 308 ++++++++++++++++++
 .../src/main/webapp/scripts/interface.js      |   7 +-
 guacamole/src/main/webapp/styles/client.css   |   4 +
 guacamole/src/main/webapp/styles/keyboard.css |  18 +-
 4 files changed, 332 insertions(+), 5 deletions(-)
 create mode 100644 guacamole/src/main/webapp/layouts/en-us-qwerty-mobile.xml

diff --git a/guacamole/src/main/webapp/layouts/en-us-qwerty-mobile.xml b/guacamole/src/main/webapp/layouts/en-us-qwerty-mobile.xml
new file mode 100644
index 000000000..711531bd2
--- /dev/null
+++ b/guacamole/src/main/webapp/layouts/en-us-qwerty-mobile.xml
@@ -0,0 +1,308 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<!--
+    Guacamole - Clientless Remote Desktop
+    Copyright (C) 2010  Michael Jumper
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<keyboard lang="en_US" layout="qwerty" size="16.3">
+    <row>
+        <key size="1.5">
+            <cap keysym="0xFF09">Tab</cap>
+        </key>
+        <gap size="0.1"/>
+        <key>
+            <cap>q</cap>
+            <cap if="numsym">1</cap>
+            <cap if="shift">Q</cap>
+            <cap if="numsym,shift">q</cap>
+        </key>
+        <gap size="0.1"/>
+        <key>
+            <cap>w</cap>
+            <cap if="numsym">2</cap>
+            <cap if="shift">W</cap>
+            <cap if="numsym,shift">w</cap>
+        </key>
+        <gap size="0.1"/>
+        <key>
+            <cap>e</cap>
+            <cap if="numsym">3</cap>
+            <cap if="shift">E</cap>
+            <cap if="numsym,shift">e</cap>
+        </key>
+        <gap size="0.1"/>
+        <key>
+            <cap>r</cap>
+            <cap if="numsym">4</cap>
+            <cap if="shift">R</cap>
+            <cap if="numsym,shift">r</cap>
+        </key>
+        <gap size="0.1"/>
+        <key>
+            <cap>t</cap>
+            <cap if="numsym">5</cap>
+            <cap if="shift">T</cap>
+            <cap if="numsym,shift">t</cap>
+        </key>
+        <gap size="0.1"/>
+        <key>
+            <cap>y</cap>
+            <cap if="numsym">6</cap>
+            <cap if="shift">Y</cap>
+            <cap if="numsym,shift">y</cap>
+        </key>
+        <gap size="0.1"/>
+        <key>
+            <cap>u</cap>
+            <cap if="numsym">7</cap>
+            <cap if="shift">U</cap>
+            <cap if="numsym,shift">u</cap>
+        </key>
+        <gap size="0.1"/>
+        <key>
+            <cap>i</cap>
+            <cap if="numsym">8</cap>
+            <cap if="shift">I</cap>
+            <cap if="numsym,shift">i</cap>
+        </key>
+        <gap size="0.1"/>
+        <key>
+            <cap>o</cap>
+            <cap if="numsym">9</cap>
+            <cap if="shift">O</cap>
+            <cap if="numsym,shift">o</cap>
+        </key>
+        <gap size="0.1"/>
+        <key>
+            <cap>p</cap>
+            <cap if="numsym">0</cap>
+            <cap if="shift">P</cap>
+            <cap if="numsym,shift">p</cap>
+        </key>
+        <gap size="0.1"/>
+        <key>
+            <cap>[</cap>
+            <cap if="shift">{</cap>
+        </key>
+        <gap size="0.1"/>
+        <key>
+            <cap>]</cap>
+            <cap if="shift">}</cap>
+        </key>
+        <gap size="0.1"/>
+        <key size="1.5">
+            <cap keysym="0xFF08">Back</cap>
+        </key>
+    </row>
+
+    <row><gap size="0.1"/></row>
+
+    <row>
+        <key size="1.85">
+            <cap modifier="numsym" sticky="true">?123</cap>
+        </key>
+        <gap size="0.1"/>
+        <key>
+            <cap>a</cap>
+            <cap if="numsym">#</cap>
+            <cap if="shift">A</cap>
+            <cap if="numsym,shift">a</cap>
+        </key>
+        <gap size="0.1"/>
+        <key>
+            <cap>s</cap>
+            <cap if="numsym">$</cap>
+            <cap if="shift">S</cap>
+            <cap if="numsym,shift">s</cap>
+        </key>
+        <gap size="0.1"/>
+        <key>
+            <cap>d</cap>
+            <cap if="numsym">%</cap>
+            <cap if="shift">D</cap>
+            <cap if="numsym,shift">d</cap>
+        </key>
+        <gap size="0.1"/>
+        <key>
+            <cap>f</cap>
+            <cap if="numsym">&amp;</cap>
+            <cap if="shift">F</cap>
+            <cap if="numsym,shift">f</cap>
+        </key>
+        <gap size="0.1"/>
+        <key>
+            <cap>g</cap>
+            <cap if="numsym">*</cap>
+            <cap if="shift">G</cap>
+            <cap if="numsym,shift">g</cap>
+        </key>
+        <gap size="0.1"/>
+        <key>
+            <cap>h</cap>
+            <cap if="numsym">-</cap>
+            <cap if="shift">H</cap>
+            <cap if="numsym,shift">h</cap>
+        </key>
+        <gap size="0.1"/>
+        <key>
+            <cap>j</cap>
+            <cap if="numsym">+</cap>
+            <cap if="shift">J</cap>
+            <cap if="numsym,shift">j</cap>
+        </key>
+        <gap size="0.1"/>
+        <key>
+            <cap>k</cap>
+            <cap if="numsym">(</cap>
+            <cap if="shift">K</cap>
+            <cap if="numsym,shift">k</cap>
+        </key>
+        <gap size="0.1"/>
+        <key>
+            <cap>l</cap>
+            <cap if="numsym">)</cap>
+            <cap if="shift">L</cap>
+            <cap if="numsym,shift">l</cap>
+        </key>
+        <gap size="0.1"/>
+        <key>
+            <cap>;</cap>
+            <cap if="shift">:</cap>
+        </key>
+        <gap size="0.1"/>
+        <key>
+            <cap>'</cap>
+            <cap if="shift">"</cap>
+        </key>
+        <gap size="0.1"/>
+        <key size="2.25">
+            <cap keysym="0xFF0D">Enter</cap>
+        </key>
+    </row>
+
+    <row><gap size="0.1"/></row>
+
+    <row>
+        <key size="2.1">
+            <cap modifier="shift" keysym="0xFFE1">Shift</cap>
+        </key>
+        <gap size="0.1"/>
+        <key>
+            <cap>z</cap>
+            <cap if="numsym">&lt;</cap>
+            <cap if="shift">Z</cap>
+            <cap if="numsym,shift">z</cap>
+        </key>
+        <gap size="0.1"/>
+        <key>
+            <cap>x</cap>
+            <cap if="numsym">&gt;</cap>
+            <cap if="shift">X</cap>
+            <cap if="numsym,shift">x</cap>
+        </key>
+        <gap size="0.1"/>
+        <key>
+            <cap>c</cap>
+            <cap if="numsym">=</cap>
+            <cap if="shift">C</cap>
+            <cap if="numsym,shift">c</cap>
+        </key>
+        <gap size="0.1"/>
+        <key>
+            <cap>v</cap>
+            <cap if="numsym">'</cap>
+            <cap if="shift">V</cap>
+            <cap if="numsym,shift">v</cap>
+        </key>
+        <gap size="0.1"/>
+        <key>
+            <cap>b</cap>
+            <cap if="numsym">;</cap>
+            <cap if="shift">B</cap>
+            <cap if="numsym,shift">b</cap>
+        </key>
+        <gap size="0.1"/>
+        <key>
+            <cap>n</cap>
+            <cap if="numsym">,</cap>
+            <cap if="shift">N</cap>
+            <cap if="numsym,shift">n</cap>
+        </key>
+        <gap size="0.1"/>
+        <key>
+            <cap>m</cap>
+            <cap if="numsym">.</cap>
+            <cap if="shift">M</cap>
+            <cap if="numsym,shift">m</cap>
+        </key>
+        <gap size="0.1"/>
+        <key>
+            <cap>,</cap>
+            <cap if="numsym">!</cap>
+            <cap if="shift">!</cap>
+            <cap if="numsym,shift">!</cap>
+        </key>
+        <gap size="0.1"/>
+        <key>
+            <cap>.</cap>
+            <cap if="numsym">?</cap>
+            <cap if="shift">?</cap>
+            <cap if="numsym,shift">?</cap>
+        </key>
+        <gap size="0.1"/>
+        <key>
+            <cap>/</cap>
+            <cap if="shift">?</cap>
+        </key>
+        <gap size="0.1"/>
+        <key size="3.1">
+            <cap modifier="shift" keysym="0xFFE2">Shift</cap>
+        </key>
+    </row>
+
+    <row><gap size="0.1"/></row>
+
+    <row>
+        <key size="1.6">
+            <cap modifier="control" keysym="0xFFE3">Ctrl</cap>
+        </key>
+        <gap size="0.1"/>
+        <key size="1.6">
+            <cap modifier="super" keysym="0xFFEB">Super</cap>
+        </key>
+        <gap size="0.1"/>
+        <key size="1.6">
+            <cap modifier="alt" keysym="0xFFE9">Alt</cap>
+        </key>
+        <gap size="0.1"/>
+        <key size="6.1">
+            <cap> </cap>
+        </key>
+        <gap size="0.1"/>
+        <key size="1.6">
+            <cap modifier="alt" keysym="0xFFE3">Alt</cap>
+        </key>
+        <gap size="0.1"/>
+        <key size="1.6">
+            <cap modifier="super" keysym="0xFF67">Menu</cap>
+        </key>
+        <gap size="0.1"/>
+        <key size="1.6">
+            <cap modifier="control" keysym="0xFFE4">Ctrl</cap>
+        </key>
+    </row>
+</keyboard>
diff --git a/guacamole/src/main/webapp/scripts/interface.js b/guacamole/src/main/webapp/scripts/interface.js
index 55d4f9e1c..e18f524b3 100644
--- a/guacamole/src/main/webapp/scripts/interface.js
+++ b/guacamole/src/main/webapp/scripts/interface.js
@@ -233,8 +233,13 @@ var GuacamoleUI = {
         window.location.reload();
     };
 
+    GuacamoleUI.display.onclick = function(e) {
+        e.preventDefault();
+        return false;
+    };
+
     // On-screen keyboard
-    GuacamoleUI.keyboard = new Guacamole.OnScreenKeyboard("layouts/en-us-qwerty.xml");
+    GuacamoleUI.keyboard = new Guacamole.OnScreenKeyboard("layouts/en-us-qwerty-mobile.xml");
     GuacamoleUI.containers.keyboard.appendChild(GuacamoleUI.keyboard.getElement());
 
     // Function for automatically updating keyboard size
diff --git a/guacamole/src/main/webapp/styles/client.css b/guacamole/src/main/webapp/styles/client.css
index f853effa3..d2a79f354 100644
--- a/guacamole/src/main/webapp/styles/client.css
+++ b/guacamole/src/main/webapp/styles/client.css
@@ -24,6 +24,10 @@ body {
     margin: 0;
 }
 
+* {
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
+}
+
 div.errorDialogOuter {
     display: table;
     height: 100%;
diff --git a/guacamole/src/main/webapp/styles/keyboard.css b/guacamole/src/main/webapp/styles/keyboard.css
index 1d007448f..657317925 100644
--- a/guacamole/src/main/webapp/styles/keyboard.css
+++ b/guacamole/src/main/webapp/styles/keyboard.css
@@ -70,17 +70,20 @@
 }
 
 .guac-keyboard .guac-keyboard-key:hover .guac-keyboard-cap {
-    background: #666;
-    border-color: #666;
     cursor: pointer;
 }
 
-.guac-keyboard .guac-keyboard-key.pressed:hover .guac-keyboard-cap {
+.guac-keyboard .guac-keyboard-key.highlight .guac-keyboard-cap {
+    background: #666;
+    border-color: #666;
+}
+
+.guac-keyboard .guac-keyboard-key.guac-keyboard-pressed .guac-keyboard-cap {
     background: #822;
     border-color: #D44;
 }
 
-.guac-keyboard .guac-keyboard-key.active:hover .guac-keyboard-cap {
+.guac-keyboard .guac-keyboard-key.guac-keyboard-active .guac-keyboard-cap {
     background: #882;
     border-color: #DD4;
 }
@@ -103,6 +106,9 @@
 .guac-keyboard:not(.guac-keyboard-modifier-caps)
 .guac-keyboard-cap.guac-keyboard-requires-caps,
 
+.guac-keyboard:not(.guac-keyboard-modifier-numsym)
+.guac-keyboard-cap.guac-keyboard-requires-numsym,
+
 .guac-keyboard:not(.guac-keyboard-modifier-shift)
 .guac-keyboard-cap.guac-keyboard-requires-shift,
 
@@ -112,6 +118,10 @@
 .guac-keyboard-key.guac-keyboard-uses-shift
 .guac-keyboard-cap:not(.guac-keyboard-requires-shift),
 
+.guac-keyboard.guac-keyboard-modifier-numsym
+.guac-keyboard-key.guac-keyboard-uses-numsym
+.guac-keyboard-cap:not(.guac-keyboard-requires-numsym),
+
 .guac-keyboard.guac-keyboard-modifier-caps
 .guac-keyboard-key.guac-keyboard-uses-caps
 .guac-keyboard-cap:not(.guac-keyboard-requires-caps) {