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

Changes requested in PR

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/css/settings-application.css
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;
}
@ -133,4 +133,4 @@
.settings-version:hover {
color: white !important;
text-decoration: none !important;
}
}

70
src/css/widgets-spacing-picker.css
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;
}

4
src/js/controller/settings/preferences/GridPreferencesController.js
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');

8
src/js/rendering/frame/FrameRenderer.js
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;
};

5
src/js/utils/UserSettings.js
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);
}
};
})();

7
src/js/widgets/SizePicker.js
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"]');
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);
}

51
src/js/widgets/SpacingPicker.js
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);
}
};
})();

1
src/piskel-script-list.js
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",

1
src/piskel-style-list.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"
];

28
src/templates/settings/preferences/grid.html
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">