diff --git a/css/style.css b/css/style.css index 62be2230..7d94ec42 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; @@ -124,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/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/actions/add.png b/img/actions/add.png deleted file mode 100755 index 3c03e4d3..00000000 Binary files a/img/actions/add.png and /dev/null differ diff --git a/img/actions/delete.png b/img/actions/delete.png deleted file mode 100755 index adcb19c6..00000000 Binary files a/img/actions/delete.png and /dev/null differ diff --git a/img/actions/duplicate.png b/img/actions/duplicate.png deleted file mode 100755 index 38b6955e..00000000 Binary files a/img/actions/duplicate.png and /dev/null differ diff --git a/img/actions/image-export.png b/img/actions/image-export.png deleted file mode 100644 index d94df7f8..00000000 Binary files a/img/actions/image-export.png and /dev/null differ 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 00000000..3a21f204 Binary files /dev/null and b/img/canvas_background/lowcont_medium_canvas_background.png differ 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/img/gallery.png b/img/gallery.png new file mode 100644 index 00000000..23db3a94 Binary files /dev/null and b/img/gallery.png differ diff --git a/index.html b/index.html index 67da5098..18aa0140 100644 --- a/index.html +++ b/index.html @@ -38,6 +38,15 @@ +
+ Canvas background: + +
@@ -55,7 +64,6 @@
-
@@ -73,8 +81,8 @@
-
+
GIF @@ -92,7 +100,7 @@ - + diff --git a/js/controller/DrawingController.js b/js/controller/DrawingController.js index f0932409..c1284ff1 100644 --- a/js/controller/DrawingController.js +++ b/js/controller/DrawingController.js @@ -71,13 +71,15 @@ body.mouseup($.proxy(this.onMouseup_, this)); // Deactivate right click: - //body.contextmenu(this.onCanvasContextMenu_); + body.contextmenu(this.onCanvasContextMenu_); }; 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); }, @@ -215,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 () { @@ -258,25 +263,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; }; 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) {