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:
Julian Descottes 2017-06-10 11:06:16 +02:00
parent 09ce6ff88f
commit c2dbddcf9f
17 changed files with 109 additions and 109 deletions

View File

@ -1,8 +1,8 @@
/*******************************/ /********************************/
/* Application Setting panel */ /* Preferences Settings panel */
/*******************************/ /********************************/
.settings-section-application { .settings-section-preferences {
height: 100%; height: 100%;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@ -109,12 +109,12 @@
border-color: gold; border-color: gold;
} }
.settings-section-application > .settings-title { .settings-section-preferences > .settings-title {
/* Override the default 10px margin bottom for this panel */ /* Override the default 10px margin bottom for this panel */
margin-bottom: 15px; margin-bottom: 15px;
} }
.settings-section-application .button-primary { .settings-section-preferences .button-primary {
margin-top: 10px; margin-top: 10px;
} }

View File

@ -83,10 +83,10 @@
@@include('templates/dialogs/unsupported-browser.html', {}) @@include('templates/dialogs/unsupported-browser.html', {})
<!-- settings-panel partials --> <!-- settings-panel partials -->
@@include('templates/settings/application.html', {}) @@include('templates/settings/preferences.html', {})
@@include('templates/settings/application/grid.html', {}) @@include('templates/settings/preferences/grid.html', {})
@@include('templates/settings/application/main.html', {}) @@include('templates/settings/preferences/misc.html', {})
@@include('templates/settings/application/tile.html', {}) @@include('templates/settings/preferences/tile.html', {})
@@include('templates/settings/resize.html', {}) @@include('templates/settings/resize.html', {})
@@include('templates/settings/save.html', {}) @@include('templates/settings/save.html', {})
@@include('templates/settings/import.html', {}) @@include('templates/settings/import.html', {})

View File

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

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

View File

