test resize panel

css/fonts/icomoon.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="512">
+<font-face units-per-em="512" ascent="480" descent="-32" />
+<missing-glyph horiz-adv-x="512" />
+<glyph unicode="&#x20;" d="" horiz-adv-x="256" />
+<glyph unicode="&#xe600;" d="M256 192l128 128h-96v128h-64v-128h-96zM372.363 244.364l-35.87-35.871 130.040-48.493-210.533-78.509-210.533 78.509 130.040 48.493-35.871 35.871-139.636-52.364v-128l256-96 256 96v128z" />
+<glyph unicode="&#xe601;" d="M327.755 416.174l-24.759-21.971-1.481 8.030-14.159-4.099v-27.379l0.914-19.404 26.988 23.949c-0.347-4.934-0.51-10.141-0.166-15.921 0.543-9.151 3.055-17.374 8.057-23.811s11.74-10.557 19.211-13.967c14.942-6.822 33.56-18.012 56.377-36.978 43.203-35.907 48.548-53.828 56.334-85.404 7.412-41.045-4.368-70.606-21.368-95.68-12.144-17.918-27.179-33.815-60.225-40.518s-63.992-8.866-86.123-8.866v-22.304c23.555 0 55.469 2.195 90.553 9.313s69.693 18.531 90.832 40.649c22.885 23.941 44.76 67.328 31.672 135.162l-0.055 0.223c-5.829 27.055-23.529 67.689-92.729 97.775-28.624 12.445-44.153 20.477-55.829 25.809-5.837 2.666-9.197 6.119-11.030 8.475s-3.034 5.246-3.401 11.43c-0.827 13.918 1.198 24.507 3.318 31.505s3.904 9.702 3.904 9.702l-16.84 14.276zM303.444 372.291c0 0-16.082 4.204-16.082-1.173 0-29.786-0.407-35.048 9.808-56.095s23.399-42.701 43.302-61.078c37.637-34.753 34.591-40.033 40.837-57.911 2.3-6.582 3.27-21.87 1.673-33.875s-6.074-27.851-11.959-36.856c-9.25-14.152-16.702-28.62-34.395-38.447-18.488-10.269-34.432-12.486-49.265-12.486v-22.304c18.579 0 39.728 4.476 62.060 13.494s43.831 22.548 56.848 42.462c8.719 13.341 17.897 33.653 19.924 49.887s6.051 30.237-4.534 52.106c-16.294 33.661-37.961 43.77-64.413 66.162-16.375 13.863-31.099 30.183-40.029 48.578s-13.219 37.077-13.772 47.536zM300.488 357.961l-13.128-1.2c0.667-12.589 0-38.494 0-63.093 0-11.679 1.942-25.867 3.768-35.663 3.517-18.873 9.378-31.122 13.056-42.974 2.921-9.421 6.195-22.61 8.376-27.676 5.897-13.728 6.717-30.505 0.674-49.822-6.121-19.563-15.663-38.313-31.608-44.469l5.736-18.915c23.072 8.907 55.35 34.019 64.177 62.238 7.959 25.431 2.932 48.415-4.32 65.295-4.397 10.236-8.579 17.284-13.263 25.818-5.764 10.5-18.011 23.661-21.517 34.382-3.19 9.75-6.983 21.54-7.96 33.601-1.955 24.118-3.242 48.871-3.986 62.479zM248.405 416.148l24.758-21.971 1.481 8.029 14.159-4.099v-27.379l-0.914-19.403-26.988 23.949c0.347-4.933 0.51-10.141 0.166-15.92-0.543-9.152 0.548-18.276-4.452-24.711s-10.838-15.063-18.308-18.475c-14.942-6.823-32.661-18.010-55.476-36.978-43.203-35.907-42.239-45.718-50.025-77.294-2.905-41.947-5.284-41.359 4.244-70.447 5.757-17.579 19.97-34.716 53.016-50.429 30.453-14.481 76.609-26.889 98.737-26.889v-22.304c-23.555 0-55.469 2.195-90.553 9.309s-69.692 18.531-90.832 40.649c-22.885 23.94-44.76 67.329-31.671 135.162l0.055 0.223c5.829 27.055 23.529 67.689 92.731 97.775 28.623 12.445 44.153 20.477 55.826 25.808 5.839 2.665 9.197 6.119 11.034 8.474s3.034 5.246 3.401 11.43c0.827 13.918-1.198 24.507-3.318 31.505s-3.903 9.702-3.903 9.702l16.84 14.274zM281.987 374.814l8.031-11.395c-0.667-12.589 0-38.494 0-63.093 0-11.68 3.154-27.141 1.329-36.938-3.517-18.873-3.009-25.387-6.684-37.239-2.921-9.421-6.195-25.794-8.376-30.864-5.897-13.728-7.354-45.161-1.31-64.478 6.121-19.563 9.928-44.689 19.498-59.125l3.56-36.712c-21.161 28.662-42.512 61.597-51.342 89.814-7.958 25.431-7.393 70.082-0.139 86.961 4.398 10.236 8.578 20.472 13.263 29.004 5.764 10.5 9.043 20.958 11.649 32.578 2.245 10.010 6.192 26.31 7.168 38.372 1.955 24.121 2.604 49.509 3.351 63.117z" horiz-adv-x="576" />
+<glyph unicode="&#xe602;" d="M256 384c-111.659 0-208.441-65.021-256-160 47.559-94.979 144.341-160 256-160 111.657 0 208.439 65.021 256 160-47.558 94.979-144.343 160-256 160zM382.225 299.148c30.081-19.187 55.571-44.887 74.717-75.148-19.146-30.261-44.637-55.961-74.718-75.149-37.797-24.108-81.445-36.851-126.224-36.851-44.78 0-88.428 12.743-126.225 36.852-30.080 19.186-55.57 44.886-74.717 75.148 19.146 30.262 44.637 55.962 74.717 75.148 1.959 1.25 3.938 2.461 5.929 3.65-4.979-13.664-7.704-28.411-7.704-43.798 0-70.692 57.308-128 128-128s128 57.308 128 128c0 15.387-2.725 30.134-7.704 43.799 1.99-1.189 3.969-2.401 5.929-3.651zM256 275c0-26.51-21.49-48-48-48s-48 21.49-48 48 21.49 48 48 48 48-21.49 48-48z" />
+<glyph unicode="&#xe603;" d="M256 448c-70.692 0-134.688-28.66-181.016-74.989l-74.984 74.989v-192h192l-71.766 71.761c34.748 34.746 82.746 56.239 135.766 56.239 106.034 0 192-85.962 192-192 0-57.348-25.146-108.818-65.009-144l42.333-48c53.151 46.908 86.676 115.538 86.676 192 0 141.385-114.615 256-256 256z" />
+<glyph unicode="&#xe604;" d="M0 192c0-76.462 33.524-145.092 86.675-192l42.333 48c-39.863 35.182-65.008 86.652-65.008 144 0 106.038 85.965 192 192 192 53.021 0 101.019-21.493 135.765-56.239l-71.765-71.761h192v192l-74.985-74.989c-46.327 46.329-110.322 74.989-181.015 74.989-141.385 0-256-114.615-256-256z" />
+<glyph unicode="&#xe605;" d="M0 288h512v192zM512 0v192h-512z" />
+<glyph unicode="&#xe606;" d="M288 480v-512h192zM0-32h192v512z" />
+<glyph unicode="&#xe607;" d="M96-32h320l32 352h-384zM320 416v64h-128v-64h-160v-96l32 32h384l32-32v96h-160zM288 416h-64v32h64v-32z" />
+<glyph unicode="&#xe608;" d="M400 416h-288c-26.51 0-48-21.49-48-48v-16h384v16c0 26.51-21.49 48-48 48zM316.16 448l7.058-50.5h-134.436l7.057 50.5h120.321zM320 480h-128c-13.2 0-25.495-10.696-27.321-23.769l-9.357-66.962c-1.827-13.073 7.478-23.769 20.678-23.769h160c13.2 0 22.505 10.696 20.679 23.769l-9.357 66.962c-1.827 13.073-14.122 23.769-27.322 23.769v0zM408 320h-304c-17.6 0-30.696-14.341-29.103-31.869l26.206-288.263c1.593-17.527 17.297-31.868 34.897-31.868h240c17.6 0 33.304 14.341 34.897 31.868l26.205 288.263c1.594 17.528-11.502 31.869-29.102 31.869zM192 32h-48l-16 224h64v-224zM288 32h-64v224h64v-224zM368 32h-48v224h64l-16-224z" />
+<glyph unicode="&#xe609;" d="M448 224h-80l-112-112-112 112h-80l-64-128v-32h512v32l-64 128zM0 32h512v-32h-512v32zM288 320v128h-64v-128h-112l144-144 144 144h-112z" />
+<glyph unicode="&#xe60a;" d="M0 272v-96c0-8.836 7.164-16 16-16h480c8.836 0 16 7.164 16 16v96c0 8.836-7.164 16-16 16h-480c-8.836 0-16-7.164-16-16z" />
+<glyph unicode="&#xe60b;" d="M496 288h-176v176c0 8.836-7.164 16-16 16h-96c-8.836 0-16-7.164-16-16v-176h-176c-8.836 0-16-7.164-16-16v-96c0-8.836 7.164-16 16-16h176v-176c0-8.836 7.164-16 16-16h96c8.836 0 16 7.164 16 16v176h176c8.836 0 16 7.164 16 16v96c0 8.836-7.164 16-16 16z" />
+<glyph unicode="&#xe60c;" d="M256.001 480l-256.001-256h160v-255.999l192-0.001v256h160z" />
+<glyph unicode="&#xe60d;" d="M256-32l256 256h-160v255.999l-192 0.001v-256h-160z" />
+<glyph unicode="&#xe60e;" d="M438.627 278.627l-160 160c-12.496 12.497-32.757 12.497-45.254 0l-160-160c-12.497-12.497-12.497-32.758 0-45.255 12.497-12.498 32.758-12.498 45.255 0l105.372 105.373v-306.745c0-17.673 14.327-32 32-32s32 14.327 32 32v306.745l105.373-105.373c6.248-6.248 14.438-9.372 22.627-9.372s16.379 3.124 22.627 9.373c12.497 12.497 12.497 32.757 0 45.254z" />
+<glyph unicode="&#xe60f;" d="M73.373 169.373l160-160c12.496-12.497 32.758-12.497 45.255 0l160 160c12.496 12.497 12.496 32.758 0 45.255-12.497 12.497-32.758 12.497-45.255 0l-105.373-105.373v306.745c0 17.673-14.327 32-32 32s-32-14.327-32-32v-306.745l-105.373 105.373c-6.248 6.248-14.438 9.372-22.627 9.372s-16.379-3.124-22.627-9.372c-12.497-12.497-12.497-32.758 0-45.255z" />
+<glyph unicode="&#xe610;" d="M432 480c44.182 0 80-35.817 80-80 0-18.010-5.955-34.629-16-48l-32-32-112 112 32 32c13.371 10.045 29.989 16 48 16zM32 112l-32-144 144 32 296 296-112 112-296-296zM357.789 298.211l-224-224-27.578 27.578 224 224 27.578-27.578z" />
+<glyph unicode="&#xe611;" d="M507.331 68.67c-0.002 0.002-0.004 0.004-0.006 0.005l-155.322 155.325 155.322 155.325c0.002 0.002 0.004 0.003 0.006 0.005 1.672 1.673 2.881 3.627 3.656 5.708 2.123 5.688 0.912 12.341-3.662 16.915l-73.373 73.373c-4.574 4.573-11.225 5.783-16.914 3.66-2.080-0.775-4.035-1.984-5.709-3.655 0-0.002-0.002-0.003-0.004-0.005l-155.324-155.326-155.324 155.325c-0.002 0.002-0.003 0.003-0.005 0.005-1.673 1.671-3.627 2.88-5.707 3.655-5.69 2.124-12.341 0.913-16.915-3.66l-73.374-73.374c-4.574-4.574-5.784-11.226-3.661-16.914 0.776-2.080 1.985-4.036 3.656-5.708 0.002-0.001 0.003-0.003 0.005-0.005l155.325-155.324-155.325-155.326c-0.001-0.002-0.003-0.003-0.004-0.005-1.671-1.673-2.88-3.627-3.657-5.707-2.124-5.688-0.913-12.341 3.661-16.915l73.374-73.373c4.575-4.574 11.226-5.784 16.915-3.661 2.080 0.776 4.035 1.985 5.708 3.656 0.001 0.002 0.003 0.003 0.005 0.005l155.324 155.325 155.324-155.325c0.002-0.001 0.004-0.003 0.006-0.004 1.674-1.672 3.627-2.881 5.707-3.657 5.689-2.123 12.342-0.913 16.914 3.661l73.373 73.374c4.574 4.574 5.785 11.227 3.662 16.915-0.776 2.080-1.985 4.034-3.657 5.707z" />
+</font></defs></svg>

