From f4de6acd2f8c18f77ee601caa21297a59cc41084 Mon Sep 17 00:00:00 2001 From: Vince Date: Thu, 13 Jun 2013 13:50:53 +0200 Subject: [PATCH 1/9] Update scrollbar gutter to make less visible --- css/reset.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/reset.css b/css/reset.css index 46bc9cd7..b0c09cce 100644 --- a/css/reset.css +++ b/css/reset.css @@ -32,5 +32,5 @@ ul, li { } ::-webkit-scrollbar-track { - background-color: #444; + background-color: rgba(50, 50, 50, 0.4);; } \ No newline at end of file From b89409f82e4d8f2512561074749f9af46e53b242 Mon Sep 17 00:00:00 2001 From: Vince Date: Thu, 13 Jun 2013 13:57:03 +0200 Subject: [PATCH 2/9] Make tools sticky on screen's left edge So that the drawing canvas can expend full height --- css/style.css | 28 ++++++++++++++++++---------- css/tools.css | 4 ---- index.html | 45 ++++++++++++++++++++++++--------------------- 3 files changed, 42 insertions(+), 35 deletions(-) diff --git a/css/style.css b/css/style.css index 04812bf8..a06d9012 100644 --- a/css/style.css +++ b/css/style.css @@ -12,10 +12,10 @@ body { text-align: center; font-size: 0; position: absolute; - left: 0; - top: 104px; + left: 104px; + top: 10px; right: 0; - bottom: 0; + bottom: 10px; } .left-column { @@ -35,19 +35,27 @@ body { font-size: 0; } -.top-section { - position: absolute; - bottom: 100%; - min-width: 400px; - margin-bottom: 5px; -} - .right-column { display: inline-block; vertical-align: top; margin-left: 10px; } +.sticky-section { + display: table; + height: 100%; + position: fixed; + top: 0; + bottom: 0; + left: 0; + width: 140px; +} + +.sticky-section .wrap { + display: table-cell; + vertical-align: middle; +} + /** * Canvases layout diff --git a/css/tools.css b/css/tools.css index 86fbc40b..14718617 100644 --- a/css/tools.css +++ b/css/tools.css @@ -5,10 +5,6 @@ float: left; } -.tools-wrapper { - width: 70%; -} - .tool-icon { float: left; cursor : pointer; diff --git a/index.html b/index.html index b4739327..370c5a7b 100644 --- a/index.html +++ b/index.html @@ -17,6 +17,30 @@ + +
@@ -27,27 +51,6 @@
- -
From f08f58328e48c86a79bbea098c4b9b758b3e9510 Mon Sep 17 00:00:00 2001 From: Vince Date: Thu, 13 Jun 2013 13:57:52 +0200 Subject: [PATCH 3/9] Fix selected state for tools on load --- js/controller/ToolController.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/js/controller/ToolController.js b/js/controller/ToolController.js index 921cb9af..26b008c6 100644 --- a/js/controller/ToolController.js +++ b/js/controller/ToolController.js @@ -69,11 +69,15 @@ * @private */ ns.ToolController.prototype.createToolMarkup_ = function() { - var currentTool, toolMarkup = ''; + var currentTool, toolMarkup = '', extraClass; // TODO(vincz): Tools rendering order is not enforced by the data stucture (this.toolInstances), fix that. for (var toolKey in this.toolInstances) { currentTool = this.toolInstances[toolKey]; - toolMarkup += '
  • '; } $('#tools-container').html(toolMarkup); From 7484873c03fc3ec3f587d4ff231b7c3fefebfdac Mon Sep 17 00:00:00 2001 From: Vince Date: Thu, 13 Jun 2013 14:00:38 +0200 Subject: [PATCH 4/9] Clean up image folder names and remove unused icon images --- css/tools.css | 22 +++++++++--------- img/{tools_legacy => icons}/circle.png | Bin img/{tools_legacy => icons}/color-palette.png | Bin img/{tools_legacy => icons}/dropper.png | Bin .../cursors => icons}/eraser.png | Bin img/{tools_legacy/cursors => icons}/hand.png | Bin img/{tools_legacy => }/icons/mirror-pen.png | Bin .../cursors => icons}/paint-bucket.png | Bin img/{tools_legacy/cursors => icons}/pen.png | Bin .../cursors => icons}/rectangle.png | Bin .../cursors => icons}/select.png | Bin img/{tools_legacy => }/icons/stroke.png | Bin .../cursors => icons}/vertical-mirror-pen.png | Bin img/{tools_legacy/cursors => icons}/wand.png | Bin img/save.png | Bin 0 -> 395 bytes img/tools_legacy/cursors/circle.png | Bin 761 -> 0 bytes img/tools_legacy/eraser.png | Bin 656 -> 0 bytes img/tools_legacy/hand.png | Bin 672 -> 0 bytes img/tools_legacy/icons/color-palette.png | Bin 209 -> 0 bytes img/tools_legacy/icons/eraser.png | Bin 656 -> 0 bytes img/tools_legacy/icons/hand.png | Bin 672 -> 0 bytes img/tools_legacy/icons/paint-bucket.png | Bin 707 -> 0 bytes img/tools_legacy/icons/pen.png | Bin 450 -> 0 bytes img/tools_legacy/icons/rectangle.png | Bin 660 -> 0 bytes img/tools_legacy/icons/select.png | Bin 1145 -> 0 bytes .../icons/vertical-mirror-pen.png | Bin 603 -> 0 bytes img/tools_legacy/icons/wand.png | Bin 570 -> 0 bytes img/tools_legacy/mirror-pen.png | Bin 557 -> 0 bytes img/tools_legacy/paint-bucket.png | Bin 707 -> 0 bytes img/tools_legacy/pen.png | Bin 450 -> 0 bytes img/tools_legacy/rectangle.png | Bin 660 -> 0 bytes img/tools_legacy/select.png | Bin 1145 -> 0 bytes img/tools_legacy/stroke.png | Bin 450 -> 0 bytes img/tools_legacy/vertical-mirror-pen.png | Bin 603 -> 0 bytes img/tools_legacy/wand.png | Bin 570 -> 0 bytes 35 files changed, 11 insertions(+), 11 deletions(-) rename img/{tools_legacy => icons}/circle.png (100%) rename img/{tools_legacy => icons}/color-palette.png (100%) rename img/{tools_legacy => icons}/dropper.png (100%) rename img/{tools_legacy/cursors => icons}/eraser.png (100%) rename img/{tools_legacy/cursors => icons}/hand.png (100%) rename img/{tools_legacy => }/icons/mirror-pen.png (100%) rename img/{tools_legacy/cursors => icons}/paint-bucket.png (100%) rename img/{tools_legacy/cursors => icons}/pen.png (100%) rename img/{tools_legacy/cursors => icons}/rectangle.png (100%) rename img/{tools_legacy/cursors => icons}/select.png (100%) rename img/{tools_legacy => }/icons/stroke.png (100%) rename img/{tools_legacy/cursors => icons}/vertical-mirror-pen.png (100%) rename img/{tools_legacy/cursors => icons}/wand.png (100%) create mode 100644 img/save.png delete mode 100644 img/tools_legacy/cursors/circle.png delete mode 100755 img/tools_legacy/eraser.png delete mode 100644 img/tools_legacy/hand.png delete mode 100755 img/tools_legacy/icons/color-palette.png delete mode 100755 img/tools_legacy/icons/eraser.png delete mode 100644 img/tools_legacy/icons/hand.png delete mode 100755 img/tools_legacy/icons/paint-bucket.png delete mode 100755 img/tools_legacy/icons/pen.png delete mode 100755 img/tools_legacy/icons/rectangle.png delete mode 100644 img/tools_legacy/icons/select.png delete mode 100644 img/tools_legacy/icons/vertical-mirror-pen.png delete mode 100755 img/tools_legacy/icons/wand.png delete mode 100644 img/tools_legacy/mirror-pen.png delete mode 100755 img/tools_legacy/paint-bucket.png delete mode 100755 img/tools_legacy/pen.png delete mode 100755 img/tools_legacy/rectangle.png delete mode 100644 img/tools_legacy/select.png delete mode 100755 img/tools_legacy/stroke.png delete mode 100644 img/tools_legacy/vertical-mirror-pen.png delete mode 100755 img/tools_legacy/wand.png diff --git a/css/tools.css b/css/tools.css index 14718617..4611a196 100644 --- a/css/tools.css +++ b/css/tools.css @@ -91,47 +91,46 @@ */ .tool-paint-bucket .drawing-canvas-container:hover { - cursor: url(../img/tools_legacy/paint-bucket.png) 12 12, pointer; + cursor: url(../img/icons/paint-bucket.png) 12 12, pointer; } .tool-vertical-mirror-pen .drawing-canvas-container:hover { - cursor: url(../img/tools_legacy/vertical-mirror-pen.png) 5 15, pointer; + cursor: url(../img/icons/vertical-mirror-pen.png) 5 15, pointer; } .tool-pen .drawing-canvas-container:hover { - cursor: url(../img/tools_legacy/pen.png) 0 15, pointer; + cursor: url(../img/icons/pen.png) 0 15, pointer; } .tool-eraser .drawing-canvas-container:hover { - cursor: url(../img/tools_legacy/eraser.png) 0 15, pointer; + cursor: url(../img/icons/eraser.png) 0 15, pointer; } .tool-stroke .drawing-canvas-container:hover { - cursor: url(../img/tools_legacy/pen.png) 0 15, pointer; + cursor: url(../img/icons/pen.png) 0 15, pointer; } .tool-rectangle .drawing-canvas-container:hover { - cursor: url(../img/tools_legacy/rectangle.png) 0 15, pointer; + cursor: url(../img/icons/rectangle.png) 0 15, pointer; } .tool-circle .drawing-canvas-container:hover { - cursor: url(../img/tools_legacy/circle.png) 2 15, pointer; + cursor: url(../img/icons/circle.png) 2 15, pointer; } .tool-move .drawing-canvas-container:hover { - cursor: url(../img/tools_legacy/hand.png) 15 15, pointer; + cursor: url(../img/icons/hand.png) 15 15, pointer; } .tool-rectangle-select .drawing-canvas-container:hover { - cursor: url(../img/tools_legacy/select.png) 15 15, pointer; + cursor: url(../img/icons/select.png) 15 15, pointer; } .tool-shape-select .drawing-canvas-container:hover { - cursor: url(../img/tools_legacy/wand.png) 15 15, pointer; + cursor: url(../img/icons/wand.png) 15 15, pointer; } .tool-colorpicker .drawing-canvas-container:hover { - cursor: url(../img/tools_legacy/dropper.png) 0 15, pointer; } .tool-grid, @@ -145,6 +144,7 @@ padding: 5px 0 0 5px; height: 25px; cursor : default; + cursor: url(../img/icons/dropper.png) 0 15, pointer; } .tool-color-picker input { diff --git a/img/tools_legacy/circle.png b/img/icons/circle.png similarity index 100% rename from img/tools_legacy/circle.png rename to img/icons/circle.png diff --git a/img/tools_legacy/color-palette.png b/img/icons/color-palette.png similarity index 100% rename from img/tools_legacy/color-palette.png rename to img/icons/color-palette.png diff --git a/img/tools_legacy/dropper.png b/img/icons/dropper.png similarity index 100% rename from img/tools_legacy/dropper.png rename to img/icons/dropper.png diff --git a/img/tools_legacy/cursors/eraser.png b/img/icons/eraser.png similarity index 100% rename from img/tools_legacy/cursors/eraser.png rename to img/icons/eraser.png diff --git a/img/tools_legacy/cursors/hand.png b/img/icons/hand.png similarity index 100% rename from img/tools_legacy/cursors/hand.png rename to img/icons/hand.png diff --git a/img/tools_legacy/icons/mirror-pen.png b/img/icons/mirror-pen.png similarity index 100% rename from img/tools_legacy/icons/mirror-pen.png rename to img/icons/mirror-pen.png diff --git a/img/tools_legacy/cursors/paint-bucket.png b/img/icons/paint-bucket.png similarity index 100% rename from img/tools_legacy/cursors/paint-bucket.png rename to img/icons/paint-bucket.png diff --git a/img/tools_legacy/cursors/pen.png b/img/icons/pen.png similarity index 100% rename from img/tools_legacy/cursors/pen.png rename to img/icons/pen.png diff --git a/img/tools_legacy/cursors/rectangle.png b/img/icons/rectangle.png similarity index 100% rename from img/tools_legacy/cursors/rectangle.png rename to img/icons/rectangle.png diff --git a/img/tools_legacy/cursors/select.png b/img/icons/select.png similarity index 100% rename from img/tools_legacy/cursors/select.png rename to img/icons/select.png diff --git a/img/tools_legacy/icons/stroke.png b/img/icons/stroke.png similarity index 100% rename from img/tools_legacy/icons/stroke.png rename to img/icons/stroke.png diff --git a/img/tools_legacy/cursors/vertical-mirror-pen.png b/img/icons/vertical-mirror-pen.png similarity index 100% rename from img/tools_legacy/cursors/vertical-mirror-pen.png rename to img/icons/vertical-mirror-pen.png diff --git a/img/tools_legacy/cursors/wand.png b/img/icons/wand.png similarity index 100% rename from img/tools_legacy/cursors/wand.png rename to img/icons/wand.png diff --git a/img/save.png b/img/save.png new file mode 100644 index 0000000000000000000000000000000000000000..fb044dc8302391120ef48a3d8f74905e61fc8711 GIT binary patch literal 395 zcmeAS@N?(olHy`uVBq!ia0y~yV9;h@V9?@V1Cfl2QW+Q+*pj^6T^Rm@;DWu&Co?cG za29w(7Bet#3xhBt!>lLV0FMhJw4NZ-7F6o4;f!77#PolU|EOrHS8lnqdFqm-OBq+I ztkqfRc$59d^d+l(tP&P7zgT84A@WDwgAIJyzP#%gwlPRedOKaqh}D331Dk;-=WfMH z4wG)N1Aam53G;=v@m;(n9=>|=p-Fp=Yzmnq?rE10sAK*_wJ9+pS+&jD00~98nu6{1-oD!M{(JaZG%Q-e|yQz{EjrrIztFwORKaSW-rH7EGKcW|M|{`=MM&8Fr3%Q|Bjd-_@b zRL2#nttzKf64^w*G%IY9t9s+OX#Ya>YQ9$sl{n;OL>jj)@F_`noq6<`+OEu9&z9XR zGcVu%d++w*obZy1-t2aBKL4#d|9sAS%ln^I)!+FVX|zlzs^t<%@(Y||xlASD{bilc z+ix)D6}QkGX3>AN^S+XffWnSkYt0Sj2_3*yjV|$^-XG%)s zqAr#N{~KEDUUbVmdBj`Ac2dO?Yv~> z;_~>7%FKOyE8^R7oQ#z7-d^$XI^VN+p@EBRE4QsL-vgfp+h$cCW|_0kPA&UVHj%MN zYOZKanCnu5-Gy6hR%dRNxIDpv@37fgvy1Grj{}4;Q{yR#>RCLyn7JaFHw*4$e zJiK5u{V%r7T1i=8Sh_v+dA zt0=TSUc+`EPhKPOd;OJI8EemyW5r!F>UKYr{2O!YSmzn0B8vqsf2aM|-p?w*Q0`c# V=a#&%gn@y9!PC{xWt~$(6972yVnF}^ diff --git a/img/tools_legacy/eraser.png b/img/tools_legacy/eraser.png deleted file mode 100755 index e0d4b0201b9fc3f6f6da0c9b888822eafaac8414..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 656 zcmeAS@N?(olHy`uVBq!ia0y~yU=RRd4mJh`2Kmqb6B!s7BuiW)N`mv#O3D+9QW+dm z@{>{(JaZG%Q-e|yQz{EjrrIztFd2EeIEGZ*S~B^3w@{+Q@%iOtAp#*E@-;YY*03LR zaT4Y&W9Q#mvNC%5LK6d<6GD0(;)*sd0Y1}H7cPo^v+K!H`Q{khtN(=B6araWv^c(ar~xcH}YozN@SH-P0Lb{_ghce+iS5)F$6#`LtEH zVM>UtR;elPT8;_p_G;JO*}45_FJp~(Lb1V*YwtcLu530~nsIN_g3B)tyuJ0CS=ixF ze%^!}v(vH`bI+xUxfb5uwC2O)Y(dxeWjl>F`-?@|+q3V#&%d?(_xbBG3od;tvEqGR zWO>x1wPBG~a2j7ke74#DZ<_j#rWFXz^HFr(Nsx6Xu_1SMUE8 z|KP>S4P5=l9~UeP2)Mx5{`T3fV&S^Eb012HwXg1kDP~x;3YpiS@cYt=qr;QT5+Vx78LD#a=csmEbwWbI49#ESRs==~IHi4UW&c zI&ZF5@0DX=Vyv{A|M{(sUU%2+h(qCOEPH-%2mF5VQSndTfA>Fv2@L$^jv~^9Pfjv0 PFfe$!`njxgN@xNA3k@ta diff --git a/img/tools_legacy/hand.png b/img/tools_legacy/hand.png deleted file mode 100644 index 7b47be2dc925bf48025e302b0070f7020f9fe5b9..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 672 zcmeAS@N?(olHy`uVBq!ia0y~yU=RRd4mJh`2Kmqb6B!s7BuiW)N`mv#O3D+9QW+dm z@{>{(JaZG%Q-e|yQz{EjrrIztFgba;IEGZ*$_e()77i5oXJp*z>Cu!Su6Jiv>#p7h z-HSqcSf@IPI>toCaM*FZ`@`s^*pYE?>eh_jN6Eq~BPN7#Es|zkc!?`=g+NJC&?J+& z*XLH-s`L9!mih5)cJ=dl?`yuF*~_?84b^m(9&oc^SYMrvRw<(HV`n}GluhP!R%gbQ< zG36~^#1!u;KlstG{+}bi+au2Hst4}Kz29H++@@B3nk*BW{Ry=U-IBGMt7_&8g|3+0 z{4nCqbT8-a4D6BZk4J?#H5v#8TsB^45(fG=W{lILmm){SU8_&GCmYJFNHP64^w+}?(E1KS{KBt=@%RO)E zzZv~v^X}DZuP{;H{PjN<*Vavug)Ckzy-exzz3)VXMCd6+>rG$wJl?O?h$ne5!_o8k z@pU(yYU7MT*Ec_1>a`V9<1^MMQ|_sMP6a(&-FfFN|ElLQ z8vbP0l+XkKhet3` diff --git a/img/tools_legacy/icons/color-palette.png b/img/tools_legacy/icons/color-palette.png deleted file mode 100755 index 6e6e85212b85b7ba0918570c2ebede3047596237..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 209 zcmeAS@N?(olHy`uVBq!ia0y~yU=RRd4mJh`2Kmqb6B!s7SkfJR9T^zbpD<_bdda}R zAX(xXQ4*Y=R#Ki=l*-_klAn~S;F+74o*I;zm{M7IGS!BGfg#z`#WBRXKa@D}zrggbJr92nvj$%?_j>cc?TG^R4}9L$OR#+uHrw-$ z|8VmahOWa3i?R-bg!0er`z_ygFzb~0zxKxmGY=d{S1U4PDE9uRl6=(Z4+8@OgQu&X J%Q~loCIE{(JaZG%Q-e|yQz{EjrrIztFd2EeIEGZ*S~B^3w@{+Q@%iOtAp#*E@-;YY*03LR zaT4Y&W9Q#mvNC%5LK6d<6GD0(;)*sd0Y1}H7cPo^v+K!H`Q{khtN(=B6araWv^c(ar~xcH}YozN@SH-P0Lb{_ghce+iS5)F$6#`LtEH zVM>UtR;elPT8;_p_G;JO*}45_FJp~(Lb1V*YwtcLu530~nsIN_g3B)tyuJ0CS=ixF ze%^!}v(vH`bI+xUxfb5uwC2O)Y(dxeWjl>F`-?@|+q3V#&%d?(_xbBG3od;tvEqGR zWO>x1wPBG~a2j7ke74#DZ<_j#rWFXz^HFr(Nsx6Xu_1SMUE8 z|KP>S4P5=l9~UeP2)Mx5{`T3fV&S^Eb012HwXg1kDP~x;3YpiS@cYt=qr;QT5+Vx78LD#a=csmEbwWbI49#ESRs==~IHi4UW&c zI&ZF5@0DX=Vyv{A|M{(sUU%2+h(qCOEPH-%2mF5VQSndTfA>Fv2@L$^jv~^9Pfjv0 PFfe$!`njxgN@xNA3k@ta diff --git a/img/tools_legacy/icons/hand.png b/img/tools_legacy/icons/hand.png deleted file mode 100644 index 7b47be2dc925bf48025e302b0070f7020f9fe5b9..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 672 zcmeAS@N?(olHy`uVBq!ia0y~yU=RRd4mJh`2Kmqb6B!s7BuiW)N`mv#O3D+9QW+dm z@{>{(JaZG%Q-e|yQz{EjrrIztFgba;IEGZ*$_e()77i5oXJp*z>Cu!Su6Jiv>#p7h z-HSqcSf@IPI>toCaM*FZ`@`s^*pYE?>eh_jN6Eq~BPN7#Es|zkc!?`=g+NJC&?J+& z*XLH-s`L9!mih5)cJ=dl?`yuF*~_?84b^m(9&oc^SYMrvRw<(HV`n}GluhP!R%gbQ< zG36~^#1!u;KlstG{+}bi+au2Hst4}Kz29H++@@B3nk*BW{Ry=U-IBGMt7_&8g|3+0 z{4nCqbT8-a4D6BZk4J?#H5v#8TsB^45(fG=W{lILmm){SU8_&GCmYJFNHP64^w+}?(E1KS{KBt=@%RO)E zzZv~v^X}DZuP{;H{PjN<*Vavug)Ckzy-exzz3)VXMCd6+>rG$wJl?O?h$ne5!_o8k z@pU(yYU7MT*Ec_1>a`V9<1^MMQ|_sMP6a(&-FfFN|ElLQ z8vbP0l+XkKhet3` diff --git a/img/tools_legacy/icons/paint-bucket.png b/img/tools_legacy/icons/paint-bucket.png deleted file mode 100755 index f82a8865a7bc0326fd56f27a869326be4a7d688b..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 707 zcmeAS@N?(olHy`uVBq!ia0y~yU=RRd4mJh`2Kmqb6B!s7SkfJR9T^zbpD<_bdda}R zAX(xXQ4*Y=R#Ki=l*-_klAn~S;F+74o*I;zm{M7IGS!BGfhp9}#WBR<^wi0>y(cHi z953Ix`_rO-?Fv)!S{AT2iYq-yy%EaEcJW-hO7`I^p+3ELoNni+I^Sq}_aO1oZs*z3 z(eHO3T_ii_%?h4vinD|7#5TUUeNX(0lJ1?O)1Nm!|5;bp{`~s}h7JG1{);SqQ7!xD zuJNnrhdjb>KEIpu!p3-as-4_+wTt!-oz3gFF4uK9ednU}KF(InwtM1!C49PfbGa{g z?S6c&Ls%(SV!P|=ieF_|B1I9cA@`w|^QZ7^oMX2aJ#O5~ z{j^Auot=G#`PzeSsfqul9oH_tpdESRP1Tyuu}Nn{T<6Xz-YMfFE!gvNU((DUjb2Ne zf>yHZzt8{lck8n$syF5oE;Iac(As9fx0tkvDwb}urF+@9TA4Q8)Y<&*{d;4#D*ySr z@8(&|^*b@;)idwg{x&nehyGTJ4Ug3QG<)q@-H_FxZ{EF2N>6V;*}`^VLx@(ZixOj# z!h(w#3X@N2ygTm8afb8GECsh2LNa{qR#Lr>UcBIFZ*O05HS0u*k%!vkj^mFxSeRza zp4}XxwbVsP@b|+t;%mS3=WFaMnQL}2!(<| z9Q$>zhh0YXq1ES}sI_5lKUM_jh&fJoHNTRz_0mMoMu&o5>g(+9OZ<7RurfsJ>#tu{ zmuqLAW$Sct`t-BrTdVrSX)$`?(mZS(N0TNUf4ud(wEvZ?YYfv*|6M=xntVp~qkyFK TSu+?I7#KWV{an^LB{Ts5?OIB? diff --git a/img/tools_legacy/icons/pen.png b/img/tools_legacy/icons/pen.png deleted file mode 100755 index 0bfecd50ee9f5bc5828f0c0745aa3e0effcbe250..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 450 zcmeAS@N?(olHy`uVBq!ia0y~yU=RRd4mJh`2Kmqb6B!s7SkfJR9T^zbpD<_bdda}R zAX(xXQ4*Y=R#Ki=l*-_klAn~S;F+74o*I;zm{M7IGS!BGfic9>#WBR<^xDbx9!!N2 zZL!hZ&C?22PIF+H9rGlkqfI2L$e@Q!ds5qiwM&-?oSJap!JSQ4JeqPmR(N#3+w(w6 z#p=o$Zg4S?-WxZf7yKL;c3g4T#rh&VczlO zb$^f^PGi3?AJxVHg(io z;Y&Q((iW}Ix?fbLYFEcY{ieOGej=aQk8IHT(EF;SG~&s&gDrDFyj`~fMI=My^)^^% zyChw0IJ1%4=5GJxO65A+r@Iz>DvWLYz#&(gc4Tf;i|pEtb0y6$#B)N7gSN=3*2%Kk zwJ4X%3$Ed6JEJSHY|Db<)*=Sa%yR$!Hvc!JJT&IJnvDEhCI$uu22WQ%mvv4FO#si_ BzEc1I diff --git a/img/tools_legacy/icons/rectangle.png b/img/tools_legacy/icons/rectangle.png deleted file mode 100755 index d28dc6b1a4420e67d2ad201e77fa6ffdff47b0f0..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 660 zcmeAS@N?(olHy`uVBq!ia0y~yU=RRd4mJh`2Kmqb6B!s7SkfJR9T^zbpD<_bdda}R zAX(xXQ4*Y=R#Ki=l*-_klAn~S;F+74o*I;zm{M7IGS!BGfl1BN#WBR<^wP<`9wCJy zN9&Dyg?n#JSvj+5zT*^El_?=XB4N^nH)__7w;1> zJD78&z2tj!GYvXw#HP$Xd~;s}$IJ@Z-*>Tt|3}^BoVKG5CC? z!ev$4D#e+iIvqQN44tn=#~gSyN#um|D&gEK&)+Y4eo&ix$s=F8#?D>*ydk2&dseUe zl9avNZ1?oi)a9LFZxXXIq-)>mZm(f-cRU*KepU6|qtP#xtoviV^J244-D_1DkIB3D zbHvPO9c4#8Q;f;1iE5E!CDSCDwo|Ug-#rycH zC$4XoS^djl%c_YXf8-8sa1Qg6G_v+dD_d8WUwphlUd5e7&^aW~aFe>VMbM{tFRr-- zeca8m*=ULI(?2zmj}sr+n4Xp0sJj1wMO(-0#y2nhvbw7@*W@YKUOO~v!^By7$!lIK zpH~X+^mm=+epAr-3dg^SGye|N9qE$%Tf?q;^i2w<^7{QBOp01v4CFV87Co@=`hP;k zeRA%b6}$cGU%RsH+7%hSYxa>N7U!L(&zN!QU`gB2uiSrbAA9}0EKP6zUI8VIBXKrK z6)#@3Q&E;hq%Vr_V0zdn+1ot){%_(e;^av*)w@zkbZVnk#m( Upyup@3=9kmp00i_>zopr02S>pP5=M^ diff --git a/img/tools_legacy/icons/select.png b/img/tools_legacy/icons/select.png deleted file mode 100644 index bf2b724d198cf478b028b54225fe3a5fb45059a2..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1145 zcmeAS@N?(olHy`uVBq!ia0y~yU=RRd4mJh`2Kmqb6B!toKV&*P2Y5O=D+Cnfr)B1( zGB9XN>+6PzB4~&iJ1L@jeUHg-RnbxqjyS6tv$x(IeFa<@@3V2yJGa1 z^p3Togii%Y{+E@xJm=ads}TPyc5vti0g>vjAJ_uPJd(7f+>=cCOd zSv|Fmh{TF%k97_k%gFOv1i#Wqn%2GK`c|z+sz?4B8~)7U`7G14RoP$nmDH{?Re@!1 zXC+>W*ySJa|Ga6wS=7g>k1szxQ|o`UyZ>rj`SB|P_3N^CdLGeN-uLW>q*}e`$Gyj5 zRC_D*9X`#RRlVfU&y(h2uY=z!-0R$t^`muVz`l&LQ`C0k7FC|JTh%rvdzX2aZL_%G z{Z*HpCO%hon3`6+CcdNkb??Rt`wiad`aFxO6MMZ_^__dc{maKrcT@}1zqs{^<$Pqs zvb4CT|5~;C;`xdNuIX+Ld1BY;vUkBThj-VPAKRg8`QWi)QM6I4ai56Oze&k#n>%(+ z{G8{!wq=g=tl6iF?Vs3f)mnJ|%DPq4QuoTb)JXKHnk+~-%=6AFVgsYmiV5vJ`(z6O zgPECqrUYCGnj+D;JdrQ;ZROL3!-Yp?@UFQ&)6^~V{6oQaEi$u9gj?Snf3Bc8$vI_4 zPlL}rmHdf^Rk|+;78P9HCewXB>F&)hpY2R8Xg`*1KC^S4TfE5oHPx3ctgrv_T`c?e z#5tMT^DEd79Om0HgZbmH^?H9dXn)%1q_?Mf^XpeaJ~k`&ue`nT>lLndt5?kOsdo_@Q`^GC>!upfax{C>p!kW6_vsUY%)=MJSB<(QtiS06u5{`{u7 zD*CFC@9wx@gQY!NqN_YldFgws_c(fD{uNzb&*V#TSKi#S*`UHl9*MWF@NJIFGdwb9hUjI5?&_n0g&s2LJEqRx!CtDo zEdr!yq#0ndvllm``{_ppPJOIS`oA1 z%fY%xV_(aF%1z$3uk*M_OPC*I^Dp?l z)#F-w`J>JA8DlIKnBQsraL!+)j`2g*@9!V$V@&NH3O|6$*&A1n!vAE$ku|1_=m zvG6C;o5z- zEoZVz0B=G$qsQBI>MTLUoG+epgyhee{)FZJ!SVwSAN+Dz?JmT~CZ}O1d0F(qBnAcs N22WQ%mvv4FO#m3IEDHbt diff --git a/img/tools_legacy/icons/vertical-mirror-pen.png b/img/tools_legacy/icons/vertical-mirror-pen.png deleted file mode 100644 index cf2157d808d6e2257a792a2dd3ad1e9ddefb5c43..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 603 zcmeAS@N?(olHy`uVBq!ia0y~yU=RRd4mJh`2Kmqb6B!s7Sc;uILpV4%IBGajIv5xj zI14-?iy0WWg+Q3`(%rg03=9l1C9V-A!TD(=<%vb942~)JNvR5MnMJAP`9;~q3eLf1 zFZOKeVPIgq>gnPbV$r*|-_awuQ0Dml|Np<4JZ`rU|Q(c%s<6ChprCx_l#Qe@o^~U(VxQ z&1P8EdwTMQ0`Cdr^vcbnn4s%_v2ul;}bX*hi}-Y})` z$){Po3_JI1OV)hMadh&B--|R-mh#43dOWpEd9V6Gh6J5jr6A>N_UX6pU7jztFDcLS z{?3~06V|_0T=r>kEsxITP{}zv<;(l)`aCDRMHvMX#hsOQ<|^n+@?v0MVDNPHb6Mw< G&;$TmI0JtG diff --git a/img/tools_legacy/icons/wand.png b/img/tools_legacy/icons/wand.png deleted file mode 100755 index 44ccbf812879c42cb1f9587d865bcfc337ce6361..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 570 zcmeAS@N?(olHy`uVBq!ia0y~yU=RRd4mJh`2Kmqb6B!s7SkfJR9T^zbpD<_bdda}R zAX(xXQ4*Y=R#Ki=l*-_klAn~S;F+74o*I;zm{M7IGS!BGf$@x|i(`nz>8X9OCow7s|(?eTm8-@K@msU3G6 zm%UgJa_rPLogM$UO>29M+dtgQSG(2S_w*sV{^yU?_olZiGMot3NIz%zG$(KA{o4$g z_s&Js&q!Z<>gDY=L+{I%L#noZN;%MM@qKbb(c4!4!581K zyVQR|qMcJrw5pEsoGx6r=YzBfatD{L-KE3iaeC z>0aipm}j2Sf4td2p`pTt@2O3f^~E;pM5dzF8@}E(Q|{)O|EaUr5$oPpIy-ky`kv$> zXFG+N`xsBA2(>yLoKR~gZ_(HMZ*J%NnHn!XpJkLxta-uN;i7cn`Dfct%065(|D8IR zAh0urPj5PR-1_bAax5oPj54<0F0h)*(dy)U@;`IdRw=KglLBuTY!VdUYd8P8d2QJ1 d3!Bc_2k>m(%FnpIjDdlH!PC{xWt~$(69Dqb15N+{ diff --git a/img/tools_legacy/mirror-pen.png b/img/tools_legacy/mirror-pen.png deleted file mode 100644 index f51489460073ccd61817ab46e6f96fd5b22cfebc..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 557 zcmeAS@N?(olHy`uVBq!ia0y~yU=RRd4mJh`2Kmqb6B!s7Sc;uILpV4%IBGajIv5xj zI14-?iy0WWg+Q3`(%rg03=9l1C9V-A!TD(=<%vb942~)JNvR5MnMJAP`9;~q3eLf1 zFZOKeVPIff?&;zfV$r*F@?P)gK#BJG#l<_rn>RMi@?!CAb8{)##o?uSiEohtAKxpr zAM7619_r~A6*aohH%fZeg$La?Cbnx{-D_6-?Rd4ySwofKhB@c9Y0Gk#a+F4?%Bd(ms|B}vvx zlB^jt_`d3`cVxRJe8+8nV*E>)8R9!m*&gxxo+-=OHHR(o!_V-PD*3(pW@_;-e#D!XvRXURvCy=szCPoKSM z+Gc2+9%$ryMU?%29h*Vc=^J-D68`;ay8L!oy3wTVsag&eMJI1R)vR$7ziu(%@QcC_j|59!wSz!e81Xf#xgK4FnGH9 KxvXy(cHi z953Ix`_rO-?Fv)!S{AT2iYq-yy%EaEcJW-hO7`I^p+3ELoNni+I^Sq}_aO1oZs*z3 z(eHO3T_ii_%?h4vinD|7#5TUUeNX(0lJ1?O)1Nm!|5;bp{`~s}h7JG1{);SqQ7!xD zuJNnrhdjb>KEIpu!p3-as-4_+wTt!-oz3gFF4uK9ednU}KF(InwtM1!C49PfbGa{g z?S6c&Ls%(SV!P|=ieF_|B1I9cA@`w|^QZ7^oMX2aJ#O5~ z{j^Auot=G#`PzeSsfqul9oH_tpdESRP1Tyuu}Nn{T<6Xz-YMfFE!gvNU((DUjb2Ne zf>yHZzt8{lck8n$syF5oE;Iac(As9fx0tkvDwb}urF+@9TA4Q8)Y<&*{d;4#D*ySr z@8(&|^*b@;)idwg{x&nehyGTJ4Ug3QG<)q@-H_FxZ{EF2N>6V;*}`^VLx@(ZixOj# z!h(w#3X@N2ygTm8afb8GECsh2LNa{qR#Lr>UcBIFZ*O05HS0u*k%!vkj^mFxSeRza zp4}XxwbVsP@b|+t;%mS3=WFaMnQL}2!(<| z9Q$>zhh0YXq1ES}sI_5lKUM_jh&fJoHNTRz_0mMoMu&o5>g(+9OZ<7RurfsJ>#tu{ zmuqLAW$Sct`t-BrTdVrSX)$`?(mZS(N0TNUf4ud(wEvZ?YYfv*|6M=xntVp~qkyFK TSu+?I7#KWV{an^LB{Ts5?OIB? diff --git a/img/tools_legacy/pen.png b/img/tools_legacy/pen.png deleted file mode 100755 index 0bfecd50ee9f5bc5828f0c0745aa3e0effcbe250..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 450 zcmeAS@N?(olHy`uVBq!ia0y~yU=RRd4mJh`2Kmqb6B!s7SkfJR9T^zbpD<_bdda}R zAX(xXQ4*Y=R#Ki=l*-_klAn~S;F+74o*I;zm{M7IGS!BGfic9>#WBR<^xDbx9!!N2 zZL!hZ&C?22PIF+H9rGlkqfI2L$e@Q!ds5qiwM&-?oSJap!JSQ4JeqPmR(N#3+w(w6 z#p=o$Zg4S?-WxZf7yKL;c3g4T#rh&VczlO zb$^f^PGi3?AJxVHg(io z;Y&Q((iW}Ix?fbLYFEcY{ieOGej=aQk8IHT(EF;SG~&s&gDrDFyj`~fMI=My^)^^% zyChw0IJ1%4=5GJxO65A+r@Iz>DvWLYz#&(gc4Tf;i|pEtb0y6$#B)N7gSN=3*2%Kk zwJ4X%3$Ed6JEJSHY|Db<)*=Sa%yR$!Hvc!JJT&IJnvDEhCI$uu22WQ%mvv4FO#si_ BzEc1I diff --git a/img/tools_legacy/rectangle.png b/img/tools_legacy/rectangle.png deleted file mode 100755 index d28dc6b1a4420e67d2ad201e77fa6ffdff47b0f0..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 660 zcmeAS@N?(olHy`uVBq!ia0y~yU=RRd4mJh`2Kmqb6B!s7SkfJR9T^zbpD<_bdda}R zAX(xXQ4*Y=R#Ki=l*-_klAn~S;F+74o*I;zm{M7IGS!BGfl1BN#WBR<^wP<`9wCJy zN9&Dyg?n#JSvj+5zT*^El_?=XB4N^nH)__7w;1> zJD78&z2tj!GYvXw#HP$Xd~;s}$IJ@Z-*>Tt|3}^BoVKG5CC? z!ev$4D#e+iIvqQN44tn=#~gSyN#um|D&gEK&)+Y4eo&ix$s=F8#?D>*ydk2&dseUe zl9avNZ1?oi)a9LFZxXXIq-)>mZm(f-cRU*KepU6|qtP#xtoviV^J244-D_1DkIB3D zbHvPO9c4#8Q;f;1iE5E!CDSCDwo|Ug-#rycH zC$4XoS^djl%c_YXf8-8sa1Qg6G_v+dD_d8WUwphlUd5e7&^aW~aFe>VMbM{tFRr-- zeca8m*=ULI(?2zmj}sr+n4Xp0sJj1wMO(-0#y2nhvbw7@*W@YKUOO~v!^By7$!lIK zpH~X+^mm=+epAr-3dg^SGye|N9qE$%Tf?q;^i2w<^7{QBOp01v4CFV87Co@=`hP;k zeRA%b6}$cGU%RsH+7%hSYxa>N7U!L(&zN!QU`gB2uiSrbAA9}0EKP6zUI8VIBXKrK z6)#@3Q&E;hq%Vr_V0zdn+1ot){%_(e;^av*)w@zkbZVnk#m( Upyup@3=9kmp00i_>zopr02S>pP5=M^ diff --git a/img/tools_legacy/select.png b/img/tools_legacy/select.png deleted file mode 100644 index bf2b724d198cf478b028b54225fe3a5fb45059a2..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1145 zcmeAS@N?(olHy`uVBq!ia0y~yU=RRd4mJh`2Kmqb6B!toKV&*P2Y5O=D+Cnfr)B1( zGB9XN>+6PzB4~&iJ1L@jeUHg-RnbxqjyS6tv$x(IeFa<@@3V2yJGa1 z^p3Togii%Y{+E@xJm=ads}TPyc5vti0g>vjAJ_uPJd(7f+>=cCOd zSv|Fmh{TF%k97_k%gFOv1i#Wqn%2GK`c|z+sz?4B8~)7U`7G14RoP$nmDH{?Re@!1 zXC+>W*ySJa|Ga6wS=7g>k1szxQ|o`UyZ>rj`SB|P_3N^CdLGeN-uLW>q*}e`$Gyj5 zRC_D*9X`#RRlVfU&y(h2uY=z!-0R$t^`muVz`l&LQ`C0k7FC|JTh%rvdzX2aZL_%G z{Z*HpCO%hon3`6+CcdNkb??Rt`wiad`aFxO6MMZ_^__dc{maKrcT@}1zqs{^<$Pqs zvb4CT|5~;C;`xdNuIX+Ld1BY;vUkBThj-VPAKRg8`QWi)QM6I4ai56Oze&k#n>%(+ z{G8{!wq=g=tl6iF?Vs3f)mnJ|%DPq4QuoTb)JXKHnk+~-%=6AFVgsYmiV5vJ`(z6O zgPECqrUYCGnj+D;JdrQ;ZROL3!-Yp?@UFQ&)6^~V{6oQaEi$u9gj?Snf3Bc8$vI_4 zPlL}rmHdf^Rk|+;78P9HCewXB>F&)hpY2R8Xg`*1KC^S4TfE5oHPx3ctgrv_T`c?e z#5tMT^DEd79Om0HgZbmH^?H9dXn)%1q_?Mf^XpeaJ~k`&ue`nT>lLndt5?kOsdo_@Q`^GC>!upfax{C>p!kW6_vsUY%)=MJSB<(QtiS06u5{`{u7 zD*CFC@9wx@gQY!NqN_YldFgws_c(fD{uNzb&*V#TSKi#S*`UHl9*MWF@NJIFGdwb9hUjI5?&_n0g&s2LJEqRx!CtDo zEdr!yq#0ndvllm``{_ppPJOIS`oA1 z%fY%xV_(aF%1z$3uk*M_OPC*I^Dp?l z)#F-w`J>JA8DlIKnBQsraL!+)j`2g*@9!V$V@&NH3O|6$*&A1n!vAE$ku|1_=m zvG6C;o5z- zEoZVz0B=G$qsQBI>MTLUoG+epgyhee{)FZJ!SVwSAN+Dz?JmT~CZ}O1d0F(qBnAcs N22WQ%mvv4FO#m3IEDHbt diff --git a/img/tools_legacy/stroke.png b/img/tools_legacy/stroke.png deleted file mode 100755 index 0bfecd50ee9f5bc5828f0c0745aa3e0effcbe250..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 450 zcmeAS@N?(olHy`uVBq!ia0y~yU=RRd4mJh`2Kmqb6B!s7SkfJR9T^zbpD<_bdda}R zAX(xXQ4*Y=R#Ki=l*-_klAn~S;F+74o*I;zm{M7IGS!BGfic9>#WBR<^xDbx9!!N2 zZL!hZ&C?22PIF+H9rGlkqfI2L$e@Q!ds5qiwM&-?oSJap!JSQ4JeqPmR(N#3+w(w6 z#p=o$Zg4S?-WxZf7yKL;c3g4T#rh&VczlO zb$^f^PGi3?AJxVHg(io z;Y&Q((iW}Ix?fbLYFEcY{ieOGej=aQk8IHT(EF;SG~&s&gDrDFyj`~fMI=My^)^^% zyChw0IJ1%4=5GJxO65A+r@Iz>DvWLYz#&(gc4Tf;i|pEtb0y6$#B)N7gSN=3*2%Kk zwJ4X%3$Ed6JEJSHY|Db<)*=Sa%yR$!Hvc!JJT&IJnvDEhCI$uu22WQ%mvv4FO#si_ BzEc1I diff --git a/img/tools_legacy/vertical-mirror-pen.png b/img/tools_legacy/vertical-mirror-pen.png deleted file mode 100644 index cf2157d808d6e2257a792a2dd3ad1e9ddefb5c43..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 603 zcmeAS@N?(olHy`uVBq!ia0y~yU=RRd4mJh`2Kmqb6B!s7Sc;uILpV4%IBGajIv5xj zI14-?iy0WWg+Q3`(%rg03=9l1C9V-A!TD(=<%vb942~)JNvR5MnMJAP`9;~q3eLf1 zFZOKeVPIgq>gnPbV$r*|-_awuQ0Dml|Np<4JZ`rU|Q(c%s<6ChprCx_l#Qe@o^~U(VxQ z&1P8EdwTMQ0`Cdr^vcbnn4s%_v2ul;}bX*hi}-Y})` z$){Po3_JI1OV)hMadh&B--|R-mh#43dOWpEd9V6Gh6J5jr6A>N_UX6pU7jztFDcLS z{?3~06V|_0T=r>kEsxITP{}zv<;(l)`aCDRMHvMX#hsOQ<|^n+@?v0MVDNPHb6Mw< G&;$TmI0JtG diff --git a/img/tools_legacy/wand.png b/img/tools_legacy/wand.png deleted file mode 100755 index 44ccbf812879c42cb1f9587d865bcfc337ce6361..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 570 zcmeAS@N?(olHy`uVBq!ia0y~yU=RRd4mJh`2Kmqb6B!s7SkfJR9T^zbpD<_bdda}R zAX(xXQ4*Y=R#Ki=l*-_klAn~S;F+74o*I;zm{M7IGS!BGf$@x|i(`nz>8X9OCow7s|(?eTm8-@K@msU3G6 zm%UgJa_rPLogM$UO>29M+dtgQSG(2S_w*sV{^yU?_olZiGMot3NIz%zG$(KA{o4$g z_s&Js&q!Z<>gDY=L+{I%L#noZN;%MM@qKbb(c4!4!581K zyVQR|qMcJrw5pEsoGx6r=YzBfatD{L-KE3iaeC z>0aipm}j2Sf4td2p`pTt@2O3f^~E;pM5dzF8@}E(Q|{)O|EaUr5$oPpIy-ky`kv$> zXFG+N`xsBA2(>yLoKR~gZ_(HMZ*J%NnHn!XpJkLxta-uN;i7cn`Dfct%065(|D8IR zAh0urPj5PR-1_bAax5oPj54<0F0h)*(dy)U@;`IdRw=KglLBuTY!VdUYd8P8d2QJ1 d3!Bc_2k>m(%FnpIjDdlH!PC{xWt~$(69Dqb15N+{ From a6ef4ace6dc902990e5b2aca736a75ba818ed0cb Mon Sep 17 00:00:00 2001 From: Vince Date: Thu, 13 Jun 2013 14:03:50 +0200 Subject: [PATCH 5/9] Quick poor fix palette/colorpickers --- css/tools.css | 45 +++++++++++++-------------------------------- 1 file changed, 13 insertions(+), 32 deletions(-) diff --git a/css/tools.css b/css/tools.css index 4611a196..d208df23 100644 --- a/css/tools.css +++ b/css/tools.css @@ -131,56 +131,37 @@ } .tool-colorpicker .drawing-canvas-container:hover { -} - -.tool-grid, -.tool-grid label, -.tool-grid input { - line-height: 2.5; - cursor: pointer; -} - -.tool-color-picker { - padding: 5px 0 0 5px; - height: 25px; - cursor : default; cursor: url(../img/icons/dropper.png) 0 15, pointer; } .tool-color-picker input { - width: 8px; height: 8px; + width: 16px; + height: 16px; + text-indent: -10000px; border: 1px solid black; - padding: 1px; background: white; cursor: pointer; position : relative; + top: 10px; + margin-left: 2px; } -.secondary-color-picker { - top : 8px; +.tool-color-picker .secondary-color-picker { + top : 18px; + margin-left: 0; } -.tool-palette { - width: auto; -} -.tool-palette .palette li { - float: left; -} - -.palette .palette-color { - cursor: pointer; - display : inline-block; - height : 20px; - width : 20px; - margin : 5px; -} .palette .palette-color.transparent-color { + position: relative; + top: 10px; + left: 10px; background-color: white; height : 16px; width : 16px; border: 2px solid #000; - + background-size: 16px 16px; + background-position: 0 0; background-image: -webkit-gradient( linear, left top, From d1f292bd699be47ca760ee0f09c683d2aae60023 Mon Sep 17 00:00:00 2001 From: Vince Date: Thu, 13 Jun 2013 16:31:09 +0200 Subject: [PATCH 6/9] Fix save/upload buttons UX - new look and feel - upload for png spritesheet & animated gif - remove host code (window.open) from spritesheetRenderer --- css/tools.css | 24 +++++++++---- img/actions/image-upload.png | Bin 1574 -> 0 bytes img/actions/save.png | Bin 468 -> 0 bytes img/cloud_export.png | Bin 0 -> 594 bytes index.html | 18 +++++----- js/piskel.js | 51 ++++++++++++++-------------- js/rendering/SpritesheetRenderer.js | 36 ++++++++++++-------- 7 files changed, 74 insertions(+), 55 deletions(-) delete mode 100644 img/actions/image-upload.png delete mode 100755 img/actions/save.png create mode 100644 img/cloud_export.png diff --git a/css/tools.css b/css/tools.css index d208df23..abcabeeb 100644 --- a/css/tools.css +++ b/css/tools.css @@ -185,19 +185,29 @@ /* * Framesheet level actions: */ -.tool-icon.tool-save { - background-image: url(../img/actions/save.png); +.tool-icon.save-icon { + background-image: url(../img/save.png); + background-position: 6px 6px; + background-size: 36px 36px; } -.tool-icon.tool-export { - background-image: url(../img/actions/image-export.png); +.tool-icon.upload-cloud-icon { + background-image: url(../img/cloud_export.png); + background-position: 4px 0px; + background-size: 36px 36px; + position: relative; } -.tool-icon.tool-upload { - background-image: url(../img/actions/image-upload.png); +.upload-cloud-icon .label { + position: absolute; + left: 0; + bottom: 4px; + right: 0; + font-size: 11px; + text-transform: uppercase; + color: #fff; } - .tool-icon.tool-add-frame { background-image: url(../img/actions/add.png); } diff --git a/img/actions/image-upload.png b/img/actions/image-upload.png deleted file mode 100644 index df9129eb67c47e1f963829935d5d649a5b746edf..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1574 zcmeAS@N?(olHy`uVBq!ia0y~yU=RRd4mJh`2Kmqb6B!s7BuiW)N`mv#O3D+9QW+dm z@{>{(JaZG%Q-e|yQz{EjrrIztFlT0lM3hAM`dB6B=jtVb)aX^@7BGN-jeSKyVsdtB zi9%9pdS;%j()-=}l@u~lY?Z=IeGPmIoKrJ0J*tXQgRA^PlB=?lEmM^2?G$V(tSWK~ za#KqZ6)JLb@`|l0Y?Z*~TICg6frRyy6u?SKvTcwn`Gtf;oFf&jv zGt@IQHZeCh*HJJsFf`CNFw!?P(ls=E?jkSNl+@n@mS3-4yi0i)elN7&Mz%WP7O*;Q$}(iev3c~p?U|8dy4+IJ#L{ znj5(|TN=9=xWV*#<`tJD<|U`X^kyRT8sXJz+MIEGZ*Iud+7TPjds-rcXRQPSb%rV^bhmPdjn1Tooq{B_h*72!R(bi+=Tsuzlu zOBY_SU(~x@ruwCCk%mdYC1*`9zP(eNm|4voSEu-%aXYx`xA)yW8)rSc5Y1Qn;qAE^ z_-u6(fyH#56_@ztQ4=mns9ae2|5jq~ZJpILVQbt?-#B!Av@VnOq3J}p0g_OPIpD_rigST3L3 zka|>l)K6&d_ z^~^7#uCaIT|DSc{>Arlc7wepqJ}PY9Au-iPj{l+wH_u{zb#<;c@9ORyZYr^w`Ke-0 zLZq1iPs4rvNfkA5lb#lx6XfaA=H}*Co%el0+{(JaZG%Q-e|yQz{EjrrIztFqV0`IEGZ*S`uvQeKjC)3ps&&kro|?{iagFMu4bL$R&+e&d$aWYRB@$1(^pGp zGC59C+2PDH`J{_#)!y5uCNIAi&vGQ|_BY4y@RbKjV>d*toqJe*u^>o2WX?!&0g%EbNiZurc9#cX>V9M-sOxZ|uKd0JG2qoj(RX=8uGORIo}Qc+ Zc;J8XnB8-R7Yqyx44$rjF6*2UngDw#&v*a; diff --git a/img/cloud_export.png b/img/cloud_export.png new file mode 100644 index 0000000000000000000000000000000000000000..654edc8ce01bf1cfd89c16941b6799bfc4bcbfe5 GIT binary patch literal 594 zcmeAS@N?(olHy`uVBq!ia0y~yU@&4}V9@7aV_;xdSU&R$0|NtFlDE4H!+#K5uy^@n z1_lPs0*}aI1_o|n5N2eUHAjMhfq}im)7O>#E*meeIp@Dv=JyN?3~HGn5hc#~xw)x% zB@7_oT$GwvlA5AWo>`Ki;O^-gppc)Zkf`9Bm^}4Kd^7_C<62J_$B>MBZ*QJ=XGxSe z@bUeYnc3H8*e7TTZoIzEdrF6|T&$8(QtGUx~zia=WG}PBdm~=~XH2KZ_7f9~3b;a?KFw=z6?`eOaqBCG(@c%?FB=`Z(j7L@ zHbMDW`FGcp%^VY?3g&%~`m9tmQT+(39fQ8&6Ilt-iSPF)a36^D%Dwkh{Wf!fOsRm1 z?VI3fmDc~Xb8`Iu@b#`}R>*X{_h;g7btjiu498~VE)ab9%ltr(?`hSwCpNgM&T35m zzRWeXDUh{nbC#}n1nav-#b_6%GqViSRB}7mZJ62*q=dNm_;5yWc}w*~bY>@yvXWzsU_wK zi>1)S>n7nM;uZg%pG@7m$mQ=40Q# ji@_TZA;%TyQTCCU#i?F)ztz0Wps4k9^>bP0l+XkK#!K+q literal 0 HcmV?d00001 diff --git a/index.html b/index.html index 370c5a7b..ccf3c008 100644 --- a/index.html +++ b/index.html @@ -74,14 +74,16 @@
    -
      - -
    • -
    • -
    • -
    • -
    +
    +
    + GIF +
    +
    + PNG +
    + + +
    diff --git a/js/piskel.js b/js/piskel.js index 7cb0afde..5ed585ae 100644 --- a/js/piskel.js +++ b/js/piskel.js @@ -167,41 +167,42 @@ $.namespace("pskl"); return false; }, - /** - * Open new window with spritesheet as PNG - */ - exportToPNG : function () { - (new pskl.rendering.SpritesheetRenderer(frameSheet)).render(); - }, - - uploadAsGIF : function () { - var encoder = new GIFEncoder(), - dpi = 10; - encoder.setRepeat(0); - var fps = piskel.animationController.fps; - encoder.setDelay(1000/fps); - - encoder.start(); - encoder.setSize(frameSheet.getWidth() * dpi, frameSheet.getHeight() * dpi); - for (var i = 0 ; i < frameSheet.frames.length ; i++) { - var frame = frameSheet.frames[i]; - var renderer = new pskl.rendering.CanvasRenderer(frame, dpi); - encoder.addFrame(renderer.render()); - } - encoder.finish(); - - var imageData = 'data:image/gif;base64,' + encode64(encoder.stream().getData()); + uploadToScreenletstore : function(imageData) { var xhr = new XMLHttpRequest(); var formData = new FormData(); formData.append('data', imageData); xhr.open('POST', "http://screenletstore.appspot.com/__/upload", true); + var cloudURL; + var that = this; xhr.onload = function(e) { if (this.status == 200) { - var baseUrl = window.open("http://screenletstore.appspot.com/img/" + this.responseText); + cloudURL = "http://screenletstore.appspot.com/img/" + this.responseText; + that.openWindow(cloudURL); } }; xhr.send(formData); + }, + + uploadAsAnimatedGIF : function () { + var fps = piskel.animationController.fps; + var imageData = (new pskl.rendering.SpritesheetRenderer(frameSheet)).renderAsImageDataAnimatedGIF(fps); + this.uploadToScreenletstore(imageData); + }, + + uploadAsSpritesheetPNG : function () { + var imageData = (new pskl.rendering.SpritesheetRenderer(frameSheet)).renderAsImageDataSpritesheetPNG(); + this.uploadToScreenletstore(imageData); + }, + + openWindow: function(url) { + var options = [ + "dialog=yes", "scrollbars=no", "status=no", + "width=" + frameSheet.getWidth() * frameSheet.getFrameCount(), + "height=" + frameSheet.getHeight() + ].join(","); + + window.open(url, "piskel-export", options); } }; diff --git a/js/rendering/SpritesheetRenderer.js b/js/rendering/SpritesheetRenderer.js index d7d98191..703b50a7 100644 --- a/js/rendering/SpritesheetRenderer.js +++ b/js/rendering/SpritesheetRenderer.js @@ -6,18 +6,34 @@ this.framesheet = framesheet; }; - /** - * Will open a new window displaying the spritesheet as a png - */ - ns.SpritesheetRenderer.prototype.render = function () { + ns.SpritesheetRenderer.prototype.renderAsImageDataSpritesheetPNG = function () { var canvas = this.createCanvas_(); for (var i = 0 ; i < this.framesheet.getFrameCount() ; i++) { var frame = this.framesheet.getFrameByIndex(i); this.drawFrameInCanvas_(frame, canvas, i * this.framesheet.getWidth(), 0); } - this.openCanvasAsPNGInWindow_(canvas); + return canvas.toDataURL("image/png") }; + ns.SpritesheetRenderer.prototype.renderAsImageDataAnimatedGIF = function (fps) { + var encoder = new GIFEncoder(), dpi = 10; + encoder.setRepeat(0); + encoder.setDelay(1000/fps); + + encoder.start(); + encoder.setSize(this.framesheet.getWidth() * dpi, this.framesheet.getHeight() * dpi); + for (var i = 0 ; i < this.framesheet.frames.length ; i++) { + var frame = this.framesheet.frames[i]; + var renderer = new pskl.rendering.CanvasRenderer(frame, dpi); + encoder.addFrame(renderer.render()); + } + encoder.finish(); + + var imageData = 'data:image/gif;base64,' + encode64(encoder.stream().getData()); + return imageData; + }; + + /** * TODO(juliandescottes): Mutualize with code already present in FrameRenderer */ @@ -44,14 +60,4 @@ throw "Cannot render empty Spritesheet"; } }; - - ns.SpritesheetRenderer.prototype.openCanvasAsPNGInWindow_ = function (canvas) { - var options = [ - "dialog=yes", "scrollbars=no", "status=no", - "width=" + this.framesheet.getWidth() * this.framesheet.getFrameCount(), - "height=" + this.framesheet.getHeight() - ].join(","); - - window.open(canvas.toDataURL("image/png"), "piskel-export", options); - }; })(); \ No newline at end of file From 947805565842706792204c3069fdcab82d7ac742 Mon Sep 17 00:00:00 2001 From: Vince Date: Thu, 13 Jun 2013 17:39:12 +0200 Subject: [PATCH 7/9] Move 'add frame button' to preview frames and change UXD --- css/preview-film-section.css | 25 +++++++++++++++++++++++++ css/tools.css | 5 +---- img/plus.png | Bin 0 -> 271 bytes index.html | 3 --- js/controller/PreviewFilmController.js | 15 ++++++++++----- 5 files changed, 36 insertions(+), 12 deletions(-) create mode 100644 img/plus.png diff --git a/css/preview-film-section.css b/css/preview-film-section.css index 52019e97..48680d04 100644 --- a/css/preview-film-section.css +++ b/css/preview-film-section.css @@ -10,6 +10,31 @@ padding-right: 7px; } +.add-frame-action { + border: #888 solid 4px; + font-size: 13px; + color: #888; + cursor: pointer; + padding: 6px 0; + border-radius: 4px; + margin-top: 8px; + background-image: url(../img/plus.png); + background-repeat: no-repeat; + background-position: 3px 7px; + background-size: 26px 26px; + text-indent: 18px; + background-color: #222; +} + +.add-frame-action .label { + width: 80px; + margin: 0 auto; +} + +.add-frame-action:hover { + border-color: gold; +} + .preview-tile { position: relative; border: #444 3px solid; diff --git a/css/tools.css b/css/tools.css index abcabeeb..1a12a3e2 100644 --- a/css/tools.css +++ b/css/tools.css @@ -185,6 +185,7 @@ /* * Framesheet level actions: */ + .tool-icon.save-icon { background-image: url(../img/save.png); background-position: 6px 6px; @@ -208,7 +209,3 @@ color: #fff; } -.tool-icon.tool-add-frame { - background-image: url(../img/actions/add.png); -} - diff --git a/img/plus.png b/img/plus.png new file mode 100644 index 0000000000000000000000000000000000000000..6b60af79ec6b529de068160deb2ff610ae8b1ccf GIT binary patch literal 271 zcmeAS@N?(olHy`uVBq!ia0y~yU@&H2V9?`WV_;xteW{qwz`($k|H*Y zfq{Xuz$3Dlfq`2Xgc%uT&5>YWU|=ut^mS#w%f`!RW!;!GshWX-K`k>RqQp5rH#aq} zgaHJci&7IyQd1PlGfOfQ+&z5*6!P;F5*2(Clczq3k7i(C$ntb?49U3n_WDK61_K_} z18#SWWc90Gv3WTLzTSJ^>7j>$XG+>^Rqxpv1|YEhbk*_Yp<8A5e!u6Ong9lJK0R~J zrceI+swa=@77rU6+q2un$Cj=<3zp1b&|(IG&-!Qh&RGb||LF4A2;?qLS3j3^P6 PNG - - -
    diff --git a/js/controller/PreviewFilmController.js b/js/controller/PreviewFilmController.js index 2818914a..61b4fe3a 100644 --- a/js/controller/PreviewFilmController.js +++ b/js/controller/PreviewFilmController.js @@ -13,10 +13,7 @@ $.subscribe(Events.FRAMESHEET_RESET, this.refreshDPI_.bind(this)); }; - ns.PreviewFilmController.prototype.init = function() { - var addFrameButton = $('#add-frame-button')[0]; - addFrameButton.addEventListener('mousedown', this.addFrame.bind(this)); - }; + ns.PreviewFilmController.prototype.init = function() {}; ns.PreviewFilmController.prototype.addFrame = function () { this.framesheet.addEmptyFrame(); @@ -50,7 +47,15 @@ for (var i = 0, l = frameCount; i < l ; i++) { this.container.append(this.createPreviewTile_(i)); } - + // Append 'new empty frame' button + var newFrameButton = document.createElement("div"); + newFrameButton.id = "add-frame-action"; + newFrameButton.className = "add-frame-action"; + newFrameButton.innerHTML = "

    Add new frame

    "; + this.container.append(newFrameButton); + + $(newFrameButton).click(this.addFrame.bind(this)); + var needDragndropBehavior = (frameCount > 1); if(needDragndropBehavior) { this.initDragndropBehavior_(); From 93da547cb199ddf91bccdb3a57952aee449a2e6e Mon Sep 17 00:00:00 2001 From: Vince Date: Thu, 13 Jun 2013 17:56:44 +0200 Subject: [PATCH 8/9] Fix Travis --- js/rendering/SpritesheetRenderer.js | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/js/rendering/SpritesheetRenderer.js b/js/rendering/SpritesheetRenderer.js index 703b50a7..2548501e 100644 --- a/js/rendering/SpritesheetRenderer.js +++ b/js/rendering/SpritesheetRenderer.js @@ -12,25 +12,25 @@ var frame = this.framesheet.getFrameByIndex(i); this.drawFrameInCanvas_(frame, canvas, i * this.framesheet.getWidth(), 0); } - return canvas.toDataURL("image/png") + return canvas.toDataURL("image/png"); }; ns.SpritesheetRenderer.prototype.renderAsImageDataAnimatedGIF = function (fps) { var encoder = new GIFEncoder(), dpi = 10; encoder.setRepeat(0); - encoder.setDelay(1000/fps); + encoder.setDelay(1000/fps); - encoder.start(); - encoder.setSize(this.framesheet.getWidth() * dpi, this.framesheet.getHeight() * dpi); - for (var i = 0 ; i < this.framesheet.frames.length ; i++) { - var frame = this.framesheet.frames[i]; - var renderer = new pskl.rendering.CanvasRenderer(frame, dpi); - encoder.addFrame(renderer.render()); - } + encoder.start(); + encoder.setSize(this.framesheet.getWidth() * dpi, this.framesheet.getHeight() * dpi); + for (var i = 0 ; i < this.framesheet.frames.length ; i++) { + var frame = this.framesheet.frames[i]; + var renderer = new pskl.rendering.CanvasRenderer(frame, dpi); + encoder.addFrame(renderer.render()); + } encoder.finish(); - var imageData = 'data:image/gif;base64,' + encode64(encoder.stream().getData()); - return imageData; + var imageData = 'data:image/gif;base64,' + encode64(encoder.stream().getData()); + return imageData; }; From 9f940c5b26cdeabddf75db7cdabfdc24df809657 Mon Sep 17 00:00:00 2001 From: Vince Date: Thu, 13 Jun 2013 18:00:16 +0200 Subject: [PATCH 9/9] Fix Travis 2 --- js/rendering/SpritesheetRenderer.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/rendering/SpritesheetRenderer.js b/js/rendering/SpritesheetRenderer.js index 2548501e..f7e61fd5 100644 --- a/js/rendering/SpritesheetRenderer.js +++ b/js/rendering/SpritesheetRenderer.js @@ -19,7 +19,7 @@ var encoder = new GIFEncoder(), dpi = 10; encoder.setRepeat(0); encoder.setDelay(1000/fps); - + encoder.start(); encoder.setSize(this.framesheet.getWidth() * dpi, this.framesheet.getHeight() * dpi); for (var i = 0 ; i < this.framesheet.frames.length ; i++) { @@ -27,7 +27,7 @@ var renderer = new pskl.rendering.CanvasRenderer(frame, dpi); encoder.addFrame(renderer.render()); } - encoder.finish(); + encoder.finish(); var imageData = 'data:image/gif;base64,' + encode64(encoder.stream().getData()); return imageData;