diff --git a/guacamole/src/main/webapp/client.xhtml b/guacamole/src/main/webapp/client.xhtml index f0eb0bfc0..ab81c345f 100644 --- a/guacamole/src/main/webapp/client.xhtml +++ b/guacamole/src/main/webapp/client.xhtml @@ -39,9 +39,6 @@
- - -
@@ -50,6 +47,9 @@
+ +
+
diff --git a/guacamole/src/main/webapp/scripts/client-ui.js b/guacamole/src/main/webapp/scripts/client-ui.js index 9cd5ee66f..21a60089d 100644 --- a/guacamole/src/main/webapp/scripts/client-ui.js +++ b/guacamole/src/main/webapp/scripts/client-ui.js @@ -206,6 +206,7 @@ GuacUI.Client = { "display" : document.getElementById("display"), "notification_area" : document.getElementById("notificationArea"), "target" : document.getElementById("target"), + "text_input" : document.getElementById("text-input"), /* Menu */ @@ -245,7 +246,6 @@ GuacUI.Client = { /* Text input */ - "ime_expected" : false, "ime_enabled" : false, /* Clipboard */ @@ -859,6 +859,24 @@ GuacUI.Client.showMenu = function(shown) { GuacUI.Client.menu.className = "open"; }; +/** + * Sets whether the text input box is currently visible. + * + * @param {Boolean} [shown] Whether the text input box should be shown. If + * omitted, this function will cause the menu to be + * shown by default. + */ +GuacUI.Client.showTextInput = function(shown) { + if (shown === false) { + GuacUI.Client.text_input.className = "closed"; + GuacUI.Client.target.blur(); + } + else { + GuacUI.Client.text_input.className = "open"; + GuacUI.Client.target.focus(); + } +}; + /** * Returns whether the menu is currently shown. * @@ -1832,44 +1850,23 @@ GuacUI.Client.attach = function(guac) { GuacUI.Client.ime_none_radio.onclick = GuacUI.Client.ime_none_radio.onchange = function() { - - if (GuacUI.Client.ime_enabled) { - GuacUI.Client.ime_expected = false; - __ime_notify_changed(false); - GuacUI.Client.target.blur(); - } - + GuacUI.Client.showTextInput(false); GuacUI.Client.OnScreenKeyboard.hide(); GuacUI.Client.showMenu(false); - }; GuacUI.Client.ime_text_radio.onclick = GuacUI.Client.ime_text_radio.onchange = function() { - - if (!GuacUI.Client.ime_enabled) { - GuacUI.Client.ime_expected = true; - __ime_notify_changed(true); - GuacUI.Client.target.focus(); - } - + GuacUI.Client.showTextInput(true); GuacUI.Client.OnScreenKeyboard.hide(); GuacUI.Client.showMenu(false); - }; GuacUI.Client.ime_osk_radio.onclick = GuacUI.Client.ime_osk_radio.onchange = function() { - - if (GuacUI.Client.ime_enabled) { - GuacUI.Client.ime_expected = false; - __ime_notify_changed(false); - GuacUI.Client.target.blur(); - } - + GuacUI.Client.showTextInput(false); GuacUI.Client.OnScreenKeyboard.show(); GuacUI.Client.showMenu(false); - }; /* @@ -1918,58 +1915,18 @@ GuacUI.Client.attach = function(guac) { } - var ime_notify_enabled = null; - var ime_notify_timeout = null; - - function __ime_notify_changed(new_state) { - - if (ime_notify_enabled === null) - ime_notify_enabled = new_state; - - window.clearTimeout(ime_notify_timeout); - ime_notify_timeout = window.setTimeout(function() { - - // Only notify if state changed successfully - if (ime_notify_enabled === GuacUI.Client.ime_enabled) { - if (GuacUI.Client.ime_enabled) - GuacUI.Client.showNotification("Text input mode ON"); - else - GuacUI.Client.showNotification("Text input mode OFF"); - } - - // Reset for next change - ime_notify_enabled = null; - - }, 100); - - } - GuacUI.Client.target.onfocus = function() { - // Acknowledge and synchronize state change - GuacUI.Client.OnScreenKeyboard.hide(); - GuacUI.Client.ime_text_radio.checked = true; GuacUI.Client.ime_enabled = true; // Reset content GuacUI.Client.target.value = new Array(257).join("\u200B"); GuacUI.Client.target.setSelectionRange(128, 128); - // Notify of change after it settles - __ime_notify_changed(true); - }; GuacUI.Client.target.onblur = function() { - - // Acknowledge and synchronize state change - GuacUI.Client.OnScreenKeyboard.hide(); - GuacUI.Client.ime_none_radio.checked = true; GuacUI.Client.ime_enabled = false; - - // Notify of change after it settles - __ime_notify_changed(false); - }; GuacUI.Client.target.addEventListener("input", function(e) { diff --git a/guacamole/src/main/webapp/styles/client.css b/guacamole/src/main/webapp/styles/client.css index b39cdb790..0c07edc7f 100644 --- a/guacamole/src/main/webapp/styles/client.css +++ b/guacamole/src/main/webapp/styles/client.css @@ -679,13 +679,35 @@ p.hint { font-size: 2em; } -#target { +#text-input { + display: none; position: fixed; left: 0; - top: 0; - right: 0; bottom: 0; - opacity: 0; + width: 100%; +} + +#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; + width: 100%; + height: auto; + resize: none; + + margin: 0; + opacity: 0.75; + background: #CDA; + +} + +#text-input.open { + display: block; } .notification.message { diff --git a/guacamole/src/main/webapp/styles/ui.css b/guacamole/src/main/webapp/styles/ui.css index da3056601..59f3b28b7 100644 --- a/guacamole/src/main/webapp/styles/ui.css +++ b/guacamole/src/main/webapp/styles/ui.css @@ -24,6 +24,9 @@ * { -webkit-tap-highlight-color: rgba(0,0,0,0); + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } input[type=checkbox], input[type=number], input[type=text], input[type=radio], label, textarea {