mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Issue #636 - rename all application-settings things to preferences-settings
The name is not ideal, but it's better to have a MiscPreferencesController than a MainApplicationController for this kind of very simple panels.
This commit is contained in:
parent
09ce6ff88f
commit
c2dbddcf9f
@ -1,8 +1,8 @@
|
||||
/*******************************/
|
||||
/* Application Setting panel */
|
||||
/*******************************/
|
||||
/********************************/
|
||||
/* Preferences Settings panel */
|
||||
/********************************/
|
||||
|
||||
.settings-section-application {
|
||||
.settings-section-preferences {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@ -109,12 +109,12 @@
|
||||
border-color: gold;
|
||||
}
|
||||
|
||||
.settings-section-application > .settings-title {
|
||||
.settings-section-preferences > .settings-title {
|
||||
/* Override the default 10px margin bottom for this panel */
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.settings-section-application .button-primary {
|
||||
.settings-section-preferences .button-primary {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
|
@ -83,10 +83,10 @@
|
||||
@@include('templates/dialogs/unsupported-browser.html', {})
|
||||
|
||||
<!-- 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/preferences.html', {})
|
||||
@@include('templates/settings/preferences/grid.html', {})
|
||||
@@include('templates/settings/preferences/misc.html', {})
|
||||
@@include('templates/settings/preferences/tile.html', {})
|
||||
@@include('templates/settings/resize.html', {})
|
||||
@@include('templates/settings/save.html', {})
|
||||
@@include('templates/settings/import.html', {})
|
||||
|
@ -1,35 +0,0 @@
|
||||
(function () {
|
||||
var ns = $.namespace('pskl.controller.settings');
|
||||
|
||||
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() {
|
||||
var container = document.querySelector('.settings-section-application');
|
||||
this.tabsWidget.init(container);
|
||||
};
|
||||
|
||||
ns.ApplicationSettingsController.prototype.destroy = function () {
|
||||
this.tabsWidget.destroy();
|
||||
this.superclass.destroy.call(this);
|
||||
};
|
||||
|
||||
})();
|
35
src/js/controller/settings/PreferencesController.js
Normal file
35
src/js/controller/settings/PreferencesController.js
Normal file
@ -0,0 +1,35 @@
|
||||
(function () {
|
||||
var ns = $.namespace('pskl.controller.settings');
|
||||
|
||||
var tabs = {
|
||||
'misc' : {
|
||||
template : 'templates/settings/preferences/misc.html',
|
||||
controller : ns.preferences.MiscPreferencesController
|
||||
},
|
||||
'grid' : {
|
||||
template : 'templates/settings/preferences/grid.html',
|
||||
controller : ns.preferences.GridPreferencesController
|
||||
},
|
||||
'tile' : {
|
||||
template : 'templates/settings/preferences/tile.html',
|
||||
controller : ns.preferences.TilePreferencesController
|
||||
}
|
||||
};
|
||||
|
||||
ns.PreferencesController = function () {
|
||||
this.tabsWidget = new pskl.widgets.Tabs(tabs, this, pskl.UserSettings.PREFERENCES_TAB);
|
||||
};
|
||||
|
||||
pskl.utils.inherit(ns.PreferencesController, pskl.controller.settings.AbstractSettingController);
|
||||
|
||||
ns.PreferencesController.prototype.init = function() {
|
||||
var container = document.querySelector('.settings-section-preferences');
|
||||
this.tabsWidget.init(container);
|
||||
};
|
||||
|
||||
ns.PreferencesController.prototype.destroy = function () {
|
||||
this.tabsWidget.destroy();
|
||||
this.superclass.destroy.call(this);
|
||||
};
|
||||
|
||||
})();
|
@ -3,8 +3,8 @@
|
||||
|
||||
var settings = {
|
||||
'user' : {
|
||||
template : 'templates/settings/application.html',
|
||||
controller : ns.ApplicationSettingsController
|
||||
template : 'templates/settings/preferences.html',
|
||||
controller : ns.PreferencesController
|
||||
},
|
||||
'resize' : {
|
||||
template : 'templates/settings/resize.html',
|
||||
|
@ -1,5 +1,5 @@
|
||||
(function () {
|
||||
var ns = $.namespace('pskl.controller.settings.application');
|
||||
var ns = $.namespace('pskl.controller.settings.preferences');
|
||||
|
||||
var colorsMap = {
|
||||
'transparent': Constants.TRANSPARENT_COLOR,
|
||||
@ -18,15 +18,15 @@
|
||||
'red': '#FF004D',
|
||||
};
|
||||
|
||||
ns.GridApplicationController = function (piskelController, applicationController) {
|
||||
ns.GridPreferencesController = function (piskelController, preferencesController) {
|
||||
this.piskelController = piskelController;
|
||||
this.applicationController = applicationController;
|
||||
this.preferencesController = preferencesController;
|
||||
this.sizePicker = new pskl.widgets.SizePicker(this.onSizePickerChanged_.bind(this));
|
||||
};
|
||||
|
||||
pskl.utils.inherit(ns.GridApplicationController, pskl.controller.settings.AbstractSettingController);
|
||||
pskl.utils.inherit(ns.GridPreferencesController, pskl.controller.settings.AbstractSettingController);
|
||||
|
||||
ns.GridApplicationController.prototype.init = function () {
|
||||
ns.GridPreferencesController.prototype.init = function () {
|
||||
// Grid enabled
|
||||
var isEnabled = pskl.UserSettings.get(pskl.UserSettings.GRID_ENABLED);
|
||||
var enableGridCheckbox = document.querySelector('.enable-grid-checkbox');
|
||||
@ -66,20 +66,20 @@
|
||||
this.addEventListener(this.gridColorList, 'click', this.onGridColorClicked_.bind(this));
|
||||
};
|
||||
|
||||
ns.GridApplicationController.prototype.destroy = function () {
|
||||
ns.GridPreferencesController.prototype.destroy = function () {
|
||||
this.sizePicker.destroy();
|
||||
this.superclass.destroy.call(this);
|
||||
};
|
||||
|
||||
ns.GridApplicationController.prototype.onSizePickerChanged_ = function (size) {
|
||||
ns.GridPreferencesController.prototype.onSizePickerChanged_ = function (size) {
|
||||
pskl.UserSettings.set(pskl.UserSettings.GRID_WIDTH, size);
|
||||
};
|
||||
|
||||
ns.GridApplicationController.prototype.onEnableGridChange_ = function (evt) {
|
||||
ns.GridPreferencesController.prototype.onEnableGridChange_ = function (evt) {
|
||||
pskl.UserSettings.set(pskl.UserSettings.GRID_ENABLED, evt.currentTarget.checked);
|
||||
};
|
||||
|
||||
ns.GridApplicationController.prototype.onGridColorClicked_ = function (evt) {
|
||||
ns.GridPreferencesController.prototype.onGridColorClicked_ = function (evt) {
|
||||
var color = evt.target.dataset.color;
|
||||
if (color) {
|
||||
pskl.UserSettings.set(pskl.UserSettings.GRID_COLOR, color);
|
@ -1,14 +1,14 @@
|
||||
(function () {
|
||||
var ns = $.namespace('pskl.controller.settings.application');
|
||||
var ns = $.namespace('pskl.controller.settings.preferences');
|
||||
|
||||
ns.MainApplicationController = function (piskelController, applicationController) {
|
||||
ns.MiscPreferencesController = function (piskelController, preferencesController) {
|
||||
this.piskelController = piskelController;
|
||||
this.applicationController = applicationController;
|
||||
this.preferencesController = preferencesController;
|
||||
};
|
||||
|
||||
pskl.utils.inherit(ns.MainApplicationController, pskl.controller.settings.AbstractSettingController);
|
||||
pskl.utils.inherit(ns.MiscPreferencesController, pskl.controller.settings.AbstractSettingController);
|
||||
|
||||
ns.MainApplicationController.prototype.init = function () {
|
||||
ns.MiscPreferencesController.prototype.init = function () {
|
||||
|
||||
this.backgroundContainer = document.querySelector('.background-picker-wrapper');
|
||||
this.addEventListener(this.backgroundContainer, 'click', this.onBackgroundClick_);
|
||||
@ -42,7 +42,7 @@
|
||||
this.updateLayerOpacityText_(layerOpacityInput.value);
|
||||
};
|
||||
|
||||
ns.MainApplicationController.prototype.onBackgroundClick_ = function (evt) {
|
||||
ns.MiscPreferencesController.prototype.onBackgroundClick_ = function (evt) {
|
||||
var target = evt.target;
|
||||
var background = target.dataset.background;
|
||||
if (background) {
|
||||
@ -55,11 +55,11 @@
|
||||
}
|
||||
};
|
||||
|
||||
ns.MainApplicationController.prototype.onColorFormatChange_ = function (evt) {
|
||||
ns.MiscPreferencesController.prototype.onColorFormatChange_ = function (evt) {
|
||||
pskl.UserSettings.set(pskl.UserSettings.COLOR_FORMAT, evt.target.value);
|
||||
};
|
||||
|
||||
ns.MainApplicationController.prototype.onMaxFpsChange_ = function (evt) {
|
||||
ns.MiscPreferencesController.prototype.onMaxFpsChange_ = function (evt) {
|
||||
var target = evt.target;
|
||||
var fps = parseInt(target.value, 10);
|
||||
if (fps && !isNaN(fps)) {
|
||||
@ -69,7 +69,7 @@
|
||||
}
|
||||
};
|
||||
|
||||
ns.MainApplicationController.prototype.onLayerOpacityChange_ = function (evt) {
|
||||
ns.MiscPreferencesController.prototype.onLayerOpacityChange_ = function (evt) {
|
||||
var target = evt.target;
|
||||
var opacity = parseFloat(target.value);
|
||||
if (!isNaN(opacity)) {
|
||||
@ -81,7 +81,7 @@
|
||||
}
|
||||
};
|
||||
|
||||
ns.MainApplicationController.prototype.updateLayerOpacityText_ = function (opacity) {
|
||||
ns.MiscPreferencesController.prototype.updateLayerOpacityText_ = function (opacity) {
|
||||
var layerOpacityText = document.querySelector('.layer-opacity-text');
|
||||
layerOpacityText.innerHTML = (opacity * 1).toFixed(2);
|
||||
};
|
@ -1,14 +1,14 @@
|
||||
(function () {
|
||||
var ns = $.namespace('pskl.controller.settings.application');
|
||||
var ns = $.namespace('pskl.controller.settings.preferences');
|
||||
|
||||
ns.TileApplicationController = function (piskelController, applicationController) {
|
||||
ns.TilePreferencesController = function (piskelController, preferencesController) {
|
||||
this.piskelController = piskelController;
|
||||
this.applicationController = applicationController;
|
||||
this.preferencesController = preferencesController;
|
||||
};
|
||||
|
||||
pskl.utils.inherit(ns.TileApplicationController, pskl.controller.settings.AbstractSettingController);
|
||||
pskl.utils.inherit(ns.TilePreferencesController, pskl.controller.settings.AbstractSettingController);
|
||||
|
||||
ns.TileApplicationController.prototype.init = function () {
|
||||
ns.TilePreferencesController.prototype.init = function () {
|
||||
// Tile mode
|
||||
var tileMode = pskl.UserSettings.get(pskl.UserSettings.SEAMLESS_MODE);
|
||||
var tileModeCheckbox = document.querySelector('.tile-mode-checkbox');
|
||||
@ -25,11 +25,11 @@
|
||||
this.updateTileMaskOpacityText_(tileMaskOpacityInput.value);
|
||||
};
|
||||
|
||||
ns.TileApplicationController.prototype.onTileModeChange_ = function (evt) {
|
||||
ns.TilePreferencesController.prototype.onTileModeChange_ = function (evt) {
|
||||
pskl.UserSettings.set(pskl.UserSettings.SEAMLESS_MODE, evt.currentTarget.checked);
|
||||
};
|
||||
|
||||
ns.TileApplicationController.prototype.onTileMaskOpacityChange_ = function (evt) {
|
||||
ns.TilePreferencesController.prototype.onTileMaskOpacityChange_ = function (evt) {
|
||||
var target = evt.target;
|
||||
var opacity = parseFloat(target.value);
|
||||
if (!isNaN(opacity)) {
|
||||
@ -40,7 +40,7 @@
|
||||
}
|
||||
};
|
||||
|
||||
ns.TileApplicationController.prototype.updateTileMaskOpacityText_ = function (opacity) {
|
||||
ns.TilePreferencesController.prototype.updateTileMaskOpacityText_ = function (opacity) {
|
||||
var seamlessOpacityText = document.querySelector('.tile-mask-opacity-text');
|
||||
seamlessOpacityText.innerHTML = (opacity * 1).toFixed(2);
|
||||
};
|
@ -21,7 +21,7 @@
|
||||
RESIZE_SETTINGS: 'RESIZE_SETTINGS',
|
||||
COLOR_FORMAT: 'COLOR_FORMAT',
|
||||
TRANSFORM_SHOW_MORE: 'TRANSFORM_SHOW_MORE',
|
||||
APPLICATION_SETTINGS_TAB: 'APPLICATION_SETTINGS_TAB',
|
||||
PREFERENCES_TAB: 'PREFERENCES_TAB',
|
||||
KEY_TO_DEFAULT_VALUE_MAP_ : {
|
||||
'GRID_COLOR' : Constants.TRANSPARENT_COLOR,
|
||||
'GRID_ENABLED' : false,
|
||||
@ -49,7 +49,7 @@
|
||||
},
|
||||
COLOR_FORMAT: 'hex',
|
||||
TRANSFORM_SHOW_MORE: false,
|
||||
APPLICATION_SETTINGS_TAB: 'main',
|
||||
PREFERENCES_TAB: 'misc',
|
||||
},
|
||||
|
||||
/**
|
||||
|
@ -122,10 +122,10 @@
|
||||
|
||||
// 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/preferences/GridPreferencesController.js",
|
||||
"js/controller/settings/preferences/MiscPreferencesController.js",
|
||||
"js/controller/settings/preferences/TilePreferencesController.js",
|
||||
"js/controller/settings/PreferencesController.js",
|
||||
"js/controller/settings/exportimage/GifExportController.js",
|
||||
"js/controller/settings/exportimage/PngExportController.js",
|
||||
"js/controller/settings/exportimage/ZipExportController.js",
|
||||
|
@ -1,8 +1,8 @@
|
||||
<script type="text/html" id="templates/settings/application.html">
|
||||
<div class="settings-section settings-section-application">
|
||||
<script type="text/html" id="templates/settings/preferences.html">
|
||||
<div class="settings-section settings-section-preferences">
|
||||
<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="misc">Misc</div>
|
||||
<div class="tab-item" data-tab-id="grid">Grid</div>
|
||||
<div class="tab-item" data-tab-id="tile">Tile mode</div>
|
||||
</div>
|
@ -1,5 +1,5 @@
|
||||
<script type="text/html" id="templates/settings/application/grid.html">
|
||||
<div class="application-panel-grid">
|
||||
<script type="text/html" id="templates/settings/preferences/grid.html">
|
||||
<div class="preferences-panel-grid">
|
||||
<div class="settings-item">
|
||||
<label>
|
||||
Enable grid
|
@ -1,5 +1,5 @@
|
||||
<script type="text/html" id="templates/settings/application/main.html">
|
||||
<div class="application-panel-main">
|
||||
<script type="text/html" id="templates/settings/preferences/misc.html">
|
||||
<div class="preferences-panel-misc">
|
||||
<div class="settings-item">
|
||||
<label>Background</label>
|
||||
<div class="background-picker-wrapper">
|
@ -1,5 +1,5 @@
|
||||
<script type="text/html" id="templates/settings/application/tile.html">
|
||||
<div class="application-panel-tile">
|
||||
<script type="text/html" id="templates/settings/preferences/tile.html">
|
||||
<div class="preferences-panel-tile">
|
||||
<div class="settings-item">
|
||||
<label>
|
||||
Enable tile mode
|
@ -1,6 +1,6 @@
|
||||
(typeof exports != "undefined" ? exports : pskl_exports).tests = [
|
||||
'palettes/test-tiny-palettes.js',
|
||||
'settings/test-application-main.js',
|
||||
'settings/test-preferences-main.js',
|
||||
'settings/test-export-gif.js',
|
||||
'settings/test-export-gif-scale.js',
|
||||
'settings/test-export-gif-simple.js',
|
||||
|
@ -1,7 +1,7 @@
|
||||
/* globals casper, setPiskelFromGrid, isDrawerExpanded, getValue, isChecked,
|
||||
evalLine, waitForEvent, piskelFrameEqualsGrid, replaceFunction, setPiskelFromImageSrc */
|
||||
|
||||
casper.test.begin('Application main settings test', 11, function(test) {
|
||||
casper.test.begin('Preferences settings panel test', 11, function(test) {
|
||||
test.timeout = test.fail.bind(test, ['Test timed out']);
|
||||
|
||||
function onTestStart() {
|
||||
@ -9,22 +9,22 @@ casper.test.begin('Application main settings test', 11, function(test) {
|
||||
|
||||
test.assert(!isDrawerExpanded(), 'settings drawer is closed');
|
||||
|
||||
// Open application/user/preferences panel.
|
||||
test.assertDoesntExist('.expanded .settings-section-application', 'Check if application panel is closed');
|
||||
// Open preferences panel.
|
||||
test.assertDoesntExist('.expanded .settings-section-preferences', 'Check if preferences panel is closed');
|
||||
casper.click('[data-setting="user"]');
|
||||
|
||||
casper.waitForSelector('.expanded .settings-section-application', onApplicationPanelReady, test.timeout, 10000);
|
||||
casper.waitForSelector('.expanded .settings-section-preferences', onPreferencesPanelReady, test.timeout, 10000);
|
||||
}
|
||||
|
||||
function onApplicationPanelReady() {
|
||||
casper.echo('Application panel ready');
|
||||
function onPreferencesPanelReady() {
|
||||
casper.echo('Preferences panel ready');
|
||||
|
||||
test.assert(isDrawerExpanded(), 'settings drawer is expanded');
|
||||
test.assertExists('.expanded .settings-section-application',
|
||||
'Check if application panel is opened');
|
||||
test.assertExists('.expanded .settings-section-preferences',
|
||||
'Check if preferences panel is opened');
|
||||
|
||||
test.assertExists('.application-panel-main', 'Check if main tab is rendered');
|
||||
test.assertDoesntExist('.application-panel-grid', 'Check that grid tab is not rendered');
|
||||
test.assertExists('.preferences-panel-misc', 'Check if misc tab is rendered');
|
||||
test.assertDoesntExist('.preferences-panel-grid', 'Check that grid tab is not rendered');
|
||||
casper.click('[data-tab-id="grid"]');
|
||||
casper.waitForSelector('[data-tab-id="grid"]', onGridTabSelected, test.timeout, 10000);
|
||||
}
|
||||
@ -32,7 +32,7 @@ casper.test.begin('Application main settings test', 11, function(test) {
|
||||
function onGridTabSelected() {
|
||||
casper.echo('Grid tab ready');
|
||||
|
||||
test.assertDoesntExist('.application-panel-tile', 'Check that tile tab is not rendered');
|
||||
test.assertDoesntExist('.preferences-panel-tile', 'Check that tile tab is not rendered');
|
||||
casper.click('[data-tab-id="tile"]');
|
||||
casper.waitForSelector('[data-tab-id="tile"]', onTileTabSelected, test.timeout, 10000);
|
||||
}
|
||||
@ -49,12 +49,12 @@ casper.test.begin('Application main settings test', 11, function(test) {
|
||||
test.assert(!isDrawerExpanded(), 'settings drawer is closed');
|
||||
// Open the settings again to check if the last tab is selected.
|
||||
casper.click('[data-setting="user"]');
|
||||
casper.waitForSelector('.expanded .settings-section-application', onApplicationPanelExpandedAgain, test.timeout, 10000);
|
||||
casper.waitForSelector('.expanded .settings-section-preferences', onPreferencesPanelExpandedAgain, test.timeout, 10000);
|
||||
}
|
||||
|
||||
function onApplicationPanelExpandedAgain() {
|
||||
function onPreferencesPanelExpandedAgain() {
|
||||
casper.echo('Tile tab ready');
|
||||
test.assertExists('.application-panel-tile', 'Check if tile tab is selected');
|
||||
test.assertExists('.preferences-panel-tile', 'Check if tile tab is selected');
|
||||
|
||||
// Close the panel a second time.
|
||||
casper.click('[data-setting="user"]');
|
@ -18,16 +18,16 @@ casper.test.begin('Settings Test', 18, function(test) {
|
||||
test.assert(isDrawerExpanded(), 'settings drawer is expanded');
|
||||
test.assertExists('.settings-section-resize', 'Check if resize panel is opened');
|
||||
|
||||
// Open application settings panel.
|
||||
test.assertDoesntExist('.settings-section-application', 'Check if application settings panel is closed');
|
||||
// Open preferences settings panel.
|
||||
test.assertDoesntExist('.settings-section-preferences', 'Check if preferences settings panel is closed');
|
||||
this.click('[data-setting="user"]');
|
||||
|
||||
this.waitForSelector('.settings-section-application', onApplicationPanelReady, test.timeout, 10000);
|
||||
this.waitForSelector('.settings-section-preferences', onPreferencesPanelReady, test.timeout, 10000);
|
||||
}
|
||||
|
||||
function onApplicationPanelReady() {
|
||||
function onPreferencesPanelReady() {
|
||||
test.assert(isDrawerExpanded(), 'settings drawer is expanded');
|
||||
test.assertExists('.settings-section-application', 'Check if application settings panel is opened');
|
||||
test.assertExists('.settings-section-preferences', 'Check if preferences settings panel is opened');
|
||||
|
||||
// Open save panel.
|
||||
test.assertDoesntExist('.settings-section-save', 'Check if save panel is closed');
|
||||
|
Loading…
Reference in New Issue
Block a user