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

Issue #636 - create Tabs widget and use it application settings panel

Browse Source
This commit is contained in:
Julian Descottes 2017-06-05 00:54:23 +02:00
parent 317fda83c3
commit 2976fd09ea
18 changed files with 403 additions and 291 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/css/settings-application.css
View File

@ -1,11 +1,9 @@
/*******************************/
/* Application Setting panel */
/*******************************/
.application-settings-form {
height: 100%;
}
.settings-section-application {
height: 100%;
position: relative;
overflow: hidden;
margin: 0 20px;

39
src/css/settings-export.css
View File

@ -100,45 +100,6 @@
line-height: 23px;
}
.export-tabs {
overflow: hidden;
position: relative;
}
.export-tabs:after {
content: "";
display: block;
position: absolute;
bottom: 0;
width: 100%;
height: 1px;
z-index: 0;
background-color: var(--highlight-color);
}
.export-tab {
float: left;
cursor: pointer;
padding: 5px;
border: 1px solid transparent;
border-radius: 2px 2px 0 0;
/* Make sure the tab and its border are positioned above the :after element; */
position: relative;
z-index: 1;
}
.export-tab.selected,
.export-tab:hover {
color: var(--highlight-color);
}
.export-tab.selected {
border-color: var(--highlight-color);
border-bottom-color: #444;
border-style: solid;
border-width: 1px;
}
.export-panel-header {
padding: 10px 5px 0px;
}

42
src/css/widgets-tabs.css Normal file
View File

@ -0,0 +1,42 @@
/*****************/
/* TABS WIDGET */
/*****************/
.tab-list {
overflow: hidden;
position: relative;
}
.tab-list:after {
content: "";
display: block;
position: absolute;
bottom: 0;
width: 100%;
height: 1px;
z-index: 0;
background-color: var(--highlight-color);
}
.tab-item {
float: left;
cursor: pointer;
padding: 5px;
border: 1px solid transparent;
border-radius: 2px 2px 0 0;
/* Make sure the tab and its border are positioned above the :after element; */
position: relative;
z-index: 1;
}
.tab-item.selected,
.tab-item:hover {
color: var(--highlight-color);
}
.tab-item.selected {
border-color: var(--highlight-color);
border-bottom-color: #444;
border-style: solid;
border-width: 1px;
}

3
src/index.html
View File

@ -84,6 +84,9 @@
<!-- settings-panel partials -->
@@include('templates/settings/application.html', {})
@@include('templates/settings/application/grid.html', {})
@@include('templates/settings/application/main.html', {})
@@include('templates/settings/application/tile.html', {})
@@include('templates/settings/resize.html', {})
@@include('templates/settings/save.html', {})
@@include('templates/settings/import.html', {})

155
src/js/controller/settings/ApplicationSettingsController.js
View File

