safebox/guacamole-client
4
0
Fork 0
mirror of https://github.com/gyurix1968/guacamole-client.git synced 2025-09-06 21:27:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

GUAC-326: Add event target. Add placeholder input method radio buttons. Add more menu styling.

Browse Source
This commit is contained in:
Michael Jumper
2014-04-22 15:34:47 -07:00
parent b98302f911
commit 6c917360cf
3 changed files with 94 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
guacamole/src/main/webapp/client.xhtml
View File

@@ -37,14 +37,19 @@
<body> <body>
<!-- Display -->
<div id="main"> <div id="main">
<!-- Event target -->
<textarea id="target"></textarea>
<!-- Display -->
<div class="displayOuter"> <div class="displayOuter">
<div class="displayMiddle"> <div class="displayMiddle">
<div id="display"> <div id="display">
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- Dimensional clone of viewport --> <!-- Dimensional clone of viewport -->
@@ -57,35 +62,61 @@
<div id="menu"> <div id="menu">
<h2 id="menu-title">Guacamole ${project.version}</h2> <h2 id="menu-title">Guacamole ${project.version}</h2>
<div class="content"> <h3>Input method</h3>
<h3>Clipboard</h3> <div class="content" id="keyboard-settings">
<div id="clipboardDiv">
<p>Text copied/cut within Guacamole will appear here. Changes to the text below will affect the remote clipboard.</p> <!-- No IME -->
<textarea rows="10" cols="40" id="clipboard"></textarea> <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> </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> </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>
</div> </div>
@@ -115,7 +146,7 @@
// Start connect after control returns from onload (allow browser // Start connect after control returns from onload (allow browser
// to consider the page loaded). // to consider the page loaded).
window.onload = function() { window.onload = function() {
window.setTimeout(GuacUI.Client.connect, 0); window.setTimeout(GuacUI.Client.connect, 10);
}; };
/* ]]> */ </script> /* ]]> */ </script>

1
guacamole/src/main/webapp/scripts/client-ui.js
View File

@@ -223,6 +223,7 @@ GuacUI.Client = {
"menu" : document.getElementById("menu"), "menu" : document.getElementById("menu"),
"menu_title" : document.getElementById("menu-title"), "menu_title" : document.getElementById("menu-title"),
"display" : document.getElementById("display"), "display" : document.getElementById("display"),
"target" : document.getElementById("target"),
"clipboard" : document.getElementById("clipboard"), "clipboard" : document.getElementById("clipboard"),
"relative_radio" : document.getElementById("relative"), "relative_radio" : document.getElementById("relative"),
"absolute_radio" : document.getElementById("absolute"), "absolute_radio" : document.getElementById("absolute"),

40
guacamole/src/main/webapp/styles/client.css
View File

@@ -549,6 +549,10 @@ p.hint {
padding: 1em; padding: 1em;
} }
#menu .content > * {
margin: 1em 0;
}
#menu, #menu.closed { #menu, #menu.closed {
left: -480px; left: -480px;
opacity: 0; opacity: 0;
@@ -577,12 +581,7 @@ p.hint {
-webkit-animation-duration: 0.05s; -webkit-animation-duration: 0.05s;
} }
div#mouse-settings, #clipboard-settings textarea {
div#clipboardDiv {
padding: 0;
}
#clipboardDiv textarea {
width: 100%; width: 100%;
border: 1px solid #AAA; border: 1px solid #AAA;
-moz-border-radius: 0.25em; -moz-border-radius: 0.25em;
@@ -590,6 +589,7 @@ div#clipboardDiv {
-khtml-border-radius: 0.25em; -khtml-border-radius: 0.25em;
border-radius: 0.25em; border-radius: 0.25em;
white-space: pre; white-space: pre;
display: block;
} }
#mouse-settings .choice { #mouse-settings .choice {
@@ -602,6 +602,12 @@ div#clipboardDiv {
max-width: 80%; max-width: 80%;
} }
#keyboard-settings .caption {
font-size: 0.9em;
margin-left: 2em;
margin-right: 2em;
}
#mouse-settings .figure .caption { #mouse-settings .figure .caption {
text-align: center; text-align: center;
font-size: 0.9em; font-size: 0.9em;
@@ -611,4 +617,26 @@ div#clipboardDiv {
display: block; display: block;
max-width: 100%; max-width: 100%;
margin: 1em auto; 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;
} }