safebox/guacamole-client
4
0
Fork 0
mirror of https://github.com/gyurix1968/guacamole-client.git synced 2025-10-31 00:53:21 +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>
<!-- 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>

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

@@ -207,6 +207,7 @@ GuacUI.Client = {
"notification_area" : document.getElementById("notificationArea"),
"target" : document.getElementById("target"),
"text_input" : document.getElementById("text-input"),
"sent_history" : document.getElementById("sent-history"),
/* Menu */
@@ -1969,7 +1970,7 @@ GuacUI.Client.attach = function(guac) {
}
// 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;
// Remove text after one second

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

@@ -679,46 +679,34 @@ p.hint {
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 {
display: none;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
border-top: 1px solid rgba(0, 0, 0, 0.5);
background: #CDA;
}
#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;
font-size: 12pt;
width: 100%;
width: 50%;
height: auto;
resize: none;
outline: none;
margin: 0;
padding: 0.25em;
padding-left: 0;
opacity: 0.75;
background: #CDA;
@@ -728,18 +716,22 @@ p.hint {
display: block;
}
#text-input .sent-text {
position: absolute;
bottom: 0;
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;
#sent-history {
display: inline-block;
vertical-align: bottom;
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 {