@ -1,144 +1,35 @@
(function () {
var ns = $.namespace('pskl.controller.settings');
ns.ApplicationSettingsController = function () {};
var tabs = {
'main' : {
template : 'templates/settings/application/main.html',
controller : ns.application.MainApplicationController
},
'grid' : {
template : 'templates/settings/application/grid.html',
controller : ns.application.GridApplicationController
},
'tile' : {
template : 'templates/settings/application/tile.html',
controller : ns.application.TileApplicationController
}
};
ns.ApplicationSettingsController = function () {
this.tabsWidget = new pskl.widgets.Tabs(tabs, this, pskl.UserSettings.APPLICATION_SETTINGS_TAB);
};
pskl.utils.inherit(ns.ApplicationSettingsController, pskl.controller.settings.AbstractSettingController);
ns.ApplicationSettingsController.prototype.init = function() {
this.backgroundContainer = document.querySelector('.background-picker-wrapper');
this.addEventListener(this.backgroundContainer, 'click', this.onBackgroundClick_);
// Highlight selected background :
var background = pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND);
var selectedBackground = this.backgroundContainer.querySelector('[data-background=' + background + ']');
if (selectedBackground) {
selectedBackground.classList.add('selected');
}
// Grid display and size
var gridWidth = pskl.UserSettings.get(pskl.UserSettings.GRID_WIDTH);
var gridSelect = document.querySelector('.grid-width-select');
var selectedOption = gridSelect.querySelector('option[value="' + gridWidth + '"]');
if (selectedOption) {
selectedOption.setAttribute('selected', 'selected');
}
this.addEventListener(gridSelect, 'change', this.onGridWidthChange_);
// Seamless mode
var seamlessMode = pskl.UserSettings.get(pskl.UserSettings.SEAMLESS_MODE);
var seamlessModeCheckbox = document.querySelector('.seamless-mode-checkbox');
if (seamlessMode) {
seamlessModeCheckbox.setAttribute('checked', seamlessMode);
}
this.addEventListener(seamlessModeCheckbox, 'change', this.onSeamlessModeChange_);
// Max FPS
var maxFpsInput = document.querySelector('.max-fps-input');
maxFpsInput.value = pskl.UserSettings.get(pskl.UserSettings.MAX_FPS);
this.addEventListener(maxFpsInput, 'change', this.onMaxFpsChange_);
// Color format
var colorFormat = pskl.UserSettings.get(pskl.UserSettings.COLOR_FORMAT);
var colorFormatSelect = document.querySelector('.color-format-select');
var selectedColorFormatOption = colorFormatSelect.querySelector('option[value="' + colorFormat + '"]');
if (selectedColorFormatOption) {
selectedColorFormatOption.setAttribute('selected', 'selected');
}
this.addEventListener(colorFormatSelect, 'change', this.onColorFormatChange_);
// Layer preview opacity
var layerOpacityInput = document.querySelector('.layer-opacity-input');
layerOpacityInput.value = pskl.UserSettings.get(pskl.UserSettings.LAYER_OPACITY);
this.addEventListener(layerOpacityInput, 'change', this.onLayerOpacityChange_);
this.addEventListener(layerOpacityInput, 'input', this.onLayerOpacityChange_);
this.updateLayerOpacityText_(layerOpacityInput.value);
// Seamless mask opacity
var seamlessOpacityInput = document.querySelector('.seamless-opacity-input');
seamlessOpacityInput.value = pskl.UserSettings.get(pskl.UserSettings.SEAMLESS_OPACITY);
this.addEventListener(seamlessOpacityInput, 'change', this.onSeamlessOpacityChange_);
this.addEventListener(seamlessOpacityInput, 'input', this.onSeamlessOpacityChange_);
this.updateSeamlessOpacityText_(seamlessOpacityInput.value);
// Form
this.applicationSettingsForm = document.querySelector('[name="application-settings-form"]');
this.addEventListener(this.applicationSettingsForm, 'submit', this.onFormSubmit_);
var container = document.querySelector('.settings-section-application');
this.tabsWidget.init(container);
};
ns.ApplicationSettingsController.prototype.onGridWidthChange_ = function (evt) {
var width = parseInt(evt.target.value, 10);
pskl.UserSettings.set(pskl.UserSettings.GRID_WIDTH, width);
ns.ApplicationSettingsController.prototype.destroy = function () {
this.tabsWidget.destroy();
this.superclass.destroy.call(this);
};
ns.ApplicationSettingsController.prototype.onColorFormatChange_ = function (evt) {
pskl.UserSettings.set(pskl.UserSettings.COLOR_FORMAT, evt.target.value);
};
ns.ApplicationSettingsController.prototype.onSeamlessModeChange_ = function (evt) {
pskl.UserSettings.set(pskl.UserSettings.SEAMLESS_MODE, evt.currentTarget.checked);
};
ns.ApplicationSettingsController.prototype.onBackgroundClick_ = function (evt) {
var target = evt.target;
var background = target.dataset.background;
if (background) {
pskl.UserSettings.set(pskl.UserSettings.CANVAS_BACKGROUND, background);
var selected = this.backgroundContainer.querySelector('.selected');
if (selected) {
selected.classList.remove('selected');
}
target.classList.add('selected');
}
};
ns.ApplicationSettingsController.prototype.onMaxFpsChange_ = function (evt) {
var target = evt.target;
var fps = parseInt(target.value, 10);
if (fps && !isNaN(fps)) {
pskl.UserSettings.set(pskl.UserSettings.MAX_FPS, fps);
} else {
target.value = pskl.UserSettings.get(pskl.UserSettings.MAX_FPS);
}
};
ns.ApplicationSettingsController.prototype.onLayerOpacityChange_ = function (evt) {
var target = evt.target;
var opacity = parseFloat(target.value);
if (!isNaN(opacity)) {
pskl.UserSettings.set(pskl.UserSettings.LAYER_OPACITY, opacity);
pskl.UserSettings.set(pskl.UserSettings.LAYER_PREVIEW, opacity !== 0);
this.updateLayerOpacityText_(opacity);
} else {
target.value = pskl.UserSettings.get(pskl.UserSettings.LAYER_OPACITY);
}
};
ns.ApplicationSettingsController.prototype.onSeamlessOpacityChange_ = function (evt) {
var target = evt.target;
var opacity = parseFloat(target.value);
if (!isNaN(opacity)) {
pskl.UserSettings.set(pskl.UserSettings.SEAMLESS_OPACITY, opacity);
this.updateSeamlessOpacityText_(opacity);
} else {
target.value = pskl.UserSettings.get(pskl.UserSettings.SEAMLESS_OPACITY);
}
};
ns.ApplicationSettingsController.prototype.updateLayerOpacityText_ = function (opacity) {
var layerOpacityText = document.querySelector('.layer-opacity-text');
layerOpacityText.innerHTML = opacity;
};
ns.ApplicationSettingsController.prototype.updateSeamlessOpacityText_ = function (opacity) {
var seamlessOpacityText = document.querySelector('.seamless-opacity-text');
seamlessOpacityText.innerHTML = opacity;
};
ns.ApplicationSettingsController.prototype.onFormSubmit_ = function (evt) {
evt.preventDefault();
$.publish(Events.CLOSE_SETTINGS_DRAWER);
};
})();

