From bfc4507696bdf50618b867b36018180a4805da9b Mon Sep 17 00:00:00 2001
From: devin <devin@rulincom.com>
Date: Tue, 1 May 2012 18:05:17 +0800
Subject: [PATCH] Connection page design

---
 app/assets/images/connection/Thumbs.db        | Bin 0 -> 6144 bytes
 app/assets/images/connection/facebook.png     | Bin 0 -> 820 bytes
 app/assets/images/connection/gmail.png        | Bin 0 -> 2408 bytes
 app/assets/images/connection/twitter.png      | Bin 0 -> 1475 bytes
 app/assets/javascripts/orbitdesktop.js        |  17 ++++++-
 app/assets/stylesheets/desktopmain.css        |  47 ++++++++++++++++--
 .../desktop/settings/connections.html.erb     |  47 +++++++++++++++---
 app/views/desktop/settings/sections.html.erb  |   5 +-
 8 files changed, 101 insertions(+), 15 deletions(-)
 create mode 100755 app/assets/images/connection/Thumbs.db
 create mode 100755 app/assets/images/connection/facebook.png
 create mode 100755 app/assets/images/connection/gmail.png
 create mode 100755 app/assets/images/connection/twitter.png

diff --git a/app/assets/images/connection/Thumbs.db b/app/assets/images/connection/Thumbs.db
new file mode 100755
index 0000000000000000000000000000000000000000..47897e3f3bc28bd197373d4b4c5e43a4ea03dd0a
GIT binary patch
literal 6144
zcmeH~XH-<#mVhroz=9$N$%5pZbF@&RMa~jRvQQvFG6-UU2#O7ePy_)9Hccp!k|l^G
z6j1~U5RnW`rVvDIc(=M=&+3_Z{bpv({F%3U-}T*n&OWE^K5OrjYGjz<b5SkFJn$bx
z3m^kd&&~rBf3TB)Wg@={Jphn`1!Dd5?Ck6}BLINKzvTZ>1bzX>O3WV-axjVKK!`b~
z1fc>s4*~%pw*MvndJ(Vy0>CE(xCmSU{6QTAM1a};?+Yt9V}6gyzwHfw@^hWm9PUWr
zK@u{sU5EC!PI7=Epai&p$OG;G0z?^50o(w&U*9qS@lpDd?-9)+04WL4KXET2>VMMp
z-!*v>Cp9R)`&R`$yZ!1H0geO#`jiFRWWiA&098=`nTUbAAkpvd@@M`2Xcq%3C}I%)
zkK}jXMEyVgBr#{i*b#^G&(=RR*iHii1tF%64g@>`00t075GD|25Ec+t5H^qtAnYI<
zAe<mvAlx84AiN+KLHI!UK`wy^fCz#Jfe3?$fQW(+_a1RjOMpm%NP$R$$bb+tBL^Z6
zq5z@@LYyzkASxh#?OT7G9sjvZ%n>p7@V~Ez6^Yr(=aR4NlFi`yPzVRn3N<v)vjDXQ
z5h~*0p!R(#2vj7&7W$Wg>LIRmutM&odrcPrYSXB{BfvxC{8vLgT`O-`d#+=~2R&x2
zde8RI&<(!1E=tLJ=d$cm#Bh|I(w`?WnJFKmyS=u<%(Wk2T0cS{pQ2y(TQHZrSP-I)
zdKP}Vng>_Qfxpk`OZUjmDH&ULIU81uX~{@FJ^mSockMa*p)IGeU@Cg4X+63Yn?3HK
zrLi`#(JS=e1{1b+y;l=<W}^3O@rCf*dhmygBWJF?)B8iZ>bLx*ofRehd1A_f8gLC5
z-c`$lOVvzYEOWvK^|oZ|BaaH~TOuDu>~oHz+K->gN)P8LPzO&wWM}8hRMbqnSkJko
zgUc9nb_r8~E~g!;x8uS@U>HMOVBGEuvOe<Ukv)0k>~)3d$;-ogypj1Q)*N?(q^0t<
zl3rf9J6CG+=>T@qVu-|`MDlSE{Kv+I;3axopD@fLk=qjQ``Wu)WzwV;@9<5zJn5uR
z({rJ!XAAL4XXSfaroV3Xm1jOB=L+j)fvA+s_QPP-i7^>%8L8f~xKAkqDFm-Nqse<i
zN}L^RO)O4Wv=Un7s#es-OZ%onOF@Zh2dccIuZSX)ToU@YBBZURNq_l16~n_vjGK~#
zZLAC)^0^YSIR+EU$71FP4_1*EHKhvuVoEk4uA({~q>iY)Op!{j_huLKjWmsFR#)M<
zVg3izay$Ib29+g5ZIQb&i%)WIyN;PTK{wZH*=`p#KazX=z!@gNXMdcA2tdEGt)UPT
z?_rD5ZKgZQZP*g#`jOI!G?y!=Fn?kCx(`j46xpFs44$F;m&L8i_9J4U6x2f_^{>nN
zl5It%a^6a;M$HLA)F>d96i?!-cCFWZp3Lezi+y&-t3bL&rPI0tzZ$$Sh8Q_?U*(UP
zgbl5~_1dy|Lu(y+y3fKcHm-*g*y}3(uA{Z-eE)e^(R;K;cu)PNge=66n?zmNYem`x
zj(hrG(blG#B_a-KRV~MUomrj)si41OM3AahkUuc%iM$ZSWtX_B_o5OJYX=RBUKoL-
z(0Efp?Y&Hw3#(q8kfkedGo4S#MT>iC8kcNxT1=q5nkjlQ+YzF-oOq?0B6&l8m}1SN
zV?n$%4z6DrEHzFZmZP0sYwVQ4J3v}9ngwoU>JA$mNNww5HB{-7=ets$da@|}sBHpO
z=I~0CFVAl@Q6qD5ce%MRJY1j<K%!Ye@R=SKMR+ENs;jdczBXnnwR+F6?0J{NLBXj3
zX3F4K)O|d9Yiw^PqGMB8SX)&;;H!dej~;;xE<{*JjuXl4%u@HO&>X()Mp$}7r!i!M
zJO}YAU5oC(`h5$1U9VwgQAHucdf$0?*y5lg(5W!vX8yOT;h~}INj7N%0oDkdN3XeJ
zbGg8~F=axeP4h8jPKdO#+?FPJ`yFlD{+qT_ujF;HD(!_M{=wmmchzo;cH8v1rHwTb
zFbHR7MTusHz=)i}BQzb0!@GReZ^h--j`DRVc85#8Y5V-#l%mv8^KG=63a2YYgfFBv
zI6IGHbyhMmH3@_HH*;LxHmY<^fn85my_elrC{}xE)aBir87jk!la>zD;FPVNT%9@0
z=gC9gUH7gM`pGCl`?ZECb;2wE{f%){u#f-8^0e1Hn}eOxkLXIONj4L-%+~v-Lf_q6
z{IZ_0GQMsZYZq`M{)>;CeWa#l7KKP_5c|9S-kYSWg-6}xbOOd@Hx>j(2gDtGZl;q%
zG9!aFn<CVtN5kpyB=OXRxE9q6@tOIuXnau=Jq^wf)vYyF<Yk7B{XCMB9#VTT-82oh
zPDVLaP_u3uU97IKs<tC5Izzrm51C<Q(fO%wIVt-wqGy8UPVdItbN9DU5#J5&&LqOi
zjreLe(dN2|kx>j*{}FVn{&+$O*p%H#p!{<9SUZkIa^0R<=lQ7+-U~({;$r7Rr9#&}
z9BnXCl*`$%8`19Cu64bg#yN2weWX>-K5~UbBEzt6R>x$|_3cKHUozd~c}cBsx)2Kq
z--V#kkhO@AuWK#cO7x{EAK*n1-Sg<MfI)WDCuu*`Tlof#oe%YyW#IA$Bt|eMLKbbU
zVeg6A%PvHpzOl$Og0$WHEfojBC+ETqEpe@rwOt0e#a9-67tb4eyMG9RUiFFch+iHT
zi%E^2%zpZmDl%;<dX1hepm6f}j)dPgD%jxRq|_%F8MA|Jse=Bl3}wIe{Wn92<M{7a
zm21y50=vI|`JxPutC-!6H}$5sL-19_=p@<-FU99DIFv+v-R)2a2^@|7FuSgiXVK`a
zAmcKZEV^r^D@JEL7coVBd`k~Ec4=ik230B)(&{v}ZjwD*);jnD`NW5~ZaH+&ojo#-
zIFu~4pKs+A3|;yP5bE(TQAiE3NXg_G8ENZknJcO!fI)evmwEMeBSr=9`*A8WhJ;nH
zqvISBfuXK+bW#8Qv;d+1VMB8AdAZ>I^&<?F>N-<a^zCbd7ck*v=`2EHPiLgbXV<g0
ztG^`i&|m0&!A>wTNggH*y?qTwEwMVRlEiD%1$)j|s-7QM?|bv4<>x#S+Fa3j&&H2a
zt8JvF{Wr{K*$RU&wcT%{FF7H;l(kgV!;DO~u4}L5bz92|Qm61`_LH)vG4Wj+(0A*s
zeq5IqTokNlPmPOEtmrgA@-mMLyA&RLc+_{>Ty3Ppd;s-?rS}GYotbq{H2z!yX;5lL
z33+Z?Pn(Ac?@q(u(AEq`(ji$?I=yUj10t?7VXo?jk1Fa=ytR3jrF-0qV@DLr1e{f(
z5;K;w>!Zd!qW&@f$*g8D&%<9y_Y#a^UP&>%lGhN8z_7V66HTIZuj&KbV@0h`N;AUR
zNE$UN6@HA>IqR2@tQ{}buTsLI9~1h>$yAklESKIot0sy8niCg7=w+bA(<h3q$6+)D
zI=x~L3ExU48j3fAflai$#_Hrt$d*C1=B<pPC$yy7^GT!=Ua-t667dmq)_$6b)l>=0
zg5W<Ez#;UCmQu2lMZVO#N|2-iVncA#3)s`Q@=wZ-^<c6?COpJ{|B21oWx#P2|6xeB
zrKSzJfh7}ns*phsUK2*?J3cP}8u??(EW4KSV?+2bp?GsUxW${)<$R_AD+Dz4J2Sit
z9-X$g!Ow%8f$31@9IPcW1fO-am)N#)J(QHF@pb28oLg4O^K>`+MAmI-)D*7;>3Z$e
zA3_73SN7}AXc|(N5RS4kIB`>r+1F9R%@O&iEA;?wgQM7vSAu&obztSAXh`Vk00a8x
z&yJ-U%qe$#DL&ID_hQ~VzH3A7Gj?*7$V|eXz`Zh2QmXhjVaW7iCYo5>Po9HQQ#DMC
zImYkEduXp^2|D4eygBLs?wRYlc_jf%Ud1YJu!3~EY$f6$VLM8*qLo(f5?pHGJdY`+
z$-7QnjpXD?isWb=Ei;4Gxw3I?W$s7MHDaC1j~lA6Y-Ud04du|aK1q^q90cuH^4LI5
zQk^jHP6!xYf$LRYcD+k1|6}?6{)zni|DnZa5v2?IekK3g`zIOOZ}-ow+}Ebey3E+Q
zg6^(mnX9_R&~Zgp4u{5uZo3PdnE0z_=V2bjwHTREz2woM%hV92&U<>7sZb~sqXIqT
zVX}~cfNGGoj{WLZ+9G~t_GksZ;+d8I@!rz5di@UJ(`HA`)7}=9{SOq>yBWJHjGnY4
z>m53tkJXPyXWfPbqPdknmv$Pag>xWg`Tb@9x%|4hmJrwy0?K*$8*+D(U4-VKd#^yk
zk5wG=?e?V)3(q#LeC2ClL5F^nZX`R@B{ah?Gzalqt%26{$f~x|&=p9(A@#jYcY;C1
zXUGuzOdzc7`=^Ux?^UOP$)1j;uzUp#6O8q=5Y~q*HLGBIBi<8XXkl7-4#PXEzi8VW
zs$4ZjdZ7v{9C#<7!-sxb2N{=?G!%&RH!Q#6&@HH`C=0>v+cTCmS)(Qco|68EB{gxY
zDbvpRA&DV;ep!<7a63aa8|{)jjtWrAlT4C_=L%jM_5Ut4?#dumVM(|^cHMo+4l?nA
z>cm(vvM=Zs)Zx7bmxISZdYO6n1Lo}2^0V>^?V}*iC*zc>Rvhz~{&SR!ilzJTYev>O
z3oBMFV+;N=O>nB8KMlmhpD+<tm;v;;FIdUguUFwkA%+<f4I(ntzzDyzZ+J2P03SSF
z)%m@3!fl@lL9uSTd*$eT4K5FQYv60!OIl^DuxP=3uGF4sGk{9HA%nc&;^eG(28R>y
zSaYub=b4tLD_02@Zzo532XZ|j4Q_L<6MBg08(qW~T+Ln-%uqz8Vf@VDHoUESg%8{)
z_te80H@COjCocKw|Dt%v&2y_5#|AN*Jr#F;w19q(9%5w^vkm<`zg2`!jzwn84=sj`
z%#QOtB1xS@paf<j$UWI?+sUrHnI}Prk82yLV?AQ;dH4mBvUx*~Fp}Msbp+e=S4(-y
zgs)2Jom>IAl|Cny4vhp0*Kr=(nD#^}$KsO0x?s7~4Q6Q;)t#_iqyVo&c56$W{*zF6
zrfL2=RXO&V$AWkcC7!&L+_Jz8S3b_PrkjO*ug573KK7j6krMo+CMD+n`*hBcI}%;2
ZTH}ujnuyEszh0jIc+vi4{g;Wr-vII$sH^}0

literal 0
HcmV?d00001

diff --git a/app/assets/images/connection/facebook.png b/app/assets/images/connection/facebook.png
new file mode 100755
index 0000000000000000000000000000000000000000..f8c4f2190fee49b804e9d61aff25a4bd65a21c9e
GIT binary patch
literal 820
zcmV-41Izr0P)<h;3K|Lk000e1NJLTq002Ay002A)1^@s6I{evk00004b3#c}2nYxW
zd<bNS00009a7bBm000XT000XT0n*)m`~Uy|7IZ~ebVG7wVRUJ4ZXi@?ZDjy3H7_tR
zFEKI$O#jaS0016zMObuGZ)S9NVRB^vL1b@YWgtdra%FdKa%*!SLsK;_F{>X)>i_@(
zib+I4RA_<io4sokK^TXBlWcA;$DW9Z21Q797K%!+iz%%X3$Zb2tn|M~t611sm=xOC
zSfmgHAw>uwg@uKPiorq=5;%gwhRf~cV=R_EFSqN?yN)+IJ3CLau=~#JJUe^u%+Bty
ztFsFn3}7&w&~T^(rblo}=8K`c8=x91Y&xYAcJgk32+p&`GeH*CR=8Jm>iiirCdYBS
z?&6o<#>Thp#4=k=ADc}-Ra!gYNYtxUFni-N?%tXrmt9)^h{w;?Qe(6dj$|8?V|f1X
zcINVL-~SNCXp^*LWdUHP)e**MBMbniPuBlgmWmd_QSUyPzd7)8X(0@RnRsH{8~Ay&
z5x#T%l9Kailcg`7n;^ycI{{w4`Or7kGI+HLwwk`Myf(teJXaX=;OPopuYO65DeO$E
zpY5NmuB=EZ4Q+nIB7DLaOQA5rQLoDME>Ixh|AiGco!o`9KHz7K??>sdB-7Z|?jE_G
zw8X|{<`yKc86D1nwHNmXR{yJ&&v>-B`WNBo&4WR#zxytXF-o{_3jivx!lq-CFy(pJ
zDB(>V7XW7F78Cc2#^+C8o47Z>B&=Vn1%RZ+P-kDY(UH`8sN{Z2XKlQF9?pmrHXSQ$
zI#$?ptgvcwUBr{EY>*rt{%M@dr%bWA^tI^*g3bY;NS=dZx4kEft9w;kxo{Sv)e$ht
zC%_DFE5le`-#D^6CLDAQ&<^&M3R8%BxE<`1g_DR0bI!pzS0+q{cQ@3F#1roQ+>@4S
ztgz{nPB@md7-L|v%L*Cbpe9Jx-B7c1l1EI~tqeykQ37=wK6Ro70I0f7rg1p7yZ7y(
y&ND3;!j29vk`q5*HclD-lh#XNK1`D*?AYJSey%!KFX(&#0000<MNUMnLSTZH5pc)=

literal 0
HcmV?d00001

diff --git a/app/assets/images/connection/gmail.png b/app/assets/images/connection/gmail.png
new file mode 100755
index 0000000000000000000000000000000000000000..ec897f23f510aeb437a87eeb6c4b96b792e8c885
GIT binary patch
literal 2408
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
azx@vYV0bAI)WmcE0000<MNUMnLSTY|x`eU-

literal 0
HcmV?d00001

diff --git a/app/assets/images/connection/twitter.png b/app/assets/images/connection/twitter.png
new file mode 100755
index 0000000000000000000000000000000000000000..a8071eea1a9fb7b6c4eb6f12de2dfe0342c01334
GIT binary patch
literal 1475
zcmV;!1w8tRP)<h;3K|Lk000e1NJLTq002Ay002A)1^@s6I{evk00004b3#c}2nYxW
zd<bNS00009a7bBm000XT000XT0n*)m`~Uy|7IZ~ebVG7wVRUJ4ZXi@?ZDjy3H7_tR
zFEKI$O#jaS0016zMObuGZ)S9NVRB^vL1b@YWgtdra%FdKa%*!SLsK;_F{>X)>i_@+
z8A(JzRA_<inp<cbWfaGM-|XyWH`!#HOOvd(=AsEPsh27U3L;i~C>E)ZhZYpYiZ8zS
zpdh{|UaGb)qV%D*_94(Jtrn>lyi`P`FZMyO1g*82#I(t7lFe<i*O~F*BxI}2US=j~
zSoaUZ!Z35b@Bf|io%286th(cjW${0PcC{z4)~FCJcT@<MJ1T_B9Tmdmjtb#&M}=^?
zL%-S+$VJuy3s^9~uYp$sg<Ni7-FP@|K+pplba=cKZVy7n1dq$(tP2mvvhYX~><$az
z79U(lLdXMej=(1qQ0o$NM}*@BRB52wj5&pneW(%kb}ru^OT(WD_<RaZ#h}K;IJ9NT
zLP*}bLBcSWg@jqUowxx#)$m5g<@ZesJPO+V&|MAl2Ba-__Oh~b#A7Z_>Wf=sVxLXQ
zbv7>dgC5Wd%+9nRWx<gixHXvn*%K4+)-X(G#kP|(DO(=akX8S22AaL_L@ONcg+tx2
ztr1Y-_3R2>QNWA={TmCD1=!I913eI~lBjUvX<Hr!NSSb56`bgk5|WEQ67WF;PEJBJ
zBMHZ=mOW!wvL#M#hE`wkW1dUEu0hCHV$Tk2rvtwR=M(Vkd0F*bbOzwXO|lqIhvnH=
zRtPI#&VcPrrI7{b3cz#MOLW<VZNe51(&5`_c;Ny>(*J!X?1SfTfRB4&XR{DZnNZ__
zUCs8!?QfQCU?)j}L&6IN?7s<KY7_D+;hHLVr5*Nm2<a`gaAUyUxEivja|s(3B+cTI
zne95PkW%sM0&J}>?wyC5AmDK>@9qgn4w%ZwZ%Bu}8u&dS`#azEww<&<R#quE*bQ5X
z$hL050#46}Kxy$wtv()wcSa$gts-HCgpyx_XRd_@8=%EoxCXn4NCw`!2=9-H6fHEi
zBWY<NWD_Rr8HR}rJk|;uy-utahj~LZ_NS9Dnu0rPVK`Y>kvZ}(EUT`89@t#t#FBl)
z4LEoS4v&fQ%SYI8x1=FqeJZxLgwG{lJS|D{t10*;F6FM!ZgQnP40vGwMVY|vFmwb&
zR@zlVg)otUor5r&UEWr~BHKq-8ZQOZdElcc^bf+0v+&cL8<ww(@25q%g>>nk|1E9v
z!POIwIvr-RQWNj4bJOzWI2Hx}T5IWi1_N%N%jDpj7@V1dYMWye+`~(XN-vQ8mQbg|
zu?SQtxT_9s3%YkalQ3c52>2YhDetS6CC0Y|Mf4|&5bPQv@AeE!opdvAy*4EBv3j)#
zD<zpwDR{XJ+Wat;l?EVfiL^8que2riCo|F|9qNXCoyBL*LO47IM<Y<LJ3H|x7}9<X
zewc<v9gf~C_4dmtS?QUq2oDWt(4_;~S`XVAq$awBfpK_!NTj1v6s5Ej;<*PJ;6Rt$
zTQJ1i>BV~6=yeuqE8*?G;oVV*6psu0qiAWVkVCZY#Z$(<RaR9aDR^}VzK%()b!#n4
z($WeM?LG~j3d56OX~*0|(u5=9aNrV5X59(nT$J2AC`2~S8qie@kG8<}M(3p`nvtX4
z4<qnfLhSjJvjlY|*zT4TQWp~@Z1Tf>A-KODdTS(;7K70g{5%ieO~dI~Y3Ku5X;QJ|
zdAspn%d{m)OjpqClk(N>ms80GUABOQv~kgl5dA9&BT3Q33Q<mWKiQN5R|w}KYeCu+
z@v&rh>34~brX*aw%AL$x3S9qss4LJ{QA<0;y7@l5R;UmzcT@<MJ1T_B9Tmdmjtb#&
dM}=^?;~!lXu5YR1Q7Qlc002ovPDHLkV1m3-q22%h

literal 0
HcmV?d00001

diff --git a/app/assets/javascripts/orbitdesktop.js b/app/assets/javascripts/orbitdesktop.js
index 623f3f6bd..d1b6b0d46 100755
--- a/app/assets/javascripts/orbitdesktop.js
+++ b/app/assets/javascripts/orbitdesktop.js
@@ -118,6 +118,7 @@ var orbitDesktop = function(dom){
 		$(window).resize(function(){
 			var ww = $(window).width();
 			$("img#thmbackground").attr({"width":ww});
+			$('.tinycanvas').tinyscrollbar_update();
 		});
 		var $widget_fn = $('.widget_fn'),$fn_des = $('.fn_des');
 		$widget_fn.hover(function(){
@@ -189,7 +190,6 @@ var orbitDesktop = function(dom){
 				.find('.scrollbar')
 				.delay(1500)
 				.addClass('op00', 500);
-
 			// simple dropdown menu
 			var $sdm = $('.sdm');
 
@@ -464,6 +464,7 @@ var orbitDesktop = function(dom){
 				.find('.scrollbar')
 				.delay(1500)
 				.addClass('op00', 500);
+
 			var $sdm = $('.sdm');
 
 			if( !$sdm.children('.sdm_o') ){
@@ -762,7 +763,19 @@ var orbitDesktop = function(dom){
 						if(usernm!="" && pwd!="")
 							saveaccount(usernm,pwd,type,what);
 							
-				})
+				});
+
+				var $conlist = $('.s_form'),
+					conlist_w = $conlist.length * $conlist.outerWidth(true) + ($conlist.length - 1) * 25;
+
+				$('#connection_setting').width(conlist_w);
+
+				$('.tinycanvas')
+					.tinyscrollbar({ axis: 'x'})
+					.find('.scrollbar')
+					.delay(1500)
+					.addClass('op00', 500);
+				
 			}
 			var saveaccount = function(usernm,pwd,type,what){
 					$.post("/desktop/save_account_info",{email:usernm,password:pwd,account:type,dowhat:what},function(result){
diff --git a/app/assets/stylesheets/desktopmain.css b/app/assets/stylesheets/desktopmain.css
index 406d6266e..e902ae40c 100644
--- a/app/assets/stylesheets/desktopmain.css
+++ b/app/assets/stylesheets/desktopmain.css
@@ -386,7 +386,7 @@ a:focus { outline: none; }
 .tinycanvas .track { height: 100%; width: 6px; position: relative; }
 .tinycanvas .thumb { height: 6px; width: 6px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
 .tinycanvas .thumb .end { overflow: hidden; height: 6px; width: 6px; }
-.tinycanvas .disable{ display: none; }
+.tinycanvas .scrollbar.disable{ display: none; }
 
 /* Orbit Notification */
 #orbitnote {
@@ -447,20 +447,25 @@ a:focus { outline: none; }
 }
 .diag_btn:hover { outline: solid 2px #fff; }
 .s_form { font-size: 15px; }
-.s_form li { overflow: hidden; padding: 6px 0; margin-bottom: 12px; }
+.s_form li { overflow: hidden; padding: 6px; margin-bottom: 12px; }
 .s_form label {
 	font-size: 13px;
 	display: inline-block;
 	vertical-align: middle;
 	width: 100px;
 	margin-right: 24px;
+	color: #777;
 }
 .s_form input[type=text], .s_form input[type=password]{
 	outline: solid 3px #f6f6f6;
 	border: solid 1px #eee;
 	font-size: 18px;
+	font-family: Arial !important;
 	margin: 0;
 	padding: 6px;
+	transition: all 0.3s ease;
+	-webkit-transition: all 0.3s ease;
+	-moz-transition: all 0.3s ease;
 }
 .s_form input[type=text]:focus, .s_form input[type=password]:focus {
 	background-color: #333;
@@ -475,4 +480,40 @@ a:focus { outline: none; }
 }
 .g_col_w1 { width: 132px; }
 .g_col_w2 { width: 264px; }
-.ui-sortable-placeholder { background-color: rgba(0,0,0,0.2); visibility: visible !important; }
\ No newline at end of file
+.ui-sortable-placeholder { background-color: rgba(0,0,0,0.2); visibility: visible !important; }
+
+#connection_setting { height: 492px; }
+#connection_setting .s_form {
+	float: left;
+	margin: 0 12px 0 0;
+	padding-left: 24px;
+	height: 100%;
+	border-left: solid 1px #ddd;
+}
+#connection_setting .s_form:first-child { padding-left: 0; border: none; }
+#connection_setting .s_form label { line-height: 30px; }
+#connection_setting .s_form .c_icon, #connection_setting .s_form .c_name {
+	display: inline-block;
+	vertical-align: middle;
+}
+#connection_setting .s_form .c_name { padding: 0 12px; font-size: 18px; }
+#connection_setting .s_form input[type=text], #connection_setting .s_form input[type=password] { width: 202px; }
+#connection_setting .setting_btn { margin-left: 12px; }
+#connection_setting .setting_btn.disable { background-color: #ddd; cursor: default; }
+#connection_setting .c_status {
+	float: right;
+	padding: 6px;
+	font-size: 9px;
+	background-color: #eee;
+	color: #ccc;
+	font-family: Arial;
+	font-weight: bold;
+}
+#connection_setting .c_status_on { background-color: #51A351; color: #fff; }
+#connection_setting .c_info {
+	font-size: 18px;
+	font-family: Arial;
+	padding: 7px 6px;
+	background-color: #fcfcfc;
+	cursor: default;
+}
\ No newline at end of file
diff --git a/app/views/desktop/settings/connections.html.erb b/app/views/desktop/settings/connections.html.erb
index 1ef4cab68..3619a5834 100644
--- a/app/views/desktop/settings/connections.html.erb
+++ b/app/views/desktop/settings/connections.html.erb
@@ -1,10 +1,9 @@
-
-<div class="tinycanvas vp">
-	<div class="scrollbar sb_v vp"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
+<div class="tinycanvas hp">
+	<div class="scrollbar sb_h vp"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
 	<div class="viewport">
-		<div class="overview">
-			<div class="s_title hh3">Connections</div>
-			<table width="100%" class="s_form">
+		<div id="connection_setting" class="overview vp">
+			<!-- <div class="s_title hh3">Connections</div> -->
+			<!-- <table width="100%" class="s_form">
 				<tr>
 					<td rowspan="2"><img src="assets/gmail.png" alt=""></td>
 					<td valign="top"><label for="s_name1">Username</label><input type="text" id="gmail_username" /></td>
@@ -27,7 +26,41 @@
 				<tr>
 					<td><label for="s_name1">Password</label><input type="password" /></td>
 				</tr>
-			</table>
+			</table> -->
+			<ul class="s_form w2 hp">
+				<li><span class="c_status">No Connection</span></li>
+				<li><img src="assets/connection/facebook.png" alt="" class="c_icon"><h1 class="c_name">Facebook</h1></li>
+				<li><label for="">Account</label><input type="text"></li>
+				<li><label for="">Password</label><input type="password"></li>
+				<li>
+					<div class="s_action">
+						<a href="" class="setting_btn thmc1 thmtxt hp disable">Connecting</a>
+					</div>
+				</li>
+			</ul>
+			<ul class="s_form w2 hp">
+				<li><spanspan class="c_status">No Connection</span></li>
+				<li><img src="assets/connection/twitter.png" alt="" class="c_icon"><h1 class="c_name">Twitter</h1></li>
+				<li><label for="">Account</label><input type="text"></li>
+				<li><label for="">Password</label><input type="password"></li>
+				<li>
+					<div class="s_action">
+						<a href="" class="setting_btn thmc1 thmtxt hp">Connect</a>
+					</div>
+				</li>
+			</ul>
+			<ul class="s_form w2 hp">
+				<li><span class="c_status c_status_on">Connected</span></li>
+				<li><img src="assets/connection/gmail.png" alt="" class="c_icon"><h1 class="c_name">gmail</h1></li>
+				<li><label for="">Account</label><div class="c_info">Harry</div></li>
+				<li><label for="">Password</label><div class="c_info">&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;</div></li>
+				<li>
+					<div class="s_action">
+						<a href="" class="setting_btn thmc1 thmtxt hp">Edit</a>
+						<a href="" class="setting_btn thmc1 thmtxt hp">Remove</a>
+					</div>
+				</li>
+			</ul>
 		</div>
 	</div>
 </div>
diff --git a/app/views/desktop/settings/sections.html.erb b/app/views/desktop/settings/sections.html.erb
index 32db370b7..dcb922379 100644
--- a/app/views/desktop/settings/sections.html.erb
+++ b/app/views/desktop/settings/sections.html.erb
@@ -1,6 +1,5 @@
-
 <div class="tinycanvas vp">
-	<div class="scrollbar sb_v vp"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
+	<div class="scrollbar sb_v hp"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
 	<div class="viewport">
 		<div class="overview">
 			<div class="s_title hh3">Section Names</div>
@@ -16,4 +15,4 @@
 			</div>
 		</div>
 	</div>
-</div>
+</div>
\ No newline at end of file