safebox/guacamole-client
4
0
Fork 0
mirror of https://github.com/gyurix1968/guacamole-client.git synced 2025-09-07 05:31:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

GUAC-692: Add Ctrl/Alt/Esc/Tab buttons to text input UI.

Browse Source
This commit is contained in:
Michael Jumper
2014-05-16 11:45:44 -07:00
parent 22fed8bdba
commit 7657f1a5fc
2 changed files with 37 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -50,7 +50,7 @@
</div>
<!-- Text input target -->
<div id="text-input"><div id="sent-history"></div><textarea rows="1" id="target"></textarea></div>
<div id="text-input"><div id="text-input-field"><div id="sent-history"></div><textarea rows="1" id="target"></textarea></div><div id="text-input-buttons"><button id="text-ctrl">Ctrl</button><button id="text-alt">Alt</button><button id="text-esc">Esc</button><button id="text-tab">Tab</button></div></div>
<!-- Dimensional clone of viewport -->
<div id="viewportClone"/>

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

@@ -691,15 +691,31 @@ p.hint {
}
#text-input-field,
#text-input-buttons {
width: 50%;
display: inline-block;
vertical-align: middle;
}
#text-input-field {
overflow: hidden;
white-space: nowrap;
}
#text-input-buttons {
text-align: right;
}
#target {
border: none;
border-radius: 0;
display: inline-block;
vertical-align: bottom;
vertical-align: middle;
font-size: 12pt;
width: 50%;
width: 100%;
height: auto;
resize: none;
outline: none;
@@ -718,14 +734,14 @@ p.hint {
#sent-history {
display: inline-block;
vertical-align: bottom;
vertical-align: middle;
padding: 0.25em;
padding-right: 0;
}
#sent-history .sent-text {
display: inline-block;
vertical-align: bottom;
vertical-align: baseline;
white-space: pre;
font-size: 12pt;
@@ -734,6 +750,22 @@ p.hint {
opacity: 0;
}
#text-input-buttons button {
border: 1px solid rgba(0, 0, 0, 0.5);
background: none;
color: black;
box-shadow: none;
text-shadow: none;
padding: 0.25em;
}
#text-input-buttons button:active,
#text-input-buttons button.pressed {
border: 1px solid rgba(255, 255, 255, 0.5);
background: rgba(0, 0, 0, 0.75);
color: white;
}
.notification.message {
background: #DFD;
animation: fadein 0.125s linear, fadeout 2s 3s linear;