Add toggle grid icon to minimap

This commit is contained in:
juliandescottes 2018-09-17 22:48:13 +02:00 committed by Julian Descottes
parent 6acfa2256c
commit 52e49a1ed6
7 changed files with 30 additions and 2 deletions

View File

@ -124,6 +124,14 @@
border-color: var(--highlight-color); 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 * Drop-down in preview size selection
*/ */
@ -195,6 +203,7 @@
@media (-webkit-min-device-pixel-ratio: 2), @media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) { (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);
}
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 135 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 192 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 135 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 186 B

View File

@ -20,6 +20,7 @@
this.fpsRangeInput = document.querySelector('#preview-fps'); this.fpsRangeInput = document.querySelector('#preview-fps');
this.fpsCounterDisplay = document.querySelector('#display-fps'); this.fpsCounterDisplay = document.querySelector('#display-fps');
this.openPopupPreview = document.querySelector('.open-popup-preview-button'); this.openPopupPreview = document.querySelector('.open-popup-preview-button');
this.toggleGridButton = document.querySelector('.toggle-grid-button');
this.previewSizeDropdown = document.querySelector('.preview-drop-down'); this.previewSizeDropdown = document.querySelector('.preview-drop-down');
this.previewSizes = { this.previewSizes = {
original: { original: {
@ -54,6 +55,7 @@
var addEvent = pskl.utils.Event.addEventListener; var addEvent = pskl.utils.Event.addEventListener;
addEvent(this.toggleOnionSkinButton, 'click', this.toggleOnionSkin_, this); addEvent(this.toggleOnionSkinButton, 'click', this.toggleOnionSkin_, this);
addEvent(this.openPopupPreview, 'click', this.onOpenPopupPreviewClick_, 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); var registerShortcut = pskl.app.shortcutService.registerShortcut.bind(pskl.app.shortcutService);
registerShortcut(this.onionSkinShortcut, this.toggleOnionSkin_.bind(this)); registerShortcut(this.onionSkinShortcut, this.toggleOnionSkin_.bind(this));
@ -88,6 +90,19 @@
this.updateFPS_(); this.updateFPS_();
this.updateMaxFPS_(); this.updateMaxFPS_();
this.updateContainerDimensions_(); 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 () { ns.PreviewController.prototype.updatePreviewSizeButtons_ = function () {
@ -171,6 +186,8 @@
this.updateMaxFPS_(); this.updateMaxFPS_();
} else if (name === pskl.UserSettings.SEAMLESS_MODE) { } else if (name === pskl.UserSettings.SEAMLESS_MODE) {
this.onFrameSizeChange_(); this.onFrameSizeChange_();
} else if (name === pskl.UserSettings.GRID_ENABLED) {
this.updateToggleGridButton_();
} else { } else {
this.updateZoom_(); this.updateZoom_();
this.selectPreviewSizeButton_(); this.selectPreviewSizeButton_();

View File

@ -7,6 +7,8 @@
<div class="preview-contextual-action best-size-button" rel="tooltip" data-placement="left"></div> <div class="preview-contextual-action best-size-button" rel="tooltip" data-placement="left"></div>
<div class="preview-contextual-action full-size-button" rel="tooltip" data-placement="left">Full</div> <div class="preview-contextual-action full-size-button" rel="tooltip" data-placement="left">Full</div>
</div> </div>
<div class="preview-contextual-action toggle-grid-button icon-minimap-grid-white"
title="Toggle grid" rel="tooltip" data-placement="bottom"></div>
<div class="preview-contextual-action open-popup-preview-button icon-minimap-popup-preview-arrow-white" <div class="preview-contextual-action open-popup-preview-button icon-minimap-popup-preview-arrow-white"
title="Open preview in popup" rel="tooltip" data-placement="bottom"></div> title="Open preview in popup" rel="tooltip" data-placement="bottom"></div>
</div> </div>