index.html

@@ -44,6 +44,7 @@
       <div class="column right-column">
         <iframe src="templates/preview.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
         <iframe src="templates/layers-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+        <iframe src="templates/transformations.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
         <iframe src="templates/palettes-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
         <div class="pull-bottom cursor-coordinates"></div>
       </div>
@@ -67,17 +68,19 @@
 
   <div id="dialog-container-wrapper">
     <div id="dialog-container">
-      <iframe src="templates/dialogs/manage-palettes.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+      <iframe src="templates/dialogs/create-palette.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
       <iframe src="templates/dialogs/import-image.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
       <iframe src="templates/dialogs/browse-local.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
     </div>
   </div>
 
   <iframe src="templates/cheatsheet.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+  <iframe src="templates/misc-templates.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+
+  <script type="text/javascript" src="piskel-boot.js"></script>
   <!--body-main-end-->
   <!-- the comment above indicates the end of the markup reused by the editor integrated in piskelapp.com -->
   <!-- do not delete, do not move :) -->
 
-  <script type="text/javascript" src="piskel-boot-0.1.0.js"></script>
 </body>
 </html>

piskel-boot-2015-02-19-01-09.js

@@ -0,0 +1,86 @@
+(function () {
+
+  /**
+   * See @Gruntfile.js => after build, -2015-02-19-01-09 is replaced by the build version
+   */
+  var version = '-2015-02-19-01-09';
+  var versionHasNotBeenReplaced = version.indexOf('@@') === 0;
+  if (versionHasNotBeenReplaced)  {
+    version = '';
+  }
+
+  window.onPiskelReady = function () {
+    var loadingMask = document.getElementById('loading-mask');
+    loadingMask.style.opacity = 0;
+    window.setTimeout(function () {loadingMask.parentNode.removeChild(loadingMask);}, 600);
+    pskl.app.init();
+    // cleanup
+    delete window.pskl_exports;
+    delete window.loadDebugScripts;
+    delete window.done;
+  };
+
+  var prefixPath = function (path) {
+    if (window.pskl && window.pskl.appEngineToken_) {
+      return '../' + path;
+    } else {
+      return path;
+    }
+  };
+
+  var loadScript = function (src, callback) {
+    src = prefixPath(src);
+    var script = window.document.createElement('script');
+    script.setAttribute('src',src);
+    script.setAttribute('onload',callback);
+    window.document.body.appendChild(script);
+  };
+
+  var loadStyle = function (src) {
+    src = prefixPath(src);
+    var link = document.createElement('link');
+    link.setAttribute('href', src);
+    link.setAttribute('rel', 'stylesheet');
+    link.setAttribute('type', 'text/css');
+    document.head.appendChild(link);
+  };
+
+  if (window.location.href.indexOf('debug') != -1) {
+    window.pskl_exports = {};
+    var scriptIndex = 0;
+    window.loadNextScript = function () {
+      if (scriptIndex == window.pskl_exports.scripts.length) {
+        window.onPiskelReady();
+      } else {
+        loadScript(window.pskl_exports.scripts[scriptIndex], 'loadNextScript()');
+        scriptIndex ++;
+      }
+    };
+    loadScript('piskel-script-list.js', 'loadNextScript()');
+
+    window.loadStyles = function () {
+      var styles = window.pskl_exports.styles;
+      for (var i = 0 ; i < styles.length ; i++) {
+        loadStyle(styles[i]);
+      }
+    };
+    loadScript('piskel-style-list.js', 'loadStyles()');
+  } else {
+    var script;
+    if (window.location.href.indexOf('pack') != -1) {
+      script = 'js/piskel-packaged' + version + '.js';
+    } else {
+      script = 'js/piskel-packaged-min' + version + '.js';
+    }
+    loadStyle('css/piskel-style-packaged' + version + '.css');
+
+    var loaderInterval = window.setInterval(function () {
+      if (document.querySelectorAll('[data-iframe-loader]').length === 0) {
+        window.clearInterval(loaderInterval);
+        loadScript(script, 'onPiskelReady()');
+      } else {
+        window.console.log('waiting for templates to load ....');
+      }
+    }, 100);
+  }
+})();

