Add handle to open and close the control bar

This commit is contained in:
Pierre Ossman 2016-08-26 13:24:25 +02:00
parent 728b5d9e1a
commit 38323d4d92
7 changed files with 333 additions and 7 deletions

82
app/images/handle.svg Normal file
View File

@ -0,0 +1,82 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
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="5"
height="6"
viewBox="0 0 5 6"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="handle.svg"
inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#959595"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:zoom="32"
inkscape:cx="1.3551778"
inkscape:cy="8.7800329"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="true"
units="px"
inkscape:snap-bbox="true"
inkscape:bbox-paths="true"
inkscape:bbox-nodes="true"
inkscape:snap-bbox-edge-midpoints="true"
inkscape:object-paths="true"
showguides="false"
inkscape:window-width="1920"
inkscape:window-height="1136"
inkscape:window-x="1920"
inkscape:window-y="27"
inkscape:window-maximized="1"
inkscape:snap-smooth-nodes="true"
inkscape:object-nodes="true"
inkscape:snap-intersection-paths="true"
inkscape:snap-nodes="true"
inkscape:snap-global="true">
<inkscape:grid
type="xygrid"
id="grid4136" />
</sodipodi:namedview>
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-1046.3622)">
<path
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 4.0000803,1049.3622 -3,-2 0,4 z"
id="path4247"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccc" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.5 KiB

172
app/images/handle_bg.svg Normal file
View File

@ -0,0 +1,172 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
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"
height="50"
viewBox="0 0 20 50"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="handle_bg.svg"
inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#959595"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:zoom="16"
inkscape:cx="10.515997"
inkscape:cy="22.863737"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="true"
units="px"
inkscape:snap-bbox="true"
inkscape:bbox-paths="true"
inkscape:bbox-nodes="true"
inkscape:snap-bbox-edge-midpoints="true"
inkscape:object-paths="true"
showguides="false"
inkscape:window-width="1920"
inkscape:window-height="1136"
inkscape:window-x="1920"
inkscape:window-y="27"
inkscape:window-maximized="1"
inkscape:snap-smooth-nodes="true"
inkscape:object-nodes="true"
inkscape:snap-intersection-paths="true"
inkscape:snap-nodes="true"
inkscape:snap-global="true">
<inkscape:grid
type="xygrid"
id="grid4136" />
</sodipodi:namedview>
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-1002.3622)">
<rect
style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect4249"
width="1"
height="1.0000174"
x="14.5"
y="1008.8622"
ry="1.7382812e-05" />
<rect
ry="1.7382812e-05"
y="1013.8622"
x="14.5"
height="1.0000174"
width="1"
id="rect4255"
style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<rect
ry="1.7382812e-05"
y="1008.8622"
x="9.5"
height="1.0000174"
width="1"
id="rect4261"
style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<rect
style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect4263"
width="1"
height="1.0000174"
x="9.5"
y="1013.8622"
ry="1.7382812e-05" />
<rect
ry="1.7382812e-05"
y="1039.8622"
x="14.5"
height="1.0000174"
width="1"
id="rect4265"
style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<rect
style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect4267"
width="1"
height="1.0000174"
x="14.5"
y="1044.8622"
ry="1.7382812e-05" />
<rect
style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect4269"
width="1"
height="1.0000174"
x="9.5"
y="1039.8622"
ry="1.7382812e-05" />
<rect
ry="1.7382812e-05"
y="1044.8622"
x="9.5"
height="1.0000174"
width="1"
id="rect4271"
style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<rect
style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect4273"
width="1"
height="1.0000174"
x="14.5"
y="1018.8622"
ry="1.7382812e-05" />
<rect
ry="1.7382812e-05"
y="1018.8622"
x="9.5"
height="1.0000174"
width="1"
id="rect4275"
style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<rect
style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect4277"
width="1"
height="1.0000174"
x="14.5"
y="1034.8622"
ry="1.7382812e-05" />
<rect
ry="1.7382812e-05"
y="1034.8622"
x="9.5"
height="1.0000174"
width="1"
id="rect4279"
style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 6.2 KiB

View File

@ -153,18 +153,55 @@ input[type=button]:active, select:active {
#noVNC_control_bar { #noVNC_control_bar {
position: relative; position: relative;
left: -30px; /* left: calc(-35px - 10px - 5px - 30px), but IE doesn't animate calc */
left: -80px;
transition: 0.5s ease-in-out;
background-color: rgb(110, 132, 163); background-color: rgb(110, 132, 163);
border-radius: 0 10px 10px 0; border-radius: 0 10px 10px 0;
box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
/* The extra border is to get a proper shadow */ /* The extra border is to get a proper shadow */
border-color: rgb(110, 132, 163); border-color: rgb(110, 132, 163);
border-style: solid; border-style: solid;
border-width: 0 0 0 30px; border-width: 0 0 0 30px;
} }
#noVNC_control_bar.noVNC_open {
box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
left: -30px;
}
#noVNC_control_bar_handle {
position: absolute;
right: -15px;
top: 10%;
width: 50px;
height: 50px;
z-index: -2;
cursor: pointer;
border-radius: 0 5px 5px 0;
background-color: rgb(83, 99, 122);
background-image: url("../images/handle_bg.svg");
background-repeat: no-repeat;
background-position: right;
box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.5);
}
#noVNC_control_bar_handle:after {
content: "";
transition: 0.5s ease-in-out;
background: url("../images/handle.svg");
position: absolute;
top: 22px; /* (50px-6px)/2 */
right: 5px;
width: 5px;
height: 6px;
}
#noVNC_control_bar.noVNC_open #noVNC_control_bar_handle:after {
transform: translateX(1px) rotate(180deg);
}
:root:not(.noVNC_connected) #noVNC_control_bar_handle {
display: none;
}
#noVNC_control_bar .noVNC_scroll { #noVNC_control_bar .noVNC_scroll {
max-height: 100vh; /* Chrome is buggy with 100% */ max-height: 100vh; /* Chrome is buggy with 100% */

