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/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/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/settings/SettingsController.js

@@ -1,14 +1,18 @@
 (function () {
-  var ns = $.namespace("pskl.controller");
+  var ns = $.namespace("pskl.controller.settings");
-  
+
   var settings = {
-    user : {
+    'user' : {
-      template : 'templates/settings-application.html',
+      template : 'templates/settings/application.html',
-      controller : ns.settings.ApplicationSettingsController
+      controller : ns.ApplicationSettingsController
     },
-    gif : {
+    'gif' : {
-      template : 'templates/settings-export-gif.html',
+      template : 'templates/settings/export-gif.html',
-      controller : ns.settings.GifExportController
+      controller : ns.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",

resources/import-icon.svg

@@ -0,0 +1,105 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="744.09448819"
+   height="1052.3622047"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   inkscape:export-filename="C:\Users\Julian\Desktop\import-icon.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90"
+   sodipodi:docname="New document 1">
+  <defs
+     id="defs4">
+    <linearGradient
+       id="linearGradient3776"
+       osb:paint="solid">
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop3778" />
+    </linearGradient>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="3.959798"
+     inkscape:cx="211.98241"
+     inkscape:cy="421.19661"
+     inkscape:document-units="px"
+     inkscape:current-layer="g3937"
+     showgrid="false"
+     inkscape:snap-bbox="true"
+     inkscape:object-nodes="false"
+     inkscape:object-paths="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1148"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       id="g3937"
+       transform="matrix(0.09331433,0,0,0.09331433,132.76469,588.24921)"
+       style="stroke:#ffffff;stroke-opacity:1">
+      <g
+         id="g3959"
+         inkscape:export-filename="C:\Users\Julian\Desktop\import-icon.png"
+         inkscape:export-xdpi="90"
+         inkscape:export-ydpi="90">
+        <rect
+           style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:30;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+           id="rect2985"
+           width="384.28558"
+           height="384.28564"
+           x="161.42857"
+           y="249.50504"
+           ry="45.714287" />
+        <g
+           transform="matrix(1.1961461,0,0,2.4281875,-3.7905251,90.097124)"
+           id="g3765"
+           style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-opacity:1">
+          <g
+             id="g3769"
+             style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-opacity:1">
+            <path
+               sodipodi:nodetypes="cccczscscc"
+               inkscape:connector-curvature="0"
+               d="m 400,142.55868 -100,56.94635 -100,-57.33935 60,0.1965 c 0,0 0,-84.96745 0,-107.61226 0,-22.64481 55.79903,-25.2405808 80.01042,-22.177879 38.98433,4.931455 46.17248,30.649944 46.17248,30.649944 0,0 -46.97367,-31.662831 -46.18302,0.888182 0.65678,27.039499 0,98.252013 0,98.252013 z"
+               style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:6;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+               id="rect3758" />
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

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>