26
src/js/controller/settings/application/GridApplicationController.js Normal file
View File

@ -0,0 +1,26 @@
(function () {
var ns = $.namespace('pskl.controller.settings.application');
ns.GridApplicationController = function (piskelController, applicationController) {
this.piskelController = piskelController;
this.applicationController = applicationController;
};
pskl.utils.inherit(ns.GridApplicationController, pskl.controller.settings.AbstractSettingController);
ns.GridApplicationController.prototype.init = function () {
// Grid display and size
var gridWidth = pskl.UserSettings.get(pskl.UserSettings.GRID_WIDTH);
var gridSelect = document.querySelector('.grid-width-select');
var selectedOption = gridSelect.querySelector('option[value="' + gridWidth + '"]');
if (selectedOption) {
selectedOption.setAttribute('selected', 'selected');
}
this.addEventListener(gridSelect, 'change', this.onGridWidthChange_);
};
ns.GridApplicationController.prototype.onGridWidthChange_ = function (evt) {
var width = parseInt(evt.target.value, 10);
pskl.UserSettings.set(pskl.UserSettings.GRID_WIDTH, width);
};
})();

88
src/js/controller/settings/application/MainApplicationController.js Normal file
View File

@ -0,0 +1,88 @@
(function () {
var ns = $.namespace('pskl.controller.settings.application');
ns.MainApplicationController = function (piskelController, applicationController) {
this.piskelController = piskelController;
this.applicationController = applicationController;
};
pskl.utils.inherit(ns.MainApplicationController, pskl.controller.settings.AbstractSettingController);
ns.MainApplicationController.prototype.init = function () {
this.backgroundContainer = document.querySelector('.background-picker-wrapper');
this.addEventListener(this.backgroundContainer, 'click', this.onBackgroundClick_);
// Highlight selected background :
var background = pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND);
var selectedBackground = this.backgroundContainer.querySelector('[data-background=' + background + ']');
if (selectedBackground) {
selectedBackground.classList.add('selected');
}
// Max FPS
var maxFpsInput = document.querySelector('.max-fps-input');
maxFpsInput.value = pskl.UserSettings.get(pskl.UserSettings.MAX_FPS);
this.addEventListener(maxFpsInput, 'change', this.onMaxFpsChange_);
// Color format
var colorFormat = pskl.UserSettings.get(pskl.UserSettings.COLOR_FORMAT);
var colorFormatSelect = document.querySelector('.color-format-select');
var selectedColorFormatOption = colorFormatSelect.querySelector('option[value="' + colorFormat + '"]');
if (selectedColorFormatOption) {
selectedColorFormatOption.setAttribute('selected', 'selected');
}
this.addEventListener(colorFormatSelect, 'change', this.onColorFormatChange_);
// Layer preview opacity
var layerOpacityInput = document.querySelector('.layer-opacity-input');
layerOpacityInput.value = pskl.UserSettings.get(pskl.UserSettings.LAYER_OPACITY);
this.addEventListener(layerOpacityInput, 'change', this.onLayerOpacityChange_);
this.addEventListener(layerOpacityInput, 'input', this.onLayerOpacityChange_);
this.updateLayerOpacityText_(layerOpacityInput.value);
};
ns.MainApplicationController.prototype.onBackgroundClick_ = function (evt) {
var target = evt.target;
var background = target.dataset.background;
if (background) {
pskl.UserSettings.set(pskl.UserSettings.CANVAS_BACKGROUND, background);
var selected = this.backgroundContainer.querySelector('.selected');
if (selected) {
selected.classList.remove('selected');
}
target.classList.add('selected');
}
};
ns.MainApplicationController.prototype.onColorFormatChange_ = function (evt) {
pskl.UserSettings.set(pskl.UserSettings.COLOR_FORMAT, evt.target.value);
};
ns.MainApplicationController.prototype.onMaxFpsChange_ = function (evt) {
var target = evt.target;
var fps = parseInt(target.value, 10);
if (fps && !isNaN(fps)) {
pskl.UserSettings.set(pskl.UserSettings.MAX_FPS, fps);
} else {
target.value = pskl.UserSettings.get(pskl.UserSettings.MAX_FPS);
}
};
ns.MainApplicationController.prototype.onLayerOpacityChange_ = function (evt) {
var target = evt.target;
var opacity = parseFloat(target.value);
if (!isNaN(opacity)) {
pskl.UserSettings.set(pskl.UserSettings.LAYER_OPACITY, opacity);
pskl.UserSettings.set(pskl.UserSettings.LAYER_PREVIEW, opacity !== 0);
this.updateLayerOpacityText_(opacity);
} else {
target.value = pskl.UserSettings.get(pskl.UserSettings.LAYER_OPACITY);
}
};
ns.MainApplicationController.prototype.updateLayerOpacityText_ = function (opacity) {
var layerOpacityText = document.querySelector('.layer-opacity-text');
layerOpacityText.innerHTML = (opacity * 1).toFixed(2);
};
})();

