Import panel:

- added pskl.controller.settings.ImportController (empty atm)
- moved SettingsController under settings namespace
- move settings templates in a dedicated folder
- created import icon (svg is in the resources folder)
- added import button in right-layer

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 {

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;

index.html

@@ -45,8 +45,9 @@
         <iframe src="templates/settings.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
         <div class="drawer vertical-centerer">
           <div class="drawer-content" id="drawer-container">
-            <iframe src="templates/settings-application.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
-            <iframe src="templates/settings-export-gif.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+            <iframe src="templates/settings/application.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
+            <iframe src="templates/settings/export-gif.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+            <iframe src="templates/settings/import.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
           </div>
         </div>
       </div>

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

js/controller/settings/ImportController.js

@@ -0,0 +1,8 @@
+(function () {
+  var ns = $.namespace('pskl.controller.settings');
+
+  ns.ImportController = function () {};
+
+  ns.ImportController.prototype.init = function () {};
+
+})();

js/controller/SettingsController.js → 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;
   };
-  
+
 })();

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

templates/settings.html

@@ -25,6 +25,13 @@
     <span class="label">GIF</span>
   </div>
 
+  <div
+    data-setting="import"
+    class="tool-icon import-icon"
+    title="Import an existing picture"
+    rel="tooltip" data-placement="left">
+  </div>
+
   <div
     class="tool-icon upload-cloud-icon"
     title="Upload as a spritesheet PNG"

templates/settings/import.html

@@ -0,0 +1,16 @@
+<div class="settings-section">
+  <div class="settings-title">
+    Import stuff
+  </div>
+  <div class="settings-item">
+    <label>PASTE DA URL</label>
+    <form action="" method="POST" name="gif-export-upload-form">
+      <script type="text/template" id="export-gif-radio-template">
+          <label style="display:block"><input type="radio" name="gif-dpi" value="{{value}}"/>
+          {{label}}</label>
+      </script>
+      <div class="gif-export-radio-group"></div>
+      <input type="submit" class="export-gif-upload-button" value="Upload" />
+    </form>
+  </div>
+</div>