Changes requested in PR

This commit is contained in:
Craig Gilchrist 2018-02-18 07:19:44 +00:00 committed by Julian Descottes
parent 5c7070b01b
commit 3e450c3d77
10 changed files with 29 additions and 152 deletions

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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');

View File

@ -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;
};

View File

@ -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);
}
};
})();

View File

@ -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"]');
if (typeof selectedOption === 'undefined') {
selectedOption = this.container.querySelector('[data-size]:last-child');
selectedOption.classList.add('labeled');
selectedOption.setAttribute('real-size', size);
}

View File

@ -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);
}
};
})();

View File

@ -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",

View File

@ -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"
];

View File

@ -22,20 +22,20 @@
<div class="settings-item settings-item-grid-spacing">
<label>Grid Spacing</label>
<div class="grid-spacing-container spacing-picker-container">
<div class="spacing-picker-option"
title="1px" rel="tooltip" data-placement="top" data-spacing="1"></div>
<div class="spacing-picker-option"
title="2px" rel="tooltip" data-placement="top" data-spacing="2"></div>
<div class="spacing-picker-option"
title="4px" rel="tooltip" data-placement="top" data-spacing="4"></div>
<div class="spacing-picker-option"
title="8px" rel="tooltip" data-placement="top" data-spacing="8"></div>
<div class="spacing-picker-option"
title="16px" rel="tooltip" data-placement="top" data-spacing="16"></div>
<div class="spacing-picker-option"
title="32px" rel="tooltip" data-placement="top" data-spacing="32"></div>
<div class="spacing-picker-option"
title="32px" rel="tooltip" data-placement="top" data-spacing="64"></div>
<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>
</div>
<div class="settings-item settings-item-grid-color">