piskel-boot.js

@@ -0,0 +1,86 @@
+(function () {
+
+  /**
+   * See @Gruntfile.js => after build, -2015-02-19-01-09 is replaced by the build version
+   */
+  var version = '-2015-02-19-01-09';
+  var versionHasNotBeenReplaced = version.indexOf('@@') === 0;
+  if (versionHasNotBeenReplaced)  {
+    version = '';
+  }
+
+  window.onPiskelReady = function () {
+    var loadingMask = document.getElementById('loading-mask');
+    loadingMask.style.opacity = 0;
+    window.setTimeout(function () {loadingMask.parentNode.removeChild(loadingMask);}, 600);
+    pskl.app.init();
+    // cleanup
+    delete window.pskl_exports;
+    delete window.loadDebugScripts;
+    delete window.done;
+  };
+
+  var prefixPath = function (path) {
+    if (window.pskl && window.pskl.appEngineToken_) {
+      return '../' + path;
+    } else {
+      return path;
+    }
+  };
+
+  var loadScript = function (src, callback) {
+    src = prefixPath(src);
+    var script = window.document.createElement('script');
+    script.setAttribute('src',src);
+    script.setAttribute('onload',callback);
+    window.document.body.appendChild(script);
+  };
+
+  var loadStyle = function (src) {
+    src = prefixPath(src);
+    var link = document.createElement('link');
+    link.setAttribute('href', src);
+    link.setAttribute('rel', 'stylesheet');
+    link.setAttribute('type', 'text/css');
+    document.head.appendChild(link);
+  };
+
+  if (window.location.href.indexOf('debug') != -1) {
+    window.pskl_exports = {};
+    var scriptIndex = 0;
+    window.loadNextScript = function () {
+      if (scriptIndex == window.pskl_exports.scripts.length) {
+        window.onPiskelReady();
+      } else {
+        loadScript(window.pskl_exports.scripts[scriptIndex], 'loadNextScript()');
+        scriptIndex ++;
+      }
+    };
+    loadScript('piskel-script-list.js', 'loadNextScript()');
+
+    window.loadStyles = function () {
+      var styles = window.pskl_exports.styles;
+      for (var i = 0 ; i < styles.length ; i++) {
+        loadStyle(styles[i]);
+      }
+    };
+    loadScript('piskel-style-list.js', 'loadStyles()');
+  } else {
+    var script;
+    if (window.location.href.indexOf('pack') != -1) {
+      script = 'js/piskel-packaged' + version + '.js';
+    } else {
+      script = 'js/piskel-packaged-min' + version + '.js';
+    }
+    loadStyle('css/piskel-style-packaged' + version + '.css');
+
+    var loaderInterval = window.setInterval(function () {
+      if (document.querySelectorAll('[data-iframe-loader]').length === 0) {
+        window.clearInterval(loaderInterval);
+        loadScript(script, 'onPiskelReady()');
+      } else {
+        window.console.log('waiting for templates to load ....');
+      }
+    }, 100);
+  }
+})();

