GUAC-637: Add zoom controls to menu. Move clipboard to top.

guacamole/src/main/webapp/client.xhtml

@@ -62,6 +62,12 @@
         <div id="menu">
             <h2 id="menu-title">Guacamole ${project.version}</h2>
 
+            <h3>Clipboard</h3>
+            <div class="content" id="clipboard-settings">
+                <p class="description">Text copied/cut within Guacamole will appear here. Changes to the text below will affect the remote clipboard.</p>
+                <textarea rows="10" cols="40" id="clipboard"></textarea>
+            </div>
+
             <h3>Input method</h3>
             <div class="content" id="keyboard-settings">
 
@@ -91,12 +97,6 @@
 
             </div>
 
-            <h3>Clipboard</h3>
-            <div class="content" id="clipboard-settings">
-                <p class="description">Text copied/cut within Guacamole will appear here. Changes to the text below will affect the remote clipboard.</p>
-                <textarea rows="10" cols="40" id="clipboard"></textarea>
-            </div>
-
             <h3>Mouse emulation mode</h3>
             <div class="content" id="mouse-settings">
                 <p class="description">Determines how the remote mouse behaves with respect to touches.</p>
@@ -121,6 +121,16 @@
 
             </div>
 
+            <h3>Display</h3>
+            <div class="content">
+                <div id="zoom-settings">
+                    <div id="zoom-out"><img src="images/settings/zoom-out.png" alt="-"/></div>
+                    <div id="zoom-state">100%</div>
+                    <div id="zoom-in"><img src="images/settings/zoom-in.png" alt="+"/></div>
+                </div>
+                <div><label><input type="checkbox" id="auto-fit" checked="checked"/> Automatically fit to browser window</label></div>
+            </div>
+
         </div>
         
         <!-- Images which should be preloaded -->

guacamole/src/main/webapp/scripts/client-ui.js

@@ -217,6 +217,10 @@ GuacUI.Client = {
     "ime_none_radio"    : document.getElementById("ime-none"),
     "ime_text_radio"    : document.getElementById("ime-text"),
     "ime_osk_radio"     : document.getElementById("ime-osk"),
+    "zoom_state"        : document.getElementById("zoom-state"),
+    "zoom_out"          : document.getElementById("zoom-out"),
+    "zoom_in"           : document.getElementById("zoom-in"),
+    "auto_fit"          : document.getElementById("auto-fit"),
 
     /* Expected Input Rectangle */
 

guacamole/src/main/webapp/styles/client.css

@@ -643,6 +643,42 @@ p.hint {
     max-width: 100%;
 }
 
+#zoom-settings {
+    text-align: center;
+}
+
+#zoom-out, #zoom-in, #zoom-state {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+#zoom-out, #zoom-in {
+    max-width: 3em;
+    border: 1px solid rgba(0, 0, 0, 0.5);
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 2em;
+    margin: 0.5em;
+    cursor: pointer;
+}
+
+#zoom-out img, #zoom-in img {
+    max-width: 100%;
+    opacity: 0.5;
+}
+
+#zoom-out:hover, #zoom-in:hover {
+    border: 1px solid rgba(0, 0, 0, 1);
+    background: #CDA;
+}
+
+#zoom-out:hover img, #zoom-in:hover img {
+    opacity: 1;
+}
+
+#zoom-state {
+    font-size: 2em;
+}
+
 #target {
     position: fixed;
     left: 0;