mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Changes requested in PR
This commit is contained in:
parent
5c7070b01b
commit
3e450c3d77
@ -61,14 +61,14 @@
|
|||||||
|
|
||||||
.settings-item-grid-size,
|
.settings-item-grid-size,
|
||||||
.settings-item-grid-spacing,
|
.settings-item-grid-spacing,
|
||||||
.settings-item-grid-color,
|
.settings-item-grid-color {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings-item-grid-size > label,
|
.settings-item-grid-size > label,
|
||||||
.settings-item-grid-spacing > label,
|
.settings-item-grid-spacing > label,
|
||||||
.settings-item-grid-color > label,
|
.settings-item-grid-color > label {
|
||||||
width: 65px;
|
width: 65px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
@ -133,4 +133,4 @@
|
|||||||
.settings-version:hover {
|
.settings-version:hover {
|
||||||
color: white !important;
|
color: white !important;
|
||||||
text-decoration: none !important;
|
text-decoration: none !important;
|
||||||
}
|
}
|
||||||
|
@ -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;
|
|
||||||
}
|
|
@ -22,7 +22,7 @@
|
|||||||
this.piskelController = piskelController;
|
this.piskelController = piskelController;
|
||||||
this.preferencesController = preferencesController;
|
this.preferencesController = preferencesController;
|
||||||
this.sizePicker = new pskl.widgets.SizePicker(this.onSizePickerChanged_.bind(this));
|
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);
|
pskl.utils.inherit(ns.GridPreferencesController, pskl.controller.settings.AbstractSettingController);
|
||||||
@ -44,7 +44,7 @@
|
|||||||
//Grid Spacing
|
//Grid Spacing
|
||||||
var gridSpacing = pskl.UserSettings.get(pskl.UserSettings.GRID_SPACING);
|
var gridSpacing = pskl.UserSettings.get(pskl.UserSettings.GRID_SPACING);
|
||||||
this.spacingPicker.init(document.querySelector('.grid-spacing-container'));
|
this.spacingPicker.init(document.querySelector('.grid-spacing-container'));
|
||||||
this.spacingPicker.setSpacing(gridSpacing);
|
this.spacingPicker.setSize(gridSpacing);
|
||||||
|
|
||||||
// Grid color
|
// Grid color
|
||||||
var colorListItemTemplate = pskl.utils.Template.get('color-list-item-template');
|
var colorListItemTemplate = pskl.utils.Template.get('color-list-item-template');
|
||||||
|
@ -172,10 +172,16 @@
|
|||||||
* particularly for the current zoom level
|
* particularly for the current zoom level
|
||||||
*/
|
*/
|
||||||
ns.FrameRenderer.prototype.computeGridWidthForDisplay_ = function () {
|
ns.FrameRenderer.prototype.computeGridWidthForDisplay_ = function () {
|
||||||
|
var gridSpacing = this.getGridSpacing();
|
||||||
|
if (this.zoom * gridSpacing < 6) {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
var gridWidth = this.getGridWidth();
|
var gridWidth = this.getGridWidth();
|
||||||
while (this.zoom < 6 * gridWidth) {
|
while (gridWidth > 1 && this.zoom < 6 * gridWidth) {
|
||||||
gridWidth--;
|
gridWidth--;
|
||||||
}
|
}
|
||||||
|
|
||||||
return gridWidth;
|
return gridWidth;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -141,10 +141,5 @@
|
|||||||
if (storedGridWidth === 0) {
|
if (storedGridWidth === 0) {
|
||||||
ns.UserSettings.writeToLocalStorage_('GRID_WIDTH', 1);
|
ns.UserSettings.writeToLocalStorage_('GRID_WIDTH', 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
var storedGridSpacing = ns.UserSettings.readFromLocalStorage_('GRID_SPACING');
|
|
||||||
if (storedGridSpacing === 0) {
|
|
||||||
ns.UserSettings.writeToLocalStorage_('GRID_SPACING', 1);
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
})();
|
})();
|
||||||
|
@ -27,10 +27,9 @@
|
|||||||
pskl.utils.Dom.removeClass('labeled', this.container);
|
pskl.utils.Dom.removeClass('labeled', this.container);
|
||||||
pskl.utils.Dom.removeClass('selected', this.container);
|
pskl.utils.Dom.removeClass('selected', this.container);
|
||||||
var selectedOption;
|
var selectedOption;
|
||||||
if (size <= 4) {
|
selectedOption = this.container.querySelector('[data-size="' + size + '"]');
|
||||||
selectedOption = this.container.querySelector('[data-size="' + size + '"]');
|
if (typeof selectedOption === 'undefined') {
|
||||||
} else {
|
selectedOption = this.container.querySelector('[data-size]:last-child');
|
||||||
selectedOption = this.container.querySelector('[data-size="4"]');
|
|
||||||
selectedOption.classList.add('labeled');
|
selectedOption.classList.add('labeled');
|
||||||
selectedOption.setAttribute('real-size', size);
|
selectedOption.setAttribute('real-size', size);
|
||||||
}
|
}
|
||||||
|
@ -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);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
})();
|
|
@ -171,7 +171,6 @@
|
|||||||
"js/widgets/HslRgbColorPicker.js",
|
"js/widgets/HslRgbColorPicker.js",
|
||||||
"js/widgets/SizeInput.js",
|
"js/widgets/SizeInput.js",
|
||||||
"js/widgets/SizePicker.js",
|
"js/widgets/SizePicker.js",
|
||||||
"js/widgets/SpacingPicker.js",
|
|
||||||
"js/widgets/SynchronizedInputs.js",
|
"js/widgets/SynchronizedInputs.js",
|
||||||
"js/widgets/Tabs.js",
|
"js/widgets/Tabs.js",
|
||||||
"js/widgets/Wizard.js",
|
"js/widgets/Wizard.js",
|
||||||
|
@ -40,7 +40,6 @@
|
|||||||
"css/widgets-anchor.css",
|
"css/widgets-anchor.css",
|
||||||
"css/widgets-frame-picker.css",
|
"css/widgets-frame-picker.css",
|
||||||
"css/widgets-size-picker.css",
|
"css/widgets-size-picker.css",
|
||||||
"css/widgets-spacing-picker.css",
|
|
||||||
"css/widgets-tabs.css",
|
"css/widgets-tabs.css",
|
||||||
"css/widgets-wizard.css"
|
"css/widgets-wizard.css"
|
||||||
];
|
];
|
||||||
|
@ -22,20 +22,20 @@
|
|||||||
<div class="settings-item settings-item-grid-spacing">
|
<div class="settings-item settings-item-grid-spacing">
|
||||||
<label>Grid Spacing</label>
|
<label>Grid Spacing</label>
|
||||||
<div class="grid-spacing-container spacing-picker-container">
|
<div class="grid-spacing-container spacing-picker-container">
|
||||||
<div class="spacing-picker-option"
|
<div class="size-picker-option"
|
||||||
title="1px" rel="tooltip" data-placement="top" data-spacing="1"></div>
|
title="1px" rel="tooltip" data-placement="top" data-size="1"></div>
|
||||||
<div class="spacing-picker-option"
|
<div class="size-picker-option"
|
||||||
title="2px" rel="tooltip" data-placement="top" data-spacing="2"></div>
|
title="2px" rel="tooltip" data-placement="top" data-size="2"></div>
|
||||||
<div class="spacing-picker-option"
|
<div class="size-picker-option"
|
||||||
title="4px" rel="tooltip" data-placement="top" data-spacing="4"></div>
|
title="4px" rel="tooltip" data-placement="top" data-size="4"></div>
|
||||||
<div class="spacing-picker-option"
|
<div class="size-picker-option"
|
||||||
title="8px" rel="tooltip" data-placement="top" data-spacing="8"></div>
|
title="8px" rel="tooltip" data-placement="top" data-size="8"></div>
|
||||||
<div class="spacing-picker-option"
|
<div class="size-picker-option"
|
||||||
title="16px" rel="tooltip" data-placement="top" data-spacing="16"></div>
|
title="16px" rel="tooltip" data-placement="top" data-size="16"></div>
|
||||||
<div class="spacing-picker-option"
|
<div class="size-picker-option"
|
||||||
title="32px" rel="tooltip" data-placement="top" data-spacing="32"></div>
|
title="32px" rel="tooltip" data-placement="top" data-size="32"></div>
|
||||||
<div class="spacing-picker-option"
|
<div class="size-picker-option"
|
||||||
title="32px" rel="tooltip" data-placement="top" data-spacing="64"></div>
|
title="64px" rel="tooltip" data-placement="top" data-size="64"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="settings-item settings-item-grid-color">
|
<div class="settings-item settings-item-grid-color">
|
||||||
|
Loading…
x
Reference in New Issue
Block a user