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"
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"
<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>
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"
<rect
ry="1.7382812e-05"
y="1008.8622"
- x="9.5"
+ x="4.5"
height="1.0000174"
width="1"
id="rect4261"
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"
id="rect4267"
width="1"
height="1.0000174"
- x="14.5"
+ x="9.5"
y="1044.8622"
ry="1.7382812e-05" />
<rect
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"
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"
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"
: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;
}
#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 */
: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;
: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% */
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 {
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;
UI.initSetting('clip', false);
}
+ // Restore control bar position
+ if (WebUtil.readSetting('controlbar_pos') === 'right') {
+ UI.toggleControlbarSide();
+ }
+
// Setup and initialize event handlers
UI.setupWindowEvents();
UI.setupFullscreen();
}
},
+ 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');
+ if (anchor.classList.contains("noVNC_right")) {
+ WebUtil.writeSetting('controlbar_pos', 'left');
+ anchor.classList.remove("noVNC_right");
+ } else {
+ WebUtil.writeSetting('controlbar_pos', 'right');
+ anchor.classList.add("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.
e.preventDefault();
e.stopPropagation();
+ UI.keepControlbar();
+ UI.activateControlbar();
},
// Move the handle but don't allow any position outside the bounds
UI.toggleControlbar();
e.preventDefault();
e.stopPropagation();
+ UI.keepControlbar();
+ UI.activateControlbar();
}
UI.controlbarGrabbed = false;
},
UI.controlbarMouseDownOffsetY = ptr.clientY - bounds.top;
e.preventDefault();
e.stopPropagation();
+ UI.keepControlbar();
+ UI.activateControlbar();
},
/* ------^-------