Group WebSocket settings together

It was easy to confuse them as being VNC settings, so keep them all
under one group.

4 files changed, 133 insertions, 18 deletions

diff --git a/app/images/expander.svg b/app/images/expander.svg
new file mode 100644
index 0000000..e163535
--- /dev/null
+++ b/app/images/expander.svg
@@ -0,0 +1,69 @@
+<?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="9"
+   height="10"
+   viewBox="0 0 9 10"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="expander.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="45.254834"
+     inkscape:cx="9.8737281"
+     inkscape:cy="6.4583132"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     units="px"
+     inkscape:snap-object-midpoints="false"
+     inkscape:object-nodes="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1">
+    <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,-1042.3622)">
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:4;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="M 2.0800781,1042.3633 A 2.0002,2.0002 0 0 0 0,1044.3613 l 0,6 a 2.0002,2.0002 0 0 0 3.0292969,1.7168 l 5,-3 a 2.0002,2.0002 0 0 0 0,-3.4316 l -5,-3 a 2.0002,2.0002 0 0 0 -0.9492188,-0.2832 z"
+       id="path4138"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>
diff --git a/app/styles/base.css b/app/styles/base.css
index 749bcea..19ec70e 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -458,6 +458,32 @@ input[type=button]:active, select:active {
   float: right;
 }
 
+/* Expanders */
+.noVNC_expander {
+  cursor: pointer;
+}
+.noVNC_expander::before {
+  content: url("../images/expander.svg");
+  display: inline-block;
+  margin-right: 5px;
+  transition: 0.2s ease-in-out;
+}
+.noVNC_expander.noVNC_open::before {
+  transform: rotateZ(90deg);
+}
+.noVNC_expander ~ * {
+  margin: 5px;
+  margin-left: 10px;
+  padding: 5px;
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: 5px;
+}
+.noVNC_expander:not(.noVNC_open) ~ * {
+  display: none;
+}
+
+/* Control bar content */
+
 :root:not(.noVNC_connected) #noVNC_view_drag_button {
   display: none;
 }
@@ -528,6 +554,9 @@ input[type=button]:active, select:active {
   margin: 0px;
   padding: 0px;
 }
+#noVNC_setting_port {
+  width: 80px;
+}
 #noVNC_setting_path {
   width: 100px;
 }
@@ -544,9 +573,6 @@ input[type=button]:active, select:active {
   margin: 0px;
   padding: 0px;
 }
-#noVNC_setting_port {
-  width: 80px;
-}
 
 /* ----------------------------------------
  * Status Dialog
diff --git a/app/ui.js b/app/ui.js
index 9ff2406..b2e7e99 100644
--- a/app/ui.js
+++ b/app/ui.js
@@ -254,6 +254,11 @@ var UI;
                 .addEventListener('mousemove', UI.dragControlbarHandle);
             // resize events aren't available for elements
             window.addEventListener('resize', UI.updateControlbarHandle);
+
+            var exps = document.getElementsByClassName("noVNC_expander");
+            for (var i = 0;i < exps.length;i++) {
+                exps[i].addEventListener('click', UI.toggleExpander);
+            }
         },
 
         addTouchSpecificHandlers: function() {
@@ -459,6 +464,8 @@ var UI;
             document.getElementById('noVNC_setting_resize').disabled = UI.connected;
             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;
 
@@ -722,6 +729,14 @@ var UI;
             UI.activateControlbar();
         },
 
+        toggleExpander: function(e) {
+            if (this.classList.contains("noVNC_open")) {
+                this.classList.remove("noVNC_open");
+            } else {
+                this.classList.add("noVNC_open");
+            }
+        },
+
 /* ------^-------
  *    /VISUAL
  * ==============
@@ -825,6 +840,8 @@ var UI;
             UI.saveSetting('clip');
             UI.saveSetting('shared');
             UI.saveSetting('view_only');
+            UI.saveSetting('host');
+            UI.saveSetting('port');
             UI.saveSetting('path');
             UI.saveSetting('repeaterID');
             UI.saveSetting('logging');
@@ -1021,8 +1038,6 @@ var UI;
             document.getElementById('noVNC_connect_controls_button')
                 .classList.remove("noVNC_selected");
 
-            UI.saveSetting('host');
-            UI.saveSetting('port');
             //UI.saveSetting('password');
         },
 
diff --git a/vnc.html b/vnc.html
index 9d2240e..2ac7511 100644
--- a/vnc.html
+++ b/vnc.html
@@ -177,9 +177,6 @@
                         <img src="app/images/settings.svg"> Settings
                     </li>
                     <li>
-                        <label><input id="noVNC_setting_encrypt" type="checkbox" /> Encrypt</label>
-                    </li>
-                    <li>
                         <label><input id="noVNC_setting_true_color" type="checkbox" checked /> True Color</label>
                     </li>
                     <li>
@@ -196,8 +193,24 @@
                     </li>
                     <li><hr></li>
                     <li>
-                        <label for="noVNC_setting_path">Path:</label>
-                        <input id="noVNC_setting_path" type="input" value="websockify" />
+                        <div class="noVNC_expander">WebSocket</div>
+                        <div><ul>
+                            <li>
+                                <label><input id="noVNC_setting_encrypt" type="checkbox" /> Encrypt</label>
+                            </li>
+                            <li>
+                                <label for="noVNC_setting_host">Host:</label>
+                                <input id="noVNC_setting_host" />
+                            </li>
+                            <li>
+                                <label for="noVNC_setting_port">Port:</label>
+                                <input id="noVNC_setting_port" />
+                            </li>
+                            <li>
+                                <label for="noVNC_setting_path">Path:</label>
+                                <input id="noVNC_setting_path" type="input" value="websockify" />
+                            </li>
+                        </ul></div>
                     </li>
                     <li>
                         <label for="noVNC_setting_resize">Scaling Mode:</label>
@@ -242,14 +255,6 @@
                         <img src="app/images/connect.svg"> Connection
                     </li>
                     <li>
-                        <label for="noVNC_setting_host">Host:</label>
-                        <input id="noVNC_setting_host" />
-                    </li>
-                    <li>
-                        <label for="noVNC_setting_port">Port:</label>
-                        <input id="noVNC_setting_port" />
-                    </li>
-                    <li>
                         <label for="noVNC_setting_password">Password:</label>
                         <input id="noVNC_setting_password" type="password" />
                     </li>