diff --git a/src/css/toolbox-animated-preview.css b/src/css/toolbox-animated-preview.css index e8f3b0f3..2fb27cff 100644 --- a/src/css/toolbox-animated-preview.css +++ b/src/css/toolbox-animated-preview.css @@ -96,14 +96,14 @@ opacity: 1; } -.real-size-preview-button { +.original-size-button { width : 18px; height: 18px; line-height: 18px; - margin: 0px 5px; + margin: 0 5px; border: 2px solid white; - background: rgba(0, 0, 0, 0.3); + background-color: rgba(0, 0, 0, 0.3); color: white; font-size: 10px; @@ -111,17 +111,11 @@ font-family: Tahoma; } -.real-size-preview-button:hover, -.real-size-preview-button-enabled { +.original-size-button-enabled { color: gold; border-color: gold; } -.real-size-preview-button-enabled:hover { - color: white; - border-color: white; -} - .preview-contextual-action { float: left; } diff --git a/src/js/controller/preview/PreviewController.js b/src/js/controller/preview/PreviewController.js index 43ad7dd3..1cd282e8 100644 --- a/src/js/controller/preview/PreviewController.js +++ b/src/js/controller/preview/PreviewController.js @@ -16,7 +16,7 @@ this.fpsRangeInput = document.querySelector('#preview-fps'); this.fpsCounterDisplay = document.querySelector('#display-fps'); this.openPopupPreview = document.querySelector('.open-popup-preview-button'); - this.realSizePreview = document.querySelector('.real-size-preview-button'); + this.originalSizeButton = document.querySelector('.original-size-button'); this.setFPS(Constants.DEFAULT.FPS); @@ -36,10 +36,10 @@ this.toggleOnionSkinEl.addEventListener('click', this.toggleOnionSkin_.bind(this)); pskl.utils.Event.addEventListener(this.openPopupPreview, 'click', this.onOpenPopupPreviewClick_, this); - pskl.utils.Event.addEventListener(this.realSizePreview, 'click', this.onRealSizePreviewClick_, this); + pskl.utils.Event.addEventListener(this.originalSizeButton, 'click', this.onOriginalSizeButtonClick_, this); pskl.app.shortcutService.addShortcut('alt+O', this.toggleOnionSkin_.bind(this)); - pskl.app.shortcutService.addShortcut('ctrl+1', this.onRealSizePreviewClick_.bind(this)); + pskl.app.shortcutService.addShortcut('alt+1', this.onOriginalSizeButtonClick_.bind(this)); $.subscribe(Events.FRAME_SIZE_CHANGED, this.onFrameSizeChange_.bind(this)); $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this)); @@ -51,7 +51,7 @@ this.updateZoom_(); this.updateOnionSkinPreview_(); - this.updateRealSizePreviewButton_(); + this.updateOriginalSizeButton_(); this.updateMaxFPS_(); this.updateContainerDimensions_(); }; @@ -60,11 +60,9 @@ this.popupPreviewController.open(); }; - ns.PreviewController.prototype.onRealSizePreviewClick_ = function () { - var realSizeEnabled = pskl.UserSettings.get(pskl.UserSettings.REAL_SIZE_PREVIEW); - pskl.UserSettings.set(pskl.UserSettings.REAL_SIZE_PREVIEW, !realSizeEnabled); - // ctrl + 1 is a browser shortcut : return false to prevent default (see ShortcutService) - return false; + ns.PreviewController.prototype.onOriginalSizeButtonClick_ = function () { + var isEnabled = pskl.UserSettings.get(pskl.UserSettings.ORIGINAL_SIZE_PREVIEW); + pskl.UserSettings.set(pskl.UserSettings.ORIGINAL_SIZE_PREVIEW, !isEnabled); }; ns.PreviewController.prototype.onUserSettingsChange_ = function (evt, name, value) { @@ -74,7 +72,7 @@ this.updateMaxFPS_(); } else { this.updateZoom_(); - this.updateRealSizePreviewButton_(); + this.updateOriginalSizeButton_(); this.updateContainerDimensions_(); } }; @@ -85,10 +83,10 @@ this.toggleOnionSkinEl.classList.toggle(enabledClassname, isEnabled); }; - ns.PreviewController.prototype.updateRealSizePreviewButton_ = function () { - var enabledClassname = 'real-size-preview-button-enabled'; - var isEnabled = pskl.UserSettings.get(pskl.UserSettings.REAL_SIZE_PREVIEW); - this.realSizePreview.classList.toggle(enabledClassname, isEnabled); + ns.PreviewController.prototype.updateOriginalSizeButton_ = function () { + var enabledClassname = 'original-size-button-enabled'; + var isEnabled = pskl.UserSettings.get(pskl.UserSettings.ORIGINAL_SIZE_PREVIEW); + this.originalSizeButton.classList.toggle(enabledClassname, isEnabled); }; ns.PreviewController.prototype.updateMaxFPS_ = function () { @@ -98,11 +96,11 @@ }; ns.PreviewController.prototype.updateZoom_ = function () { - var realSizeEnabled = pskl.UserSettings.get(pskl.UserSettings.REAL_SIZE_PREVIEW); + var originalSizeEnabled = pskl.UserSettings.get(pskl.UserSettings.ORIGINAL_SIZE_PREVIEW); var tiledPreviewEnabled = pskl.UserSettings.get(pskl.UserSettings.TILED_PREVIEW); - var useRealSize = realSizeEnabled || tiledPreviewEnabled; + var useOriginalSize = originalSizeEnabled || tiledPreviewEnabled; - var zoom = useRealSize ? 1 : this.calculateZoom_(); + var zoom = useOriginalSize ? 1 : this.calculateZoom_(); this.renderer.setZoom(zoom); this.setRenderFlag_(true); }; diff --git a/src/js/service/keyboard/CheatsheetService.js b/src/js/service/keyboard/CheatsheetService.js index 86b6f2e9..d9b81373 100644 --- a/src/js/service/keyboard/CheatsheetService.js +++ b/src/js/service/keyboard/CheatsheetService.js @@ -77,7 +77,6 @@ var descriptors = [ this.toDescriptor_('0', 'Reset zoom level'), this.toDescriptor_('+/-', 'Zoom in/Zoom out'), - this.toDescriptor_('ctrl + 1', 'Toggle 1X preview size'), this.toDescriptor_('ctrl + Z', 'Undo'), this.toDescriptor_('ctrl + Y', 'Redo'), this.toDescriptor_('↑', 'Select previous frame'), /* ASCII for up-arrow */ @@ -85,6 +84,7 @@ this.toDescriptor_('N', 'Create new frame'), this.toDescriptor_('shift + N', 'Duplicate selected frame'), this.toDescriptor_('shift + ?', 'Open/Close this popup'), + this.toDescriptor_('alt + 1', 'Toggle original size preview'), this.toDescriptor_('alt + O', 'Toggle Onion Skin'), this.toDescriptor_('alt + L', 'Toggle Layer Preview') ]; diff --git a/src/js/utils/UserSettings.js b/src/js/utils/UserSettings.js index 24143598..3fe2f583 100644 --- a/src/js/utils/UserSettings.js +++ b/src/js/utils/UserSettings.js @@ -8,7 +8,7 @@ CANVAS_BACKGROUND : 'CANVAS_BACKGROUND', SELECTED_PALETTE : 'SELECTED_PALETTE', TILED_PREVIEW : 'TILED_PREVIEW', - REAL_SIZE_PREVIEW : 'REAL_SIZE_PREVIEW', + ORIGINAL_SIZE_PREVIEW : 'ORIGINAL_SIZE_PREVIEW', ONION_SKIN : 'ONION_SKIN', LAYER_PREVIEW : 'LAYER_PREVIEW', LAYER_OPACITY : 'LAYER_OPACITY', @@ -23,7 +23,7 @@ 'CANVAS_BACKGROUND' : 'lowcont-dark-canvas-background', 'SELECTED_PALETTE' : Constants.CURRENT_COLORS_PALETTE_ID, 'TILED_PREVIEW' : false, - 'REAL_SIZE_PREVIEW' : false, + 'ORIGINAL_SIZE_PREVIEW' : false, 'ONION_SKIN' : false, 'LAYER_OPACITY' : 0.2, 'LAYER_PREVIEW' : true diff --git a/src/templates/preview.html b/src/templates/preview.html index a893c2ac..468a6054 100644 --- a/src/templates/preview.html +++ b/src/templates/preview.html @@ -1,7 +1,7 @@