crabapples
/
noVNC
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add hint that the control bar can be moved 

The control bar can be dragged to the other side, this isn't obvious
however. This adds a hint on the opposite side in the form of a
silhouette of the control bar.
This commit is contained in:
Samuel Mannehed 2016-12-10 21:31:43 +01:00
parent f23c18be27
commit 905f3df565
3 changed files with 132 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
app/styles/base.css
View File

@ -565,6 +565,29 @@ input[type=button]:active, select:active {
width: 80px;
}
/* ----------------------------------------
* Silhouettes
* ----------------------------------------
*/
/* Outline that shows the form of a target element */
.noVNC_silhouette {
/* Two colors to make it easier to see no matter the background */
box-shadow: 0 4px 5px white, 0 -4px 5px skyblue;
transition: visibility 0s linear 0.5s, opacity 0.5s ease-in-out;
position: fixed;
visibility: hidden;
opacity: 0;
}
.noVNC_silhouette.noVNC_active {
visibility: visible;
opacity: 1;
transition-delay: 0s;
}
.noVNC_silhouette.noVNC_flipped {
transform: rotate(180deg);
}
/* ----------------------------------------
* Status Dialog
* ----------------------------------------

59
app/ui.js
View File

@ -608,15 +608,70 @@ var UI;
if (anchor.classList.contains("noVNC_right")) {
WebUtil.writeSetting('controlbar_pos', 'left');
anchor.classList.remove("noVNC_right");
UI.updateControlBarHint('right');
} else {
WebUtil.writeSetting('controlbar_pos', 'right');
anchor.classList.add("noVNC_right");
UI.updateControlBarHint('left');
}
// Consider this a movement of the handle
UI.controlbarDrag = true;
},
displayControlBarHint: function (show) {
var handleHint = WebUtil.getSilhouette("noVNC_control_bar_handle");
var controlBarHint = WebUtil.getSilhouette("noVNC_control_bar");
if (!show) {
if (handleHint === null || controlBarHint === null) return;
if (handleHint.classList.contains("noVNC_active")) {
handleHint.classList.remove("noVNC_active");
}
if (controlBarHint.classList.contains("noVNC_active")) {
controlBarHint.classList.remove("noVNC_active");
}
return;
}
if (handleHint === null || controlBarHint === null) {
var handle =
document.getElementById('noVNC_control_bar_handle');
var controlBar = document.getElementById('noVNC_control_bar');
handleHint = WebUtil.createSilhouette(handle);
controlBarHint = WebUtil.createSilhouette(controlBar);
handleHint.classList.add("noVNC_flipped");
controlBarHint.classList.add("noVNC_flipped");
}
UI.updateControlBarHint();
handleHint.classList.add("noVNC_active");
controlBarHint.classList.add("noVNC_active");
},
updateControlBarHint: function (hintSide) {
var handle = document.getElementById('noVNC_control_bar_handle');
var controlBar = document.getElementById('noVNC_control_bar');
if (hintSide === undefined) {
// Don't change side if no side was specified
if (WebUtil.readSetting('controlbar_pos') === 'left') {
hintSide = 'right';
} else {
hintSide = 'left';
}
} else {
WebUtil.flipSilhouette(handle);
WebUtil.flipSilhouette(controlBar);
}
WebUtil.updateSilhouette(handle, hintSide);
WebUtil.updateSilhouette(controlBar, hintSide);
},
dragControlbarHandle: function (e) {
if (!UI.controlbarGrabbed) return;
@ -690,6 +745,7 @@ var UI;
// The transform needs coordinates that are relative to the parent
var parentRelativeY = newY - controlbarBounds.top;
handle.style.transform = "translateY(" + parentRelativeY + "px)";
UI.updateControlBarHint ();
},
updateControlbarHandle: function () {
@ -712,6 +768,7 @@ var UI;
UI.activateControlbar();
}
UI.controlbarGrabbed = false;
UI.displayControlBarHint(false);
},
controlbarHandleMouseDown: function(e) {
@ -726,6 +783,8 @@ var UI;
UI.controlbarGrabbed = true;
UI.controlbarDrag = false;
UI.displayControlBarHint(true);
UI.controlbarMouseDownClientY = ptr.clientY;
UI.controlbarMouseDownOffsetY = ptr.clientY - bounds.top;
e.preventDefault();

50
app/webutil.js
View File

@ -371,6 +371,56 @@ WebUtil.releaseCapture = function () {
}
};
// Seperate elements that outline the form of a target element
WebUtil.createSilhouette = function (target) {
var targetForm = target.getBoundingClientRect();
var targetStyle = window.getComputedStyle(target);
var silhouette = document.createElement("div");
silhouette.id = target.id + "_silhouette";
silhouette.style.borderRadius = targetStyle.borderRadius;
silhouette.style.width = targetForm.width + "px";
silhouette.style.height = targetForm.height + "px";
silhouette.classList.add("noVNC_silhouette");
document.body.appendChild(silhouette);
return silhouette;
};
WebUtil.getSilhouette = function (targetId) {
return document.getElementById(targetId + "_silhouette");
};
WebUtil.updateSilhouette = function (target, alignSide) {
var silhouette = WebUtil.getSilhouette(target.id);
if (silhouette === null) return;
var form = target.getBoundingClientRect();
if (alignSide === 'right') {
silhouette.style.right = form.left + "px";
silhouette.style.left = "auto";
} else if (alignSide === 'left') {
silhouette.style.left = window.innerWidth - form.right + "px";
silhouette.style.right = "auto";
}
silhouette.style.top = form.top + "px";
};
WebUtil.flipSilhouette = function (target) {
var silhouette = WebUtil.getSilhouette(target.id);
if (silhouette === null) return;
if (silhouette.classList.contains("noVNC_flipped")) {
silhouette.classList.remove("noVNC_flipped");
} else {
silhouette.classList.add("noVNC_flipped");
}
};
// Dynamically load scripts without using document.write()
// Reference: http://unixpapa.com/js/dyna.html