From 85acbc3dc0ea466280b82ac01add03b3cc5a7643 Mon Sep 17 00:00:00 2001 From: Nick van Santen Date: Sat, 2 Jan 2021 20:16:20 +0100 Subject: [PATCH 1/3] Further customisation of the grid spacing --- src/css/settings-application.css | 23 +++---------------- .../preferences/GridPreferencesController.js | 19 ++++++++------- src/templates/settings/preferences/grid.html | 22 ++++-------------- 3 files changed, 19 insertions(+), 45 deletions(-) diff --git a/src/css/settings-application.css b/src/css/settings-application.css index 0a01421b..f6e9fcb5 100644 --- a/src/css/settings-application.css +++ b/src/css/settings-application.css @@ -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, diff --git a/src/js/controller/settings/preferences/GridPreferencesController.js b/src/js/controller/settings/preferences/GridPreferencesController.js index 100d52a7..f8998916 100644 --- a/src/js/controller/settings/preferences/GridPreferencesController.js +++ b/src/js/controller/settings/preferences/GridPreferencesController.js @@ -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,10 +41,9 @@ 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'); @@ -74,7 +72,6 @@ ns.GridPreferencesController.prototype.destroy = function () { this.sizePicker.destroy(); - this.spacingPicker.destroy(); this.superclass.destroy.call(this); }; @@ -82,8 +79,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) { diff --git a/src/templates/settings/preferences/grid.html b/src/templates/settings/preferences/grid.html index c10ea221..accf9fda 100644 --- a/src/templates/settings/preferences/grid.html +++ b/src/templates/settings/preferences/grid.html @@ -19,23 +19,11 @@ title="4px" rel="tooltip" data-placement="top" data-size="4"> -
- -
-
-
-
-
-
-
-
+
+ +
+ + px
From fb22477b452659331cfb9da1f62ce54f2decb425 Mon Sep 17 00:00:00 2001 From: Nick van Santen Date: Sun, 3 Jan 2021 17:09:00 +0100 Subject: [PATCH 2/3] Added color swatch for grid color --- .../preferences/GridPreferencesController.js | 36 ++++++------------- src/templates/settings/preferences/grid.html | 11 ++---- 2 files changed, 14 insertions(+), 33 deletions(-) diff --git a/src/js/controller/settings/preferences/GridPreferencesController.js b/src/js/controller/settings/preferences/GridPreferencesController.js index f8998916..c777546f 100644 --- a/src/js/controller/settings/preferences/GridPreferencesController.js +++ b/src/js/controller/settings/preferences/GridPreferencesController.js @@ -44,30 +44,18 @@ 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 () { @@ -94,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'); } }; })(); diff --git a/src/templates/settings/preferences/grid.html b/src/templates/settings/preferences/grid.html index accf9fda..099dd2c3 100644 --- a/src/templates/settings/preferences/grid.html +++ b/src/templates/settings/preferences/grid.html @@ -28,14 +28,9 @@
-
- +
+ +
From 5b0dbdd638642b85dc30c759a2c0c295cb3052da Mon Sep 17 00:00:00 2001 From: Nick van Santen Date: Sun, 3 Jan 2021 23:11:02 +0100 Subject: [PATCH 3/3] resized grid color picker --- src/css/settings-application.css | 26 +++----------------- src/templates/settings/preferences/grid.html | 2 +- 2 files changed, 4 insertions(+), 24 deletions(-) diff --git a/src/css/settings-application.css b/src/css/settings-application.css index f6e9fcb5..c0b11f95 100644 --- a/src/css/settings-application.css +++ b/src/css/settings-application.css @@ -93,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 { diff --git a/src/templates/settings/preferences/grid.html b/src/templates/settings/preferences/grid.html index 099dd2c3..33ce83eb 100644 --- a/src/templates/settings/preferences/grid.html +++ b/src/templates/settings/preferences/grid.html @@ -28,7 +28,7 @@
-
+