From 4eb102cdc0f848b2820fb456ec721bb67f5203ce Mon Sep 17 00:00:00 2001
From: Michael Jumper <mike.jumper@guac-dev.org>
Date: Thu, 24 Apr 2014 12:15:14 -0700
Subject: [PATCH] GUAC-637: Add zoom controls to menu. Move clipboard to top.

---
 guacamole/src/main/webapp/client.xhtml        |  22 ++++++++---
 .../main/webapp/images/settings/zoom-in.png   | Bin 0 -> 1553 bytes
 .../main/webapp/images/settings/zoom-out.png  | Bin 0 -> 1521 bytes
 .../src/main/webapp/scripts/client-ui.js      |   4 ++
 guacamole/src/main/webapp/styles/client.css   |  36 ++++++++++++++++++
 5 files changed, 56 insertions(+), 6 deletions(-)
 create mode 100644 guacamole/src/main/webapp/images/settings/zoom-in.png
 create mode 100644 guacamole/src/main/webapp/images/settings/zoom-out.png

diff --git a/guacamole/src/main/webapp/client.xhtml b/guacamole/src/main/webapp/client.xhtml
index b9241354b..f0eb0bfc0 100644
--- a/guacamole/src/main/webapp/client.xhtml
+++ b/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 -->
diff --git a/guacamole/src/main/webapp/images/settings/zoom-in.png b/guacamole/src/main/webapp/images/settings/zoom-in.png
new file mode 100644
index 0000000000000000000000000000000000000000..ef36301b48ee14dfe7376a949244e4a4fba54d28
GIT binary patch
literal 1553
zcmeAS@N?(olHy`uVBq!ia0y~yU~B+k4mP03lH*(V11XkbC(jTLAgJL;=>YOM3p^r=
z85l$kgD|6Lfv*!#P_o1|q9iy!t)x7$D3zhSyj(9cFS|H7u^?41zbJk7I~yqm2G%}L
z7srr_Id88Y%v5m@U^)2O`QPrCO$lEwCJRU=Iv(UvslEM=@xtf-Ul|zg2{1HhFfw!q
zjZzc_!LKS?hPtBi>b(!mx7~fs`=OJYLBWfGVG+wnqh4*>dv8Knxm?4V-0xM+GlxPj
zfSk-AfA{YEe+zEE`^xs?2rGktDg#3x(@3LAZ^z{`JYW=OaG1it;KDgdQ62<W%r}Wh
WeXi?^dJHVS89ZJ6T-G@yGywo@avQ4v

literal 0
HcmV?d00001

diff --git a/guacamole/src/main/webapp/images/settings/zoom-out.png b/guacamole/src/main/webapp/images/settings/zoom-out.png
new file mode 100644
index 0000000000000000000000000000000000000000..358632cf839b87899674efc10c9c63f101b5ed2d
GIT binary patch
literal 1521
zcmeAS@N?(olHy`uVBq!ia0y~yU~B+k4mP03lH*(V11XkbC(jTLAgJL;=>YOM3p^r=
z85l$kgD|6Lfv*!#P_o1|q9iy!t)x7$D3zhSyj(9cFS|H7u^?41zbJk7I~yqm2G%@J
z7srr_Id89T<UPQ^b9lqD7ytE_r>6*1Hku#YyqllF_Wf4|hCB`ihbasUE}Wy(Xb_N{
z3Tm%2ze-D6Z+>9v-MO!MQ{{$0V!HC?-B&gSz6u70KqdwO)lq6R2q;Pg_KS^qen*O>
RUj!D<44$rjF6*2UngIQH<U0TW

literal 0
HcmV?d00001

diff --git a/guacamole/src/main/webapp/scripts/client-ui.js b/guacamole/src/main/webapp/scripts/client-ui.js
index 0989275f3..1eefc2a31 100644
--- a/guacamole/src/main/webapp/scripts/client-ui.js
+++ b/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 */
 
diff --git a/guacamole/src/main/webapp/styles/client.css b/guacamole/src/main/webapp/styles/client.css
index dec924d57..b39cdb790 100644
--- a/guacamole/src/main/webapp/styles/client.css
+++ b/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;