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

GUAC-694: Do not trust fixed positioning for main display and text input UI.

Browse Source
This commit is contained in:
Michael Jumper
2014-05-16 15:36:07 -07:00
parent ef0939db06
commit afce3a363d
2 changed files with 61 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -810,8 +810,8 @@ GuacUI.Client.updateDisplayScale = function() {
// Calculate scale to fit screen // Calculate scale to fit screen
GuacUI.Client.min_zoom = Math.min( GuacUI.Client.min_zoom = Math.min(
window.innerWidth / Math.max(guac.getDisplay().getWidth(), 1), GuacUI.Client.main.offsetWidth / Math.max(guac.getDisplay().getWidth(), 1),
window.innerHeight / Math.max(guac.getDisplay().getHeight(), 1) GuacUI.Client.main.offsetHeight / Math.max(guac.getDisplay().getHeight(), 1)
); );
// Calculate appropriate maximum zoom level // Calculate appropriate maximum zoom level
@@ -1569,26 +1569,70 @@ GuacUI.Client.attach = function(guac) {
}; };
/* /*
* Send size events on resize * Reflow layout and send size events on resize/scroll
*/ */
window.onresize = function() { var last_scroll_top = 0;
var last_scroll_left = 0;
var last_width = 0;
var last_height = 0;
// Remove scrollbars during resize function __update_layout() {
GuacUI.Client.main.style.overflow = "hidden";
var pixel_density = window.devicePixelRatio || 1; // Only reflow if size or scroll have changed
var width = window.innerWidth * pixel_density; if (document.body.scrollTop != last_scroll_top
var height = window.innerHeight * pixel_density; || document.body.scrollLeft != last_scroll_left
|| window.innerWidth != last_width
|| window.innerHeight != last_height) {
GuacUI.Client.main.style.overflow = "auto"; // Reposition document such that it's back on-screen
window.scrollTo(document.body.scrollWidth, document.body.scrollHeight);
if (GuacUI.Client.attachedClient) // Determine height of bottom section (currently only text input)
GuacUI.Client.attachedClient.sendSize(width, height); var bottom = GuacUI.Client.text_input.container;
var bottom_height = (bottom && bottom.offsetHeight) | 0;
GuacUI.Client.updateDisplayScale(); // Calculate correct height of main section (display)
var main_width = window.innerWidth;
var main_height = window.innerHeight - bottom_height;
}; // Anchor main to top-left of viewport, sized to fit above bottom
var main = GuacUI.Client.main;
main.style.top = document.body.scrollTop + "px";
main.style.left = document.body.scrollLeft + "px";
main.style.width = main_width + "px";
main.style.height = main_height + "px";
// Anchor bottom to bottom of viewport
if (bottom) {
bottom.style.top = (document.body.scrollTop + main_height) + "px";
bottom.style.left = document.body.scrollLeft + "px";
bottom.style.width = window.innerWidth + "px";
}
// Send new size
if (GuacUI.Client.attachedClient) {
var pixel_density = window.devicePixelRatio || 1;
var width = main_width * pixel_density;
var height = main_height * pixel_density;
GuacUI.Client.attachedClient.sendSize(width, height);
}
// Rescale display appropriately
GuacUI.Client.updateDisplayScale();
last_scroll_top = document.body.scrollTop;
last_scroll_left = document.body.scrollLeft;
last_width = window.innerWidth;
last_height = window.innerHeight;
}
}
window.onresize = __update_layout;
window.onscroll = __update_layout;
window.setInterval(__update_layout, 10);
GuacamoleSessionStorage.addChangeListener(function(name, value) { GuacamoleSessionStorage.addChangeListener(function(name, value) {
if (name === "clipboard") { if (name === "clipboard") {

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

@@ -25,6 +25,7 @@ body {
font-family: FreeSans, Helvetica, Arial, sans-serif; font-family: FreeSans, Helvetica, Arial, sans-serif;
padding: 0; padding: 0;
margin: 0; margin: 0;
overflow: hidden;
} }
img { img {
@@ -115,11 +116,7 @@ div.dialog p {
div#main { div#main {
overflow: auto; overflow: auto;
position: fixed; position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
} }
div.displayOuter { div.displayOuter {
@@ -681,10 +678,7 @@ p.hint {
#text-input { #text-input {
display: none; display: none;
position: fixed; position: absolute;
left: 0;
bottom: 0;
width: 100%;
border-top: 1px solid rgba(0, 0, 0, 0.5); border-top: 1px solid rgba(0, 0, 0, 0.5);
background: #CDA; background: #CDA;