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

GUAC-685: Align typing to the left, just fade out as text is sent.

Browse Source
This commit is contained in:
Michael Jumper
2014-05-14 17:06:29 -07:00
parent fb610813bf
commit 8d54118cb7
3 changed files with 25 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -48,7 +48,7 @@
</div> </div>
<!-- Text input target --> <!-- Text input target -->
<div id="text-input"><textarea rows="1" id="target"></textarea><div id="sent-overlay"></div></div> <div id="text-input"><div id="sent-history"></div><textarea rows="1" id="target"></textarea></div>
</div> </div>

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

@@ -207,6 +207,7 @@ GuacUI.Client = {
"notification_area" : document.getElementById("notificationArea"), "notification_area" : document.getElementById("notificationArea"),
"target" : document.getElementById("target"), "target" : document.getElementById("target"),
"text_input" : document.getElementById("text-input"), "text_input" : document.getElementById("text-input"),
"sent_history" : document.getElementById("sent-history"),
/* Menu */ /* Menu */
@@ -1969,7 +1970,7 @@ GuacUI.Client.attach = function(guac) {
} }
// Display the text that was sent // Display the text that was sent
var notify_sent = GuacUI.createChildElement(GuacUI.Client.text_input, "div", "sent-text"); var notify_sent = GuacUI.createChildElement(GuacUI.Client.sent_history, "div", "sent-text");
notify_sent.textContent = sent_text; notify_sent.textContent = sent_text;
// Remove text after one second // Remove text after one second

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

@@ -679,46 +679,34 @@ p.hint {
font-size: 2em; font-size: 2em;
} }
/**
* off-to-the-ether: Move away and disappear
*/
@keyframes off-to-the-ether {
from { left: 0; opacity: 1; }
to { left: -200px; opacity: 0; }
}
@-moz-keyframes off-to-the-ether {
from { left: 0; opacity: 1; }
to { left: -200px; opacity: 0; }
}
@-webkit-keyframes off-to-the-ether {
from { left: 0; opacity: 1; }
to { left: -200px; opacity: 0; }
}
#text-input { #text-input {
display: none; display: none;
position: fixed; position: fixed;
left: 0; left: 0;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
border-top: 1px solid rgba(0, 0, 0, 0.5);
background: #CDA;
} }
#target { #target {
border: none; border: none;
border-radius: 0; border-radius: 0;
border-top: 1px solid rgba(0, 0, 0, 0.5);
display: inline-block; display: inline-block;
vertical-align: bottom; vertical-align: bottom;
text-align: center;
font-size: 12pt; font-size: 12pt;
width: 100%; width: 50%;
height: auto; height: auto;
resize: none; resize: none;
outline: none;
margin: 0; margin: 0;
padding: 0.25em; padding: 0.25em;
padding-left: 0;
opacity: 0.75; opacity: 0.75;
background: #CDA; background: #CDA;
@@ -728,18 +716,22 @@ p.hint {
display: block; display: block;
} }
#text-input .sent-text { #sent-history {
position: absolute; display: inline-block;
bottom: 0; vertical-align: bottom;
left: -200px;
width: 100%;
white-space: pre;
animation: off-to-the-ether 1s linear;
-webkit-animation: off-to-the-ether 1s linear;
opacity: 0;
text-align: center;
font-size: 12pt;
padding: 0.25em; padding: 0.25em;
padding-right: 0;
}
#sent-history .sent-text {
display: inline-block;
vertical-align: bottom;
white-space: pre;
font-size: 12pt;
animation: fadeout 1s linear;
-webkit-animation: fadeout 1s linear;
opacity: 0;
} }
.notification.message { .notification.message {