diff --git a/src/css/toolbox-animated-preview.css b/src/css/toolbox-animated-preview.css index 7037ee51..3c595389 100644 --- a/src/css/toolbox-animated-preview.css +++ b/src/css/toolbox-animated-preview.css @@ -124,6 +124,14 @@ border-color: var(--highlight-color); } +/** + * If the icon represents an enabled state, the border should always be gold. + */ +.preview-contextual-action-enabled { + color: var(--highlight-color); + border-color: var(--highlight-color); +} + /** * Drop-down in preview size selection */ @@ -195,6 +203,7 @@ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { - background-image: url(../img/icons/minimap/minimap-popup-preview-arrow-gold@2x.png); - + .icon-minimap-popup-preview-arrow-white:hover { + background-image: url(../img/icons/minimap/minimap-popup-preview-arrow-gold@2x.png); + } } diff --git a/src/img/icons/minimap/minimap-grid-gold.png b/src/img/icons/minimap/minimap-grid-gold.png new file mode 100644 index 00000000..ffadd064 Binary files /dev/null and b/src/img/icons/minimap/minimap-grid-gold.png differ diff --git a/src/img/icons/minimap/minimap-grid-gold@2x.png b/src/img/icons/minimap/minimap-grid-gold@2x.png new file mode 100644 index 00000000..b9ca0854 Binary files /dev/null and b/src/img/icons/minimap/minimap-grid-gold@2x.png differ diff --git a/src/img/icons/minimap/minimap-grid-white.png b/src/img/icons/minimap/minimap-grid-white.png new file mode 100644 index 00000000..42d3cfb2 Binary files /dev/null and b/src/img/icons/minimap/minimap-grid-white.png differ diff --git a/src/img/icons/minimap/minimap-grid-white@2x.png b/src/img/icons/minimap/minimap-grid-white@2x.png new file mode 100644 index 00000000..c7d234c7 Binary files /dev/null and b/src/img/icons/minimap/minimap-grid-white@2x.png differ diff --git a/src/js/controller/preview/PreviewController.js b/src/js/controller/preview/PreviewController.js index feee03a5..1dafea90 100644 --- a/src/js/controller/preview/PreviewController.js +++ b/src/js/controller/preview/PreviewController.js @@ -20,6 +20,7 @@ this.fpsRangeInput = document.querySelector('#preview-fps'); this.fpsCounterDisplay = document.querySelector('#display-fps'); this.openPopupPreview = document.querySelector('.open-popup-preview-button'); + this.toggleGridButton = document.querySelector('.toggle-grid-button'); this.previewSizeDropdown = document.querySelector('.preview-drop-down'); this.previewSizes = { original: { @@ -54,6 +55,7 @@ var addEvent = pskl.utils.Event.addEventListener; addEvent(this.toggleOnionSkinButton, 'click', this.toggleOnionSkin_, this); addEvent(this.openPopupPreview, 'click', this.onOpenPopupPreviewClick_, this); + addEvent(this.toggleGridButton, 'click', this.toggleGrid_, this); var registerShortcut = pskl.app.shortcutService.registerShortcut.bind(pskl.app.shortcutService); registerShortcut(this.onionSkinShortcut, this.toggleOnionSkin_.bind(this)); @@ -88,6 +90,19 @@ this.updateFPS_(); this.updateMaxFPS_(); this.updateContainerDimensions_(); + this.updateToggleGridButton_(); + }; + + ns.PreviewController.prototype.updateToggleGridButton_ = function () { + var gridEnabled = pskl.UserSettings.get(pskl.UserSettings.GRID_ENABLED); + this.toggleGridButton.classList.toggle('icon-minimap-grid-white', !gridEnabled); + this.toggleGridButton.classList.toggle('icon-minimap-grid-gold', gridEnabled); + this.toggleGridButton.classList.toggle('preview-contextual-action-enabled', gridEnabled); + }; + + ns.PreviewController.prototype.toggleGrid_ = function () { + var gridEnabled = pskl.UserSettings.get(pskl.UserSettings.GRID_ENABLED); + pskl.UserSettings.set(pskl.UserSettings.GRID_ENABLED, !gridEnabled); }; ns.PreviewController.prototype.updatePreviewSizeButtons_ = function () { @@ -171,6 +186,8 @@ this.updateMaxFPS_(); } else if (name === pskl.UserSettings.SEAMLESS_MODE) { this.onFrameSizeChange_(); + } else if (name === pskl.UserSettings.GRID_ENABLED) { + this.updateToggleGridButton_(); } else { this.updateZoom_(); this.selectPreviewSizeButton_(); diff --git a/src/templates/preview.html b/src/templates/preview.html index 53372ee6..5a8d2621 100644 --- a/src/templates/preview.html +++ b/src/templates/preview.html @@ -7,6 +7,8 @@
Full
+