@ -3,8 +3,8 @@
var settings = { var settings = {
'user' : { 'user' : {
template : 'templates/settings/application.html', template : 'templates/settings/preferences.html',
controller : ns.ApplicationSettingsController controller : ns.PreferencesController
}, },
'resize' : { 'resize' : {
template : 'templates/settings/resize.html', template : 'templates/settings/resize.html',

View File

@ -1,5 +1,5 @@
(function () { (function () {
var ns = $.namespace('pskl.controller.settings.application'); var ns = $.namespace('pskl.controller.settings.preferences');
var colorsMap = { var colorsMap = {
'transparent': Constants.TRANSPARENT_COLOR, 'transparent': Constants.TRANSPARENT_COLOR,
@ -18,15 +18,15 @@
'red': '#FF004D', 'red': '#FF004D',
}; };
ns.GridApplicationController = function (piskelController, applicationController) { ns.GridPreferencesController = function (piskelController, preferencesController) {
this.piskelController = piskelController; this.piskelController = piskelController;
this.applicationController = applicationController; this.preferencesController = preferencesController;
this.sizePicker = new pskl.widgets.SizePicker(this.onSizePickerChanged_.bind(this)); 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 // Grid enabled
var isEnabled = pskl.UserSettings.get(pskl.UserSettings.GRID_ENABLED); var isEnabled = pskl.UserSettings.get(pskl.UserSettings.GRID_ENABLED);
var enableGridCheckbox = document.querySelector('.enable-grid-checkbox'); var enableGridCheckbox = document.querySelector('.enable-grid-checkbox');
@ -66,20 +66,20 @@
this.addEventListener(this.gridColorList, 'click', this.onGridColorClicked_.bind(this)); this.addEventListener(this.gridColorList, 'click', this.onGridColorClicked_.bind(this));
}; };
ns.GridApplicationController.prototype.destroy = function () { ns.GridPreferencesController.prototype.destroy = function () {
this.sizePicker.destroy(); this.sizePicker.destroy();
this.superclass.destroy.call(this); 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); 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); 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; var color = evt.target.dataset.color;
if (color) { if (color) {
pskl.UserSettings.set(pskl.UserSettings.GRID_COLOR, color); pskl.UserSettings.set(pskl.UserSettings.GRID_COLOR, color);

View File

@ -1,14 +1,14 @@
(function () { (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.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.backgroundContainer = document.querySelector('.background-picker-wrapper');
this.addEventListener(this.backgroundContainer, 'click', this.onBackgroundClick_); this.addEventListener(this.backgroundContainer, 'click', this.onBackgroundClick_);
@ -42,7 +42,7 @@
this.updateLayerOpacityText_(layerOpacityInput.value); this.updateLayerOpacityText_(layerOpacityInput.value);
}; };
ns.MainApplicationController.prototype.onBackgroundClick_ = function (evt) { ns.MiscPreferencesController.prototype.onBackgroundClick_ = function (evt) {
var target = evt.target; var target = evt.target;
var background = target.dataset.background; var background = target.dataset.background;
if (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); 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 target = evt.target;
var fps = parseInt(target.value, 10); var fps = parseInt(target.value, 10);
if (fps && !isNaN(fps)) { 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 target = evt.target;
var opacity = parseFloat(target.value); var opacity = parseFloat(target.value);
if (!isNaN(opacity)) { 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'); var layerOpacityText = document.querySelector('.layer-opacity-text');
layerOpacityText.innerHTML = (opacity * 1).toFixed(2); layerOpacityText.innerHTML = (opacity * 1).toFixed(2);
}; };

View File

@ -1,14 +1,14 @@
(function () { (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.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 // Tile mode
var tileMode = pskl.UserSettings.get(pskl.UserSettings.SEAMLESS_MODE); var tileMode = pskl.UserSettings.get(pskl.UserSettings.SEAMLESS_MODE);
var tileModeCheckbox = document.querySelector('.tile-mode-checkbox'); var tileModeCheckbox = document.querySelector('.tile-mode-checkbox');
@ -25,11 +25,11 @@
this.updateTileMaskOpacityText_(tileMaskOpacityInput.value); 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); 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 target = evt.target;
var opacity = parseFloat(target.value); var opacity = parseFloat(target.value);
if (!isNaN(opacity)) { 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'); var seamlessOpacityText = document.querySelector('.tile-mask-opacity-text');
seamlessOpacityText.innerHTML = (opacity * 1).toFixed(2); seamlessOpacityText.innerHTML = (opacity * 1).toFixed(2);
}; };

View File

@ -21,7 +21,7 @@
RESIZE_SETTINGS: 'RESIZE_SETTINGS', RESIZE_SETTINGS: 'RESIZE_SETTINGS',
COLOR_FORMAT: 'COLOR_FORMAT', COLOR_FORMAT: 'COLOR_FORMAT',
TRANSFORM_SHOW_MORE: 'TRANSFORM_SHOW_MORE', TRANSFORM_SHOW_MORE: 'TRANSFORM_SHOW_MORE',
APPLICATION_SETTINGS_TAB: 'APPLICATION_SETTINGS_TAB', PREFERENCES_TAB: 'PREFERENCES_TAB',
KEY_TO_DEFAULT_VALUE_MAP_ : { KEY_TO_DEFAULT_VALUE_MAP_ : {
'GRID_COLOR' : Constants.TRANSPARENT_COLOR, 'GRID_COLOR' : Constants.TRANSPARENT_COLOR,
'GRID_ENABLED' : false, 'GRID_ENABLED' : false,
@ -49,7 +49,7 @@
}, },
COLOR_FORMAT: 'hex', COLOR_FORMAT: 'hex',
TRANSFORM_SHOW_MORE: false, TRANSFORM_SHOW_MORE: false,
APPLICATION_SETTINGS_TAB: 'main', PREFERENCES_TAB: 'misc',
}, },
/** /**

View File

@ -122,10 +122,10 @@
// Settings sub-controllers // Settings sub-controllers
"js/controller/settings/AbstractSettingController.js", "js/controller/settings/AbstractSettingController.js",
"js/controller/settings/application/GridApplicationController.js", "js/controller/settings/preferences/GridPreferencesController.js",
"js/controller/settings/application/MainApplicationController.js", "js/controller/settings/preferences/MiscPreferencesController.js",
"js/controller/settings/application/TileApplicationController.js", "js/controller/settings/preferences/TilePreferencesController.js",
"js/controller/settings/ApplicationSettingsController.js", "js/controller/settings/PreferencesController.js",
"js/controller/settings/exportimage/GifExportController.js", "js/controller/settings/exportimage/GifExportController.js",
"js/controller/settings/exportimage/PngExportController.js", "js/controller/settings/exportimage/PngExportController.js",
"js/controller/settings/exportimage/ZipExportController.js", "js/controller/settings/exportimage/ZipExportController.js",

View File

@ -1,8 +1,8 @@
<script type="text/html" id="templates/settings/application.html"> <script type="text/html" id="templates/settings/preferences.html">
<div class="settings-section settings-section-application"> <div class="settings-section settings-section-preferences">
<div class="settings-title">Settings</div> <div class="settings-title">Settings</div>
<div class="tab-list"> <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="grid">Grid</div>
<div class="tab-item" data-tab-id="tile">Tile mode</div> <div class="tab-item" data-tab-id="tile">Tile mode</div>
</div> </div>

View File

@ -1,5 +1,5 @@
<script type="text/html" id="templates/settings/application/grid.html"> <script type="text/html" id="templates/settings/preferences/grid.html">
<div class="application-panel-grid"> <div class="preferences-panel-grid">
<div class="settings-item"> <div class="settings-item">
<label> <label>
Enable grid Enable grid

View File

@ -1,5 +1,5 @@
<script type="text/html" id="templates/settings/application/main.html"> <script type="text/html" id="templates/settings/preferences/misc.html">
<div class="application-panel-main"> <div class="preferences-panel-misc">
<div class="settings-item"> <div class="settings-item">
<label>Background</label> <label>Background</label>
<div class="background-picker-wrapper"> <div class="background-picker-wrapper">

View File

@ -1,5 +1,5 @@
<script type="text/html" id="templates/settings/application/tile.html"> <script type="text/html" id="templates/settings/preferences/tile.html">
<div class="application-panel-tile"> <div class="preferences-panel-tile">
<div class="settings-item"> <div class="settings-item">
<label> <label>
Enable tile mode Enable tile mode

View File

@ -1,6 +1,6 @@
(typeof exports != "undefined" ? exports : pskl_exports).tests = [ (typeof exports != "undefined" ? exports : pskl_exports).tests = [
'palettes/test-tiny-palettes.js', 'palettes/test-tiny-palettes.js',
'settings/test-application-main.js', 'settings/test-preferences-main.js',
'settings/test-export-gif.js', 'settings/test-export-gif.js',
'settings/test-export-gif-scale.js', 'settings/test-export-gif-scale.js',
'settings/test-export-gif-simple.js', 'settings/test-export-gif-simple.js',

View File

@ -1,7 +1,7 @@
/* globals casper, setPiskelFromGrid, isDrawerExpanded, getValue, isChecked, /* globals casper, setPiskelFromGrid, isDrawerExpanded, getValue, isChecked,
evalLine, waitForEvent, piskelFrameEqualsGrid, replaceFunction, setPiskelFromImageSrc */ 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']); test.timeout = test.fail.bind(test, ['Test timed out']);
function onTestStart() { function onTestStart() {
@ -9,22 +9,22 @@ casper.test.begin('Application main settings test', 11, function(test) {
test.assert(!isDrawerExpanded(), 'settings drawer is closed'); test.assert(!isDrawerExpanded(), 'settings drawer is closed');
// Open application/user/preferences panel. // Open preferences panel.
test.assertDoesntExist('.expanded .settings-section-application', 'Check if application panel is closed'); test.assertDoesntExist('.expanded .settings-section-preferences', 'Check if preferences panel is closed');
casper.click('[data-setting="user"]'); 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() { function onPreferencesPanelReady() {
casper.echo('Application panel ready'); casper.echo('Preferences panel ready');
test.assert(isDrawerExpanded(), 'settings drawer is expanded'); test.assert(isDrawerExpanded(), 'settings drawer is expanded');
test.assertExists('.expanded .settings-section-application', test.assertExists('.expanded .settings-section-preferences',
'Check if application panel is opened'); 'Check if preferences panel is opened');
test.assertExists('.application-panel-main', 'Check if main tab is rendered'); test.assertExists('.preferences-panel-misc', 'Check if misc tab is rendered');
test.assertDoesntExist('.application-panel-grid', 'Check that grid tab is not rendered'); test.assertDoesntExist('.preferences-panel-grid', 'Check that grid tab is not rendered');
casper.click('[data-tab-id="grid"]'); casper.click('[data-tab-id="grid"]');
casper.waitForSelector('[data-tab-id="grid"]', onGridTabSelected, test.timeout, 10000); 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() { function onGridTabSelected() {
casper.echo('Grid tab ready'); 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.click('[data-tab-id="tile"]');
casper.waitForSelector('[data-tab-id="tile"]', onTileTabSelected, test.timeout, 10000); 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'); test.assert(!isDrawerExpanded(), 'settings drawer is closed');
// Open the settings again to check if the last tab is selected. // Open the settings again to check if the last tab is selected.
casper.click('[data-setting="user"]'); 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'); 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. // Close the panel a second time.
casper.click('[data-setting="user"]'); casper.click('[data-setting="user"]');

View File

@ -18,16 +18,16 @@ casper.test.begin('Settings Test', 18, function(test) {
test.assert(isDrawerExpanded(), 'settings drawer is expanded'); test.assert(isDrawerExpanded(), 'settings drawer is expanded');
test.assertExists('.settings-section-resize', 'Check if resize panel is opened'); test.assertExists('.settings-section-resize', 'Check if resize panel is opened');
// Open application settings panel. // Open preferences settings panel.
test.assertDoesntExist('.settings-section-application', 'Check if application settings panel is closed'); test.assertDoesntExist('.settings-section-preferences', 'Check if preferences settings panel is closed');
this.click('[data-setting="user"]'); 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.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. // Open save panel.
test.assertDoesntExist('.settings-section-save', 'Check if save panel is closed'); test.assertDoesntExist('.settings-section-save', 'Check if save panel is closed');