From ab329aaaf1e6826b76d1ffbc0c18ecb9bfaec97a Mon Sep 17 00:00:00 2001
From: peteruithoven <peter@peteruithoven.nl>
Date: Mon, 13 Jan 2014 15:52:40 +0100
Subject: [PATCH] VerticalShapes toggle button

---
 img/btnArrowClose.xcf             | Bin 0 -> 8717 bytes
 img/btnArrowOpen.xcf              | Bin 0 -> 2618 bytes
 js/buttonbehaviors.js             |  23 +++++++++++++++++------
 js/main.js                        |   1 +
 less/buttons.less                 |  10 +++++-----
 www/img/buttons/btnArrowClose.png | Bin 0 -> 1148 bytes
 www/img/buttons/btnArrowOpen.png  | Bin 16291 -> 1078 bytes
 www/index.html                    |  13 ++++++++++++-
 8 files changed, 35 insertions(+), 12 deletions(-)
 create mode 100644 img/btnArrowClose.xcf
 create mode 100644 img/btnArrowOpen.xcf
 create mode 100644 www/img/buttons/btnArrowClose.png

diff --git a/img/btnArrowClose.xcf b/img/btnArrowClose.xcf
new file mode 100644
index 0000000000000000000000000000000000000000..87ecf0506cc91e36fcd897f9dd46a6f901d4821b
GIT binary patch
literal 8717
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
LotxJdqQ&0<@ff{I

literal 0
HcmV?d00001

diff --git a/img/btnArrowOpen.xcf b/img/btnArrowOpen.xcf
new file mode 100644
index 0000000000000000000000000000000000000000..6af56ad489bd5562d3833bf52291fba27f507943
GIT binary patch
literal 2618
zcmeHJO=w(I6h3b<%_NgaCV$4CHu#8%q~OFxLCMaRlE#X(3maOEN@g-Md3Aom%!Fi6
zFfn55uF^%@P=qR0n`NcdQd)|FG$}$CcB8?KK`n|BNE0V-?md1d@69;HxOA5b=bi7K
z@1FZ}&gGsLw~}M#WF%(BtVER1I$ROl1ThSJS|BxhPI%9X0JlQC5D%oy#WL;zjNbv>
z7{|0BD>)pGhT<7(1SSG+P<J+$PejdZI$@3M^moVNk#r)RF}pWZC=(A4o4a~;ZM025
zuS@NOYj_ja5^w%D5ZB4<*l@&3#m(N*S}^7}GrG3Wc*@F|Rw^<Y&5D0I7RyF+<qeAW
zzfF$iepiWu+l-kKf_@YtftMIIg>$LhnM``(z*scZGnR_Owh?I2)es3hLuy<sPPHzE
zB1wRZk>-b#a9srsRN(pw90Znm4QAHRz6!1~=`c(4>~(bc09ea&_<oybRQhjmJ88z=
zN*_NJI`$2{`g|Am2%C@W>hKrK>|y)f^)~|O!&psf&jQ!5`tATQ4BJRs9AG^mh;cGK
z!VS^|VyYtj6gRToEoh^=fUa8fB7ErMv!9z;zgFrN=2*`r7um<f+x;J~!TOp*8MGEy
z;sTNR3vXk4<uQ63tXg>(3Bp96dl8;@iJlYsDA6qTjb&X{_scORh|X{o+g}qMgw}&)
zdO*w}YQBp}*MDoL`d@`VQs(<yx5MD=7l}S$FYAF4ty=#CziJU(;5i}-q_R657Dv1$
z<jQsmUhbieqL8<ZG8vPZZb*2(#Lo4brAVmSyTY85fpR9b(&kVYIVfjLQtS8Pk#Itb
zaG#Q4pZ_4nIVb!`$vGrPUGzGAWG`RjTGq#$<oT%h<cGgwo#OKOXPpGs(pvjVQ>V_%
z9O=LnMri-JA3L_L%+{6Jx-wg@%>Vq#yiLbxtuv9Ip3Wz`sF`dt^;H3nlwJ7oL>D!X
zvR2v8s*s>MQgxS5Zq$`})JWx@m*VnmgH);NZ%|m&tr{sym${YoRe1sra+^H+9#Wn=
z0vF{?-OCU0`XN;1(*jT&o?Zg5SA8_dk8rV@QlgI1l&JUV9Z|<9Cu)XXhO%Fv{=dX`
zJwV%U0_b^pwqFr64y25q_(9gDEcUuAds_CgfL*DjIzSctnOj)*%f1IRH?a=Oah|xt
sLDmseW7YJrJmcqksGf??eDnwEqx!TDKZEyzL+{OgcH!*t$q+pL1}SeKApigX

literal 0
HcmV?d00001

diff --git a/js/buttonbehaviors.js b/js/buttonbehaviors.js
index a97b9d5..80688a5 100644
--- a/js/buttonbehaviors.js
+++ b/js/buttonbehaviors.js
@@ -1,7 +1,7 @@
 var twistIncrement = Math.PI/1800;
 
 var btnNew, btnPrevious, btnNext, btnOops, btnStop, btnInfo, btnRotate;
-var btnSettings, btnWordArt, btnZoom, btnMove, btnUpDown, btnTwist, btnShape, btnEditClosed, btnEditOpen;
+var btnSettings, btnWordArt, btnZoom, btnMove, btnUpDown, btnTwist, btnShape, btnEditClosed, btnEditOpen; btnToggleVerticalShapes;
 var btnDiv,btnConv,btnStraight,btnSine, buttonGroupAdd, popupWordArt;
 
 var state;
@@ -41,7 +41,7 @@ function initButtonBehavior() {
   btnConv = $("#btnConv");
   btnSine = $("#btnSine");
   btnAdd = $("#btnAdd");
-  btnToggleVertical = $("#btnToggleVertical");
+  btnToggleVerticalShapes = $("#btnToggleVerticalShapes");
   buttonGroupAdd = $("#buttonGroupAdd");
   buttonGroupVerticalShapes = $("#buttonGroupVerticalShapes");
   popupWordArt = $("#popupWordArt");
@@ -67,18 +67,29 @@ function initButtonBehavior() {
   btnConv.on("onButtonClick", onBtnConv);
   btnSine.on("onButtonClick", onBtnSine);
   btnAdd.on("onButtonClick", onBtnAdd);
-  btnToggleVertical.on("onButtonClick", onBtnToggleVertical);
+  btnToggleVerticalShapes.on("onButtonClick", onBtnToggleVerticalShapes);
   
 
   getSavedSketchStatus();
   setSketchModified(false);
 
-  function onBtnToggleVertical() {
-  	buttonGroupVerticalShapes.toggle();
+  function onBtnToggleVerticalShapes() {
+  	console.log("onBtnToggleVerticalShapes");
+  	
+  	var btnImg;
+  	if(buttonGroupVerticalShapes.is(":hidden")) {
+  		btnImg = "img/buttons/btnArrowClose.png";
+  	} else {
+  		btnImg = "img/buttons/btnArrowOpen.png";
+  	}
+  	btnToggleVerticalShapes.attr("src",btnImg);
+  	
+  	buttonGroupVerticalShapes.fadeToggle(BUTTON_GROUP_SHOW_DURATION);
+  	
   }
 
   function onBtnAdd() {
-    buttonGroupAdd.fadeToggle(POPUP_SHOW_DURATION);
+    buttonGroupAdd.fadeToggle(BUTTON_GROUP_SHOW_DURATION);
   }
 
   function onBtnStraight() {
diff --git a/js/main.js b/js/main.js
index 6f85cac..4731217 100644
--- a/js/main.js
+++ b/js/main.js
@@ -23,6 +23,7 @@ var showOrHide = false;
 var clientInfo = {};
 
 var POPUP_SHOW_DURATION = 175;
+var BUTTON_GROUP_SHOW_DURATION = 80;
 
 $(function() {
   console.log("ready");
diff --git a/less/buttons.less b/less/buttons.less
index f8a1f34..f728552 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -165,8 +165,8 @@
 }
 
 #buttonGroupVerticalShapes {
-  top: 10px;
-  left: 10px;
+  top: 7px;
+  left: 8px;
   padding-top: 20px;
   width: 65px;
 
@@ -175,10 +175,10 @@
   }
 }
 
-#btnToggleVertical {
+#btnToggleVerticalShapes {
   position: absolute;
-  top: 0;
-  left: 10px;
+	top: 3px;
+  left: 6px;
 }
 
 
diff --git a/www/img/buttons/btnArrowClose.png b/www/img/buttons/btnArrowClose.png
new file mode 100644
index 0000000000000000000000000000000000000000..8e70a61fb89a27e6b1eb4d92d5c785eec0e909c5
GIT binary patch
literal 1148
zcmV-?1cUpDP)<h;3K|Lk000e1NJLTq001HY001Hg1^@s6I!6n_00006VoOIv00000
z008+zyMF)x010qNS#tmY3ljhU3ljkVnw%H_000McNliru-T@5`7d3K3ODzBZ1PMt*
zK~z}7?U+GG9A^~A|6{krw!7Ijh{OiVq9WCz_Eg(KAt^<K5V{wwxp=S?QS{gbE7U>{
z(nFzXE;Td(8?>kgi53Zz1;LZFMG=#VyFyz-&7uw2VzO~}onJ3AvOC$G-8FhCeK41q
z@4ff?-uK@7zHg-eB~y$;=rl+=FX=@|Ws-c7ko1qF9Z7d2%}R<L7xY__ez2V8d+tm6
zUeX&!3D78Myg-0#&kad0J?+wbDCs-r%c`m>H8(e_zP?`N<>fL>Q_*NttE;P8TwK)V
z=B88Sj-(GHtsW*4UC!AxH#ajrK29taBbV&#>~Q`1b()%*oRKjlwH6D};)EC;9;O&c
zrBVzG3^-x_lH@NG;sr@}ZDo(g!_3SKhn3OM(F~aC>gr{nplba#U2$@9($!Ho9A<WQ
z)^*IaYuE64z0}p!v9z>AcX#*a`5*%65Pf}pt`64M*C{J2LlXV{{jOtUu^8Li+nA=w
z+S*zonM}S1Jd+FLV;iEpyqw+LU0360&z{W)`;{wK3R*7HG)W{9d%zS>k!`6KZKH#O
zgRaJI-MW>vZ_Lln7n4FJa1+Q#V6UWvBn-n~d3o8jBC4vYkVIo+BXe_e`2Bt)apugK
zypeQ({0h9E4sza}RZUF|$z(F8c27^w6UjU=F>&y&r>CbFkSXBhbdWD>L#?f?IW@<|
z#ts}_xNsrkTSrI7!MBBlg+hAG3h;_EKZb217cXASs(A0-J$ybNlBle#WP5u%<9jq3
z<<zNDNTQ*kAs<Hq_yq7cLB6y>+S}W+Y6gSByfYpd895j;G&JM}5(OHvm2R(X;M}=$
zPiS4ediB6TZ*OlwW$pL-357zKrs*8A4~zjPvVpv6JF2Ltcp~#_YisQmowq8swzdca
z0(iY%+S=M|kaU_j@UGoIoPFekq(?SPC=|*te);lcT3T9M%Q{^mkqG_${Y*_wVVY*r
z%84Cd6Sx69Ydg-?VHa$W&dyGbQ2qwK0zLxXbT+VTowY4}*NsFXZW*6)gxe``;4bhB
z@HX%~P*Uj5D@hTTq}{h>w*~Cw0N4lqu#&L_IC<DJYJ2+Lap}^fbO#TundXXy3H%9s
z3Y;!x_POLI8>F<f)SRB4eh56uvlONkt(29FCy(OfUMlHlNdy9c*v7`j?*;4`@wCJY
z78{MM2NOU(pKmT44!_gY)wL1~249!taj}!K%3qRJBz<ET#?xQ001r@d`}XbE;_-Mf
z2aLzoZu;DjU+;iwE8K3f4?F;V13G|`;{YiEM)M?U1o#YS%C?&pB84a+>87MwNv9>1
zSeGT!+7cc}`dZSDhGFa->)!ytE2+||CL8Xtq@?v1;J#rP`~QjmBmV-v8?5_AjeY0<
O0000<MNUMnLSTYdm=!z#

literal 0
HcmV?d00001

diff --git a/www/img/buttons/btnArrowOpen.png b/www/img/buttons/btnArrowOpen.png
index 7b76cdb401543958514da9f7cf5a857a59cdfa19..c84bd983e396bc7a71210e5838a0786eeb4cba00 100644
GIT binary patch
delta 1071
zcmV+~1kn4Vf3^rSiBL{Q4GJ0x0000DNk~Le0000Y0000Y2nGNE06Iqt!T<mO24YJ`
zL;wH)0002_L%V;GAs2rD2XskIMF-vi4GlIli<-~@000BSNkl<ZSi|j@Ur4i69LGNs
zv8<US>JS;o{6mC)(4f(sN(?bVFKS?c!4P5UUavyLn+QR=O9Y*R1Pcszsiaa&Bq7oW
zgv<*!yixMsaPMlqWXgWs>=|c!pFNw?_wN0|1KV@Hzu);h=lOq~opS~+l`2!7adki!
zPy)P~xc4s*12%x*i-fKLo&Y}sH-KcgZh#};YoPwIA>6<-gU*ehMjqqUybkz*?(_zm
z%|?BFJrxxdm`o<Z;V_|4h+t6nt^5dl1pJfFD7*&js83i_R3t8!OV-!dB^r%Nx~{LU
zWpi^=hKGm6Y&L(VkIwJF8~24M0)9~wb#`{j?(VMSs{Q?a>FMc7hxtt@?wquyCUCpm
zlCQ?b#?oPa$`ztl4ICI4kcUbK#+ePG0Qgf2XlrYe$5KZ}hYAwP2J*g2exI7ircfv(
zg@uJG%*UA^3IVTX?C$QC$5wxTzY4OQ3FIB%L^JyRei45WiO1vO^ZCT%@kl5X%BjP>
zy*+U_95OvUopL`A2&f>>fLHWDoSMmOHp|J$iHL~Y+}tFCYierb^z_saA{L8DZEdXp
z($LWGTw7IDl?wBg9>^2T(AwIX435X+GC4V!3~q04Hv}0P8cKS7K3}$?9nu5&LNhoV
z4#O!pKR<u33$eYuo%Hnf_Ud|^PNxd;l^)2KnxU(!OE*bVQ<DHvR#qnG=jSPHmzS4f
zwOR#`l9CcRJ3G_O(bw0ff=sEu8=C&sK18EY-D;klodw|P>Wb0P(Udlq%f<2WF#uk#
z7mLNBn<Em5s9*2&JfCQ!<>loPi9~dt$nAC~pJ;!1d09k6{C<B<%fapKt<=@ksUz}%
z9*85c%Mw5Wfk4JtQC(dvfRvV&%G%nRG&eU3AU2y#?(Xgkr?tss(jfi=%z7Zzz^@v}
z;NW1!gj-u%x*MU5jSa&YH8C-v`ge?e;y=}l#l^+X6{M<}nVA%bY|}axi%Df=r5f{j
zwjF=lv1WEUorcLh9#68S4i66vy(1$d=_6Q^ZQ=V&4VasoGwfh>byb4FprJ=C=EUXA
zbx*RZ1}-ix=DpCZtgNK3x+jUfa84=({!(Ga$Hxt4gr26Rru2&1ao>Gw7Z6vIw6wIy
z!oq@t!{LmbN25_$T3Qmj-L41W%J(?Y2rP30Z>u-0Rx5V9oyNvSEEWp|1qEDOTySu3
zz|PJNM@L6`xdwo59&)&P6ZkHV!<BX|0nLwj+ItuH7P!h0;CtY`7kLOT1wKr?uJXj8
p$&@(7g@LEQ55ONU|KoUw{s-_nV65rvShN5D002ovPDHLkV1j>B{>uOW

literal 16291
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
W^*NiTc&fP9=p(~oLJ!PMEB-g`@?k#!

diff --git a/www/index.html b/www/index.html
index a4a8423..b1edd70 100644
--- a/www/index.html
+++ b/www/index.html
@@ -105,7 +105,7 @@
             <img id="btnSine" class="btn" src="img/buttons/btnSine.png" />
             <img id="btnStraight" class="btn" src="img/buttons/btnStraight.png" />
           </div>
-          <img id="btnToggleVertical" class="btn" src="img/buttons/btnArrowOpen.png" />      
+          <img id="btnToggleVerticalShapes" class="btn" src="img/buttons/btnArrowClose.png" />      
         </div>
       
       </div>
@@ -114,6 +114,17 @@
       <img id="btnEditClosed" class="btn" src="img/buttons/btnEditClosed.png" />
       <img id="btnEditOpen" class="btn" src="img/buttons/btnEditOpen.png" />
 
+      <div id="buttonGroupVerticalShapes" class="buttonGroup">
+        <img id="btnTwistLeft" class="btn" src="img/buttons/btnTwistLeft.png" />
+        <img id="btnTwistRight" class="btn" src="img/buttons/btnTwistRight.png" />
+        <img id="btnUp" class="btn" src="img/buttons/btnUp.png" />
+        <img id="btnDown" class="btn" src="img/buttons/btnDown.png" />
+        <hr>
+        <img id="btnConv" class="btn" src="img/buttons/btnConv.png" />
+        <img id="btnDiv" class="btn" src="img/buttons/btnDiv.png" />
+        <img id="btnSine" class="btn" src="img/buttons/btnSine.png" />
+        <img id="btnStraight" class="btn" src="img/buttons/btnStraight.png" />
+      </div>
     </div>  
   </div>