wbrawner/piskel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Issue #636 - rename all application-settings things to preferences-settings

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/css/settings-application.css
View file

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

8
src/index.html
View file

@ -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', {})

35
src/js/controller/settings/ApplicationSettingsController.js
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);
};
})();

35
src/js/controller/settings/PreferencesController.js Normal file
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);
};
})();

4
src/js/controller/settings/SettingsController.js
View file

@ -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',

18
src/js/controller/settings/application/GridApplicationController.js → src/js/controller/settings/preferences/GridPreferencesController.js
View file

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

20
src/js/controller/settings/application/MainApplicationController.js → src/js/controller/settings/preferences/MiscPreferencesController.js
View file

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

16
src/js/controller/settings/application/TileApplicationController.js → src/js/controller/settings/preferences/TilePreferencesController.js
View file

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

4
src/js/utils/UserSettings.js
View file

@ -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',
},
/**

8
src/piskel-script-list.js
View file

@ -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",

6
src/templates/settings/application.html → src/templates/settings/preferences.html
View file

@ -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>

4
src/templates/settings/application/grid.html → src/templates/settings/preferences/grid.html
View file

@ -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

4
src/templates/settings/application/main.html → src/templates/settings/preferences/misc.html
View file

@ -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">

4
src/templates/settings/application/tile.html → src/templates/settings/preferences/tile.html
View file

@ -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

2
test/casperjs/integration/IntegrationSuite.js
View file

@ -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',

28
test/casperjs/integration/settings/test-application-main.js → test/casperjs/integration/settings/test-preferences-main.js
View file

@ -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"]');

10
test/casperjs/integration/settings/test-settings-open-panels-on-click.js
View file

@ -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');