From b91914c288b97ac64d70f73e371367a4a3f779c9 Mon Sep 17 00:00:00 2001 From: Bala Clark Date: Fri, 2 Sep 2011 21:55:30 +0200 Subject: [PATCH] added some icons for the toolbar buttons, need to use sprites.. --- css/styles.css | 70 +++++++++++++++++++- img/iconic/LICENSE | 7 ++ img/iconic/green/cog_alt_32x32.png | Bin 0 -> 533 bytes img/iconic/green/document_fill_32x32.png | Bin 0 -> 332 bytes img/iconic/green/fullscreen_32x32.png | Bin 0 -> 363 bytes img/iconic/green/magnifying_glass_32x32.png | Bin 0 -> 545 bytes img/iconic/green/minus_32x8.png | Bin 0 -> 122 bytes img/iconic/green/plus_32x32.png | Bin 0 -> 181 bytes img/iconic/green/x_28x28.png | Bin 0 -> 336 bytes img/iconic/white/cog_alt_32x32.png | Bin 0 -> 441 bytes img/iconic/white/document_fill_32x32.png | Bin 0 -> 289 bytes img/iconic/white/fullscreen_32x32.png | Bin 0 -> 245 bytes img/iconic/white/magnifying_glass_32x32.png | Bin 0 -> 440 bytes img/iconic/white/minus_32x8.png | Bin 0 -> 122 bytes img/iconic/white/plus_32x32.png | Bin 0 -> 175 bytes img/iconic/white/x_28x28.png | Bin 0 -> 253 bytes lib/ComicBook.js | 11 ++- 17 files changed, 80 insertions(+), 8 deletions(-) create mode 100644 img/iconic/LICENSE create mode 100644 img/iconic/green/cog_alt_32x32.png create mode 100644 img/iconic/green/document_fill_32x32.png create mode 100644 img/iconic/green/fullscreen_32x32.png create mode 100644 img/iconic/green/magnifying_glass_32x32.png create mode 100644 img/iconic/green/minus_32x8.png create mode 100644 img/iconic/green/plus_32x32.png create mode 100644 img/iconic/green/x_28x28.png create mode 100644 img/iconic/white/cog_alt_32x32.png create mode 100644 img/iconic/white/document_fill_32x32.png create mode 100644 img/iconic/white/fullscreen_32x32.png create mode 100644 img/iconic/white/magnifying_glass_32x32.png create mode 100644 img/iconic/white/minus_32x8.png create mode 100644 img/iconic/white/plus_32x32.png create mode 100644 img/iconic/white/x_28x28.png diff --git a/css/styles.css b/css/styles.css index cf51258..7ffe005 100644 --- a/css/styles.css +++ b/css/styles.css @@ -4,8 +4,8 @@ font-size: 12px; background-color: #111; padding: 10px; - opacity: .9; position: fixed !important; + opacity: 0.95; } .cb-control.cb-floating { @@ -52,7 +52,7 @@ #cb-toolbar { top: 0; - height: 25px; + line-height: 42px; border-top: none; border-left: none; border-right: none; @@ -63,6 +63,72 @@ float: right; } +#cb-toolbar button { + height: 32px; + width: 32px; + color: transparent; + border: none; + background-color: transparent; + background-repeat: no-repeat; + background-position: center; + margin: 0 16px; + cursor: pointer; +} + +#cb-toolbar button.cb-close { + background-image: url(../img/iconic/white/x_28x28.png); +} + +#cb-toolbar button.cb-close:hover, +#cb-toolbar button.cb-close:active { + background-image: url(../img/iconic/green/x_28x28.png); +} + +#cb-toolbar button.cb-color { + background-image: url(../img/iconic/white/cog_alt_32x32.png); +} + +#cb-toolbar button.cb-color:hover, +#cb-toolbar button.cb-color:active { + background-image: url(../img/iconic/green/cog_alt_32x32.png); +} + +#cb-toolbar button.cb-layout { + background-image: url(../img/iconic/white/document_fill_32x32.png); +} + +#cb-toolbar button.cb-layout:hover, +#cb-toolbar button.cb-layout:active { + background-image: url(../img/iconic/green/document_fill_32x32.png); +} + +#cb-toolbar button.cb-zoom-out { + background-image: url(../img/iconic/white/minus_32x8.png); +} + +#cb-toolbar button.cb-zoom-out:hover, +#cb-toolbar button.cb-zoom-out:active { + background-image: url(../img/iconic/green/minus_32x8.png); +} + +#cb-toolbar button.cb-zoom-in { + background-image: url(../img/iconic/white/plus_32x32.png); +} + +#cb-toolbar button.cb-zoom-in:hover, +#cb-toolbar button.cb-zoom-in:active { + background-image: url(../img/iconic/green/plus_32x32.png); +} + +#cb-toolbar button.cb-fit-width { + background-image: url(../img/iconic/white/fullscreen_32x32.png); +} + +#cb-toolbar button.cb-fit-width:hover, +#cb-toolbar button.cb-fit-width:active { + background-image: url(../img/iconic/green/fullscreen_32x32.png); +} + #cb-color { width: 200px; height: 150px; diff --git a/img/iconic/LICENSE b/img/iconic/LICENSE new file mode 100644 index 0000000..403d8c1 --- /dev/null +++ b/img/iconic/LICENSE @@ -0,0 +1,7 @@ +Iconic Icons by PJ Onori + +@somerandomdude +http://somerandomdude.com/projects/iconic/ + +http://creativecommons.org/licenses/by-sa/3.0/us/ +http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL diff --git a/img/iconic/green/cog_alt_32x32.png b/img/iconic/green/cog_alt_32x32.png new file mode 100644 index 0000000000000000000000000000000000000000..97936e7bc2fff3921bc72273b2c7d5657ad96ed0 GIT binary patch literal 533 zcmV+w0_y#VP)Q=>D~0dwWBtuMDXwjrF|8l{RD1l{EUXw` zjSHe&fNx8`4efjv*p$NSOu^V-=RTg~0&)#)e}d?9pw7m(+DF1>f&fg21K&N|hO`#b ze;1OWnQHf309xQ^M_5*Lfj}M30A`GgIP2u)(DNRzjX*_K#wRBSsKP;@(A18?ltoI} zP=VWb0ni8Qz|On0<3~$jx!w{qUP9WQQcy%n;8*{LYz!PGrWt+3$ZhO)Jeb77)y?dateSYQO6^I8D;b_Jcs_JskkXoJsA_np4Xiirr-Z9&;7Ea7T`w?IO X5i*>N0U_2w00000NkvXXu0mjfr}yjE literal 0 HcmV?d00001 diff --git a/img/iconic/green/document_fill_32x32.png b/img/iconic/green/document_fill_32x32.png new file mode 100644 index 0000000000000000000000000000000000000000..071e74c7d1659aa586dcc9dd156571a0927d0e21 GIT binary patch literal 332 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdz$r9IylHmNblJdl&R0hYC{G?O` z&)mfH)S%SFl*+=BsWw1G?>t=`Ln>}1Wm-S_Fu&1EVd1G~2b`R`W=LePi!s=W+fU$A zI3>8HjKR@8;4&lki9(jEG7LTiolh*9Rs}lrDX*Bv=26PxE2OB|w;)na;hLby*|sAV zP0yY(D7s%*tZ?Wx$1V$o`N|TR5z<1eGbGp~daM$zFfQhkC_S*C`~bU#nz+D~{_~9D z4H1l8`V$f@1Aoo@V6suR!Ssf^0NX}R6P**+`q!G}Fl1#NSthY!o1BXOfuc!Yj29ja zXVN=+!Ae$TdV_M@$xHm)jr zP0}?wK-Wk%DUbfk2yD`VF?(wPs^ldipmp-2A|wI6BzYpj*9b6JR7JqKrgjU~5)s1>ED8Y&#ttfOX<6g{FkWFy2Wnu#Ih$g; zIyyT39lySafNL^ejV0diRwDvqEY1bIf;(|0|3D=!duJt?3@4q002ov JPDHLkV1j^Qj>-T4 literal 0 HcmV?d00001 diff --git a/img/iconic/green/magnifying_glass_32x32.png b/img/iconic/green/magnifying_glass_32x32.png new file mode 100644 index 0000000000000000000000000000000000000000..d115cfa6b3d6d253c7e4afe75afc6f924ddbf537 GIT binary patch literal 545 zcmV++0^a?JP)4igFc6Hx{VyFH9bEV$ z;S%!XN9Z7Y`EY#rk`4$R_ZUF2OI2=>fb0Zy&F_ciSE!5O@nijldjJ;1v+rM-u?>I~bb4pfyP35JUjLU-bq_ zob@_#BZ<`W21OR-4%rj$3i>!pxd|TG7k@Sw3F0>|A%mC~N z@CG)xcP+v&KLZg(=tf6jFBqp^6QS&3^D9sNJQ0y7IT|R4cOgQgG*NH}NaFM#zUX)z z<~2wT0W-t35x=0hHcOL#wzDLVMc`#21bW6_!8LQO;t=ReQDR#5En*ui-IKl3z>wFN zpnNOg$-6YL^lDNamjrzGM&y%D=aV#|?(3?iT-TvHCh#vJ^uO6u%+z!!OfrKZxZLu6 zIksuS1H8v#(nkLJHGn^i4=WGwA`*PSc5Kq1UU-7%5xw9oRm4Ojc!?*I#JoCc%MaGJ zJOPi}&?crJEIek_Q+hW(Pk>L=F;*fZH;mNn$Z@ jS1lMxR7-+u`w?IOd;Yoj`+DRO00000NkvXXu0mjfF=6ez literal 0 HcmV?d00001 diff --git a/img/iconic/green/minus_32x8.png b/img/iconic/green/minus_32x8.png new file mode 100644 index 0000000000000000000000000000000000000000..177e703ed7208d95fa8689703e3fbb762574610f GIT binary patch literal 122 zcmeAS@N?(olHy`uVBq!ia0vp^3P8-k!2~45pJ)95Qj#UE5hcO-X(i=}MX3yqDfvmM z3ZA)%>8U}fi7AzZCsS>Jiex-p978H@CFNK@I^p1b;D|%ALDs<)tW%g97?>H3aWl?t T{=3~DsE)zY)z4*}Q$iB}b%`Vc literal 0 HcmV?d00001 diff --git a/img/iconic/green/plus_32x32.png b/img/iconic/green/plus_32x32.png new file mode 100644 index 0000000000000000000000000000000000000000..35743cd3766e4eb4ca5d8e15acf372c770532d51 GIT binary patch literal 181 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdz$r9IylHmNblJdl&R0hYC{G?O` z&)mfH)S%SFl*+=BsWw1G;hrvzAr-fhQWONY$QJ(T_uqFa&0bmanV}(%fkf$n70hn3 z2Co_d*$srWZo4l|xWc%YPvRS20%H=p&{r7+1^-EvJxg{~YzediDeAETD!9VNz{tk1 Xg_nm*Q+b&%&$TN`$F&I!LJ{Zdv=1jA4tF~E3kV|2aSW$9 z98;L%_WB>LU_1KBa#6w-y1kbue!zf>78uk}Y+&8!3igI#2i8OzScaNTEXG0;OE4hA zN6;~HB10Ki3WvghHZ6cNCcY9JSS@g|S{?oZ&5{iVl7Nj>!7rlKGD2Y?gS2LGVD|vY zu4F(t{^OCVCXH%Ys20BJ)~337OR%(B$yh_(mFRuYwPlQ-BRJ9LUzFwy^x0zQH&L6k iiJLUSTCM&=fB^tRjKjn|VMl)e0000 literal 0 HcmV?d00001 diff --git a/img/iconic/white/cog_alt_32x32.png b/img/iconic/white/cog_alt_32x32.png new file mode 100644 index 0000000000000000000000000000000000000000..447ded50fc50c114d76cbb7193033a3ac5dad08f GIT binary patch literal 441 zcmV;q0Y?6bP)o&Cx+tkZI$f^N`^8j zZ3!G15@^Raq2?F{xWqGUehb5Jjj^ER`g#)r$tzPN&>8#y{!sU+qURQQF9ihd7!wLh z1rIhVIj|_l6s|!66chgwV{5(=Q7>E^_(K@eET+i5y>|GG(DOF6g2OzLA z(ohvyIwS34tR)i++Ov2|cBJxnP%XA=Tb`@6wPu1M%?8?G0uigm(BO35W=8~toNGSR jH84HrbnI00000NkvXXu0mjf((|yO literal 0 HcmV?d00001 diff --git a/img/iconic/white/document_fill_32x32.png b/img/iconic/white/document_fill_32x32.png new file mode 100644 index 0000000000000000000000000000000000000000..d8992b14e211010927c18e2ed6c3a21037e48237 GIT binary patch literal 289 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdz$r9IylHmNblJdl&R0hYC{G?O` z&)mfH)S%SFl*+=BsWw1Ghdo^!Ln>~)xgN;XpuoeH(0OmKllcn|*`tfE^uAInW%j<& z?D2A&nR3Ac=LhTMxz_evUwty+)az?sOc!*#=&94SY*9%_R9tdS^4hGE*A+Pv6qhij zw6Ha_Twq!tIE#VDNjAVKgz<^MRR;f#xL2kft~D3Ar4}#((LY{`go4#G&NFVy<}olk z_H4%==VI>I({9B&k6yP;-Os#(=bECK`qShCeLtsj7boOJt=ZFgNO|G+e$J-3{QTK9 j@hz@8De+JJ8QB;@4LPLiIFFwPdWXT&)z4*}Q$iB}Azp7l literal 0 HcmV?d00001 diff --git a/img/iconic/white/fullscreen_32x32.png b/img/iconic/white/fullscreen_32x32.png new file mode 100644 index 0000000000000000000000000000000000000000..5a38874bb7d1f9f40ef588fe448f2e2946c59f5a GIT binary patch literal 245 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdz$r9IylHmNblJdl&R0hYC{G?O` z&)mfH)S%SFl*+=BsWw1G(>+}rLn>~)neNDSK!JzlJNv)?PbSwi`DY4NX)MYM5)D2v zFV#p?T3Ihv$>Wq1uYh)U{lo*W9z}7!(O5Szfk|?*W>5V40~3uWnEzv)$?3v0<0Z4N zS=9$V4Nevz;rh*nzczU-YG`&)2oZ8NyRprV+x4il&=lVO^Yx7* s4v&&|_CHlS-_Uvd<+kTPbq_Ga>^rtv{;SY(pc5H9UHx3vIVCg!0Ma2`cmMzZ literal 0 HcmV?d00001 diff --git a/img/iconic/white/magnifying_glass_32x32.png b/img/iconic/white/magnifying_glass_32x32.png new file mode 100644 index 0000000000000000000000000000000000000000..c20a3837069954d7317342cf65bc2c965c5de4bd GIT binary patch literal 440 zcmV;p0Z0CcP)!A~~d9Ko>^_++9OkDN@gFqXR@xV#HF8CFhRYu%LaDNoEkubJf zHE*_mNuU$pbsPfc;C>?@5XN3}DtBakzwvHLZ)QjzFw}v9jPF4*fU>6=(#lUI=DtbE z;isZTVtcnnVc>At6Eb}DP39I9+$XYrtCaet?pz}UNwt}icI~TJ3xJby)dpX%gNu5h z`PplEMD*Nx-M=EwU0wXRSkU{o#?H%}_Y()lzB>5BPlh4rS?y29yak*y-$E!F100003H literal 0 HcmV?d00001 diff --git a/img/iconic/white/minus_32x8.png b/img/iconic/white/minus_32x8.png new file mode 100644 index 0000000000000000000000000000000000000000..3aec4a8f70a6ae0bf5749958933a9a319df0702a GIT binary patch literal 122 zcmeAS@N?(olHy`uVBq!ia0vp^3P8-k!2~45pJ)95Qj#UE5hcO-X(i=}MX3yqDfvmM z3ZA)%>8U}fi7AzZCsS>Jiex-p978H@CH?vT-=0~QQJA^+;0o5oVgY;%Ogs!KdzpDZ TZf(2^RL9`y>gTe~DWM4fOdKMB literal 0 HcmV?d00001 diff --git a/img/iconic/white/plus_32x32.png b/img/iconic/white/plus_32x32.png new file mode 100644 index 0000000000000000000000000000000000000000..9ddfb4e1e8e623c39ff7b9f8acb3d9e9150dc011 GIT binary patch literal 175 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdz$r9IylHmNblJdl&R0hYC{G?O` z&)mfH)S%SFl*+=BsWw1Gfu1goAr-gYTzkj~)ZG%OFSX|4?KN{0EIFEf@cmLf$?O<1 zBXVYNtmN|e?&FL=4Gavc%B+tRoHsvXzj;OU-zQy`ULdIlW!o5-8RqNq*5rO; Qa{?*#boFyt=akR{0A|xSS^xk5 literal 0 HcmV?d00001 diff --git a/img/iconic/white/x_28x28.png b/img/iconic/white/x_28x28.png new file mode 100644 index 0000000000000000000000000000000000000000..ed861c82ef963ebbca3f16c1016d8d8746832e01 GIT binary patch literal 253 zcmeAS@N?(olHy`uVBq!ia0vp^G9b*s1|*Ak?@s|zk|nMYCBgY=CFO}lsSJ)O`AMk? zp1FzXsX?iUDV2pMQ*D5X=6kw0hE&`-b1jgsL4kuU;aaQBr0?~wI8vgwWiI6SDLp&? z(sLidMOrf~muy@vcv2$$-Phg=vuA9Sx!Cb^!bR~MiM0ljxd~Yz2j;C{dc8!p4*GUm zwm5d1|EY}n$dDY(Qz5){iEqp$j>S=bof{Y#UKy-liLHrS26QTer>mdKI;Vst0RBs0 A>i_@% literal 0 HcmV?d00001 diff --git a/lib/ComicBook.js b/lib/ComicBook.js index 9891c97..c60c9b4 100755 --- a/lib/ComicBook.js +++ b/lib/ComicBook.js @@ -162,14 +162,13 @@ function ComicBook(id, srcs, opts) { .addClass("cb-control") .append( $(document.createElement("button")) - .text("X") + .addClass("cb-close") .click(function(){ ComicBook.prototype.toggleToolbar(); }) ) .append( $(document.createElement("button")) - .text("layout") .addClass("cb-layout " + options.displayMode) .click(function(){ ComicBook.prototype.toggleLayout(); @@ -177,28 +176,28 @@ function ComicBook(id, srcs, opts) { ) .append( $(document.createElement("button")) - .text("enhance") + .addClass("cb-color") .click(function(){ ComicBook.prototype.toggleControl("color"); }) ) .append( $(document.createElement("button")) - .text("zoom out") + .addClass("cb-zoom-out") .click(function(){ ComicBook.prototype.zoom(scale - 0.1); }) ) .append( $(document.createElement("button")) - .text("zoom in") + .addClass("cb-zoom-in") .click(function(){ ComicBook.prototype.zoom(scale + 0.1); }) ) .append( $(document.createElement("button")) - .text("fit width") + .addClass("cb-fit-width") .click(function(){ options.zoomMode = "fitWidth" ComicBook.prototype.drawPage();