47
src/js/controller/settings/application/TileApplicationController.js Normal file
View File

@ -0,0 +1,47 @@
(function () {
var ns = $.namespace('pskl.controller.settings.application');
ns.TileApplicationController = function (piskelController, applicationController) {
this.piskelController = piskelController;
this.applicationController = applicationController;
};
pskl.utils.inherit(ns.TileApplicationController, pskl.controller.settings.AbstractSettingController);
ns.TileApplicationController.prototype.init = function () {
// Seamless mode
var seamlessMode = pskl.UserSettings.get(pskl.UserSettings.SEAMLESS_MODE);
var seamlessModeCheckbox = document.querySelector('.seamless-mode-checkbox');
if (seamlessMode) {
seamlessModeCheckbox.setAttribute('checked', seamlessMode);
}
this.addEventListener(seamlessModeCheckbox, 'change', this.onSeamlessModeChange_);
// Seamless mask opacity
var seamlessOpacityInput = document.querySelector('.seamless-opacity-input');
seamlessOpacityInput.value = pskl.UserSettings.get(pskl.UserSettings.SEAMLESS_OPACITY);
this.addEventListener(seamlessOpacityInput, 'change', this.onSeamlessOpacityChange_);
this.addEventListener(seamlessOpacityInput, 'input', this.onSeamlessOpacityChange_);
this.updateSeamlessOpacityText_(seamlessOpacityInput.value);
};
ns.TileApplicationController.prototype.onSeamlessModeChange_ = function (evt) {
pskl.UserSettings.set(pskl.UserSettings.SEAMLESS_MODE, evt.currentTarget.checked);
};
ns.TileApplicationController.prototype.onSeamlessOpacityChange_ = function (evt) {
var target = evt.target;
var opacity = parseFloat(target.value);
if (!isNaN(opacity)) {
pskl.UserSettings.set(pskl.UserSettings.SEAMLESS_OPACITY, opacity);
this.updateSeamlessOpacityText_(opacity);
} else {
target.value = pskl.UserSettings.get(pskl.UserSettings.SEAMLESS_OPACITY);
}
};
ns.TileApplicationController.prototype.updateSeamlessOpacityText_ = function (opacity) {
var seamlessOpacityText = document.querySelector('.seamless-opacity-text');
seamlessOpacityText.innerHTML = (opacity * 1).toFixed(2);
};
})();