piskelapp-partials/main-partial.html

@@ -0,0 +1,52 @@
+
+<div id="main-wrapper" class="main-wrapper">
+  <iframe src="../templates-2015-02-19-01-09/drawing-tools.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+
+  <div id="column-wrapper" class="column-wrapper">
+    <div class='column left-column'>
+      <iframe src="../templates-2015-02-19-01-09/frames-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+    </div>
+
+    <div class='column main-column'>
+      <div id="drawing-canvas-container" class="drawing-canvas-container canvas-container">
+        <div class="canvas-background"></div>
+      </div>
+    </div>
+
+    <div class="column right-column">
+      <iframe src="../templates-2015-02-19-01-09/preview.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+      <iframe src="../templates-2015-02-19-01-09/layers-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+      <iframe src="../templates-2015-02-19-01-09/transformations.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+      <iframe src="../templates-2015-02-19-01-09/palettes-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+      <div class="pull-bottom cursor-coordinates"></div>
+    </div>
+  </div>
+
+  <div id="application-action-section" data-pskl-controller="settings" class="sticky-section right-sticky-section">
+    <div class="sticky-section-wrap">
+      <iframe src="../templates-2015-02-19-01-09/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-2015-02-19-01-09/settings/application.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
+          <iframe src="../templates-2015-02-19-01-09/settings/resize.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
+          <iframe src="../templates-2015-02-19-01-09/settings/save.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+          <iframe src="../templates-2015-02-19-01-09/settings/import.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+          <iframe src="../templates-2015-02-19-01-09/settings/export.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div id="dialog-container-wrapper">
+  <div id="dialog-container">
+    <iframe src="../templates-2015-02-19-01-09/dialogs/create-palette.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+    <iframe src="../templates-2015-02-19-01-09/dialogs/import-image.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+    <iframe src="../templates-2015-02-19-01-09/dialogs/browse-local.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+  </div>
+</div>
+
+<iframe src="../templates-2015-02-19-01-09/cheatsheet.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+<iframe src="../templates-2015-02-19-01-09/misc-templates.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+
+<script type="text/javascript" src="../piskel-boot-2015-02-19-01-09.js"></script>

