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);
}
/**
* 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) {
.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.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_();

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 full-size-button" rel="tooltip" data-placement="left">Full</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"
title="Open preview in popup" rel="tooltip" data-placement="bottom"></div>
</div>