38
src/js/controller/settings/exportimage/ExportController.js
View File

@ -22,6 +22,7 @@
ns.ExportController = function (piskelController) {
this.piskelController = piskelController;
this.tabsWidget = new pskl.widgets.Tabs(tabs, this, pskl.UserSettings.EXPORT_TAB);
this.onSizeInputChange_ = this.onSizeInputChange_.bind(this);
};
@ -47,47 +48,16 @@
this.onSizeInputChange_();
// Initialize tabs and panel
this.exportPanel = document.querySelector('.export-panel');
this.exportTabs = document.querySelector('.export-tabs');
this.addEventListener(this.exportTabs, 'click', this.onTabsClicked_);
var tab = pskl.UserSettings.get(pskl.UserSettings.EXPORT_TAB);
this.selectTab(tab);
var container = document.querySelector('.settings-section-export');
this.tabsWidget.init(container);
};
ns.ExportController.prototype.destroy = function () {
this.sizeInputWidget.destroy();
this.currentController.destroy();
this.tabsWidget.destroy();
this.superclass.destroy.call(this);
};
ns.ExportController.prototype.selectTab = function (tabId) {
if (!tabs[tabId] || this.currentTab == tabId) {
return;
}
if (this.currentController) {
this.currentController.destroy();
}
this.exportPanel.innerHTML = pskl.utils.Template.get(tabs[tabId].template);
this.currentController = new tabs[tabId].controller(this.piskelController, this);
this.currentController.init();
this.currentTab = tabId;
pskl.UserSettings.set(pskl.UserSettings.EXPORT_TAB, tabId);
var selectedTab = this.exportTabs.querySelector('.selected');
if (selectedTab) {
selectedTab.classList.remove('selected');
}
this.exportTabs.querySelector('[data-tab-id="' + tabId + '"]').classList.add('selected');
};
ns.ExportController.prototype.onTabsClicked_ = function (e) {
var tabId = pskl.utils.Dom.getData(e.target, 'tabId');
this.selectTab(tabId);
};
ns.ExportController.prototype.onScaleChange_ = function () {
var value = parseFloat(this.scaleInput.value);
if (!isNaN(value)) {

2
src/js/utils/UserSettings.js
View File

@ -19,6 +19,7 @@
RESIZE_SETTINGS: 'RESIZE_SETTINGS',
COLOR_FORMAT: 'COLOR_FORMAT',
TRANSFORM_SHOW_MORE: 'TRANSFORM_SHOW_MORE',
APPLICATION_SETTINGS_TAB: 'APPLICATION_SETTINGS_TAB',
KEY_TO_DEFAULT_VALUE_MAP_ : {
'GRID_WIDTH' : 0,
'MAX_FPS' : 24,
@ -44,6 +45,7 @@
},
COLOR_FORMAT: 'hex',
TRANSFORM_SHOW_MORE: false,
APPLICATION_SETTINGS_TAB: 'main',
},
/**

70
src/js/widgets/Tabs.js Normal file
View File

@ -0,0 +1,70 @@
(function () {
var ns = $.namespace('pskl.widgets');
/**
* Simple layout widget to display one step element (DOM Element) at a time.
* When switching to another step, the new step element will slide over the
* current step element. When going back to the previous step, the current
* step element will slide out from the container to reveal the previous one.
*
* @param {Object} steps map of step descriptions with the step name as the key.
* Each step description contains:
* - el {Element} the DOM Element corresponding to this step
* - name {String} the name of the step (redundant with the key)
* @param {Element} container the DOM Element in which the wizard should be
* displayed.
*/
ns.Tabs = function (tabs, parentController, settingsName) {
this.tabs = tabs;
this.parentController = parentController;
this.settingsName = settingsName;
this.currentTab = null;
this.currentController = null;
};
ns.Tabs.prototype.init = function (container) {
this.tabListEl = container.querySelector('.tab-list');
this.tabContentlEl = container.querySelector('.tab-content');
pskl.utils.Event.addEventListener(this.tabListEl, 'click', this.onTabsClicked_, this);
var tab = pskl.UserSettings.get(this.settingsName);
if (tab) {
this.selectTab(tab);
}
};
ns.Tabs.prototype.destroy = function () {
if (this.currentController) {
this.currentController.destroy();
}
pskl.utils.Event.removeAllEventListeners(this);
};
ns.Tabs.prototype.selectTab = function (tabId) {
if (!this.tabs[tabId] || this.currentTab == tabId) {
return;
}
if (this.currentController) {
this.currentController.destroy();
}
this.tabContentlEl.innerHTML = pskl.utils.Template.get(this.tabs[tabId].template);
this.currentController = new this.tabs[tabId].controller(pskl.app.piskelController, this.parentController);
this.currentController.init();
this.currentTab = tabId;
pskl.UserSettings.set(this.settingsName, tabId);
var selectedTab = this.tabListEl.querySelector('.selected');
if (selectedTab) {
selectedTab.classList.remove('selected');
}
this.tabListEl.querySelector('[data-tab-id="' + tabId + '"]').classList.add('selected');
};
ns.Tabs.prototype.onTabsClicked_ = function (e) {
var tabId = pskl.utils.Dom.getData(e.target, 'tabId');
this.selectTab(tabId);
};
})();