templates/dialogs/browse-local.html

@@ -1,7 +1,7 @@
 <div class="dialog-wrapper">
   <h3 class="dialog-head">
     Browse Local Piskels
-    <span class="palette-manager-close dialog-close">X</span>
+    <span class="dialog-close">X</span>
   </h3>
   <div style="padding:10px 20px; font-size:1.5em">
     <table class="local-piskel-list">

templates/dialogs/create-palette.html

@@ -0,0 +1,83 @@
+<div class="dialog-wrapper">
+  <h3 class="dialog-head">
+    <span class="dialog-title">Create palette</span>
+    <span class="dialog-close">X</span>
+  </h3>
+  <div class="dialog-create-palette" style="font-size:1.3em">
+      <div class="create-palette-section form-section">
+        <span class="create-palette-name-label">Name</span>
+        <input type="text" class="textfield create-palette-name-input" name="palette-name" placeholder="palette name ..."/>
+        <div class="create-palette-import-section">
+          <button
+            type="button"
+            rel="tooltip" data-placement="right" title="Import palette from an existing Image or from a palette file"
+            class="button  button-primary create-palette-import-button">Import from file</button>
+          <button
+            type="button"
+            rel="tooltip" data-placement="right" title="Download the palette as a GPL file"
+            class="button  button-primary create-palette-download-button">Download as file</button>
+          <input style="display:none"
+            class="create-palette-import-input"
+            type="file" value="file" accept="*"/>
+        </div>
+      </div>
+      <div class="colors-container">
+        <ul class="colors-list"></ul>
+        <div class="color-picker-container">
+          <div class="color-picker-spectrum"></div>
+          <div class="color-picker-input">
+            <input type="text"  data-model="hex" data-dimension="*" class="textfield  uppercase" value="#000000" />
+          </div>
+          <div class="color-picker-slider">
+            <span>H</span>
+            <input type="range" data-model="hsv" data-dimension="h" value="0" min="0" max="359" tabindex="-1"/>
+            <input type="text"  data-model="hsv" data-dimension="h" class="textfield" value="0" />
+          </div>
+          <div class="color-picker-slider">
+            <span>S</span>
+            <input type="range" data-model="hsv" data-dimension="s" value="0" min="0" max="100" tabindex="-1"/>
+            <input type="text"  data-model="hsv" data-dimension="s" class="textfield" value="0" />
+          </div>
+          <div class="color-picker-slider">
+            <span>V</span>
+            <input type="range" data-model="hsv" data-dimension="v" value="0" min="0" max="100" tabindex="-1"/>
+            <input type="text"  data-model="hsv" data-dimension="v" class="textfield" value="0" />
+          </div>
+          <br/>
+          <div class="color-picker-slider">
+            <span>R</span>
+            <input type="range" data-model="rgb" data-dimension="r" value="0" min="0" max="255" tabindex="-1"/>
+            <input type="text"  data-model="rgb" data-dimension="r" class="textfield" value="0" />
+          </div>
+          <div class="color-picker-slider">
+            <span>G</span>
+            <input type="range" data-model="rgb" data-dimension="g" value="0" min="0" max="255" tabindex="-1"/>
+            <input type="text"  data-model="rgb" data-dimension="g" class="textfield" value="0" />
+          </div>
+          <div class="color-picker-slider">
+            <span>B</span>
+            <input type="range" data-model="rgb" data-dimension="b" value="0" min="0" max="255" tabindex="-1"/>
+            <input type="text"  data-model="rgb" data-dimension="b" class="textfield" value="0" />
+          </div>
+          <div class="color-preview"></div>
+        </div>
+      </div>
+      <div class="create-palette-actions">
+        <button type="button" name="create-palette-cancel" data-action="cancel" class="button create-palette-cancel">Cancel</button>
+        <button type="button" name="create-palette-delete" data-action="delete" class="button button-primary create-palette-delete">Delete</button>
+        <!-- <button type="button" name="create-palette-clone" class="button button-primary create-palette-clone">Save as new</button> -->
+        <button type="button" name="create-palette-submit" data-action="submit" class="button button-primary create-palette-submit">Save</button>
+      </div>
+  </div>
+
+  <script type="text/template" id="create-palette-color-template">
+    <li
+      class="create-palette-color {{:selected}} {{:light-color}}"
+      style="background:{{color}}"
+      data-palette-index="{{index}}"
+      data-palette-color="{{color}}">
+      <div class="create-palette-remove-color">X</div>
+    </li>
+  </script>
+
+</div>

