Mobile icons.

- CSS highlighting of buttons when selected.
- Keyboard button tweaked to allow show/hide toggle of keyboard.

Signed-off-by: Chris Gordon <snorkeyg@gmail.com>

include/base.css

@@ -47,19 +47,14 @@ html {
 /*Mobile buttons bar.*/
 #noVNC-control-bar {
   position:fixed;
-  background-color:#6d84a2;
-  background-image: -webkit-gradient(
-    linear,
-    left bottom,
-    left top,
-    color-stop(0.5, rgb(109,132,162)),
-    color-stop(1, rgb(140,157,179))
-  );
-  background-image: -moz-linear-gradient(
-    center bottom,
-    rgb(109,132,162) 50%,
-    rgb(140,157,179) 100%
-  );
+ 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 */
   display:block;
   height:44px;
   left:0;
@@ -220,14 +215,14 @@ html {
 /*Bubble contents divs*/
 #noVNC_settings {
   display:none; 
-  margin-top:72px;
-  right:10px;
+  margin-top:77px;
+  right:20px;
   position:fixed;
 }
 
 #noVNC_controls {
-  margin-top:72px;
-  right:10px;
+  margin-top:77px;
+  right:12px;
   position:fixed;
 }
 #noVNC_controls.top:after  {
@@ -236,8 +231,8 @@ html {
 
 #noVNC_clipboard {
   display:none; 
-  margin-top:72px;
-  right:20px;
+  margin-top:77px;
+  right:30px;
   position:fixed;
 }
 #noVNC_clipboard.top:after {
