diff --git a/Gruntfile.js b/Gruntfile.js
index 6fab6404..ffb677e1 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -134,6 +134,7 @@ module.exports = function(grunt) {
{src: ['src/logo.png'], dest: 'dest/logo.png'},
{src: ['src/js/lib/iframeLoader.js'], dest: 'dest/js/lib/iframeLoader.js'},
{expand: true, src: ['img/**'], cwd: 'src/', dest: 'dest/', filter: 'isFile'},
+ {expand: true, src: ['css/fonts/**'], cwd: 'src/', dest: 'dest/', filter: 'isFile'},
{expand: true, src: ['**/*.html'], cwd: 'src/', dest: 'dest/', filter: 'isFile'}
]
}
diff --git a/misc/icons/SVG/eye.svg b/misc/icons/SVG/eye.svg
new file mode 100644
index 00000000..9b7ed589
--- /dev/null
+++ b/misc/icons/SVG/eye.svg
@@ -0,0 +1,68 @@
+
+
+
+
diff --git a/misc/icons/import-icon.svg b/misc/icons/SVG/import-icon.svg
similarity index 100%
rename from misc/icons/import-icon.svg
rename to misc/icons/SVG/import-icon.svg
diff --git a/misc/icons/SVG/onion.svg b/misc/icons/SVG/onion.svg
new file mode 100644
index 00000000..7ef63a84
--- /dev/null
+++ b/misc/icons/SVG/onion.svg
@@ -0,0 +1,99 @@
+
+
+
+
diff --git a/misc/icons/swap-arrow-square.svg b/misc/icons/SVG/swap-arrow-square.svg
similarity index 100%
rename from misc/icons/swap-arrow-square.svg
rename to misc/icons/SVG/swap-arrow-square.svg
diff --git a/misc/icons/swap-arrow.svg b/misc/icons/SVG/swap-arrow.svg
similarity index 100%
rename from misc/icons/swap-arrow.svg
rename to misc/icons/SVG/swap-arrow.svg
diff --git a/src/css/font-icon.css b/src/css/font-icon.css
new file mode 100644
index 00000000..ec44f24a
--- /dev/null
+++ b/src/css/font-icon.css
@@ -0,0 +1,33 @@
+@font-face {
+ font-family: 'piskel';
+ src:url('fonts/piskel.eot?-3olv93');
+ src:url('fonts/piskel.eot?#iefix-3olv93') format('embedded-opentype'),
+ url('fonts/piskel.woff?-3olv93') format('woff'),
+ url('fonts/piskel.ttf?-3olv93') format('truetype'),
+ url('fonts/piskel.svg?-3olv93#icomoon') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+[class^="piskel-icon-"], [class*=" piskel-icon-"] {
+ font-family: 'piskel';
+ speak: none;
+ font-style: normal;
+ font-weight: normal;
+ font-variant: normal;
+ text-transform: none;
+ line-height: 1;
+
+ /* Better Font Rendering =========== */
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+.piskel-icon-eye:before {
+ content: "\e602";
+}
+
+.piskel-icon-onion:before {
+ content: "\e601";
+}
+
diff --git a/src/css/fonts/piskel.eot b/src/css/fonts/piskel.eot
new file mode 100644
index 00000000..b60a8454
Binary files /dev/null and b/src/css/fonts/piskel.eot differ
diff --git a/src/css/fonts/piskel.svg b/src/css/fonts/piskel.svg
new file mode 100644
index 00000000..e7d9704a
--- /dev/null
+++ b/src/css/fonts/piskel.svg
@@ -0,0 +1,13 @@
+
+
+
\ No newline at end of file
diff --git a/src/css/fonts/piskel.ttf b/src/css/fonts/piskel.ttf
new file mode 100644
index 00000000..a6836b35
Binary files /dev/null and b/src/css/fonts/piskel.ttf differ
diff --git a/src/css/fonts/piskel.woff b/src/css/fonts/piskel.woff
new file mode 100644
index 00000000..89535225
Binary files /dev/null and b/src/css/fonts/piskel.woff differ
diff --git a/src/css/style.css b/src/css/style.css
index 0cb64084..16f7aa14 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -162,58 +162,7 @@ body {
.canvas.onion-skin-canvas {z-index: 10;}
.canvas.canvas-overlay {z-index: 11;}
-/**
- * Animated preview styles.
- */
-.preview-container {
- border : 0px Solid black;
- border-radius:5px 0px 0px 5px;
- box-shadow : 0px 0px 2px rgba(0,0,0,0.2);
- font-size: 0;
-}
-
-.preview-container .canvas-container {
- overflow : hidden;
-}
-
-.preview-container canvas {
- border : 0px Solid transparent;
-}
-
-#animated-preview-container {
- background: #333;
- border-radius : 0 0 2px 2px;
- overflow : hidden;
-}
-
-#animated-preview-canvas-container {
- height :200px;
- width : 200px;
-}
-
-.tiled-frame-container {
- height: 100%;
- width: 100%;
- position: relative;
- background-repeat : repeat;
-}
-
-.display-fps {
- float: left;
- color: #aaa;
- font-size: 12px;
- min-width: 55px;
- vertical-align: bottom;
- line-height: 24px;
-}
-
-.range-fps {
- overflow: hidden;
- width: 120px;
- height : 24px;
- margin : 0;
-}
/**
* User messages
diff --git a/src/css/toolbox-animated-preview.css b/src/css/toolbox-animated-preview.css
new file mode 100644
index 00000000..1d5bbc15
--- /dev/null
+++ b/src/css/toolbox-animated-preview.css
@@ -0,0 +1,76 @@
+/**
+ * Animated preview styles.
+ */
+
+.preview-container {
+ border : 0px Solid black;
+ border-radius:5px 0px 0px 5px;
+ box-shadow : 0px 0px 2px rgba(0,0,0,0.2);
+ font-size: 0;
+}
+
+.preview-container .canvas-container {
+ overflow : hidden;
+}
+
+.preview-container canvas {
+ border : 0px Solid transparent;
+}
+
+#animated-preview-container {
+ background: #333;
+ border-radius : 0 0 2px 2px;
+ overflow : hidden;
+}
+
+#animated-preview-canvas-container {
+ height :200px;
+ width : 200px;
+}
+
+.tiled-frame-container {
+ height: 100%;
+ width: 100%;
+ position: relative;
+ background-repeat : repeat;
+}
+
+.display-fps {
+ float: left;
+ color: #aaa;
+ font-size: 12px;
+ min-width: 55px;
+ vertical-align: bottom;
+ line-height: 26px;
+}
+
+.range-fps {
+ overflow: hidden;
+ width: 100px;
+ height : 26px;
+ margin : 0;
+ box-sizing: border-box;
+ padding:0;
+}
+
+.preview-toggle-onion-skin {
+ font-size: 2rem;
+ color: #aaa;
+ float: left;
+ line-height: 26px;
+ height: 100%;
+ padding-left: 5px;
+ padding-right: 5px;
+ border-right: 1px solid #222;
+ transition: 0.2s linear;
+ cursor:pointer;
+}
+
+.preview-toggle-onion-skin:hover {
+ color : white;
+}
+
+.preview-toggle-onion-skin-enabled,
+.preview-toggle-onion-skin-enabled:hover {
+ color : gold;
+}
\ No newline at end of file
diff --git a/src/css/toolbox-layers-list.css b/src/css/toolbox-layers-list.css
index ae0892f0..052a5013 100644
--- a/src/css/toolbox-layers-list.css
+++ b/src/css/toolbox-layers-list.css
@@ -10,6 +10,28 @@
background-size: 22px;
background-repeat: no-repeat;
background-position: 97%;
+ position: relative;
+}
+
+.layers-toggle-preview {
+ position: absolute;
+ top: 0.3em;
+ right: 2em;
+
+ color: #999;
+ font-size: 1.3em;
+ cursor: pointer;
+
+ transition: 0.2s linear;
+}
+
+.layers-toggle-preview:hover {
+ color: white;
+}
+
+.layers-toggle-preview-enabled,
+.layers-toggle-preview-enabled:hover {
+ color : gold;
}
.layers-list {
diff --git a/src/js/controller/AnimatedPreviewController.js b/src/js/controller/AnimatedPreviewController.js
index 959f486e..c0cdd3b5 100644
--- a/src/js/controller/AnimatedPreviewController.js
+++ b/src/js/controller/AnimatedPreviewController.js
@@ -16,14 +16,43 @@
var frame = this.piskelController.getCurrentFrame();
this.renderer = new pskl.rendering.frame.TiledFrameRenderer(this.container);
- this.updateZoom_();
- $.subscribe(Events.FRAME_SIZE_CHANGED, this.onFrameSizeChange_.bind(this));
- $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
};
- ns.AnimatedPreviewController.prototype.onUserSettingsChange_ = function () {
+ ns.AnimatedPreviewController.prototype.init = function () {
+ // the oninput event won't work on IE10 unfortunately, but at least will provide a
+ // consistent behavior across all other browsers that support the input type range
+ // see https://bugzilla.mozilla.org/show_bug.cgi?id=853670
+ $("#preview-fps")[0].addEventListener('change', this.onFPSSliderChange.bind(this));
+ document.querySelector(".right-column").style.width = Constants.ANIMATED_PREVIEW_WIDTH + 'px';
+
+ this.toggleOnionSkinEl = document.querySelector(".preview-toggle-onion-skin");
+ this.toggleOnionSkinEl.addEventListener('click', this.toggleOnionSkin_.bind(this));
+
+ pskl.app.shortcutService.addShortcut('alt+O', this.toggleOnionSkin_.bind(this));
+
+ $.subscribe(Events.FRAME_SIZE_CHANGED, this.onFrameSizeChange_.bind(this));
+ $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
+
this.updateZoom_();
- this.updateContainerDimensions_();
+ this.updateOnionSkinPreview_();
+ };
+
+ ns.AnimatedPreviewController.prototype.onUserSettingsChange_ = function (evt, name, value) {
+ if (name == pskl.UserSettings.ONION_SKIN) {
+ this.updateOnionSkinPreview_();
+ } else {
+ this.updateZoom_();
+ this.updateContainerDimensions_();
+ }
+ };
+
+ ns.AnimatedPreviewController.prototype.updateOnionSkinPreview_ = function () {
+ var enabledClassname = 'preview-toggle-onion-skin-enabled';
+ if (pskl.UserSettings.get(pskl.UserSettings.ONION_SKIN)) {
+ this.toggleOnionSkinEl.classList.add(enabledClassname);
+ } else {
+ this.toggleOnionSkinEl.classList.remove(enabledClassname);
+ }
};
ns.AnimatedPreviewController.prototype.updateZoom_ = function () {
@@ -47,14 +76,6 @@
};
};
- ns.AnimatedPreviewController.prototype.init = function () {
- // the oninput event won't work on IE10 unfortunately, but at least will provide a
- // consistent behavior across all other browsers that support the input type range
- // see https://bugzilla.mozilla.org/show_bug.cgi?id=853670
- $("#preview-fps")[0].addEventListener('change', this.onFPSSliderChange.bind(this));
- document.querySelector(".right-column").style.width = Constants.ANIMATED_PREVIEW_WIDTH + 'px';
- };
-
ns.AnimatedPreviewController.prototype.onFPSSliderChange = function (evt) {
this.setFPS(parseInt($("#preview-fps")[0].value, 10));
};
@@ -122,4 +143,9 @@
containerEl.style.marginLeft = ((PREVIEW_SIZE - width) / 2) + "px";
containerEl.style.marginRight = ((PREVIEW_SIZE - width) / 2) + "px";
};
+
+ ns.AnimatedPreviewController.prototype.toggleOnionSkin_ = function () {
+ var currentValue = pskl.UserSettings.get(pskl.UserSettings.ONION_SKIN);
+ pskl.UserSettings.set(pskl.UserSettings.ONION_SKIN, !currentValue);
+ };
})();
\ No newline at end of file
diff --git a/src/js/controller/DrawingController.js b/src/js/controller/DrawingController.js
index 9ccdb1c4..7c6fec4e 100644
--- a/src/js/controller/DrawingController.js
+++ b/src/js/controller/DrawingController.js
@@ -113,7 +113,7 @@
ns.DrawingController.prototype.onUserSettingsChange_ = function (evt, settingsName, settingsValue) {
if(settingsName == pskl.UserSettings.SHOW_GRID) {
console.warn('DrawingController:onUserSettingsChange_ not implemented !');
- } else if (settingsName == pskl.UserSettings.OVERLAY) {
+ } else if (settingsName == pskl.UserSettings.ONION_SKIN || settingsName == pskl.UserSettings.LAYER_PREVIEW) {
this.onionSkinRenderer.clear();
this.onionSkinRenderer.flush();
this.layersRenderer.clear();
@@ -319,10 +319,11 @@
this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(currentFrame);
}
- var overlaySetting = pskl.UserSettings.get(pskl.UserSettings.OVERLAY);
- if (overlaySetting === Constants.OVERLAY_ONION_SKIN) {
+ if (pskl.UserSettings.get(pskl.UserSettings.ONION_SKIN)) {
this.onionSkinRenderer.render();
- } else if (overlaySetting === Constants.OVERLAY_LAYER_PREVIEW) {
+ }
+
+ if (pskl.UserSettings.get(pskl.UserSettings.LAYER_PREVIEW)) {
this.layersRenderer.render();
}
diff --git a/src/js/controller/LayersListController.js b/src/js/controller/LayersListController.js
index 27246926..48b6e3e7 100644
--- a/src/js/controller/LayersListController.js
+++ b/src/js/controller/LayersListController.js
@@ -7,14 +7,21 @@
ns.LayersListController.prototype.init = function () {
this.layerItemTemplate_ = pskl.utils.Template.get('layer-item-template');
- this.rootEl = document.querySelectorAll('.layers-list-container')[0];
- this.layersListEl = document.querySelectorAll('.layers-list')[0];
+ this.rootEl = document.querySelector('.layers-list-container');
+ this.layersListEl = document.querySelector('.layers-list');
+ this.toggleLayerPreviewEl = document.querySelector('.layers-toggle-preview');
this.rootEl.addEventListener('click', this.onClick_.bind(this));
+ this.toggleLayerPreviewEl.addEventListener('click', this.toggleLayerPreview_.bind(this));
$.subscribe(Events.PISKEL_RESET, this.renderLayerList_.bind(this));
+ pskl.app.shortcutService.addShortcut('alt+L', this.toggleLayerPreview_.bind(this));
+
this.renderLayerList_();
+ this.updateToggleLayerPreview_();
+
+ $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
};
ns.LayersListController.prototype.renderLayerList_ = function () {
@@ -23,6 +30,21 @@
layers.forEach(this.addLayerItem.bind(this));
};
+ ns.LayersListController.prototype.updateToggleLayerPreview_ = function () {
+ var enabledClassname = 'layers-toggle-preview-enabled';
+ if (pskl.UserSettings.get(pskl.UserSettings.LAYER_PREVIEW)) {
+ this.toggleLayerPreviewEl.classList.add(enabledClassname);
+ } else {
+ this.toggleLayerPreviewEl.classList.remove(enabledClassname);
+ }
+ };
+
+ ns.LayersListController.prototype.onUserSettingsChange_ = function (evt, name, value) {
+ if (name == pskl.UserSettings.LAYER_PREVIEW) {
+ this.updateToggleLayerPreview_();
+ }
+ };
+
ns.LayersListController.prototype.addLayerItem = function (layer, index) {
var isSelected = this.piskelController.getCurrentLayer() === layer;
var layerItemHtml = pskl.utils.Template.replace(this.layerItemTemplate_, {
@@ -69,4 +91,9 @@
this.piskelController.removeCurrentLayer();
}
};
+
+ ns.LayersListController.prototype.toggleLayerPreview_ = function () {
+ var currentValue = pskl.UserSettings.get(pskl.UserSettings.LAYER_PREVIEW);
+ pskl.UserSettings.set(pskl.UserSettings.LAYER_PREVIEW, !currentValue);
+ };
})();
\ No newline at end of file
diff --git a/src/js/controller/settings/ApplicationSettingsController.js b/src/js/controller/settings/ApplicationSettingsController.js
index 746dc66e..4364005f 100644
--- a/src/js/controller/settings/ApplicationSettingsController.js
+++ b/src/js/controller/settings/ApplicationSettingsController.js
@@ -18,10 +18,6 @@
$('#grid-width').val(gridWidth);
$('#grid-width').change(this.onGridWidthChange.bind(this));
- var overlay = pskl.UserSettings.get(pskl.UserSettings.OVERLAY);
- $('#overlay').val(overlay);
- $('#overlay').change(this.onOverlayChange.bind(this));
-
// Handle canvas background changes:
$('#background-picker-wrapper').click(this.onBackgroundClick.bind(this));
};
@@ -31,11 +27,6 @@
pskl.UserSettings.set(pskl.UserSettings.GRID_WIDTH, parseInt(width, 10));
};
- ns.ApplicationSettingsController.prototype.onOverlayChange = function (evt) {
- var overlay = $('#overlay').val();
- pskl.UserSettings.set(pskl.UserSettings.OVERLAY, overlay);
- };
-
ns.ApplicationSettingsController.prototype.onBackgroundClick = function (evt) {
var target = $(evt.target).closest('.background-picker');
if (target.length) {
diff --git a/src/js/service/keyboard/CheatsheetService.js b/src/js/service/keyboard/CheatsheetService.js
index 58dd4a07..f0952e76 100644
--- a/src/js/service/keyboard/CheatsheetService.js
+++ b/src/js/service/keyboard/CheatsheetService.js
@@ -103,7 +103,9 @@
this.toDescriptor_('N', 'Create new frame'),
this.toDescriptor_('shift + N', 'Duplicate selected frame'),
this.toDescriptor_('shift + ?', 'Open/Close this popup'),
- this.toDescriptor_('alt + P', 'Open the Palette Manager')
+ this.toDescriptor_('alt + P', 'Open the Palette Manager'),
+ this.toDescriptor_('alt + O', 'Toggle Onion Skin'),
+ this.toDescriptor_('alt + L', 'Toggle Layer Preview')
];
this.initMarkupAbstract_(descriptors, '.cheatsheet-misc-shortcuts');
diff --git a/src/js/utils/UserSettings.js b/src/js/utils/UserSettings.js
index f9cd3a5c..d603b1de 100644
--- a/src/js/utils/UserSettings.js
+++ b/src/js/utils/UserSettings.js
@@ -6,14 +6,16 @@
CANVAS_BACKGROUND : 'CANVAS_BACKGROUND',
SELECTED_PALETTE : 'SELECTED_PALETTE',
TILED_PREVIEW : 'TILED_PREVIEW',
- OVERLAY : 'OVERLAY',
+ ONION_SKIN : 'ONION_SKIN',
+ LAYER_PREVIEW : 'LAYER_PREVIEW',
KEY_TO_DEFAULT_VALUE_MAP_ : {
'GRID_WIDTH' : 0,
'CANVAS_BACKGROUND' : 'lowcont-dark-canvas-background',
'SELECTED_PALETTE' : Constants.CURRENT_COLORS_PALETTE_ID,
'TILED_PREVIEW' : false,
- 'OVERLAY' : Constants.OVERLAY_ONION_SKIN
+ 'ONION_SKIN' : false,
+ 'LAYER_PREVIEW' : true
},
/**
@@ -28,8 +30,12 @@
get : function (key) {
this.checkKeyValidity_(key);
if (!(key in this.cache_)) {
- this.cache_[key] =
- this.readFromLocalStorage_(key) || this.readFromDefaults_(key);
+ var storedValue = this.readFromLocalStorage_(key);
+ if (typeof storedValue !== 'undefined' && storedValue !== null) {
+ this.cache_[key] = storedValue;
+ } else {
+ this.cache_[key] = this.readFromDefaults_(key);
+ }
}
return this.cache_[key];
},
diff --git a/src/piskel-style-list.js b/src/piskel-style-list.js
index 3af9950d..fd8c0a23 100644
--- a/src/piskel-style-list.js
+++ b/src/piskel-style-list.js
@@ -3,6 +3,7 @@
(typeof exports != "undefined" ? exports : pskl_exports).styles = [
"css/reset.css",
"css/style.css",
+ "css/font-icon.css",
"css/forms.css",
"css/settings.css",
"css/tools.css",
@@ -13,6 +14,7 @@
"css/toolbox.css",
"css/toolbox-layers-list.css",
"css/toolbox-palettes-list.css",
+ "css/toolbox-animated-preview.css",
"css/spectrum/spectrum.css",
"css/spectrum/spectrum-overrides.css",
"css/bootstrap/bootstrap.css",
diff --git a/src/templates/layers-list.html b/src/templates/layers-list.html
index cd7baf04..7208e10d 100644
--- a/src/templates/layers-list.html
+++ b/src/templates/layers-list.html
@@ -1,5 +1,10 @@
-
- Overlay:
-
-
-
-
-