templates/dialogs/import-image.html

@@ -1,7 +1,7 @@
 <div class="dialog-wrapper">
   <h3 class="dialog-head">
     Import Image
-    <span class="palette-manager-close dialog-close">X</span>
+    <span class="dialog-close">X</span>
   </h3>
   <div class="dialog-import-body">
     <form action="" method="POST" name="import-image-form">

templates/drawing-tools.html

@@ -34,20 +34,20 @@
   <!-- Templates -->
 
   <!-- Drawing tool icon-button -->
-  <script type="text/template" id="drawing-tool-item-template">
-    <li rel="tooltip" data-placement="right" class="{{cssclass}}" data-tool-id="{{toolid}}" title="{{title}}"></li>
+  <script type="text/template" id="drawingTool-item-template">
+    <li rel="tooltip" data-placement="{{tooltipposition}}" class="{{cssclass}}" data-tool-id="{{toolid}}" title="{{title}}"></li>
   </script>
 
   <!-- Drawing tool tooltip container -->
-  <script type="text/template" id="drawing-tool-tooltip-container-template">
+  <script type="text/template" id="drawingTool-tooltipContainer-template">
     <div class='tools-tooltip-container'>
-      <div>{{helptext}} <span class='tools-tooltip-shortcut'>({{shortcut}})</span></div>
+      <div>{{helptext}} <span class='tools-tooltip-shortcut'>{{shortcut}}</span></div>
       {{descriptors}}
     </div>
   </script>
 
   <!-- Drawing tool tooltip line for modifier -->
-  <script type="text/template" id="drawing-tool-tooltip-descriptor-template">
+  <script type="text/template" id="drawingTool-tooltipDescriptor-template">
     <div class='tools-tooltip-descriptor'>
       <span class='tools-tooltip-descriptor-button'>{{key}}</span>
       {{description}}
@@ -55,7 +55,7 @@
   </script>
 
   <!-- Drawing tool tooltip line -->
-  <script type="text/template" id="drawing-tool-tooltip-descriptor-simple-template">
+  <script type="text/template" id="drawingTool-simpleTooltipDescriptor-template">
     <div class='tools-tooltip-descriptor'>
       {{description}}
     </div>

templates/layers-list.html

@@ -2,19 +2,39 @@
   <h3 class="toolbox-title layers-title">Layers
     <div title="Toggle layer preview (alt+L)"
          rel="tooltip"
-         data-placement="top"
+         data-placement="left"
          class="layers-toggle-preview piskel-icon-eye"></div>
   </h3>
-  <div class="toolbox-button-container layers-button-container">
-    <button class="button toolbox-button" data-action="add"  >Add</button>
-    <button class="button toolbox-button" data-action="delete"  >Delete</button>
-    <button class="button toolbox-button layers-button-arrow" data-action="up"   >&#8593;</button>
-    <button class="button toolbox-button layers-button-arrow" data-action="down" >&#8595;</button>
+  <div class="layers-button-container">
+    <button data-action="add"
+      class="button layers-button piskel-icon-plus"
+      title="Create a new layer" rel="tooltip" data-placement="top" ></button>
+
+    <button data-action="up"
+      class="button layers-button piskel-icon-arrow-up-fat"
+      title="Move layer up" rel="tooltip" data-placement="top" ></button>
+
+    <button data-action="down"
+      class="button layers-button piskel-icon-arrow-down-fat"
+      title="Move layer down" rel="tooltip" data-placement="top" ></button>
+
+    <button data-action="edit"
+      class="button layers-button piskel-icon-pencil"
+      title="Edit layer name" rel="tooltip" data-placement="top"></button>
+
+    <button data-action="merge"
+      class="button layers-button piskel-icon-merge"
+      title="Merge with layer below" rel="tooltip" data-placement="top" ></button>
+
+    <button data-action="delete"
+      class="button layers-button piskel-icon-close"
+      title="Delete selected layer" rel="tooltip" data-placement="top" ></button>
+
   </div>
-  <script type="text/template" id="layer-item-template">
-    <li class="layer-item {{isselected:current-layer-item}}" data-layer-index="{{layerindex}}">{{layername}}
-      <span class="action-icon edit-icon" title="edit name">&nbsp;</span>
-    </li>
-  </script>
+
   <ul class="layers-list"></ul>
+
+  <script type="text/template" id="layer-item-template">
+    <li class="layer-item {{isselected:current-layer-item}}" data-layer-index="{{layerindex}}">{{layername}}</li>
+  </script>
 </div>

templates/misc-templates.html