4
src/piskel-script-list.js
View File

@ -122,6 +122,9 @@
// Settings sub-controllers
"js/controller/settings/AbstractSettingController.js",
"js/controller/settings/application/GridApplicationController.js",
"js/controller/settings/application/MainApplicationController.js",
"js/controller/settings/application/TileApplicationController.js",
"js/controller/settings/ApplicationSettingsController.js",
"js/controller/settings/exportimage/GifExportController.js",
"js/controller/settings/exportimage/PngExportController.js",
@ -160,6 +163,7 @@
"js/widgets/HslRgbColorPicker.js",
"js/widgets/SizeInput.js",
"js/widgets/SynchronizedInputs.js",
"js/widgets/Tabs.js",
"js/widgets/Wizard.js",
// Services

1
src/piskel-style-list.js
View File

@ -39,5 +39,6 @@
"css/minimap.css",
"css/widgets-anchor.css",
"css/widgets-frame-picker.css",
"css/widgets-tabs.css",
"css/widgets-wizard.css"
];

93
src/templates/settings/application.html
View File

@ -1,80 +1,19 @@
<script type="text/html" id="templates/settings/application.html">
<form action="" method="POST" name="application-settings-form" class="application-settings-form">
<div class="settings-section settings-section-application">
<div class="settings-title">
General
</div>
<div class="settings-item">
<label>Background</label>
<div class="background-picker-wrapper">
<div class="background-picker light-picker-background" data-background="light-canvas-background"
rel="tooltip" data-placement="bottom" title="light / high contrast">
</div>
<div class="background-picker medium-picker-background" data-background="medium-canvas-background"
rel="tooltip" data-placement="bottom" title="medium / high contrast">
</div>
<div class="background-picker lowcont-medium-picker-background" data-background="lowcont-medium-canvas-background"
rel="tooltip" data-placement="bottom" title="medium / low contrast">
</div>
<div class="background-picker lowcont-dark-picker-background" data-background="lowcont-dark-canvas-background"
rel="tooltip" data-placement="bottom" title="dark / low contrast">
</div>
</div>
</div>
<div class="settings-item">
<label for="grid-width">Pixel grid</label>
<select id="grid-width" class="grid-width-select">
<option value="0">Disabled</option>
<option value="1">1px</option>
<option value="2">2px</option>
<option value="3">3px</option>
<option value="4">4px</option>
</select>
</div>
<div class="settings-item">
<label>Layer opacity</label>
<input type="range" class="settings-opacity-input layer-opacity-input" name="layer-opacity" min="0" max="1" step="0.05"/>
<span class="settings-opacity-text layer-opacity-text"></span>
</div>
<div class="settings-item">
<label>
Seamless drawing mode
<input type="checkbox" value="1" class="seamless-mode-checkbox" name="seamless-mode-checkbox"/>
</label>
</div>
<div class="settings-item">
<label>Seamless opacity</label>
<input type="range" class="settings-opacity-input seamless-opacity-input" name="seamless-opacity" min="0" max="0.5" step="0.01"/>
<span class="settings-opacity-text seamless-opacity-text"></span>
</div>
<div class="settings-item">
<label>Maximum FPS</label>
<input type="text" class="textfield textfield-small max-fps-input" autocomplete="off" name="max-fps"/>
</div>
<div class="settings-item">
<label for="color-format">Color format</label>
<select id="color-format" class="color-format-select">
<option value="hex">Hex</option>
<option value="rgb">RGB</option>
</select>
</div>
<div class="settings-version-info">
Piskel
<span rel="tooltip" data-placement="bottom" title="View release notes">
<a class="settings-version" target="_blank"
href="https://github.com/piskelapp/piskel/releases/tag/v@@releaseVersion">v@@releaseVersion</a>
</span>
</div>
<input type="submit" class="button button-primary" value="Apply settings" />
<div class="settings-section settings-section-application">
<div class="settings-title">Settings</div>
<div class="tab-list">
<div class="tab-item" data-tab-id="main">Main</div>
<div class="tab-item" data-tab-id="grid">Grid</div>
<div class="tab-item" data-tab-id="tile">Tile mode</div>
</div>
</form>
<div class="tab-content"></div>
<div class="settings-version-info">
Piskel
<span rel="tooltip" data-placement="bottom" title="View release notes">
<a class="settings-version" target="_blank"
href="https://github.com/piskelapp/piskel/releases/tag/v@@releaseVersion">v@@releaseVersion</a>
</span>
</div>
</div>
</script>

