diff options
author | Pierre Ossman <ossman@cendio.se> | 2016-08-26 10:48:05 +0200 |
---|---|---|
committer | Pierre Ossman <ossman@cendio.se> | 2016-09-23 14:39:21 +0200 |
commit | fb7c3b3be22efa44c3e718256d06e57bd2174046 (patch) | |
tree | d505f6dcc85202a3043d0a3e49cb1cce3bdff6d5 | |
parent | 6244e383e49855772713df97e0bad1560b0424f7 (diff) | |
download | novnc-fb7c3b3be22efa44c3e718256d06e57bd2174046.tar.gz |
Change control bar to a smaller left-side toolbar
-rw-r--r-- | app/styles/base.css | 198 | ||||
-rw-r--r-- | app/styles/black.css | 26 | ||||
-rw-r--r-- | app/styles/blue.css | 4 | ||||
-rw-r--r-- | app/ui.js | 16 | ||||
-rw-r--r-- | vnc.html | 19 |
5 files changed, 89 insertions, 174 deletions
diff --git a/app/styles/base.css b/app/styles/base.css index ed77c6b..3f6ccdf 100644 --- a/app/styles/base.css +++ b/app/styles/base.css @@ -22,10 +22,6 @@ html { height:100%; } -#noVNC_buttons { - white-space: nowrap; -} - /* ---------------------------------------- * Input Elements * ---------------------------------------- @@ -122,59 +118,70 @@ input[type=button]:active, select:active { .noVNC_center > * { pointer-events: auto; } +.noVNC_vcenter { + display: flex; + flex-direction: column; + justify-content: center; + position: fixed; + top: 0; + left: 0; + height: 100%; + pointer-events: none; +} +.noVNC_vcenter > * { + pointer-events: auto; +} /* ---------------------------------------- * Control Bar * ---------------------------------------- */ -#noVNC_control_bar { +#noVNC_control_bar_anchor { + /* The anchor is needed to get z-stacking to work */ position: fixed; - display: block; - height: 36px; - left: 0; - top: 0; - width: 100%; - z-index: 200; + z-index: 2; - background: #b2bdcd; /* Old browsers */ - background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */ - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2bdcd), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */ - background: -ms-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */ - background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */ + /* Edge misrenders animations wihthout this */ + transform: translateX(0); +} + +#noVNC_control_bar { + position: relative; + left: -30px; + + background-color: rgb(110, 132, 163); + 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 */ + border-color: rgb(110, 132, 163); + border-style: solid; + border-width: 0 0 0 30px; +} + +#noVNC_control_bar .noVNC_scroll { + max-height: 100vh; /* Chrome is buggy with 100% */ + overflow-x: hidden; + overflow-y: auto; + padding: 0 10px 0 5px; } /* General button style */ .noVNC_button { + display: block; padding: 4px 4px; + margin: 10px 0; vertical-align: middle; - border:1px solid #869dbc; + border:1px solid rgba(255, 255, 255, 0.2); -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; - background: #b2bdcd; /* Old browsers */ - background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */ - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2bdcd), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */ - background: -ms-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2bdcd', endColorstr='#6e84a3',GradientType=0 ); /* IE6-9 */ - background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */ - /*box-shadow:inset 0.4px 0.4px 0.4px #000000;*/ - font-size: 12px; } .noVNC_button.noVNC_selected { - border-color: #4366a9; - background: #779ced; /* Old browsers */ - background: -moz-linear-gradient(top, #779ced 0%, #3970e0 49%, #2160dd 51%, #2463df 100%); /* FF3.6+ */ - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#779ced), color-stop(49%,#3970e0), color-stop(51%,#2160dd), color-stop(100%,#2463df)); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* Opera11.10+ */ - background: -ms-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* IE10+ */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#779ced', endColorstr='#2463df',GradientType=0 ); /* IE6-9 */ - background: linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* W3C */ + border-color: rgba(0, 0, 0, 0.8); + background: rgba(0, 0, 0, 0.5); } .noVNC_button:disabled { opacity: 0.4; @@ -192,13 +199,14 @@ input[type=button]:active, select:active { /* Panels */ .noVNC_panel { - position: fixed; - top: 46px; - right: 15px; - transform: translate(0, -50px); + transform: translateX(25px); transition: 0.5s ease-in-out; + max-height: 100vh; /* Chrome is buggy with 100% */ + overflow-x: hidden; + overflow-y: auto; + visibility: hidden; opacity: 0; @@ -215,7 +223,7 @@ input[type=button]:active, select:active { .noVNC_panel.noVNC_open { visibility: visible; opacity: 1; - transform: translate(0, 0); + transform: translateX(75px); } .noVNC_submit { @@ -227,9 +235,6 @@ input[type=button]:active, select:active { } /* noVNC Touch Device only buttons */ -#noVNC_mobile_buttons { - display: inline; -} :root:not(.noVNC_connected) #noVNC_mobile_buttons { display: none; } @@ -249,49 +254,22 @@ input[type=button]:active, select:active { ime-mode: disabled; } +/* Extra manual keys */ :root:not(.noVNC_connected) #noVNC_extra_keys { display: none; } -#noVNC_extra_keys { - display: inline; - list-style-type: none; - padding: 0px; - margin: 0px; - position: relative; -} -#noVNC_extra_keys.noVNC_hidden { - display: none; -} -#noVNC_toggle_ctrl_button { - display: inline; -} -#noVNC_toggle_alt_button { - display: inline; -} -#noVNC_send_tab_button { - display: inline; -} -#noVNC_send_esc_button { - display: inline; -} -#noVNC_modifiers { - display: inline; -} - -.noVNC_buttons { - float: right; - z-index: 1; - position: relative; - padding-right: 10px; - padding-left: 10px; -} - /* Send Ctrl+Alt+Delete */ :root:not(.noVNC_connected) #noVNC_send_ctrl_alt_del_button { display: none; } +#noVNC_modifiers { + background-color: rgb(92, 92, 92); + border: none; + padding: 0 10px; +} + /* XVP Shutdown/Reboot */ :root:not(.noVNC_connected) #noVNC_xvp_button { display: none; @@ -307,9 +285,12 @@ input[type=button]:active, select:active { display: none; } #noVNC_clipboard { + /* Full screen, minus padding and left and right margins */ + max-width: calc(100vw - 2*15px - 75px - 25px); } #noVNC_clipboard_text { width: 500px; + max-width: 100%; } /* Settings */ @@ -456,7 +437,7 @@ input[type=button]:active, select:active { margin: 0px; padding: 0px; bottom: 0px; - top: 36px; /* the height of the control bar */ + top: 0px; left: 0px; right: 0px; width: auto; @@ -488,8 +469,8 @@ input[type=button]:active, select:active { } #noVNC_logo { - margin-top: 170px; - margin-left: 10px; + margin-top: 60px; + margin-left: 60px; color:yellow; text-align:left; font-family: 'Orbitron', 'OrbitronTTF', sans-serif; @@ -516,69 +497,18 @@ input[type=button]:active, select:active { */ @media screen and (max-width: 640px){ - #noVNC_clipboard_text { - width: 410px; - } #noVNC_logo { font-size: 150px; } - .noVNC_button { - font-size: 10px; - } - .noVNC_buttons_left { - padding-left: 0px; - } - .noVNC_buttons_right { - padding-right: 0px; - } - /* collapse the extra keys on lower resolutions */ - #noVNC_toggle_extra_keys_button { - display: inline; - } - #noVNC_modifiers { - display: none; - } - #noVNC_modifiers.noVNC_open { - display: inline; - } - #noVNC_toggle_ctrl_button { - position: absolute; - top: 30px; - left: 0px; - } - #noVNC_toggle_alt_button { - position: absolute; - top: 65px; - left: 0px; - } - #noVNC_send_tab_button { - position: absolute; - top: 100px; - left: 0px; - } - #noVNC_send_esc_button { - position: absolute; - top: 135px; - left: 0px; - } } @media screen and (min-width: 321px) and (max-width: 480px) { - #noVNC_clipboard_text { - width: 250px; - } #noVNC_logo { font-size: 110px; } } @media screen and (max-width: 320px) { - .noVNC_button { - font-size: 9px; - } - #noVNC_clipboard_text { - width: 220px; - } #noVNC_logo { font-size: 90px; } diff --git a/app/styles/black.css b/app/styles/black.css index 7c49ae0..e3ad249 100644 --- a/app/styles/black.css +++ b/app/styles/black.css @@ -12,28 +12,10 @@ color:#fff; } -.noVNC_button { - font-size: 12px; - vertical-align: middle; - border:1px solid #4c4c4c; - - background: #4c4c4c; /* Old browsers */ - background: -moz-linear-gradient(top, #4c4c4c 0%, #2c2c2c 50%, #000000 51%, #131313 100%); /* FF3.6+ */ - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(100%,#131313)); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* Opera11.10+ */ - background: -ms-linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* IE10+ */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */ - background: linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* W3C */ +#noVNC_control_bar { + background: #4c4c4c; } -.noVNC_button_selected { - background: #9dd53a; /* Old browsers */ - background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* FF3.6+ */ - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Opera11.10+ */ - background: -ms-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* IE10+ */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); /* IE6-9 */ - background: linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* W3C */ +.noVNC_button.noVNC_selected { + background: #9dd53a; } diff --git a/app/styles/blue.css b/app/styles/blue.css index a59428e..3db7727 100644 --- a/app/styles/blue.css +++ b/app/styles/blue.css @@ -11,3 +11,7 @@ background:#04073d; color:#fff; } + +#noVNC_control_bar { + background: #080F80; +} @@ -93,7 +93,6 @@ var UI; } UI.updateViewClip(); - UI.setBarPosition(); UI.updateVisualState(); @@ -168,7 +167,6 @@ var UI; UI.applyResizeMode(); UI.updateViewClip(); UI.updateViewDrag(); - UI.setBarPosition(); } ); document.getElementById("noVNC_status") @@ -570,6 +568,7 @@ var UI; UI.closeXvpPanel(); UI.closeClipboardPanel(); UI.closeConnectPanel(); + UI.closeExtraKeys(); }, /* ------^------- @@ -783,9 +782,6 @@ var UI; UI.rfb.set_repeaterID(UI.getSetting('repeaterID')); UI.rfb.connect(host, port, password, path); - - //Close dialog. - setTimeout(UI.setBarPosition, 100); }, disconnect: function() { @@ -1220,6 +1216,8 @@ var UI; }, openExtraKeys: function() { + UI.closeAllPanels(); + document.getElementById('noVNC_modifiers') .classList.add("noVNC_open"); document.getElementById('noVNC_toggle_extra_keys_button') @@ -1330,14 +1328,6 @@ var UI; selectbox.options.add(optn); }, - setBarPosition: function() { - document.getElementById('noVNC_control_bar').style.top = (window.pageYOffset) + 'px'; - document.getElementById('noVNC_mobile_buttons').style.left = (window.pageXOffset) + 'px'; - - var vncwidth = document.getElementById('noVNC_container').style.offsetWidth; - document.getElementById('noVNC_control_bar').style.width = vncwidth + 'px'; - } - /* ------^------- * /MISC * ============== @@ -50,10 +50,9 @@ <body> <!-- noVNC Control Bar --> - <div id="noVNC_control_bar" class="noVNC_status_normal"> - - <div class="noVNC_buttons"> + <div id="noVNC_control_bar_anchor" class="noVNC_vcenter"> + <div id="noVNC_control_bar"><div class="noVNC_scroll"> <!-- Drag/Pan the viewport --> <input type="image" alt="viewport drag" src="app/images/drag.svg" id="noVNC_view_drag_button" class="noVNC_button noVNC_hidden" @@ -78,7 +77,8 @@ <div id="noVNC_extra_keys"> <input type="image" alt="Extra keys" src="app/images/toggleextrakeys.svg" id="noVNC_toggle_extra_keys_button" class="noVNC_button" /> - <div id="noVNC_modifiers"> + <div class="noVNC_vcenter"> + <div id="noVNC_modifiers" class="noVNC_panel"> <input type="image" alt="Ctrl" src="app/images/ctrl.svg" id="noVNC_toggle_ctrl_button" class="noVNC_button" /> <input type="image" alt="Alt" src="app/images/alt.svg" @@ -88,6 +88,7 @@ <input type="image" alt="Esc" src="app/images/esc.svg" id="noVNC_send_esc_button" class="noVNC_button" /> </div> + </div> </div> <!-- Send Ctrl+Alt+Delete --> @@ -99,16 +100,19 @@ <input type="image" alt="Shutdown/Reboot" src="app/images/power.svg" id="noVNC_xvp_button" class="noVNC_button" title="Shutdown/Reboot..." /> + <div class="noVNC_vcenter"> <div id="noVNC_xvp" class="noVNC_panel"> <input type="button" id="noVNC_xvp_shutdown_button" value="Shutdown" /> <input type="button" id="noVNC_xvp_reboot_button" value="Reboot" /> <input type="button" id="noVNC_xvp_reset_button" value="Reset" /> </div> + </div> <!-- Clipboard --> <input type="image" alt="Clipboard" src="app/images/clipboard.svg" id="noVNC_clipboard_button" class="noVNC_button" title="Clipboard" /> + <div class="noVNC_vcenter"> <div id="noVNC_clipboard" class="noVNC_panel"> <textarea id="noVNC_clipboard_text" rows=5> </textarea> @@ -116,6 +120,7 @@ <input id="noVNC_clipboard_clear_button" type="button" value="Clear" class="noVNC_submit" /> </div> + </div> <!-- Toggle fullscreen --> <input type="image" alt="Fullscreen" src="app/images/fullscreen.svg" @@ -126,6 +131,7 @@ <input type="image" alt="Settings" src="app/images/settings.svg" id="noVNC_settings_button" class="noVNC_button" title="Settings" /> + <div class="noVNC_vcenter"> <div id="noVNC_settings" class="noVNC_panel"> <ul> <li><input id="noVNC_setting_encrypt" type="checkbox" /> Encrypt</li> @@ -161,6 +167,7 @@ <li><input type="button" id="noVNC_settings_apply" value="Apply" class="noVNC_submit" /></li> </ul> </div> + </div> <!-- Connection Controls --> <input type="image" alt="Connect" src="app/images/connect.svg" @@ -169,6 +176,7 @@ <input type="image" alt="Disconnect" src="app/images/disconnect.svg" id="noVNC_disconnect_button" class="noVNC_button" title="Disconnect" /> + <div class="noVNC_vcenter"> <div id="noVNC_connect_controls" class="noVNC_panel"> <ul> <li><label><strong>Host: </strong><input id="noVNC_setting_host" /></label></li> @@ -178,7 +186,8 @@ <li><input id="noVNC_connect_button" type="button" value="Connect" class="noVNC_submit" /></li> </ul> </div> - </div> + </div> + </div></div> </div> <!-- End of noVNC_control_bar --> |