From 3e450c3d772df9697c828e9ef228bc51c979b05c Mon Sep 17 00:00:00 2001 From: Craig Gilchrist Date: Sun, 18 Feb 2018 07:19:44 +0000 Subject: [PATCH] Changes requested in PR --- src/css/settings-application.css | 6 +- src/css/widgets-spacing-picker.css | 70 ------------------- .../preferences/GridPreferencesController.js | 4 +- src/js/rendering/frame/FrameRenderer.js | 8 ++- src/js/utils/UserSettings.js | 5 -- src/js/widgets/SizePicker.js | 7 +- src/js/widgets/SpacingPicker.js | 51 -------------- src/piskel-script-list.js | 1 - src/piskel-style-list.js | 1 - src/templates/settings/preferences/grid.html | 28 ++++---- 10 files changed, 29 insertions(+), 152 deletions(-) delete mode 100644 src/css/widgets-spacing-picker.css delete mode 100644 src/js/widgets/SpacingPicker.js diff --git a/src/css/settings-application.css b/src/css/settings-application.css index fd28190f..c6648250 100644 --- a/src/css/settings-application.css +++ b/src/css/settings-application.css @@ -61,14 +61,14 @@ .settings-item-grid-size, .settings-item-grid-spacing, -.settings-item-grid-color, +.settings-item-grid-color { display: flex; align-items: center; } .settings-item-grid-size > label, .settings-item-grid-spacing > label, -.settings-item-grid-color > label, +.settings-item-grid-color > label { width: 65px; flex-shrink: 0; } @@ -133,4 +133,4 @@ .settings-version:hover { color: white !important; text-decoration: none !important; -} \ No newline at end of file +} diff --git a/src/css/widgets-spacing-picker.css b/src/css/widgets-spacing-picker.css deleted file mode 100644 index cad713a6..00000000 --- a/src/css/widgets-spacing-picker.css +++ /dev/null @@ -1,70 +0,0 @@ -/***********************/ -/* spacing PICKER WIDGET */ -/***********************/ - -.spacing-picker-container { - overflow: hidden; - padding: 5px 5px; -} - -.spacing-picker-option { - float: left; - box-sizing: border-box; - width: 20px; - height: 20px; - margin-right: 2px; - border-style: solid; - border-width: 2px; - border-color: #444; - cursor: pointer; -} - -.spacing-picker-option[data-spacing='1'] { - padding: 7px; -} -.spacing-picker-option[data-spacing='2'] { - padding: 6px; -} -.spacing-picker-option[data-spacing='4'] { - padding: 5px; -} -.spacing-picker-option[data-spacing='8'] { - padding: 4px; -} -.spacing-picker-option[data-spacing='16'] { - padding: 3px; -} -.spacing-picker-option[data-spacing='32'] { - padding: 2px; -} -.spacing-picker-option[data-spacing='64'] { - padding: 1px; -} - -.spacing-picker-option:before { - content: ''; - width: 100%; - height: 100%; - background-color: white; - display: block; - text-align: center; - line-height: 12px; - font-spacing: 90%; -} - -.spacing-picker-option:hover { - border-color: #888; -} - -.spacing-picker-option.selected:before { - background-color: var(--highlight-color); -} - -.spacing-picker-option.selected { - border-color: var(--highlight-color); -} - -.spacing-picker-option.labeled:before { - content: attr(real-spacing); - color: black; -} diff --git a/src/js/controller/settings/preferences/GridPreferencesController.js b/src/js/controller/settings/preferences/GridPreferencesController.js index bd2e99a5..100d52a7 100644 --- a/src/js/controller/settings/preferences/GridPreferencesController.js +++ b/src/js/controller/settings/preferences/GridPreferencesController.js @@ -22,7 +22,7 @@ this.piskelController = piskelController; this.preferencesController = preferencesController; this.sizePicker = new pskl.widgets.SizePicker(this.onSizePickerChanged_.bind(this)); - this.spacingPicker = new pskl.widgets.SpacingPicker(this.onSpacingPickerChanged_.bind(this)); + this.spacingPicker = new pskl.widgets.SizePicker(this.onSpacingPickerChanged_.bind(this)); }; pskl.utils.inherit(ns.GridPreferencesController, pskl.controller.settings.AbstractSettingController); @@ -44,7 +44,7 @@ //Grid Spacing var gridSpacing = pskl.UserSettings.get(pskl.UserSettings.GRID_SPACING); this.spacingPicker.init(document.querySelector('.grid-spacing-container')); - this.spacingPicker.setSpacing(gridSpacing); + this.spacingPicker.setSize(gridSpacing); // Grid color var colorListItemTemplate = pskl.utils.Template.get('color-list-item-template'); diff --git a/src/js/rendering/frame/FrameRenderer.js b/src/js/rendering/frame/FrameRenderer.js index 8aa04b33..57745132 100644 --- a/src/js/rendering/frame/FrameRenderer.js +++ b/src/js/rendering/frame/FrameRenderer.js @@ -172,10 +172,16 @@ * particularly for the current zoom level */ ns.FrameRenderer.prototype.computeGridWidthForDisplay_ = function () { + var gridSpacing = this.getGridSpacing(); + if (this.zoom * gridSpacing < 6) { + return 0; + } + var gridWidth = this.getGridWidth(); - while (this.zoom < 6 * gridWidth) { + while (gridWidth > 1 && this.zoom < 6 * gridWidth) { gridWidth--; } + return gridWidth; }; diff --git a/src/js/utils/UserSettings.js b/src/js/utils/UserSettings.js index 827fcd50..92d28f3b 100644 --- a/src/js/utils/UserSettings.js +++ b/src/js/utils/UserSettings.js @@ -141,10 +141,5 @@ if (storedGridWidth === 0) { ns.UserSettings.writeToLocalStorage_('GRID_WIDTH', 1); } - - var storedGridSpacing = ns.UserSettings.readFromLocalStorage_('GRID_SPACING'); - if (storedGridSpacing === 0) { - ns.UserSettings.writeToLocalStorage_('GRID_SPACING', 1); - } }; })(); diff --git a/src/js/widgets/SizePicker.js b/src/js/widgets/SizePicker.js index 6550c5f2..55a95361 100644 --- a/src/js/widgets/SizePicker.js +++ b/src/js/widgets/SizePicker.js @@ -27,10 +27,9 @@ pskl.utils.Dom.removeClass('labeled', this.container); pskl.utils.Dom.removeClass('selected', this.container); var selectedOption; - if (size <= 4) { - selectedOption = this.container.querySelector('[data-size="' + size + '"]'); - } else { - selectedOption = this.container.querySelector('[data-size="4"]'); + selectedOption = this.container.querySelector('[data-size="' + size + '"]'); + if (typeof selectedOption === 'undefined') { + selectedOption = this.container.querySelector('[data-size]:last-child'); selectedOption.classList.add('labeled'); selectedOption.setAttribute('real-size', size); } diff --git a/src/js/widgets/SpacingPicker.js b/src/js/widgets/SpacingPicker.js deleted file mode 100644 index 80590421..00000000 --- a/src/js/widgets/SpacingPicker.js +++ /dev/null @@ -1,51 +0,0 @@ -(function () { - var ns = $.namespace('pskl.widgets'); - - ns.SpacingPicker = function (onChange) { - this.onChange = onChange; - }; - - ns.SpacingPicker.prototype.init = function (container) { - this.container = container; - pskl.utils.Event.addEventListener(this.container, 'click', this.onSpacingOptionClick_, this); - }; - - ns.SpacingPicker.prototype.destroy = function () { - pskl.utils.Event.removeAllEventListeners(this); - }; - - ns.SpacingPicker.prototype.getSpacing = function () { - var selectedOption = this.container.querySelector('.selected'); - return selectedOption ? selectedOption.dataset.spacing : null; - }; - - ns.SpacingPicker.prototype.setSpacing = function (spacing) { - if (this.getSpacing() === spacing) { - return; - } - - pskl.utils.Dom.removeClass('labeled', this.container); - pskl.utils.Dom.removeClass('selected', this.container); - var selectedOption; - if (spacing <= 64) { - selectedOption = this.container.querySelector('[data-spacing="' + spacing + '"]'); - } else { - selectedOption = this.container.querySelector('[data-spacing="4"]'); - selectedOption.classList.add('labeled'); - selectedOption.setAttribute('real-spacing', spacing); - } - if (selectedOption) { - selectedOption.classList.add('selected'); - } - }; - - ns.SpacingPicker.prototype.onSpacingOptionClick_ = function (e) { - var spacing = e.target.dataset.spacing; - console.log('clicked'); - if (!isNaN(spacing)) { - spacing = parseInt(spacing, 10); - this.onChange(spacing); - this.setSpacing(spacing); - } - }; -})(); diff --git a/src/piskel-script-list.js b/src/piskel-script-list.js index 6ba971df..8c286b35 100644 --- a/src/piskel-script-list.js +++ b/src/piskel-script-list.js @@ -171,7 +171,6 @@ "js/widgets/HslRgbColorPicker.js", "js/widgets/SizeInput.js", "js/widgets/SizePicker.js", - "js/widgets/SpacingPicker.js", "js/widgets/SynchronizedInputs.js", "js/widgets/Tabs.js", "js/widgets/Wizard.js", diff --git a/src/piskel-style-list.js b/src/piskel-style-list.js index bfeaa776..71c17e6a 100644 --- a/src/piskel-style-list.js +++ b/src/piskel-style-list.js @@ -40,7 +40,6 @@ "css/widgets-anchor.css", "css/widgets-frame-picker.css", "css/widgets-size-picker.css", - "css/widgets-spacing-picker.css", "css/widgets-tabs.css", "css/widgets-wizard.css" ]; diff --git a/src/templates/settings/preferences/grid.html b/src/templates/settings/preferences/grid.html index f17c3c8b..c7256f82 100644 --- a/src/templates/settings/preferences/grid.html +++ b/src/templates/settings/preferences/grid.html @@ -22,20 +22,20 @@
-
-
-
-
-
-
-
+
+
+
+
+
+
+