diff --git a/css/settings.css b/css/settings.css index d872702a4..d2dd2440d 100644 --- a/css/settings.css +++ b/css/settings.css @@ -31,14 +31,14 @@ } .right-sticky-section.expanded .tool-icon { - margin-right: 1px; + padding-right: 1px; } .right-sticky-section .tool-icon.has-expanded-drawer { position: relative; background-color: #444; margin-right: 0; - padding-right: 1px; + padding-right: 2px; } .settings-section { @@ -81,7 +81,7 @@ top: -2px; right: -2px; bottom: -2px; - left: -2px; + left: -2px; } .background-picker:hover:after { diff --git a/css/tools.css b/css/tools.css index 3ee94ddf4..664221a56 100644 --- a/css/tools.css +++ b/css/tools.css @@ -25,7 +25,7 @@ .tool-icon:hover { background-color: #444; -} +} /* * Tool icons: @@ -209,6 +209,13 @@ position: relative; } +.tool-icon.import-icon { + background-image: url(../img/import-icon.png); + background-position: 10px 5px; + background-size: 26px; + position: relative; +} + .upload-cloud-icon .label { position: absolute; left: 0; diff --git a/img/import-icon.png b/img/import-icon.png new file mode 100644 index 000000000..ed3106560 Binary files /dev/null and b/img/import-icon.png differ diff --git a/index.html b/index.html index 50c1ddd67..d3b160cd7 100644 --- a/index.html +++ b/index.html @@ -45,8 +45,9 @@
- - + + +
diff --git a/js/app.js b/js/app.js index 529e201b4..76b5310e7 100644 --- a/js/app.js +++ b/js/app.js @@ -33,7 +33,7 @@ this.layersListController = new pskl.controller.LayersListController(this.piskelController); this.layersListController.init(); - this.settingsController = new pskl.controller.SettingsController(this.piskelController); + this.settingsController = new pskl.controller.settings.SettingsController(this.piskelController); this.settingsController.init(); this.selectionManager = new pskl.selection.SelectionManager(this.piskelController); diff --git a/js/controller/settings/ImportController.js b/js/controller/settings/ImportController.js new file mode 100644 index 000000000..64bbb10d7 --- /dev/null +++ b/js/controller/settings/ImportController.js @@ -0,0 +1,8 @@ +(function () { + var ns = $.namespace('pskl.controller.settings'); + + ns.ImportController = function () {}; + + ns.ImportController.prototype.init = function () {}; + +})(); \ No newline at end of file diff --git a/js/controller/SettingsController.js b/js/controller/settings/SettingsController.js similarity index 81% rename from js/controller/SettingsController.js rename to js/controller/settings/SettingsController.js index 611eebf2d..d56497c73 100644 --- a/js/controller/SettingsController.js +++ b/js/controller/settings/SettingsController.js @@ -1,14 +1,18 @@ (function () { - var ns = $.namespace("pskl.controller"); - + var ns = $.namespace("pskl.controller.settings"); + var settings = { - user : { - template : 'templates/settings-application.html', - controller : ns.settings.ApplicationSettingsController + 'user' : { + template : 'templates/settings/application.html', + controller : ns.ApplicationSettingsController + }, + 'gif' : { + template : 'templates/settings/export-gif.html', + controller : ns.GifExportController }, - gif : { - template : 'templates/settings-export-gif.html', - controller : ns.settings.GifExportController + 'import' : { + template : 'templates/settings/import.html', + controller : ns.ImportController } }; @@ -49,9 +53,9 @@ ns.SettingsController.prototype.loadSetting = function (setting) { this.drawerContainer.innerHTML = pskl.utils.Template.get(settings[setting].template); (new settings[setting].controller(this.piskelController)).init(); - + this.settingsContainer.addClass(EXP_DRAWER_CLS); - + $('.' + SEL_SETTING_CLS).removeClass(SEL_SETTING_CLS); $('[data-setting='+setting+']').addClass(SEL_SETTING_CLS); @@ -66,5 +70,5 @@ this.expanded = false; this.currentSetting = null; }; - + })(); \ No newline at end of file diff --git a/piskel-script-list.js b/piskel-script-list.js index a35ebdcf5..83be22618 100644 --- a/piskel-script-list.js +++ b/piskel-script-list.js @@ -49,9 +49,13 @@ exports.scripts = [ "js/controller/ToolController.js", "js/controller/PaletteController.js", "js/controller/NotificationController.js", + + // Settings sub-controllers "js/controller/settings/ApplicationSettingsController.js", "js/controller/settings/GifExportController.js", - "js/controller/SettingsController.js", + "js/controller/settings/ImportController.js", + // Settings controller + "js/controller/settings/SettingsController.js", // Services "js/service/LocalStorageService.js", diff --git a/resources/import-icon.svg b/resources/import-icon.svg new file mode 100644 index 000000000..10a61e4c8 --- /dev/null +++ b/resources/import-icon.svg @@ -0,0 +1,105 @@ + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + diff --git a/templates/settings.html b/templates/settings.html index 75087895f..af898973f 100644 --- a/templates/settings.html +++ b/templates/settings.html @@ -25,6 +25,13 @@ GIF +
+
+
+
+ Import stuff +
+
+ +
+ +
+ +
+
+
\ No newline at end of file