Simplify modifier button display

diff --git a/app/styles/base.css b/app/styles/base.css
index f438a49d8a4789a6a60131171d1e511c3280d488..855c737a7ddcbc5f97cdb9886c81ca9e541680ca 100644 (file)
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -2,6 +2,7 @@
  * noVNC base CSS
  * Copyright (C) 2012 Joel Martin
  * Copyright (C) 2016 Samuel Mannehed for Cendio AB
+ * Copyright (C) 2016 Pierre Ossman for Cendio AB
  * noVNC is licensed under the MPL 2.0 (see LICENSE.txt)
  * This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
  */
@@ -151,6 +152,9 @@ html {
 #noVNC_sendEsc_button {
   display: inline;
 }
+#noVNC_modifiers {
+  display: inline;
+}
 
 /* Left side buttons */
 .noVNC_buttons_left {
@@ -430,26 +434,25 @@ html {
   #noVNC_toggleExtraKeys_button {
     display: inline;
   }
-  #noVNC_toggleCtrl_button {
+  #noVNC_modifiers {
     display: none;
+  }
+  #noVNC_toggleCtrl_button {
     position: absolute;
     top: 30px;
     left: 0px;
   }
   #noVNC_toggleAlt_button {
-    display: none;
     position: absolute;
     top: 65px;
     left: 0px;
   }
   #noVNC_sendTab_button {
-    display: none;
     position: absolute;
     top: 100px;
     left: 0px;
   }
   #noVNC_sendEsc_button {
-    display: none;
     position: absolute;
     top: 135px;
     left: 0px;

diff --git a/app/ui.js b/app/ui.js
index 214c6a1daee1eb5e7f9fa146bdf135bc212f19a5..ee11470533405f1afd48e73aa9f1f65b51fe17bc 100644 (file)
--- a/app/ui.js
+++ b/app/ui.js
@@ -2,6 +2,7 @@
  * noVNC: HTML5 VNC client
  * Copyright (C) 2012 Joel Martin
  * Copyright (C) 2016 Samuel Mannehed for Cendio AB
+ * Copyright (C) 2016 Pierre Ossman for Cendio AB
  * Licensed under MPL 2.0 (see LICENSE.txt)
  *
  * See README.md for usage and integration instructions.
@@ -1216,17 +1217,11 @@ var UI;
         toggleExtraKeys: function() {
             UI.keepKeyboard();
             if(UI.extraKeysVisible === false) {
-                document.getElementById('noVNC_toggleCtrl_button').style.display = "inline";
-                document.getElementById('noVNC_toggleAlt_button').style.display = "inline";
-                document.getElementById('noVNC_sendTab_button').style.display = "inline";
-                document.getElementById('noVNC_sendEsc_button').style.display = "inline";
+                document.getElementById('noVNC_modifiers').style.display = "inline";
                 document.getElementById('noVNC_toggleExtraKeys_button').className = "noVNC_status_button_selected";
                 UI.extraKeysVisible = true;
             } else if(UI.extraKeysVisible === true) {
-                document.getElementById('noVNC_toggleCtrl_button').style.display = "";
-                document.getElementById('noVNC_toggleAlt_button').style.display = "";
-                document.getElementById('noVNC_sendTab_button').style.display = "";
-                document.getElementById('noVNC_sendEsc_button').style.display = "";
+                document.getElementById('noVNC_modifiers').style.display = "";
                 document.getElementById('noVNC_toggleExtraKeys_button').className = "noVNC_status_button";
                 UI.extraKeysVisible = false;
             }

diff --git a/vnc.html b/vnc.html
index 0521c4e154225dae249d3f6dd00a76fffd6feb30..c7cad8fb30a682f4b236b3cd2e328fe3924589e6 100644 (file)
--- a/vnc.html
+++ b/vnc.html
@@ -6,6 +6,7 @@
     noVNC example: simple example using default UI
     Copyright (C) 2012 Joel Martin
     Copyright (C) 2016 Samuel Mannehed for Cendio AB
+    Copyright (C) 2016 Pierre Ossman for Cendio AB
     noVNC is licensed under the MPL 2.0 (see LICENSE.txt)
     This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
 
@@ -81,14 +82,16 @@
                 <div id="noVNC_extra_keys">
                     <input type="image" alt="Extra keys" src="app/images/toggleextrakeys.png"
                         id="noVNC_toggleExtraKeys_button" class="noVNC_status_button" />
-                    <input type="image" alt="Ctrl" src="app/images/ctrl.png"
-                        id="noVNC_toggleCtrl_button" class="noVNC_status_button" />
-                    <input type="image" alt="Alt" src="app/images/alt.png"
-                        id="noVNC_toggleAlt_button" class="noVNC_status_button" />
-                    <input type="image" alt="Tab" src="app/images/tab.png"
-                        id="noVNC_sendTab_button" class="noVNC_status_button" />
-                    <input type="image" alt="Esc" src="app/images/esc.png"
-                        id="noVNC_sendEsc_button" class="noVNC_status_button" />
+                    <div id="noVNC_modifiers">
+                        <input type="image" alt="Ctrl" src="app/images/ctrl.png"
+                            id="noVNC_toggleCtrl_button" class="noVNC_status_button" />
+                        <input type="image" alt="Alt" src="app/images/alt.png"
+                            id="noVNC_toggleAlt_button" class="noVNC_status_button" />
+                        <input type="image" alt="Tab" src="app/images/tab.png"
+                            id="noVNC_sendTab_button" class="noVNC_status_button" />
+                        <input type="image" alt="Esc" src="app/images/esc.png"
+                            id="noVNC_sendEsc_button" class="noVNC_status_button" />
+                    </div>
                 </div>
             </div>
         </div>