@@ -0,0 +1,9 @@
+<div style="display:none">
+  <script type="text/template" id="progress-bar-template">
+    <div class="progress-bar-container">
+      <div class="progress-bar-name">{{name}}</div>
+      <div class="progress-bar-item progress-bar"></div>
+      <div class="progress-bar-item progress-bar-status">{{status}}%</div>
+    </div>
+  </script>
+</div>

templates/palettes-list.html

@@ -1,19 +1,27 @@
 <div class="toolbox-container palettes-list-container">
-  <h3 class="toolbox-title palettes-title" style="overflow:hidden">
-    <span style="line-height:24px ">Palettes</span>
-    <select class="palettes-list-select">
-      <option value="__current-colors">Current colors</option>
-      <option value="__manage-palettes">Create custom palettes</option>
-      <optgroup class="palettes-list-select-group" label="Custom palettes">
-      </optgroup>
-    </select>
-  </h3>
+  <h3 class="toolbox-title palettes-title">Palettes</h3>
+  <div class="palettes-list-actions">
+    <button
+      class="button palettes-list-button create-palette-button piskel-icon-plus" data-action="add"
+      title="Create a new palette" rel="tooltip" data-placement="top" ></button>
+    <select class="button palettes-list-select"></select>
+    <button
+      class="button palettes-list-button edit-palette-button  piskel-icon-pencil" data-action="edit"
+      title="Manage this palette" rel="tooltip" data-placement="top"></button>
+  </div>
   <div class="palettes-list-colors"></div>
   <script type="text/template" id="palette-color-template">
-    <div class="palettes-list-color" data-color="{{color}}" title="{{color}}">
+    <div class="palettes-list-color" data-color="{{color}}" data-color-index="{{index}}" title="{{color}}">
       <div data-color="{{color}}" style="background:{{color}}"></div>
     </div>
   </script>
+
+  <script type="text/template" id="palettes-list-no-colors-partial">
+    <div class="palettes-list-no-colors">
+      No color in the selected palette ...
+    </div>
+  </script>
+
 </div>
 
 

templates/preview.html

@@ -1,6 +1,8 @@
 <div id="animated-preview-container" class="preview-container">
-  <div id="animated-preview-canvas-container" class="canvas-container">
-    <div class="canvas-background"></div>
+  <div class="canvas-container-wrapper minimap-container">
+    <div id="animated-preview-canvas-container" class="canvas-container">
+      <div class="canvas-background"></div>
+    </div>
   </div>
   <div>
     <div title="Toggle onion skin (alt+O)"
@@ -8,6 +10,6 @@
          data-placement="bottom"
          class="piskel-icon-onion preview-toggle-onion-skin"></div>
     <span id="display-fps" class="display-fps"></span>
-    <input id="preview-fps" class="range-fps" type="range" min="1" max="24"/>
+    <input id="preview-fps" class="range-fps" type="range" min="0" max="24"/>
   </div>
 </div>

templates/settings/application.html

@@ -1,6 +1,6 @@
 <div class="settings-section">
   <div class="settings-title">
-    Canvas settings:
+    Preferences:
   </div>
   <div class="settings-item">
     <label>Background:</label>

templates/settings/export.html

@@ -7,11 +7,17 @@
     <span class="settings-description">PNG with all frames side by side.</span>
     <button type="button" class="button button-primary png-download-button">Download PNG</button>
   </div>
+  <div class="settings-title">
+    Export as ZIP
+  </div>
   <div class="settings-item">
     <span class="settings-description">ZIP with one PNG file per frame.</span>
-    <div>
-      <button type="button" class="button button-primary zip-generate-button"/>Download ZIP</button>
+    <span class="settings-description" style="display:block">File names will start with the prefix below.</span>
+    <div class="settings-item">
+      <label for="zip-prefix-name">Prefix:</label>
+      <input id="zip-prefix-name" type="text" class="textfield" placeholder="PNG file prefix ...">
     </div>
+    <button type="button" class="button button-primary zip-generate-button"/>Download ZIP</button>
   </div>
   <div class="settings-title">
     Export to Animated GIF
@@ -34,7 +40,5 @@
       <div class="gif-export-preview"></div>
       <div class="gif-upload-status"></div>
     </div>
-    <span class="gif-export-progress-status"></span>
-    <div class="gif-export-progress-bar"></div>
   </div>
-</div>
+</div>

templates/settings/resize.html

@@ -1,17 +1,66 @@
 <div class="settings-section">
+  <!-- RESIZE DRAWING AREA -->
   <div class="settings-title">
-    Resize drawing area
+    Canvas size
   </div>
-  <div class="settings-item">
-    <form action="" method="POST" name="resize-form">
+  <div class="settings-item  resize-canvas">
+    <form action="" method="POST" name="resize-canvas-form">
       <div class="resize-section">
-        <span class="resize-section-title  resize-section-title-small">Size :</span>
-        <input type="text" class="textfield resize-size-field" name="resize-width"/>x
-        <input type="text" class="textfield resize-size-field" name="resize-height"/>
+        <span  class="resize-section-title">Width</span>
+        <input type="text" class="textfield resize-size-field" name="resize-width"/>
+        <span>px</span>
       </div>
       <div class="resize-section">
