Disable labels for settings as well

Makes the settings UI easier to read.

diff --git a/app/styles/base.css b/app/styles/base.css
index 1ff8cf8454a56374da2eb49559d1757fda332054..6bb23a470198708b7bd9a029db480cbbeb5c12cf 100644 (file)
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -41,6 +41,10 @@ html {
   display: none;
 }
 
+.noVNC_disabled {
+  color: rgb(128, 128, 128);
+}
+
 /* ----------------------------------------
  * Spinner
  * ----------------------------------------

diff --git a/app/ui.js b/app/ui.js
index ad80c63baceb24e856e9276c63ec4abf62fc25c2..e70419b3f68b312a7d4faf78f2a4f8d7ef0b9173 100644 (file)
--- a/app/ui.js
+++ b/app/ui.js
@@ -233,6 +233,29 @@ var UI;
             UI.initSetting('repeaterID', '');
             UI.initSetting('reconnect', false);
             UI.initSetting('reconnect_delay', 5000);
+
+            UI.setupSettingLabels();
+        },
+
+        // Adds a link to the label elements on the corresponding input elements
+        setupSettingLabels: function() {
+            var labels = document.getElementsByTagName('LABEL');
+            for (var i = 0; i < labels.length; i++) {
+                var htmlFor = labels[i].htmlFor;
+                if (htmlFor != '') {
+                    var elem = document.getElementById(htmlFor);
+                    if (elem) elem.label = labels[i];
+                } else {
+                    // If 'for' isn't set, use the first input element child
+                    var children = labels[i].children;
+                    for (var j = 0; j < children.length; j++) {
+                        if (children[j].form !== undefined) {
+                            children[j].label = labels[i];
+                            break;
+                        }
+                    }
+                }
+            }
         },
 
         initRFB: function() {
@@ -494,32 +517,40 @@ var UI;
         // Disable/enable controls depending on connection state
         updateVisualState: function() {
             //Util.Debug(">> updateVisualState");
-            document.getElementById('noVNC_setting_encrypt').disabled = UI.connected;
-            document.getElementById('noVNC_setting_true_color').disabled = UI.connected;
-            if (Util.browserSupportsCursorURIs()) {
-                document.getElementById('noVNC_setting_cursor').disabled = UI.connected;
-            } else {
-                UI.updateSetting('cursor', !Util.isTouchDevice);
-                document.getElementById('noVNC_setting_cursor').disabled = true;
-            }
 
             UI.enableDisableViewClip();
-            document.getElementById('noVNC_setting_shared').disabled = UI.connected;
-            document.getElementById('noVNC_setting_view_only').disabled = UI.connected;
-            document.getElementById('noVNC_setting_host').disabled = UI.connected;
-            document.getElementById('noVNC_setting_port').disabled = UI.connected;
-            document.getElementById('noVNC_setting_path').disabled = UI.connected;
-            document.getElementById('noVNC_setting_repeaterID').disabled = UI.connected;
-            document.getElementById('noVNC_setting_reconnect').disabled = UI.connected;
-            document.getElementById('noVNC_setting_reconnect_delay').disabled = UI.connected;
 
             if (UI.connected) {
+                UI.disableSetting('encrypt');
+                UI.disableSetting('true_color');
+                UI.disableSetting('cursor');
+                UI.disableSetting('shared');
+                UI.disableSetting('view_only');
+                UI.disableSetting('host');
+                UI.disableSetting('port');
+                UI.disableSetting('path');
+                UI.disableSetting('repeaterID');
+                UI.disableSetting('reconnect');
+                UI.disableSetting('reconnect_delay');
                 UI.updateViewClip();
                 UI.setMouseButton(1);
 
                 // Hide the controlbar after 2 seconds
                 UI.closeControlbarTimeout = setTimeout(UI.closeControlbar, 2000);
             } else {
+                UI.enableSetting('encrypt');
+                UI.enableSetting('true_color');
+                if (Util.browserSupportsCursorURIs() && !Util.isTouchDevice) {
+                    UI.enableSetting('cursor');
+                }
+                UI.enableSetting('shared');
+                UI.enableSetting('view_only');
+                UI.enableSetting('host');
+                UI.enableSetting('port');
+                UI.enableSetting('path');
+                UI.enableSetting('repeaterID');
+                UI.enableSetting('reconnect');
+                UI.enableSetting('reconnect_delay');
                 UI.updateXvpButton(0);
                 UI.keepControlbar();
             }
@@ -860,6 +891,21 @@ var UI;
             return val;
         },
 
+        // These helpers compensate for the lack of parent-selectors and
+        // previous-sibling-selectors in CSS which are needed when we want to
+        // disable the labels that belong to disabled input elements.
+        disableSetting: function(name) {
+            var ctrl = document.getElementById('noVNC_setting_' + name);
+            ctrl.disabled = true;
+            ctrl.label.classList.add('noVNC_disabled');
+        },
+
+        enableSetting: function(name) {
+            var ctrl = document.getElementById('noVNC_setting_' + name);
+            ctrl.disabled = false;
+            ctrl.label.classList.remove('noVNC_disabled');
+        },
+
 /* ------^-------
  *   /SETTINGS
  * ==============
@@ -890,7 +936,7 @@ var UI;
                 UI.updateSetting('cursor');
             } else {
                 UI.updateSetting('cursor', !Util.isTouchDevice);
-                document.getElementById('noVNC_setting_cursor').disabled = true;
+                UI.disableSetting('cursor');
             }
             UI.updateSetting('clip');
             UI.updateSetting('resize');
@@ -1314,12 +1360,12 @@ var UI;
         // Handle special cases where clipping is forced on/off or locked
         enableDisableViewClip: function() {
             var resizeSetting = UI.getSetting('resize');
-            if (resizeSetting === 'downscale' || resizeSetting === 'scale') {
-                // Disable clipping if we are scaling
-                document.getElementById('noVNC_setting_clip').disabled = true;
+            // Disable clipping if we are scaling, connected or on touch
+            if (resizeSetting === 'downscale' || resizeSetting === 'scale' ||
+                UI.connected || Util.isTouchDevice) {
+                UI.disableSetting('clip');
             } else {
-                document.getElementById('noVNC_setting_clip').disabled =
-                    UI.connected || Util.isTouchDevice;
+                UI.enableSetting('clip');
             }
         },