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

Add a setting for changing the color format shown in the color picker

Browse Source
This commit is contained in:
Zoee Silcock 2016-12-28 15:32:57 +01:00
parent e43cee3c94
commit 809737908c
5 changed files with 29 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -54,7 +54,8 @@
text-align: center;
}
.grid-width-select {
.grid-width-select,
.color-format-select {
margin: 5px 5px 0 5px;
}

14
src/js/controller/settings/ApplicationSettingsController.js
View File

@ -39,6 +39,16 @@
maxFpsInput.value = pskl.UserSettings.get(pskl.UserSettings.MAX_FPS);
this.addEventListener(maxFpsInput, 'change', this.onMaxFpsChange_);
// Color format
var colorFormat = pskl.UserSettings.get(pskl.UserSettings.COLOR_FORMAT);
var colorFormatSelect = document.querySelector('.color-format-select');
var selectedColorFormatOption = colorFormatSelect.querySelector('option[value="' + colorFormat + '"]');
if (selectedColorFormatOption) {
selectedColorFormatOption.setAttribute('selected', 'selected');
}
this.addEventListener(colorFormatSelect, 'change', this.onColorFormatChange_);
// Layer preview opacity
var layerOpacityInput = document.querySelector('.layer-opacity-input');
layerOpacityInput.value = pskl.UserSettings.get(pskl.UserSettings.LAYER_OPACITY);
@ -63,6 +73,10 @@
pskl.UserSettings.set(pskl.UserSettings.GRID_WIDTH, width);
};
ns.ApplicationSettingsController.prototype.onColorFormatChange_ = function (evt) {
pskl.UserSettings.set(pskl.UserSettings.COLOR_FORMAT, evt.target.value);
};
ns.ApplicationSettingsController.prototype.onSeamlessModeChange_ = function (evt) {
pskl.UserSettings.set(pskl.UserSettings.SEAMLESS_MODE, evt.currentTarget.checked);
};

3
src/js/lib/spectrum/spectrum.js
View File

@ -671,7 +671,8 @@
// Update the text entry input as it changes happen
if (opts.showInput) {
textInput.val(realColor.toString(format));
var displayFormat = pskl.UserSettings.get(pskl.UserSettings.COLOR_FORMAT);
textInput.val(realColor.toString(displayFormat));
}
if (opts.showPalette) {

4
src/js/utils/UserSettings.js
View File

@ -17,6 +17,7 @@
EXPORT_TAB: 'EXPORT_TAB',
PEN_SIZE : 'PEN_SIZE',
RESIZE_SETTINGS: 'RESIZE_SETTINGS',
COLOR_FORMAT: 'COLOR_FORMAT',
KEY_TO_DEFAULT_VALUE_MAP_ : {
'GRID_WIDTH' : 0,
'MAX_FPS' : 24,
@ -39,7 +40,8 @@
maintainRatio : true,
resizeContent : false,
origin : 'TOPLEFT'
}
},
COLOR_FORMAT: 'hex',
},
/**

8
src/templates/settings/application.html
View File

@ -58,6 +58,14 @@
<input type="text" class="textfield textfield-small max-fps-input" autocomplete="off" name="max-fps"/>
</div>
<div class="settings-item">
<label for="color-format">Color format</label>
<select id="color-format" class="color-format-select">
<option value="hex">Hex</option>
<option value="rgb">RGB</option>
</select>
</div>
<input type="submit" class="button button-primary" value="Apply settings" />
</div>
</form>