From 3911256cffaeb171baba06064845266253743cd5 Mon Sep 17 00:00:00 2001
From: samhed <samuel@cendio.se>
Date: Wed, 24 Aug 2016 11:10:40 +0200
Subject: [PATCH] Place related elements together

In order to clarify the HTML we group related panels together with
the corresponding buttons.
---
 vnc.html | 149 ++++++++++++++++++++++++++++---------------------------
 1 file changed, 77 insertions(+), 72 deletions(-)
diff --git a/vnc.html b/vnc.html
index b33b704e..2830bc1a 100644
--- a/vnc.html
+++ b/vnc.html
@@ -48,12 +48,17 @@
 </head>
 
 <body>
+    <!-- noVNC Control Bar -->
     <div id="noVNC_control_bar" class="noVNC_status_normal">
-        <!--noVNC Mobile Device only Buttons-->
+
         <div class="noVNC_buttons_left">
+
+            <!-- Drag/Pan the viewport -->
             <input type="image" alt="viewport drag" src="app/images/drag.png"
                 id="noVNC_view_drag_button" class="noVNC_status_button"
                 title="Move/Drag Viewport" />
+
+            <!--noVNC Touch Device only buttons-->
             <div id="noVNC_mobile_buttons">
                 <input type="image" alt="No mousebutton" src="app/images/mouse_none.png"
                     id="noVNC_mouse_button0" class="noVNC_status_button" />
@@ -90,29 +95,99 @@
 
         <div id="noVNC_status"></div>
 
-        <!--noVNC Buttons-->
         <div class="noVNC_buttons_right">
+            <!-- Send Ctrl+Alt+Delete -->
             <input type="image" alt="Ctrl+Alt+Del" src="app/images/ctrlaltdel.png"
                 id="noVNC_sendCtrlAltDel_button" class="noVNC_status_button"
                 title="Send Ctrl-Alt-Del" />
+
+            <!-- XVP Shutdown/Reboot -->
             <input type="image" alt="Shutdown/Reboot" src="app/images/power.png"
                 id="noVNC_toggleXvp_button" class="noVNC_status_button"
                 title="Shutdown/Reboot..." />
+            <div id="noVNC_xvp" class="triangle-right top">
+                <span id="noVNC_xvp_menu">
+                    <input type="button" id="noVNC_xvpShutdown_button" value="Shutdown" />
+                    <input type="button" id="noVNC_xvpReboot_button" value="Reboot" />
+                    <input type="button" id="noVNC_xvpReset_button" value="Reset" />
+                </span>
+            </div>
+
+            <!-- Clipboard -->
             <input type="image" alt="Clipboard" src="app/images/clipboard.png"
                 id="noVNC_clipboard_button" class="noVNC_status_button"
                 title="Clipboard" />
+            <div id="noVNC_clipboard" class="triangle-right top">
+                <textarea id="noVNC_clipboard_text" rows=5>
+                </textarea>
+                <br />
+                <input id="noVNC_clipboard_clear_button" type="button"
+                    value="Clear" />
+            </div>
+
+            <!-- Toggle fullscreen -->
             <input type="image" alt="Fullscreen" src="app/images/fullscreen.png"
                 id="noVNC_fullscreen_button" class="noVNC_status_button"
                 title="Fullscreen" />
+
+            <!-- Settings -->
             <input type="image" alt="Settings" src="app/images/settings.png"
                 id="noVNC_settings_button" class="noVNC_status_button"
                 title="Settings" />
+            <div id="noVNC_settings" class="triangle-right top">
+                <span id="noVNC_settings_menu">
+                    <ul>
+                        <li><input id="noVNC_setting_encrypt" type="checkbox" /> Encrypt</li>
+                        <li><input id="noVNC_setting_true_color" type="checkbox" checked /> True Color</li>
+                        <li><input id="noVNC_setting_cursor" type="checkbox" /> Local Cursor</li>
+                        <li><input id="noVNC_setting_clip" type="checkbox" /> Clip to Window</li>
+                        <li><input id="noVNC_setting_shared" type="checkbox" /> Shared Mode</li>
+                        <li><input id="noVNC_setting_view_only" type="checkbox" /> View Only</li>
+                        <hr>
+                        <li><input id="noVNC_setting_path" type="input" value="websockify" /> Path</li>
+                        <li><label>
+                                <select id="noVNC_setting_resize" name="vncResize">
+                                    <option value="off">None</option>
+                                    <option value="scale">Local Scaling</option>
+                                    <option value="downscale">Local Downscaling</option>
+                                    <option value="remote">Remote Resizing</option>
+                                </select> Scaling Mode</label>
+                        </li>
+                        <li><input id="noVNC_setting_repeaterID" type="input" value="" /> Repeater ID</li>
+                        <hr>
+                        <!-- Stylesheet selection dropdown -->
+                        <li><label><strong>Style: </strong>
+                                <select id="noVNC_setting_stylesheet" name="vncStyle">
+                                    <option value="default">default</option>
+                            </select></label>
+                        </li>
+                        <!-- Logging selection dropdown -->
+                        <li><label><strong>Logging: </strong>
+                                <select id="noVNC_setting_logging" name="vncLogging">
+                            </select></label>
+                        </li>
+                        <hr>
+                        <li><input type="button" id="noVNC_settings_apply" value="Apply" /></li>
+                    </ul>
+                </span>
+            </div>
+
+            <!-- Connection Controls -->
             <input type="image" alt="Connect" src="app/images/connect.png"
                 id="noVNC_connectPanel_button" class="noVNC_status_button"
                 title="Connect" />
             <input type="image" alt="Disconnect" src="app/images/disconnect.png"
                 id="noVNC_disconnect_button" class="noVNC_status_button"
                 title="Disconnect" />