14
src/templates/settings/application/grid.html Normal file
View File

@ -0,0 +1,14 @@
<script type="text/html" id="templates/settings/application/grid.html">
<div class="application-panel-grid">
<div class="settings-item">
<label for="grid-width">Pixel grid</label>
<select id="grid-width" class="grid-width-select">
<option value="0">Disabled</option>
<option value="1">1px</option>
<option value="2">2px</option>
<option value="3">3px</option>
<option value="4">4px</option>
</select>
</div>
</div>
</script>

40
src/templates/settings/application/main.html Normal file
View File

@ -0,0 +1,40 @@
<script type="text/html" id="templates/settings/application/main.html">
<div class="application-panel-main">
<div class="settings-item">
<label>Background</label>
<div class="background-picker-wrapper">
<div class="background-picker light-picker-background" data-background="light-canvas-background"
rel="tooltip" data-placement="bottom" title="light / high contrast">
</div>
<div class="background-picker medium-picker-background" data-background="medium-canvas-background"
rel="tooltip" data-placement="bottom" title="medium / high contrast">
</div>
<div class="background-picker lowcont-medium-picker-background" data-background="lowcont-medium-canvas-background"
rel="tooltip" data-placement="bottom" title="medium / low contrast">
</div>
<div class="background-picker lowcont-dark-picker-background" data-background="lowcont-dark-canvas-background"
rel="tooltip" data-placement="bottom" title="dark / low contrast">
</div>
</div>
</div>
<div class="settings-item">
<label>Layer opacity</label>
<input type="range" class="settings-opacity-input layer-opacity-input" name="layer-opacity" min="0" max="1" step="0.05"/>
<span class="settings-opacity-text layer-opacity-text"></span>
</div>
<div class="settings-item">
<label>Maximum FPS</label>
<input type="text" class="textfield textfield-small max-fps-input" autocomplete="off" name="max-fps"/>
</div>
<div class="settings-item">
<label for="color-format">Color format</label>
<select id="color-format" class="color-format-select">
<option value="hex">Hex</option>
<option value="rgb">RGB</option>
</select>
</div>
</div>
</script>

