From d34f24141a1cee6c90c3a21ee8a887a794601c34 Mon Sep 17 00:00:00 2001 From: Vince Date: Fri, 14 Jun 2013 13:16:18 +0200 Subject: [PATCH 1/4] Add canvas background switcher A quick integration to make our minds on different backgrounds and ask for feedback --- css/style.css | 19 +++++++++++++++++- .../light_canvas_background.png | Bin .../lowcont_dark_canvas_background.png} | Bin .../lowcont_medium_canvas_background.png | Bin 0 -> 278 bytes .../medium_canvas_background.png | Bin index.html | 9 +++++++++ js/piskel.js | 7 +++++++ 7 files changed, 34 insertions(+), 1 deletion(-) rename img/{ => canvas_background}/light_canvas_background.png (100%) rename img/{canvas_background.png => canvas_background/lowcont_dark_canvas_background.png} (100%) create mode 100644 img/canvas_background/lowcont_medium_canvas_background.png rename img/{ => canvas_background}/medium_canvas_background.png (100%) diff --git a/css/style.css b/css/style.css index 62be2230..78615689 100644 --- a/css/style.css +++ b/css/style.css @@ -72,7 +72,7 @@ body { } .canvas-container .canvas-background { - background: url(../img/medium_canvas_background.png) repeat; + background: url(../img/canvas_background/medium_canvas_background.png) repeat; position: absolute; top: 0; right: 0; @@ -80,6 +80,23 @@ body { left: 0; } +.light-canvas-background .canvas-background { + background: url(../img/canvas_background/light_canvas_background.png) repeat; +} + +.medium-canvas-background .canvas-background { + background: url(../img/canvas_background/medium_canvas_background.png) repeat; +} + +.lowcont-medium-canvas-background .canvas-background { + background: url(../img/canvas_background/lowcont_medium_canvas_background.png) repeat; +} + +.lowcont-dark-canvas-background .canvas-background { + background: url(../img/canvas_background/lowcont_dark_canvas_background.png) repeat; +} + + .canvas.canvas-overlay { position: absolute; top: 0; diff --git a/img/light_canvas_background.png b/img/canvas_background/light_canvas_background.png similarity index 100% rename from img/light_canvas_background.png rename to img/canvas_background/light_canvas_background.png diff --git a/img/canvas_background.png b/img/canvas_background/lowcont_dark_canvas_background.png similarity index 100% rename from img/canvas_background.png rename to img/canvas_background/lowcont_dark_canvas_background.png diff --git a/img/canvas_background/lowcont_medium_canvas_background.png b/img/canvas_background/lowcont_medium_canvas_background.png new file mode 100644 index 0000000000000000000000000000000000000000..3a21f204cf1d9fc367a330c547828c0d2f568d33 GIT binary patch literal 278 zcmeAS@N?(olHy`uVBq!ia0vp^`ao>J!3HE7mn%O4Qfx`y?k)`fL2$v|<&%LToCO|{ z#S9GG!XV7ZFl&wkP>{XE)7O>#E*l>=hsle}+vWj<)G|XNN}Tg^b5rw5fLsO!=c3fa zlGGH1^30M91$R&10EPTKg+vA4#N??@;-i5I3O!vMLo)8Yz2?Z(V8Fw2K;zQ?|N8bP zUE>p?HMtJGF=crsa42tPQrk-TL#pD=R80YUAd&1Htv@UqQSd$9FO`-*tMybz!kF$a$Ww KelF{r5}E)mB5Yy+ literal 0 HcmV?d00001 diff --git a/img/medium_canvas_background.png b/img/canvas_background/medium_canvas_background.png similarity index 100% rename from img/medium_canvas_background.png rename to img/canvas_background/medium_canvas_background.png diff --git a/index.html b/index.html index 67da5098..92403dbc 100644 --- a/index.html +++ b/index.html @@ -38,6 +38,15 @@ +
+ Canvas background: + +
diff --git a/js/piskel.js b/js/piskel.js index 5ed585ae..04830f4f 100644 --- a/js/piskel.js +++ b/js/piskel.js @@ -70,6 +70,13 @@ $.namespace("pskl"); $('body').tooltip({ selector: '[rel=tooltip]' }); + + $('#canvas-picker').change(function(evt) { + $('#canvas-picker option:selected').each(function() { + console.log($(this).val()); + $('html')[0].className = $(this).val(); + }); + }); }, render : function (delta) { From 460c391326fa3b28ae7c9996ead5742f992fb9df Mon Sep 17 00:00:00 2001 From: Vince Date: Fri, 14 Jun 2013 13:17:20 +0200 Subject: [PATCH 2/4] Code cleanup + unsued images removal --- css/style.css | 28 ++++++++++++++-------------- img/actions/add.png | Bin 631 -> 0 bytes img/actions/delete.png | Bin 608 -> 0 bytes img/actions/duplicate.png | Bin 634 -> 0 bytes img/actions/image-export.png | Bin 602 -> 0 bytes index.html | 4 +--- js/controller/DrawingController.js | 21 ++++----------------- 7 files changed, 19 insertions(+), 34 deletions(-) delete mode 100755 img/actions/add.png delete mode 100755 img/actions/delete.png delete mode 100755 img/actions/duplicate.png delete mode 100644 img/actions/image-export.png diff --git a/css/style.css b/css/style.css index 78615689..7d94ec42 100644 --- a/css/style.css +++ b/css/style.css @@ -141,20 +141,20 @@ body { * User messages */ .user-message { - position: absolute; - right: 0; - bottom: 0; - background-color: #F9EDBE; - padding: 10px 47px; - border-top-left-radius: 7px; - color: #222; - border: #F0C36D 1px solid; - border-right: 0; - border-bottom: 0; - font-weight: bold; - font-size: 13px; - z-index: 10000; - max-width: 300px; + position: absolute; + right: 0; + bottom: 0; + background-color: #F9EDBE; + padding: 10px 47px; + border-top-left-radius: 7px; + color: #222; + border: #F0C36D 1px solid; + border-right: 0; + border-bottom: 0; + font-weight: bold; + font-size: 13px; + z-index: 10000; + max-width: 300px; } .user-message .close { diff --git a/img/actions/add.png b/img/actions/add.png deleted file mode 100755 index 3c03e4d3002459a4da1df8688153a4f81c089670..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 631 zcmV--0*L*IP) z3@J)5GrDw$qAiNL6dgN7_b$NK{lO4?z%tg+#Z+Qrl2h+BM499k-eN zbjF=|dfu6xoRwW)c;KDqv?cpg6DCJg7|Vahw-V*ZN3Wm*q68oX^Ni^m}+mlNBWx*68S2>(? zy=pTcP=L0O#o_|ao;!u-Yp;9OW3%jYnwF>w1S7~-8-+Zae}EJh%UsK~c$=Q^bmudt z&1lx@JoXOVHn51@BA<%Brh3= z-9ivUMY_fYft@-Cf`^jsU8+OW#p-_uLvS#0hCfO48XDs*tUs|4g;oXK+cPCLJ=fhwHh!qaEWUWde3*^-R|*5?6W}OpKs3PWW~LsB_s$Mu@qVf05t(D zA#S4`1X6{_YNf!|3M9EbL=9ukB7inqT968H8~WYc3q)=uQouP^ zRu|GOXa(s({;fp(0vLbu1Q+rjQbV*AbXB?9B;?z}`|!6mq8oRZb}RS!c2~*C@OI5A z<+pL};$TC8(iM<~xSTvOGSvJdhA;QL{X$A3OA>zMQFCW z{HTZc`m=%MMuT}6l6opA6cxpQ(K4|8^Ed9aT6ns=>`{bk-7wtbQc6Q53I6_BLb-MY zmoAJ`vkZZ+(K+g(8+M?@9)4}@Lx?`wySw*vP z8b;u`aG+tz2#OrcOiiIysi53!K4Of$<1&geflB@sY}v-O$)PWgO1jq3R4s3$SEojZqk2H>tCEX>2v=G}vc(AyL;c7LE zdcBX_vcQiH4s4TitUsIi{{q~cB$qZ`Z)_MTIUSZC8M$lba`izLDGtN!q}yG}1PBhH oG{C>0EkTD6WddjZ8~+I~0Ab_KHUhVY4gdfE07*qoM6N<$f&#k@w*UYD diff --git a/index.html b/index.html index 92403dbc..18c2799e 100644 --- a/index.html +++ b/index.html @@ -64,7 +64,6 @@
-
@@ -82,7 +81,6 @@
-
@@ -101,7 +99,7 @@ - + diff --git a/js/controller/DrawingController.js b/js/controller/DrawingController.js index f0932409..bfd1acfa 100644 --- a/js/controller/DrawingController.js +++ b/js/controller/DrawingController.js @@ -77,7 +77,9 @@ ns.DrawingController.prototype.startDPIUpdateTimer_ = function () { - if (this.dpiUpdateTimer) window.clearInterval(this.dpiUpdateTimer); + if (this.dpiUpdateTimer) { + window.clearInterval(this.dpiUpdateTimer); + } this.dpiUpdateTimer = window.setTimeout($.proxy(this.updateDPI_, this), 200); }, @@ -258,25 +260,10 @@ leftSectionWidth = $('.left-column').width(), rightSectionWidth = $('.right-column').width(), availableViewportWidth = $('body').width() - leftSectionWidth - rightSectionWidth, - //previewHeight = $(".preview-container").height(), - //previewWidth = $(".preview-container").width(), framePixelHeight = this.framesheet.getCurrentFrame().getHeight(), framePixelWidth = this.framesheet.getCurrentFrame().getWidth(); var dpi = pskl.PixelUtils.calculateDPI(availableViewportHeight, availableViewportWidth, framePixelHeight, framePixelWidth); - /* - var drawingCanvasHeight = dpi * framePixelHeight; - var drawingCanvasWidth = dpi * framePixelWidth; - */ - // Check if preview and drawing canvas overlap - /* - var heightGap = drawingCanvasHeight + previewHeight - availableViewportHeight, - widthGap = drawingCanvasWidth + previewWidth - availableViewportWidth; - if (heightGap > 0 && widthGap > 0) { - // Calculate the DPI change needed to bridge height and width gap - var gapDPI = pskl.PixelUtils.calculateDPI(heightGap, widthGap, framePixelHeight, framePixelWidth); - // substract gap dpi to initial dpi - dpi -= (gapDPI + 1); - }*/ + return dpi; }; From 0bb097e54bc21a12f0a4e42ec3c82b5de3577fc9 Mon Sep 17 00:00:00 2001 From: Vince Date: Fri, 14 Jun 2013 13:17:53 +0200 Subject: [PATCH 3/4] Add 'visit gallery' action --- css/tools.css | 8 +++++++- img/gallery.png | Bin 0 -> 305 bytes index.html | 1 + 3 files changed, 8 insertions(+), 1 deletion(-) create mode 100644 img/gallery.png diff --git a/css/tools.css b/css/tools.css index 1a12a3e2..69db6316 100644 --- a/css/tools.css +++ b/css/tools.css @@ -185,7 +185,13 @@ /* * Framesheet level actions: */ - + +.tool-icon.gallery-icon { + background-image: url(../img/gallery.png); + background-position: 3px 3px; + background-size: 39px 39px; +} + .tool-icon.save-icon { background-image: url(../img/save.png); background-position: 6px 6px; diff --git a/img/gallery.png b/img/gallery.png new file mode 100644 index 0000000000000000000000000000000000000000..23db3a94b3d666c3081543da07b8fe186c204b4c GIT binary patch literal 305 zcmeAS@N?(olHy`uVBq!ia0vp^CO~Y=!3HF6)M^IFdgVmyM5$#nALzx)xAKEi)vd#5q4VH#M&W$Yo$~E=o-- zNlj5G&n(GMaQE~LP{_|yNL27mOrH8AJ{qW?$J50zB;(%O>xNv14Fp&Yl+Jrr^LXBJ z_Z^=5mX*9@67yi3z4O~P$ukeHUaLO;YUQdw*>XE?GBARH@0{EXzxGUeV_)`O<^1NG ztA3?LXD{EpdH)5w4bf9eogEw;UOOB=kQZ9^s{VxV9p068tNNvxn3#fUL*x~%x_>PM jsaVzjikSrjO5Xlt_}k-|y^ZHl1<2)|u6{1-oD!M
+
GIF From 92561db1c69be7f3ae78c04a57d373bc17b59bcb Mon Sep 17 00:00:00 2001 From: Vince Date: Fri, 14 Jun 2013 13:18:26 +0200 Subject: [PATCH 4/4] Fix contextmenu right click (active only above drawing canvas) --- js/controller/DrawingController.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/js/controller/DrawingController.js b/js/controller/DrawingController.js index bfd1acfa..c1284ff1 100644 --- a/js/controller/DrawingController.js +++ b/js/controller/DrawingController.js @@ -71,7 +71,7 @@ body.mouseup($.proxy(this.onMouseup_, this)); // Deactivate right click: - //body.contextmenu(this.onCanvasContextMenu_); + body.contextmenu(this.onCanvasContextMenu_); }; @@ -217,10 +217,13 @@ * @private */ ns.DrawingController.prototype.onCanvasContextMenu_ = function (event) { - event.preventDefault(); - event.stopPropagation(); - event.cancelBubble = true; - return false; + if ($(event.target).closest('#drawing-canvas-container').length) { + // Deactivate right click on drawing canvas only. + event.preventDefault(); + event.stopPropagation(); + event.cancelBubble = true; + return false; + } }; ns.DrawingController.prototype.render = function () {