+            <div id="noVNC_controls" class="triangle-right top">
+                <ul>
+                    <li><label><strong>Host: </strong><input id="noVNC_setting_host" /></label></li>
+                    <li><label><strong>Port: </strong><input id="noVNC_setting_port" /></label></li>
+                    <li><label><strong>Password: </strong><input id="noVNC_setting_password" type="password" /></label></li>
+                    <li><label><strong>Token: </strong><input id="noVNC_setting_token" /></label></li>
+                    <li><input id="noVNC_connect_button" type="button" value="Connect" /></li>
+                </ul>
+            </div>
         </div>
 
         <!-- Description Panel -->
@@ -135,78 +210,8 @@
         <div id="noVNC_popup_status" class="">
         </div>
 
-        <!-- Clipboard Panel -->
-        <div id="noVNC_clipboard" class="triangle-right top">
-            <textarea id="noVNC_clipboard_text" rows=5>
-            </textarea>
-            <br />
-            <input id="noVNC_clipboard_clear_button" type="button"
-                value="Clear" />
-        </div>
-
-        <!-- XVP Shutdown/Reboot Panel -->
-        <div id="noVNC_xvp" class="triangle-right top">
-            <span id="noVNC_xvp_menu">
-                <input type="button" id="noVNC_xvpShutdown_button" value="Shutdown" />
-                <input type="button" id="noVNC_xvpReboot_button" value="Reboot" />
-                <input type="button" id="noVNC_xvpReset_button" value="Reset" />
-            </span>
-        </div>
-
-        <!-- Settings Panel -->
-        <div id="noVNC_settings" class="triangle-right top">
-            <span id="noVNC_settings_menu">
-                <ul>
-                    <li><input id="noVNC_setting_encrypt" type="checkbox" /> Encrypt</li>
-                    <li><input id="noVNC_setting_true_color" type="checkbox" checked /> True Color</li>
-                    <li><input id="noVNC_setting_cursor" type="checkbox" /> Local Cursor</li>
-                    <li><input id="noVNC_setting_clip" type="checkbox" /> Clip to Window</li>
-                    <li><input id="noVNC_setting_shared" type="checkbox" /> Shared Mode</li>
-                    <li><input id="noVNC_setting_view_only" type="checkbox" /> View Only</li>
-                    <hr>
-                    <li><input id="noVNC_setting_path" type="input" value="websockify" /> Path</li>
-                    <li><label>
-                        <select id="noVNC_setting_resize" name="vncResize">
-                            <option value="off">None</option>
-                            <option value="scale">Local Scaling</option>
-                            <option value="downscale">Local Downscaling</option>
-                            <option value="remote">Remote Resizing</option>
-                        </select> Scaling Mode</label>
-                    </li>
-                    <li><input id="noVNC_setting_repeaterID" type="input" value="" /> Repeater ID</li>
-                    <hr>
-                    <!-- Stylesheet selection dropdown -->
-                    <li><label><strong>Style: </strong>
-                        <select id="noVNC_setting_stylesheet" name="vncStyle">
-                            <option value="default">default</option>
-                        </select></label>
-                    </li>
-
-                    <!-- Logging selection dropdown -->
-                    <li><label><strong>Logging: </strong>
-                        <select id="noVNC_setting_logging" name="vncLogging">
-                        </select></label>
-                    </li>
-                    <hr>
-                    <li><input type="button" id="noVNC_settings_apply" value="Apply" /></li>
-                </ul>
-            </span>
-        </div>
-
-        <!-- Connection Panel -->
-        <div id="noVNC_controls" class="triangle-right top">
-            <ul>
-                <li><label><strong>Host: </strong><input id="noVNC_setting_host" /></label></li>
-                <li><label><strong>Port: </strong><input id="noVNC_setting_port" /></label></li>
-                <li><label><strong>Password: </strong><input id="noVNC_setting_password" type="password" /></label></li>
-                <li><label><strong>Token: </strong><input id="noVNC_setting_token" /></label></li>
-                <li><input id="noVNC_connect_button" type="button" value="Connect" /></li>
-            </ul>
-        </div>
-
     </div> <!-- End of noVNC_control_bar -->
 
-
     <div id="noVNC_container">
         <h1 id="noVNC_logo"><span>no</span><br />VNC</h1>
 