-        <span class="resize-section-title  resize-section-title-small">Resize canvas content : </span>
-        <input type="checkbox" class="resize-content-checkbox" name="resize-content-checkbox" value="true"/>
+        <span  class="resize-section-title">Height</span>
+        <input type="text" class="textfield resize-size-field" name="resize-height"/>
+        <span>px</span>
+      </div>
+      <div class="resize-section">
+        <label>
+          <input type="checkbox" class="resize-ratio-checkbox" value="true"/>
+          <span>Maintain aspect ratio</span>
+        </label>
+      </div>
+      <div class="resize-section">
+        <span  class="resize-section-title">Anchor</span>
+        <div class="resize-origin-container">
+          <div class="resize-origin-option"  title="top left"     rel="tooltip"  data-placement="top"     data-origin="TOPLEFT"></div>
+          <div class="resize-origin-option"  title="top"          rel="tooltip"  data-placement="top"     data-origin="TOP"></div>
+          <div class="resize-origin-option"  title="top right"    rel="tooltip"  data-placement="top"     data-origin="TOPRIGHT"></div>
+          <div class="resize-origin-option"  title="middle left"  rel="tooltip"  data-placement="left"    data-origin="MIDDLELEFT"></div>
+          <div class="resize-origin-option"  title="middle"                                               data-origin="MIDDLE" data-neighbor="bottom"></div>
+          <div class="resize-origin-option"  title="middle right" rel="tooltip"  data-placement="right"   data-origin="MIDDLERIGHT"></div>
+          <div class="resize-origin-option"  title="bottom left"  rel="tooltip"  data-placement="bottom"  data-origin="BOTTOMLEFT"></div>
+          <div class="resize-origin-option"  title="bottom"       rel="tooltip"  data-placement="bottom"  data-origin="BOTTOM"></div>
+          <div class="resize-origin-option"  title="bottom right" rel="tooltip"  data-placement="bottom"  data-origin="BOTTOMRIGHT"></div>
+        </div>
+      </div>
+      <input type="submit" class="button button-primary resize-button" value="Resize" />
+      <input type="button" class="button resize-cancel-button" value="Cancel" />
+    </form>
+  </div>
+
+  <!-- RESIZE CONTENT -->
+  <div class="settings-title">
+    Image size
+  </div>
+  <div class="settings-item  resize-content">
+    <form action="" method="POST" name="resize-content-form">
+      <div class="resize-section">
+        <span  class="resize-section-title">Width</span>
+        <input type="text" class="textfield resize-size-field" name="resize-width"/>
+        <span>px</span>
+      </div>
+      <div class="resize-section">
+        <span  class="resize-section-title">Height</span>
+        <input type="text" class="textfield resize-size-field" name="resize-height"/>
+        <span>px</span>
+      </div>
+      <div class="resize-section">
+        <label>
+          <input type="checkbox" class="resize-ratio-checkbox" value="true"/>
+          <span>Maintain aspect ratio</span>
+        </label>
       </div>
       <input type="submit" class="button button-primary resize-button" value="Resize" />
       <input type="button" class="button resize-cancel-button" value="Cancel" />

templates/settings/save.html

@@ -4,7 +4,7 @@
     <div class="settings-item">
       <div class="settings-form-section" style="overflow:hidden">
         <label class="row" style="float:left;line-height:28px;">Title : </label>
-        <input id="save-name" type="text" class="save-field textfield" style="float:left;width:200px;margin-left:10px;"/>
+        <input id="save-name" type="text" class="save-field textfield" style="float:left;width:198px;margin-left:10px;"/>
       </div>
       <div class="settings-form-section">
         <textarea id="save-description" class="save-field textfield" placeholder="Description ..."></textarea>
@@ -17,18 +17,18 @@
     </div>
     <div class="settings-title">Save online</div>
     <div class="settings-item">
-      <input type="button" class="button button-primary" id="save-online-button" value="Upload" />
+      <input type="button" class="button button-primary" id="save-online-button" value="Save to your gallery" />
       <div id="save-online-status" class="save-status"></div>
     </div>
     <div class="settings-title">Save offline in Browser</div>
     <div class="settings-item">
-      <div id="save-browser-status" class="save-status">Your piskel will be saved locally and will only be accessible from this browser.</div>
       <input type="button" class="button button-primary" id="save-browser-button" value="Save in Browser" />
+      <div id="save-browser-status" class="save-status">Your piskel will be saved locally and will only be accessible from this browser.</div>
     </div>
     <div class="settings-title">Save offline as File</div>
     <div class="settings-item">
+      <input type="button" class="button button-primary" id="save-file-button" value="Save as File" />
       <div id="save-file-status" class="save-status"></div>
-      <input type="button" class="button" id="save-file-button" value="Save as File" />
     </div>
   </form>
 
@@ -36,6 +36,10 @@
     <span>Login to <a href="http://piskelapp.com" target="_blank">piskelapp.com</a> to save and share your sprites online !</span>
   </script>
 
+  <script type="text/template" id="save-online-status-partial">
+    <span>Your piskel will be stored online in your gallery.</span>
+  </script>
+
   <script type="text/template" id="save-file-status-template">
     <span>Your piskel will be downloaded as <span class="save-file-name">{{name}}<span></span>
   </script>

templates/transformations.html

@@ -0,0 +1,4 @@
+<div class="toolbox-container transformations-container">
+  <h3 class="toolbox-title transformations-title">Transform</h3>
+  <ul class="tools-wrapper"></ul>
+</div>