@@ -277,8 +272,12 @@ html {
 #keyboardinput {
   width:1px;
   height:1px;
-  background-color:#6d84a2;
+  background-color:#fff;
+  color:#fff;
   border:0;
+  position: relative;
+  left: -40px;
+  z-index: -1;
 }
 
 .noVNC_status_warn {
@@ -293,9 +292,43 @@ html {
 
 .noVNC_status_button {
   font-size: 12px;
-  padding: 2px;
+  padding: 4px 4px;
   vertical-align: middle;
+  border:1px solid #869dbc;
+  -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;*/
+
+  
+}
+
+.noVNC_status_button_selected {
+	  font-size: 12px;
+	  padding: 4px 4px;
+	  vertical-align: middle;
+	  border:1px solid #4366a9;
+	  -webkit-border-radius: 6px;
+	  -moz-border-radius: 6px;
+	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 */
+ /*box-shadow:inset 0.4px 0.4px 0.4px #000000;*/
 }
+
 #noVNC_clipboard_text {
   width: 500px;
 }
@@ -307,7 +340,6 @@ html {
 @media screen and (min-width: 481px) and (max-width: 640px) {
   .noVNC_status_button {
     font-size: 10px;
-    padding: 1px;
   }
   #noVNC_clipboard_text {
     width: 410px;
@@ -320,7 +352,6 @@ html {
 @media screen and (min-width: 321px) and (max-width: 480px) {
   .noVNC_status_button {
     font-size: 10px;
-    padding: 0px;
   }
   #noVNC_clipboard_text {
     width: 250px;
@@ -333,7 +364,6 @@ html {
 @media screen and (max-width: 320px) {
   .noVNC_status_button {
     font-size: 9px;
-    padding: 0px;
   }
   #noVNC_clipboard_text {
     width: 220px;

include/black.css

@@ -1,17 +1,12 @@
 #noVNC-control-bar {
-  background-color:#000;
-  background-image: -webkit-gradient(
-    linear,
-    left bottom,
-    left top,
-    color-stop(0.5, rgb(0,0,0)),
-    color-stop(0.5, rgb(20,20,20))
-  );
-  background-image: -moz-linear-gradient(
-    center bottom,
-    rgb(0,0,0) 50%,
-    rgb(20,20,20) 50%
-  );
+	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 */
 }
 
 .triangle-right {
@@ -24,3 +19,30 @@
   background-color:#000;
 }
 
+.noVNC_status_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_status_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 */
+}

include/ui.js

@@ -16,7 +16,7 @@ rfb_state : 'loaded',
 settingsOpen : false,
 connSettingsOpen : true,
 clipboardOpen: false,
-
+keyboardVisible: false,
 // Render default UI and initialize settings menu
 load: function() {
     var html = '', i, sheet, sheets, llevels;
@@ -199,9 +199,11 @@ toggleClipboardPanel: function() {
     //Toggle Clipboard Panel
     if (UI.clipboardOpen == true) {
         $D('noVNC_clipboard').style.display = "none";
+        $D('clipboardButton').className = "noVNC_status_button";
         UI.clipboardOpen = false;
     } else {
         $D('noVNC_clipboard').style.display = "block";
+        $D('clipboardButton').className = "noVNC_status_button_selected";
         UI.clipboardOpen = true;
     }
 },
@@ -212,6 +214,7 @@ toggleConnectPanel: function() {
     if (UI.settingsOpen == true) {
         UI.settingsApply();
         UI.closeSettingsMenu();
+        $D('connectButton').className = "noVNC_status_button";
     }
     if (UI.clipboardOpen == true) {
         UI.toggleClipboardPanel(); 
@@ -220,9 +223,11 @@ toggleConnectPanel: function() {
     //Toggle Connection Panel
     if (UI.connSettingsOpen == true) {
         $D('noVNC_controls').style.display = "none";
+        $D('connectButton').className = "noVNC_status_button";
         UI.connSettingsOpen = false;
     } else {
         $D('noVNC_controls').style.display = "block";
+        $D('connectButton').className = "noVNC_status_button_selected";
         UI.connSettingsOpen = true;
         $D('noVNC_host').focus();
     }
@@ -265,12 +270,14 @@ openSettingsMenu: function() {
         UI.toggleConnectPanel();
     }
     $D('noVNC_settings').style.display = "block";
+    $D('settingsButton').className = "noVNC_status_button_selected";
     UI.settingsOpen = true;
 },
 
 // Close menu (without applying settings)
 closeSettingsMenu: function() {
     $D('noVNC_settings').style.display = "none";
+    $D('settingsButton').className = "noVNC_status_button";
     UI.settingsOpen = false;
 },
 
@@ -551,21 +558,43 @@ setViewDrag: function(drag) {
         drag = !UI.rfb.get_viewportDrag();
     }
     if (drag) {
-        vmb.style.backgroundColor = "black";
-        vmb.style.color = "lightgray";
+        $D('noVNC_view_drag_button').className = "noVNC_status_button_selected";
         UI.rfb.set_viewportDrag(true);
     } else {
-        vmb.style.backgroundColor = "";
-        vmb.style.color = "";
+        $D('noVNC_view_drag_button').className = "noVNC_status_button";
         UI.rfb.set_viewportDrag(false);
     }
 },
 
 // On touch devices, show the OS keyboard
 showKeyboard: function() {
-    $D('keyboardinput').focus();
+    if(UI.keyboardVisible == false) {
+    	$D('keyboardinput').focus();
+    	UI.keyboardVisible = true;
+    	$D('showKeyboard').className = 
+        "noVNC_status_button_selected";
+    } else if(UI.keyboardVisible == true) {
+    	$D('keyboardinput').blur();
+    	$D('showKeyboard').className = 
+        "noVNC_status_button";
+    	UI.keyboardVisible = false;	
+    }
+    
 },
 
+keyInputBlur: function() {
+	$D('showKeyboard').className = 
+        "noVNC_status_button";
+        //Weird bug in iOS if you change keyboardVisible
+        //here it does not actually occur so next time 
+        //you click keyboard icon it doesnt work.
+        var t=setTimeout("UI.setKeyboard()",100)
+       
+},
+
+setKeyboard: function() {
+	UI.keyboardVisible = false;	
+},
 
 // iOS < Version 5 does not support position fixed. Javascript workaround:
 setOnscroll: function() {

vnc.html

@@ -47,52 +47,57 @@
     <div id="noVNC-control-bar">
         <!--noVNC Mobile Device only Buttons-->
         <div class="noVNC-buttons-left">
-            <input type="image" src="images/move.png"
+            <input type="image" src="images/drag_sml.png"
                 id="noVNC_view_drag_button" class="noVNC_status_button"
-                value="Move" title="Move/Drag Viewport"
+                title="Move/Drag Viewport"
                 onclick="UI.setViewDrag();">
             <div id="noVNC_mobile_buttons">
-                <input type="button" class="noVNC_status_button"
-                    id="noVNC_mouse_button0" value=" "
+                <input type="image" src="images/nobutton_mouse.png"
+                    class="noVNC_status_button"
+                    id="noVNC_mouse_button0"
                     onclick="UI.setMouseButton(1);">
-                <input type="button" class="noVNC_status_button"
-                    id="noVNC_mouse_button1" value="L"
+                <input type="image" src="images/left_mouse.png"
+                    class="noVNC_status_button"
+                    id="noVNC_mouse_button1"
                     onclick="UI.setMouseButton(2);">
-                <input type="button" class="noVNC_status_button"
-                    id="noVNC_mouse_button2" value="M"
+                <input type="image" src="images/middle_mouse.png"
+                    class="noVNC_status_button"
+                    id="noVNC_mouse_button2"
                     onclick="UI.setMouseButton(4);">
-                <input type="button" class="noVNC_status_button"
-                    id="noVNC_mouse_button4" value="R"
+                <input type="image" src="images/right_mouse.png"
+                    class="noVNC_status_button"
+                    id="noVNC_mouse_button4"
                     onclick="UI.setMouseButton(0);">
-                <input type="image" src="images/keyboard.png"
+                <input type="image" src="images/keyboard_sml.png"
                     id="showKeyboard" class="noVNC_status_button" 
                     value="Keyboard" title="Show Keyboard"
                     onclick="UI.showKeyboard()"/>
                 <input type="url"
                     autocapitalize="off" autocorrect="off"
                     id="keyboardinput" class="noVNC_status_button"
-                    onKeyDown="onKeyDown(event);"/>
+                    onKeyDown="onKeyDown(event);" onblur="UI.keyInputBlur();"/>
             </div>
         </div>
 
         <!--noVNC Buttons-->
         <div class="noVNC-buttons-right">
-            <input type="button" class="noVNC_status_button"
+            <input type="image" src="images/ctrlaltdel_sml.png"
+                class="noVNC_status_button"
                 value="CtrlAltDel" id="sendCtrlAltDelButton"
                 onclick="UI.sendCtrlAltDel();" />
-            <input type="image" src="images/clipboard.png"
+            <input type="image" src="images/clipboard_sml.png"
                 id="clipboardButton" class="noVNC_status_button"
                 value="Clipboard" title="Clipboard"
                 onclick="UI.toggleClipboardPanel();" />
-            <input type="image" src="images/settings.png"
+            <input type="image" src="images/settings_sml.png"
                 id="settingsButton" class="noVNC_status_button"
                 value="Settings" title="Settings"
                 onclick="UI.toggleSettingsPanel();" />
-            <input type="image" src="images/connect.png"
-                id="connectButton" class="noVNC_status_button"
+            <input type="image" src="images/connect_sml.png"
+                id="connectButton" class="noVNC_status_button_selected"
                 value="Connect" title="Connect"
                 onclick="UI.toggleConnectPanel()" />
-            <input type="image" src="images/disconnect.png"
+            <input type="image" src="images/disconnect_sml.png"
                 id="disconnectButton" class="noVNC_status_button"
                 value="Disconnect" title="Disconnect"
                 onclick="UI.disconnect()" />