View File

@ -12,7 +12,7 @@
color:#fff; color:#fff;
} }
#noVNC_control_bar { #noVNC_control_bar, #noVNC_control_bar_handle {
background: #4c4c4c; background: #4c4c4c;
} }

View File

@ -12,6 +12,6 @@
color:#fff; color:#fff;
} }
#noVNC_control_bar { #noVNC_control_bar, #noVNC_control_bar_handle {
background: #080F80; background: #080F80;
} }

View File

@ -198,6 +198,9 @@ var UI;
document.getElementById("noVNC_control_bar") document.getElementById("noVNC_control_bar")
.addEventListener('keypress', UI.activateControlbar); .addEventListener('keypress', UI.activateControlbar);
document.getElementById("noVNC_control_bar_handle")
.addEventListener('click', UI.toggleControlbar);
document.getElementById("noVNC_view_drag_button") document.getElementById("noVNC_view_drag_button")
.addEventListener('click', UI.toggleViewDrag); .addEventListener('click', UI.toggleViewDrag);
document.getElementById("noVNC_send_ctrl_alt_del_button") document.getElementById("noVNC_send_ctrl_alt_del_button")
@ -474,6 +477,26 @@ var UI;
.classList.add("noVNC_idle"); .classList.add("noVNC_idle");
}, },
openControlbar: function() {
document.getElementById('noVNC_control_bar')
.classList.add("noVNC_open");
},
closeControlbar: function() {
UI.closeAllPanels();
document.getElementById('noVNC_control_bar')
.classList.remove("noVNC_open");
},
toggleControlbar: function() {
if (document.getElementById('noVNC_control_bar')
.classList.contains("noVNC_open")) {
UI.closeControlbar();
} else {
UI.openControlbar();
}
},
/* ------^------- /* ------^-------
* /VISUAL * /VISUAL
* ============== * ==============
@ -612,6 +635,7 @@ var UI;
openSettingsPanel: function() { openSettingsPanel: function() {
UI.closeAllPanels(); UI.closeAllPanels();
UI.openControlbar();
UI.updateSetting('encrypt'); UI.updateSetting('encrypt');
UI.updateSetting('true_color'); UI.updateSetting('true_color');
@ -664,6 +688,7 @@ var UI;
openXvpPanel: function() { openXvpPanel: function() {
UI.closeAllPanels(); UI.closeAllPanels();
UI.openControlbar();
document.getElementById('noVNC_xvp') document.getElementById('noVNC_xvp')
.classList.add("noVNC_open"); .classList.add("noVNC_open");
@ -708,6 +733,7 @@ var UI;
openClipboardPanel: function() { openClipboardPanel: function() {
UI.closeAllPanels(); UI.closeAllPanels();
UI.openControlbar();
document.getElementById('noVNC_clipboard') document.getElementById('noVNC_clipboard')
.classList.add("noVNC_open"); .classList.add("noVNC_open");
@ -757,6 +783,7 @@ var UI;
openConnectPanel: function() { openConnectPanel: function() {
UI.closeAllPanels(); UI.closeAllPanels();
UI.openControlbar();
document.getElementById('noVNC_connect_controls') document.getElementById('noVNC_connect_controls')
.classList.add("noVNC_open"); .classList.add("noVNC_open");
@ -789,6 +816,7 @@ var UI;
connect: function() { connect: function() {
UI.closeAllPanels(); UI.closeAllPanels();
UI.closeControlbar();
var host = document.getElementById('noVNC_setting_host').value; var host = document.getElementById('noVNC_setting_host').value;
var port = document.getElementById('noVNC_setting_port').value; var port = document.getElementById('noVNC_setting_port').value;
@ -1250,6 +1278,7 @@ var UI;
openExtraKeys: function() { openExtraKeys: function() {
UI.closeAllPanels(); UI.closeAllPanels();
UI.openControlbar();
document.getElementById('noVNC_modifiers') document.getElementById('noVNC_modifiers')
.classList.add("noVNC_open"); .classList.add("noVNC_open");

View File

@ -52,7 +52,11 @@
<!-- noVNC Control Bar --> <!-- noVNC Control Bar -->
<div id="noVNC_control_bar_anchor" class="noVNC_vcenter"> <div id="noVNC_control_bar_anchor" class="noVNC_vcenter">
<div id="noVNC_control_bar"><div class="noVNC_scroll"> <div id="noVNC_control_bar">
<div id="noVNC_control_bar_handle" title="Hide/Show the control bar"></div>
<div class="noVNC_scroll">
<h1 class="noVNC_logo"><span>no</span><br />VNC</h1> <h1 class="noVNC_logo"><span>no</span><br />VNC</h1>
<!-- Drag/Pan the viewport --> <!-- Drag/Pan the viewport -->
@ -189,7 +193,9 @@
</ul> </ul>
</div> </div>
</div> </div>
</div></div>
</div>
</div>
</div> <!-- End of noVNC_control_bar --> </div> <!-- End of noVNC_control_bar -->