16
src/templates/settings/application/tile.html Normal file
View File

@ -0,0 +1,16 @@
<script type="text/html" id="templates/settings/application/tile.html">
<div class="application-panel-tile">
<div class="settings-item">
<label>
Seamless drawing mode
<input type="checkbox" value="1" class="seamless-mode-checkbox" name="seamless-mode-checkbox"/>
</label>
</div>
<div class="settings-item">
<label>Seamless opacity</label>
<input type="range" class="settings-opacity-input seamless-opacity-input" name="seamless-opacity" min="0" max="0.5" step="0.01"/>
<span class="settings-opacity-text seamless-opacity-text"></span>
</div>
</div>
</script>

12
src/templates/settings/export.html
View File

@ -14,12 +14,12 @@
<div class="resize-label">x</div>
<input type="text" class="textfield resize-field resize-height" autocomplete="off" name="resize-height"/>
</div>
<div class="export-tabs">
<div class="export-tab" data-tab-id="gif">GIF</div>
<div class="export-tab" data-tab-id="png">PNG</div>
<div class="export-tab" data-tab-id="zip">Zip</div>
<div class="export-tab" data-tab-id="misc">Others</div>
<div class="export-tabs tab-list">
<div class="export-tab tab-item" data-tab-id="gif">GIF</div>
<div class="export-tab tab-item" data-tab-id="png">PNG</div>
<div class="export-tab tab-item" data-tab-id="zip">Zip</div>
<div class="export-tab tab-item" data-tab-id="misc">Others</div>
</div>
<div class="export-panel"></div>
<div class="export-panel tab-content"></div>
</div>
</script>