Allow control bar to be moved to the right side
This commit is contained in:
Pierre Ossman
parent
de315d6216
commit
8ee432f1db
|
|
@ -9,9 +9,9 @@
|
|||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="20"
|
||||
width="15"
|
||||
height="50"
|
||||
viewBox="0 0 20 50"
|
||||
viewBox="0 0 15 50"
|
||||
id="svg2"
|
||||
version="1.1"
|
||||
inkscape:version="0.91 r13725"
|
||||
|
|
@ -29,8 +29,8 @@
|
|||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="16"
|
||||
inkscape:cx="10.515997"
|
||||
inkscape:cy="22.863737"
|
||||
inkscape:cx="-10.001409"
|
||||
inkscape:cy="24.512566"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="true"
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
|
|
@ -77,13 +77,13 @@
|
|||
id="rect4249"
|
||||
width="1"
|
||||
height="1.0000174"
|
||||
x="14.5"
|
||||
x="9.5"
|
||||
y="1008.8622"
|
||||
ry="1.7382812e-05" />
|
||||
<rect
|
||||
ry="1.7382812e-05"
|
||||
y="1013.8622"
|
||||
x="14.5"
|
||||
x="9.5"
|
||||
height="1.0000174"
|
||||
width="1"
|
||||
id="rect4255"
|
||||
|
|
@ -91,7 +91,7 @@
|
|||
<rect
|
||||
ry="1.7382812e-05"
|
||||
y="1008.8622"
|
||||
x="9.5"
|
||||
x="4.5"
|
||||
height="1.0000174"
|
||||
width="1"
|
||||
id="rect4261"
|
||||
|
|
@ -101,13 +101,13 @@
|
|||
id="rect4263"
|
||||
width="1"
|
||||
height="1.0000174"
|
||||
x="9.5"
|
||||
x="4.5"
|
||||
y="1013.8622"
|
||||
ry="1.7382812e-05" />
|
||||
<rect
|
||||
ry="1.7382812e-05"
|
||||
y="1039.8622"
|
||||
x="14.5"
|
||||
x="9.5"
|
||||
height="1.0000174"
|
||||
width="1"
|
||||
id="rect4265"
|
||||
|
|
@ -117,7 +117,7 @@
|
|||
id="rect4267"
|
||||
width="1"
|
||||
height="1.0000174"
|
||||
x="14.5"
|
||||
x="9.5"
|
||||
y="1044.8622"
|
||||
ry="1.7382812e-05" />
|
||||
<rect
|
||||
|
|
@ -125,13 +125,13 @@
|
|||
id="rect4269"
|
||||
width="1"
|
||||
height="1.0000174"
|
||||
x="9.5"
|
||||
x="4.5"
|
||||
y="1039.8622"
|
||||
ry="1.7382812e-05" />
|
||||
<rect
|
||||
ry="1.7382812e-05"
|
||||
y="1044.8622"
|
||||
x="9.5"
|
||||
x="4.5"
|
||||
height="1.0000174"
|
||||
width="1"
|
||||
id="rect4271"
|
||||
|
|
@ -141,13 +141,13 @@
|
|||
id="rect4273"
|
||||
width="1"
|
||||
height="1.0000174"
|
||||
x="14.5"
|
||||
x="9.5"
|
||||
y="1018.8622"
|
||||
ry="1.7382812e-05" />
|
||||
<rect
|
||||
ry="1.7382812e-05"
|
||||
y="1018.8622"
|
||||
x="9.5"
|
||||
x="4.5"
|
||||
height="1.0000174"
|
||||
width="1"
|
||||
id="rect4275"
|
||||
|
|
@ -157,13 +157,13 @@
|
|||
id="rect4277"
|
||||
width="1"
|
||||
height="1.0000174"
|
||||
x="14.5"
|
||||
x="9.5"
|
||||
y="1034.8622"
|
||||
ry="1.7382812e-05" />
|
||||
<rect
|
||||
ry="1.7382812e-05"
|
||||
y="1034.8622"
|
||||
x="9.5"
|
||||
x="4.5"
|
||||
height="1.0000174"
|
||||
width="1"
|
||||
id="rect4279"
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 6.2 KiB After Width: | Height: | Size: 6.2 KiB |
|
|
@ -227,37 +227,59 @@ input[type=button]:active, select:active {
|
|||
:root.noVNC_connected #noVNC_control_bar_anchor.noVNC_idle {
|
||||
opacity: 0.8;
|
||||
}
|
||||
#noVNC_control_bar_anchor.noVNC_right {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#noVNC_control_bar {
|
||||
position: relative;
|
||||
/* left: calc(-35px - 10px - 5px - 30px), but IE doesn't animate calc */
|
||||
left: -80px;
|
||||
left: -100%;
|
||||
|
||||
transition: 0.5s ease-in-out;
|
||||
|
||||
background-color: rgb(110, 132, 163);
|
||||
border-radius: 0 10px 10px 0;
|
||||
|
||||
/* The extra border is to get a proper shadow */
|
||||
border-color: rgb(110, 132, 163);
|
||||
border-style: solid;
|
||||
border-width: 0 0 0 30px;
|
||||
}
|
||||
#noVNC_control_bar.noVNC_open {
|
||||
box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
|
||||
left: 0;
|
||||
}
|
||||
#noVNC_control_bar::before {
|
||||
/* This extra element is to get a proper shadow */
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
height: 100%;
|
||||
width: 30px;
|
||||
left: -30px;
|
||||
transition: box-shadow 0.5s ease-in-out;
|
||||
}
|
||||
#noVNC_control_bar.noVNC_open::before {
|
||||
box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.noVNC_right #noVNC_control_bar {
|
||||
left: 100%;
|
||||
border-radius: 10px 0 0 10px;
|
||||
}
|
||||
.noVNC_right #noVNC_control_bar.noVNC_open {
|
||||
left: 0;
|
||||
}
|
||||
.noVNC_right #noVNC_control_bar::before {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#noVNC_control_bar_handle {
|
||||
position: absolute;
|
||||
right: -15px;
|
||||
left: -15px;
|
||||
top: 0;
|
||||
transform: translateY(35px);
|
||||
width: 50px;
|
||||
width: calc(100% + 30px);
|
||||
height: 50px;
|
||||
z-index: -2;
|
||||
cursor: pointer;
|
||||
border-radius: 0 5px 5px 0;
|
||||
border-radius: 5px;
|
||||
background-color: rgb(83, 99, 122);
|
||||
background-image: url("../images/handle_bg.svg");
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -266,7 +288,7 @@ input[type=button]:active, select:active {
|
|||
}
|
||||
#noVNC_control_bar_handle:after {
|
||||
content: "";
|
||||
transition: 0.5s ease-in-out;
|
||||
transition: transform 0.5s ease-in-out;
|
||||
background: url("../images/handle.svg");
|
||||
position: absolute;
|
||||
top: 22px; /* (50px-6px)/2 */
|
||||
|
|
@ -280,6 +302,17 @@ input[type=button]:active, select:active {
|
|||
:root:not(.noVNC_connected) #noVNC_control_bar_handle {
|
||||
display: none;
|
||||
}
|
||||
.noVNC_right #noVNC_control_bar_handle {
|
||||
background-position: left;
|
||||
}
|
||||
.noVNC_right #noVNC_control_bar_handle:after {
|
||||
left: 5px;
|
||||
right: 0;
|
||||
transform: translateX(1px) rotate(180deg);
|
||||
}
|
||||
.noVNC_right #noVNC_control_bar.noVNC_open #noVNC_control_bar_handle:after {
|
||||
transform: none;
|
||||
}
|
||||
#noVNC_control_bar_handle div {
|
||||
position: absolute;
|
||||
right: -35px;
|
||||
|
|
@ -290,6 +323,10 @@ input[type=button]:active, select:active {
|
|||
:root:not(.noVNC_touch) #noVNC_control_bar_handle div {
|
||||
display: none;
|
||||
}
|
||||
.noVNC_right #noVNC_control_bar_handle div {
|
||||
left: -35px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
#noVNC_control_bar .noVNC_scroll {
|
||||
max-height: 100vh; /* Chrome is buggy with 100% */
|
||||
|
|
@ -297,6 +334,9 @@ input[type=button]:active, select:active {
|
|||
overflow-y: auto;
|
||||
padding: 0 10px 0 5px;
|
||||
}
|
||||
.noVNC_right #noVNC_control_bar .noVNC_scroll {
|
||||
padding: 0 5px 0 10px;
|
||||
}
|
||||
|
||||
/* General button style */
|
||||
.noVNC_button {
|
||||
|
|
@ -362,6 +402,16 @@ input[type=button]:active, select:active {
|
|||
opacity: 1;
|
||||
transform: translateX(75px);
|
||||
}
|
||||
.noVNC_right .noVNC_vcenter {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
.noVNC_right .noVNC_panel {
|
||||
transform: translateX(-25px);
|
||||
}
|
||||
.noVNC_right .noVNC_panel.noVNC_open {
|
||||
transform: translateX(-75px);
|
||||
}
|
||||
|
||||
.noVNC_panel hr {
|
||||
border: none;
|
||||
|
|
|
|||
24
app/ui.js
24
app/ui.js
|
|
@ -576,11 +576,35 @@ var UI;
|
|||
}
|
||||
},
|
||||
|
||||
toggleControlbarSide: function () {
|
||||
// Temporarily disable animation to avoid weird movement
|
||||
var bar = document.getElementById('noVNC_control_bar');
|
||||
bar.style.transitionDuration = '0s';
|
||||
bar.addEventListener('transitionend', function () { this.style.transitionDuration = ""; });
|
||||
|
||||
var anchor = document.getElementById('noVNC_control_bar_anchor');
|
||||
anchor.classList.toggle("noVNC_right");
|
||||
|
||||
// Consider this a movement of the handle
|
||||
UI.controlbarDrag = true;
|
||||
},
|
||||
|
||||
dragControlbarHandle: function (e) {
|
||||
if (!UI.controlbarGrabbed) return;
|
||||
|
||||
var ptr = Util.getPointerEvent(e);
|
||||
|
||||
var anchor = document.getElementById('noVNC_control_bar_anchor');
|
||||
if (ptr.clientX < (window.innerWidth * 0.1)) {
|
||||
if (anchor.classList.contains("noVNC_right")) {
|
||||
UI.toggleControlbarSide();
|
||||
}
|
||||
} else if (ptr.clientX > (window.innerWidth * 0.9)) {
|
||||
if (!anchor.classList.contains("noVNC_right")) {
|
||||
UI.toggleControlbarSide();
|
||||
}
|
||||
}
|
||||
|
||||
if (!UI.controlbarDrag) {
|
||||
// The goal is to trigger on a certain physical width, the
|
||||
// devicePixelRatio brings us a bit closer but is not optimal.
|
||||
|
|
|
|||
Loading…
Reference in New Issue