mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

Merge 5b0dbdd638 into 21b8bdd0f3

Browse Source
This commit is contained in:
Nick van Santen 2021-07-11 15:24:19 -04:00 committed by GitHub
commit 3fbc1aa861
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 35 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/css/settings-application.css
View File

@ -73,26 +73,9 @@
flex-shrink: 0;
}
.grid-spacing-container .size-picker-option[data-size='1'] {
padding: 7px;
}
.grid-spacing-container .size-picker-option[data-size='2'] {
padding: 6px;
}
.grid-spacing-container .size-picker-option[data-size='4'] {
padding: 5px;
}
.grid-spacing-container .size-picker-option[data-size='8'] {
padding: 4px;
}
.grid-spacing-container .size-picker-option[data-size='16'] {
padding: 3px;
}
.grid-spacing-container .size-picker-option[data-size='32'] {
padding: 2px;
}
.grid-spacing-container .size-picker-option[data-size='64'] {
padding: 1px;
.grid-spacing-input-container {
display:inline-block;
padding: 7px 5px;
}
.settings-item-grid-size .size-picker-option,
@ -110,29 +93,9 @@
margin: 5px 5px 0 5px;
}
.grid-colors-list {
overflow: hidden;
padding: 0 5px;
}
.grid-colors-item {
float: left;
width: 20px;
height: 20px;
cursor: pointer;
border: 2px solid #888;
margin-right: 2px;
margin-bottom: 2px;
box-sizing: border-box;
}
.grid-colors-item:hover {
border-color: white;
}
.grid-colors-item.selected {
border-color: gold;
.grid-color-container .sp-preview {
width: 16px;
height: 16px;
}
.settings-section-preferences > .settings-title {

53
src/js/controller/settings/preferences/GridPreferencesController.js
View File

@ -22,7 +22,6 @@
this.piskelController = piskelController;
this.preferencesController = preferencesController;
this.sizePicker = new pskl.widgets.SizePicker(this.onSizePickerChanged_.bind(this));
this.spacingPicker = new pskl.widgets.SizePicker(this.onSpacingPickerChanged_.bind(this));
};
pskl.utils.inherit(ns.GridPreferencesController, pskl.controller.settings.AbstractSettingController);
@ -42,39 +41,25 @@
this.sizePicker.setSize(gridWidth);
//Grid Spacing
var gridSpacing = pskl.UserSettings.get(pskl.UserSettings.GRID_SPACING);
this.spacingPicker.init(document.querySelector('.grid-spacing-container'));
this.spacingPicker.setSize(gridSpacing);
var gridSpacingInput = document.querySelector('.grid-spacing-input');
gridSpacingInput.value = pskl.UserSettings.get(pskl.UserSettings.GRID_SPACING);
this.addEventListener(gridSpacingInput, 'change', this.onGridSpacingChange_);
// Grid color
var colorListItemTemplate = pskl.utils.Template.get('color-list-item-template');
var gridColor = pskl.UserSettings.get(pskl.UserSettings.GRID_COLOR);
var gridColorSelect = document.querySelector('#grid-color');
var markup = '';
Object.keys(colorsMap).forEach(function (key, index) {
var background = colorsMap[key];
if (key === 'transparent') {
background = 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZ' +
'F8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)';
}
markup += pskl.utils.Template.replace(colorListItemTemplate, {
color: colorsMap[key],
title: key,
background: background,
':selected': gridColor === colorsMap[key]
});
});
this.gridColorList = document.querySelector('.grid-colors-list');
this.gridColorList.innerHTML = markup;
this.addEventListener(this.gridColorList, 'click', this.onGridColorClicked_.bind(this));
var gridColorSelector = $('#grid-color-picker');
var spectrumCfg = {
showPalette: false,
showButtons: false,
showInput: true,
clickoutFiresChange : true,
};
gridColorSelector.spectrum($.extend({color: gridColor}, spectrumCfg));
gridColorSelector.change(this.onGridColorClicked_);
};
ns.GridPreferencesController.prototype.destroy = function () {
this.sizePicker.destroy();
this.spacingPicker.destroy();
this.superclass.destroy.call(this);
};
@ -82,8 +67,14 @@
pskl.UserSettings.set(pskl.UserSettings.GRID_WIDTH, size);
};
ns.GridPreferencesController.prototype.onSpacingPickerChanged_ = function (size) {
pskl.UserSettings.set(pskl.UserSettings.GRID_SPACING, size);
ns.GridPreferencesController.prototype.onGridSpacingChange_ = function (evt) {
var target = evt.target;
var gridSpacing = parseInt(target.value, 10);
if (gridSpacing && !isNaN(gridSpacing)) {
pskl.UserSettings.set(pskl.UserSettings.GRID_SPACING, gridSpacing);
} else {
target.value = pskl.UserSettings.get(pskl.UserSettings.GRID_SPACING);
};
};
ns.GridPreferencesController.prototype.onEnableGridChange_ = function (evt) {
@ -91,11 +82,9 @@
};
ns.GridPreferencesController.prototype.onGridColorClicked_ = function (evt) {
var color = evt.target.dataset.color;
var color = evt.target.value;
if (color) {
pskl.UserSettings.set(pskl.UserSettings.GRID_COLOR, color);
this.gridColorList.querySelector('.selected').classList.remove('selected');
evt.target.classList.add('selected');
}
};
})();

33
src/templates/settings/preferences/grid.html
View File

@ -19,35 +19,18 @@
title="4px" rel="tooltip" data-placement="top" data-size="4"></div>
</div>
</div>
<div class="settings-item settings-item-grid-spacing">
<label>Grid spacing</label>
<div class="grid-spacing-container size-picker-container">
<div class="size-picker-option"
title="1px" rel="tooltip" data-placement="top" data-size="1"></div>
<div class="size-picker-option"
title="2px" rel="tooltip" data-placement="top" data-size="2"></div>
<div class="size-picker-option"
title="4px" rel="tooltip" data-placement="top" data-size="4"></div>
<div class="size-picker-option"
title="8px" rel="tooltip" data-placement="top" data-size="8"></div>
<div class="size-picker-option"
title="16px" rel="tooltip" data-placement="top" data-size="16"></div>
<div class="size-picker-option"
title="32px" rel="tooltip" data-placement="top" data-size="32"></div>
<div class="size-picker-option"
title="64px" rel="tooltip" data-placement="top" data-size="64"></div>
<div class="resize-section settings-item">
<label class="resize-section-title">Grid spacing</label>
<div class="grid-spacing-input-container">
<input type="text" class="textfield resize-size-field grid-spacing-input" autocomplete="off"/>
<span>px</span>
</div>
</div>
<div class="settings-item settings-item-grid-color">
<label>Grid color</label>
<div class="grid-colors-list"></div>
<script type="text/template" id="color-list-item-template">
<div class="grid-colors-item {{:selected}}"
data-color="{{color}}"
style="background:{{background}}"
title="{{title}}">
</div>
</script>
<div class="grid-color-container">
<input id="grid-color-picker" class="color" type="text"/>
</div>
</div>
</div>
</script>