diff options
author | Samuel Mannehed <samuel@cendio.se> | 2016-11-29 13:23:02 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2016-11-29 13:23:02 +0100 |
commit | a8cc32d8b9c207e5908422b6ccb30ee6476e76f9 (patch) | |
tree | ccfa7e34efee05a18f421d12d2077d28facaec30 | |
parent | 77bc3a551bf505c493eb63cfc8a3df1a08e763e3 (diff) | |
parent | cf348b7892f772bc10c4243408eb09cff5da4818 (diff) | |
download | novnc-a8cc32d8b9c207e5908422b6ccb30ee6476e76f9.tar.gz |
Merge pull request #725 from CendioOssman/rightbar
Allow control bar to be moved to the right side
-rw-r--r-- | app/images/handle_bg.svg | 34 | ||||
-rw-r--r-- | app/styles/base.css | 70 | ||||
-rw-r--r-- | app/ui.js | 41 |
3 files changed, 118 insertions, 27 deletions
diff --git a/app/images/handle_bg.svg b/app/images/handle_bg.svg index b4c4d13..7579c42 100644 --- a/app/images/handle_bg.svg +++ b/app/images/handle_bg.svg @@ -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" diff --git a/app/styles/base.css b/app/styles/base.css index a580f2b..f4ee929 100644 --- a/app/styles/base.css +++ b/app/styles/base.css @@ -244,37 +244,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; @@ -283,7 +305,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 */ @@ -297,6 +319,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; @@ -307,6 +340,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% */ @@ -314,6 +351,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 { @@ -379,6 +419,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; @@ -126,6 +126,11 @@ var UI; 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(); @@ -593,11 +598,41 @@ 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'); + 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. @@ -615,6 +650,8 @@ var UI; e.preventDefault(); e.stopPropagation(); + UI.keepControlbar(); + UI.activateControlbar(); }, // Move the handle but don't allow any position outside the bounds @@ -671,6 +708,8 @@ var UI; UI.toggleControlbar(); e.preventDefault(); e.stopPropagation(); + UI.keepControlbar(); + UI.activateControlbar(); } UI.controlbarGrabbed = false; }, @@ -691,6 +730,8 @@ var UI; UI.controlbarMouseDownOffsetY = ptr.clientY - bounds.top; e.preventDefault(); e.stopPropagation(); + UI.keepControlbar(); + UI.activateControlbar(); }, /* ------^------- |