right panel prototype for @grosbouddha

2023-08-10 21:12:52 +03:00 · 2014-06-23 01:00:38 +02:00 · 2014-06-23 01:00:38 +02:00 · 0501123763
commit 0501123763
parent 24506def11
74 changed files with 25224 additions and 0 deletions
--- a/right-panel-proto/css/piskel-style-packaged.css
+++ b/right-panel-proto/css/piskel-style-packaged.css
--- a/right-panel-proto/img/canvas_background/light_canvas_background.png
+++ b/right-panel-proto/img/canvas_background/light_canvas_background.png
--- a/right-panel-proto/img/canvas_background/lowcont_dark_canvas_background.png
+++ b/right-panel-proto/img/canvas_background/lowcont_dark_canvas_background.png
--- a/right-panel-proto/img/canvas_background/lowcont_medium_canvas_background.png
+++ b/right-panel-proto/img/canvas_background/lowcont_medium_canvas_background.png
--- a/right-panel-proto/img/canvas_background/medium_canvas_background.png
+++ b/right-panel-proto/img/canvas_background/medium_canvas_background.png
--- a/right-panel-proto/img/cloud_export.png
+++ b/right-panel-proto/img/cloud_export.png
--- a/right-panel-proto/img/dragndrop.png
+++ b/right-panel-proto/img/dragndrop.png
--- a/right-panel-proto/img/duplicate.png
+++ b/right-panel-proto/img/duplicate.png
--- a/right-panel-proto/img/favicon.png
+++ b/right-panel-proto/img/favicon.png
--- a/right-panel-proto/img/gallery.png
+++ b/right-panel-proto/img/gallery.png
--- a/right-panel-proto/img/garbage.png
+++ b/right-panel-proto/img/garbage.png
--- a/right-panel-proto/img/gear.png
+++ b/right-panel-proto/img/gear.png
--- a/right-panel-proto/img/icons/circle.png
+++ b/right-panel-proto/img/icons/circle.png
--- a/right-panel-proto/img/icons/color-palette.png
+++ b/right-panel-proto/img/icons/color-palette.png
--- a/right-panel-proto/img/icons/dropper.png
+++ b/right-panel-proto/img/icons/dropper.png
--- a/right-panel-proto/img/icons/eraser.png
+++ b/right-panel-proto/img/icons/eraser.png
--- a/right-panel-proto/img/icons/hand.png
+++ b/right-panel-proto/img/icons/hand.png
--- a/right-panel-proto/img/icons/mirror-pen.png
+++ b/right-panel-proto/img/icons/mirror-pen.png
--- a/right-panel-proto/img/icons/paint-bucket.png
+++ b/right-panel-proto/img/icons/paint-bucket.png
--- a/right-panel-proto/img/icons/pen.png
+++ b/right-panel-proto/img/icons/pen.png
--- a/right-panel-proto/img/icons/rectangle.png
+++ b/right-panel-proto/img/icons/rectangle.png
--- a/right-panel-proto/img/icons/select.png
+++ b/right-panel-proto/img/icons/select.png
--- a/right-panel-proto/img/icons/stroke.png
+++ b/right-panel-proto/img/icons/stroke.png
--- a/right-panel-proto/img/icons/vertical-mirror-pen.png
+++ b/right-panel-proto/img/icons/vertical-mirror-pen.png
--- a/right-panel-proto/img/icons/wand.png
+++ b/right-panel-proto/img/icons/wand.png
--- a/right-panel-proto/img/import-icon.png
+++ b/right-panel-proto/img/import-icon.png
--- a/right-panel-proto/img/keyboard.png
+++ b/right-panel-proto/img/keyboard.png
--- a/right-panel-proto/img/layers.svg
+++ b/right-panel-proto/img/layers.svg
@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   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"
+   version="1.1"
+   width="90"
+   height="87.886002"
+   id="svg3024">
+  <defs
+     id="defs3026" />
+  <metadata
+     id="metadata3029">
+    <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
+     transform="translate(-266.63206,-597.79217)"
+     id="layer1">
+    <g
+       transform="translate(262.14286,465.21932)"
+       id="Captions" />
+    <g
+       id="g3825" />
+    <g
+       transform="translate(-0.51079959,126.51585)"
+       id="layer1-9"
+       style="fill:#ffffff;fill-opacity:1">
+      <g
+         transform="translate(262.14286,465.21932)"
+         id="Captions-4"
+         style="fill:#ffffff;fill-opacity:1" />
+      <g
+         id="g3825-8"
+         style="fill:#ffffff;fill-opacity:1">
+        <path
+           d="m 357.14286,556.72132 c 0,1.346 -1.097,2.441 -2.442,2.441 h -60.239 c -1.347,0 -2.441,-1.096 -2.441,-2.441 v -4.555 h 50.241 c 4.346,0 7.884,-3.539 7.884,-7.885 v -48.128 h 4.555 c 1.346,0 2.442,1.096 2.442,2.441 v 58.127 z"
+           id="path2989-8"
+           style="fill:#ffffff;fill-opacity:1" />
+        <path
+           d="m 279.58086,544.28132 v -4.555 h 6.997 2.722 2.721 37.803 c 4.346,0 7.884,-3.537 7.884,-7.883 v -35.69 -2.721 -2.721 -6.998 h 4.555 c 1.346,0 2.442,1.096 2.442,2.443 v 4.555 2.721 2.721 48.129 c 0,1.346 -1.097,2.443 -2.442,2.443 h -50.242 -2.721 -2.722 -4.555 c -1.347,0 -2.442,-1.098 -2.442,-2.444 z"
+           id="path2991-2"
+           style="fill:#ffffff;fill-opacity:1" />
+        <path
+           d="m 329.82386,471.27632 h -60.239 c -1.347,0 -2.442,1.093 -2.442,2.441 v 58.127 c 0,1.344 1.095,2.441 2.442,2.441 h 4.555 2.721 2.721 6.997 2.722 2.721 37.803 c 1.345,0 2.441,-1.098 2.441,-2.441 v -35.691 -2.721 -2.721 -6.998 -2.721 -2.721 -4.554 c -10e-4,-1.348 -1.098,-2.441 -2.442,-2.441 z"
+           id="path2993-4"
+           style="fill:#ffffff;fill-opacity:1" />
+      </g>
+    </g>
+  </g>
+</svg>
--- a/right-panel-proto/img/local-storage-icon.png
+++ b/right-panel-proto/img/local-storage-icon.png
--- a/right-panel-proto/img/plus.png
+++ b/right-panel-proto/img/plus.png
--- a/right-panel-proto/img/resize-icon.png
+++ b/right-panel-proto/img/resize-icon.png
--- a/right-panel-proto/img/save.png
+++ b/right-panel-proto/img/save.png
--- a/right-panel-proto/img/tools/circle-dark.png
+++ b/right-panel-proto/img/tools/circle-dark.png
--- a/right-panel-proto/img/tools/circle.png
+++ b/right-panel-proto/img/tools/circle.png
--- a/right-panel-proto/img/tools/eraser-dark.png
+++ b/right-panel-proto/img/tools/eraser-dark.png
--- a/right-panel-proto/img/tools/eraser.png
+++ b/right-panel-proto/img/tools/eraser.png
--- a/right-panel-proto/img/tools/eyedropper-dark.png
+++ b/right-panel-proto/img/tools/eyedropper-dark.png
--- a/right-panel-proto/img/tools/eyedropper.png
+++ b/right-panel-proto/img/tools/eyedropper.png
--- a/right-panel-proto/img/tools/hand-dark.png
+++ b/right-panel-proto/img/tools/hand-dark.png
--- a/right-panel-proto/img/tools/hand.png
+++ b/right-panel-proto/img/tools/hand.png
--- a/right-panel-proto/img/tools/lighten.png
+++ b/right-panel-proto/img/tools/lighten.png
--- a/right-panel-proto/img/tools/magicwand-dark.png
+++ b/right-panel-proto/img/tools/magicwand-dark.png
--- a/right-panel-proto/img/tools/magicwand.png
+++ b/right-panel-proto/img/tools/magicwand.png
--- a/right-panel-proto/img/tools/mirror.png
+++ b/right-panel-proto/img/tools/mirror.png
--- a/right-panel-proto/img/tools/paintbucket-dark.png
+++ b/right-panel-proto/img/tools/paintbucket-dark.png
--- a/right-panel-proto/img/tools/paintbucket.png
+++ b/right-panel-proto/img/tools/paintbucket.png
--- a/right-panel-proto/img/tools/pen-dark.png
+++ b/right-panel-proto/img/tools/pen-dark.png
--- a/right-panel-proto/img/tools/pen.png
+++ b/right-panel-proto/img/tools/pen.png
--- a/right-panel-proto/img/tools/rectangle-dark.png
+++ b/right-panel-proto/img/tools/rectangle-dark.png
--- a/right-panel-proto/img/tools/rectangle.png
+++ b/right-panel-proto/img/tools/rectangle.png
--- a/right-panel-proto/img/tools/rectangle_selection-dark.png
+++ b/right-panel-proto/img/tools/rectangle_selection-dark.png
--- a/right-panel-proto/img/tools/rectangle_selection.png
+++ b/right-panel-proto/img/tools/rectangle_selection.png
--- a/right-panel-proto/img/tools/stroke.png
+++ b/right-panel-proto/img/tools/stroke.png
--- a/right-panel-proto/img/tools/swap-arrow-square-small-grey.png
+++ b/right-panel-proto/img/tools/swap-arrow-square-small-grey.png
--- a/right-panel-proto/index.html
+++ b/right-panel-proto/index.html
@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <title>Piskel</title>
+  <meta name="description" content="">
+  <meta name="author" content="Julian Descottes">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body>
+  <div
+    id="loading-mask"
+    style="
+    position:fixed;
+    top:0;right:0;bottom:0;left:0;
+    background:black;
+    opacity:1;
+    text-align:center;
+    z-index : 20000;
+    transition:opacity 0.5s;
+    color:white;">
+      <span style="top:45%">Loading Piskel ...</span>
+  </div>
+  <script type="text/javascript" src="js/lib/iframeLoader.js"></script>
+  <div id="main-wrapper" class="main-wrapper">
+    <iframe src="templates/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/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/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/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/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/save.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/resize.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>
+            <!-- <iframe src="templates/settings/localstorage.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe> -->
+            <iframe src="templates/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/dialogs/manage-palettes.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>
+  <script type="text/javascript" src="piskel-boot.js"></script>
+</body>
+</html>
--- a/right-panel-proto/js/lib/iframeLoader.js
+++ b/right-panel-proto/js/lib/iframeLoader.js
@ -0,0 +1,56 @@
+(function () {
+  /**
+   * Depending on the value of the data-iframe-loader attribute, display or store the content of the iframe
+   * @param  {HTMLElement} iframe
+   */
+  var processFrame = function (iframe) {
+    var type = iframe.getAttribute('data-iframe-loader');
+    if (type === "display") {
+      displayFrame(iframe);
+    } else if (type === "store") {
+      storeFrame(iframe);
+    } else {
+      console.error('iframeLoader invalid type : ' + type);
+    }
+  };
+
+  /**
+   * Replace the existing iframe with the content of the iframe
+   * If the iframe has a single root element, it will directly replace the iframe.
+   * If there are several roots, a wrapping div will be created and will replace the iframe
+   * @param  {HTMLElement} iframe
+   */
+  var displayFrame = function (iframe) {
+    var div=document.createElement("div");
+    div.innerHTML = iframe.contentWindow.document.body.innerHTML;
+    if (div.children.length == 1) {
+      div = div.children[0];
+    }
+    iframe.parentNode.replaceChild(div, iframe);
+  };
+
+  /**
+   * Load the iframe content as a <script type="text/html" id={iframe-src}>{iframe-content}</script>
+   * The content can later be accessed by getting the script (through getElementById for instance) and reading innerHTML
+   * @param  {HTMLElement} iframe
+   */
+  var storeFrame = function (iframe) {
+    var script=document.createElement("script");
+    script.setAttribute("type", "text/html");
+    if (window.pskl && window.pskl.appEngineToken_) {
+      script.setAttribute("id", iframe.getAttribute("src").replace('../',''));
+    } else {
+      script.setAttribute("id", iframe.getAttribute("src"));
+    }
+    script.innerHTML = iframe.contentWindow.document.body.innerHTML;
+    iframe.parentNode.removeChild(iframe);
+    document.body.appendChild(script);
+  };
+
+  window.iframeloader = {
+    onLoad : function (event) {
+      var iframe = event.target || event.srcElement;
+      processFrame(iframe);
+    }
+  }
+})();
--- a/right-panel-proto/js/piskel-packaged-min.js
+++ b/right-panel-proto/js/piskel-packaged-min.js
--- a/right-panel-proto/js/piskel-packaged.js
+++ b/right-panel-proto/js/piskel-packaged.js
--- a/right-panel-proto/logo.png
+++ b/right-panel-proto/logo.png
--- a/right-panel-proto/piskel-boot.js
+++ b/right-panel-proto/piskel-boot.js
@ -0,0 +1,77 @@
+(function () {
+
+  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.js";
+    } else {
+      script = "js/piskel-packaged-min.js";
+    }
+    loadStyle('css/piskel-style-packaged.css');
+
+    var loaderInterval = window.setInterval(function () {
+      if (document.querySelectorAll("[data-iframe-loader]").length === 0) {
+        window.clearInterval(loaderInterval);
+        loadScript(script, "onPiskelReady()");
+      } else {
+        console.log("waiting for templates to load ....");
+      }
+    }, 100);
+  }
+})();
--- a/right-panel-proto/templates/cheatsheet.html
+++ b/right-panel-proto/templates/cheatsheet.html
@ -0,0 +1,24 @@
+<div id="cheatsheet-wrapper" style="display:none">
+  <div class="cheatsheet-container">
+    <div class="cheatsheet-section">
+      <h3>Tool shortcuts</h3>
+      <ul class="cheatsheet-tool-shortcuts"></ul>
+    </div>
+    <div class="cheatsheet-section">
+      <h3>Misc shortcuts</h3>
+      <ul class="cheatsheet-misc-shortcuts"></ul>
+    </div>
+    <div class="cheatsheet-section">
+      <h3>Selection shortcuts</h3>
+      <ul class="cheatsheet-selection-shortcuts"></ul>
+    </div>
+  </div>
+</div>
+<span class="cheatsheet-link">Keyboard shortcuts</a>
+<script type="text/template" id="cheatsheet-shortcut-template">
+  <li class="cheatsheet-shortcut">
+    <div class="cheatsheet-icon {{shortcutIcon}}"></div>
+    <span class="cheatsheet-key">{{shortcutKey}}</span>
+    <span class="cheatsheet-description">{{shortcutDescription}}</span>
+  </li>
+</script>
--- a/right-panel-proto/templates/dialogs/manage-palettes.html
+++ b/right-panel-proto/templates/dialogs/manage-palettes.html
@ -0,0 +1,57 @@
+<div class="palette-manager-wrapper">
+  <h3 class="palette-manager-head">
+    Palette manager
+    <span class="palette-manager-close">X</span>
+  </h3>
+  <div class="palette-manager-body">
+    <div class="palette-manager-drawer">
+      <div class="palette-manager-actions">
+        <button type="button" class="palette-manager-actions-button button " data-action="create">Create</button>
+        <button type="button" class="palette-manager-actions-button button " data-action="save-all">Save all</button>
+      </div>
+      <ul class="palette-manager-list">
+      </ul>
+    </div>
+    <div class="palette-manager-details">
+      <div class="palette-manager-details-head"></div>
+      <div class="palette-manager-details-body"></div>
+    </div>
+  </div>
+</div>
+
+<script type="text/template" id="palette-details-head-template">
+  <span class="palette-manager-details-head-name">{{name}}</span>
+  <span class="action-icon edit-icon" title="edit name">&nbsp;</span>
+  <div class="palette-manager-details-head-actions">
+    <button class="palette-manager-palette-button button button-primary" {{save:disabled}} data-action="save" type="button">Save</button>
+    <button class="palette-manager-palette-button button " {{revert:disabled}} data-action="revert" type="button">Revert</button>
+    <button class="palette-manager-palette-button button " {{delete:disabled}} data-action="delete" type="button">Delete</button>
+  </div>
+</script>
+
+<script type="text/template" id="palette-color-card-template">
+  <div class="palette-manager-color-card" data-color-id="{{colorId}}">
+    <span class="palette-manager-delete-card" title="remove this color">X</span>
+    <div class="palette-manager-color-square" style="background-color:{{hex}}"></div>
+    <div class="palette-manager-color-details allow-user-select">
+      <ul>
+        <li>{{hex}}</li>
+        <li>{{rgb}}</li>
+        <li>{{hsl}}</li>
+      </ul>
+    </div>
+  </div>
+</script>
+
+<script type="text/template" id="palette-new-color-template">
+  <div class="palette-manager-color-card {{classname}}">
+    <div class="palette-manager-color-square">Add</div>
+    <div class="palette-manager-color-details">
+      <ul>
+        <li>Hex</li>
+        <li>RGB</li>
+        <li>HSL</li>
+      </ul>
+    </div>
+  </div>
+</script>
--- a/right-panel-proto/templates/drawing-tools.html
+++ b/right-panel-proto/templates/drawing-tools.html
@ -0,0 +1,34 @@
+<div class="sticky-section left-sticky-section" id="tool-section">
+  <div class="sticky-section-wrap">
+    <div class="vertical-centerer">
+      <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>
+      <ul id="tools-container" class="tools-wrapper"></ul>
+      <div class="palette-wrapper">
+        <div
+          class="tool-icon tool-color-picker"
+          title="Primary - left mouse button"
+          rel="tooltip"
+          data-placement="right"
+        >
+          <input id="color-picker" class="color" type="text"/>
+        </div>
+        <div
+          class="tool-icon tool-color-picker"
+          title="Secondary - right mouse button"
+          rel="tooltip"
+          data-placement="right"
+        >
+          <input id="secondary-color-picker" class="secondary-color-picker color" type="text" />
+        </div>
+        <div
+          class="swap-colors-icon"
+          title="Swap colors (X)"
+          rel="tooltip"
+          data-placement="right"
+        ></div>
+      </div>
+    </div>
+  </div>
+</div>
--- a/right-panel-proto/templates/frames-list.html
+++ b/right-panel-proto/templates/frames-list.html
@ -0,0 +1,7 @@
+<div id="preview-list-wrapper" class="preview-list-wrapper">
+  <div id="preview-list-scroller" class="preview-list-scroller">
+    <ul class="preview-list" id="preview-list"></ul>
+  </div>
+  <div class="top-overflow"></div>
+  <div class="bottom-overflow"></div>
+</div>
--- a/right-panel-proto/templates/layers-list.html
+++ b/right-panel-proto/templates/layers-list.html
@ -0,0 +1,15 @@
+<div class="toolbox-container layers-list-container">
+  <h3 class="toolbox-title layers-title">Layers</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>
+  <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>
+</div>
--- a/right-panel-proto/templates/palettes-list.html
+++ b/right-panel-proto/templates/palettes-list.html
@ -0,0 +1,19 @@
+<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>
+  <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 data-color="{{color}}" style="background:{{color}}"></div>
+    </div>
+  </script>
+</div>
+
+
--- a/right-panel-proto/templates/preview.html
+++ b/right-panel-proto/templates/preview.html
@ -0,0 +1,9 @@
+<div id="animated-preview-container" class="preview-container">
+  <div id="animated-preview-canvas-container" class="canvas-container">
+    <div class="canvas-background"></div>
+  </div>
+  <div>
+    <span id="display-fps" class="display-fps"></span>
+    <input id="preview-fps" class="range-fps" type="range" min="1" max="24"/>
+  </div>
+</div>
--- a/right-panel-proto/templates/settings.html
+++ b/right-panel-proto/templates/settings.html
@ -0,0 +1,53 @@
+<div class="vertical-centerer">
+
+
+  <div
+    data-setting="user"
+    class="tool-icon gear-icon"
+    title="Preferences"
+    rel="tooltip" data-placement="left">
+  </div>
+
+  <div
+    data-setting="resize"
+    class="tool-icon resize-icon"
+    title="Modify Canvas"
+    rel="tooltip" data-placement="left">
+  </div>
+
+  <div
+    data-setting="save"
+    class="tool-icon save-icon"
+    title="Save to gallery"
+    rel="tooltip" data-placement="left" >
+  </div>
+
+  <div
+    data-setting="import"
+    class="tool-icon local-storage-icon"
+    title="Import piskel"
+    rel="tooltip" data-placement="left">
+  </div>
+
+<!--   <div
+    data-setting="localstorage"
+    class="tool-icon local-storage-icon"
+    title="Browse piskels saved locally"
+    rel="tooltip" data-placement="left">
+  </div> -->
+
+  <!-- <div
+    data-setting="gif"
+    class="tool-icon upload-cloud-icon"
+    title="Export Animation"
+    rel="tooltip" data-placement="left">
+    <span class="label">ANIM</span>
+  </div> -->
+
+  <div
+    data-setting="png"
+    class="tool-icon import-icon"
+    title="Export"
+    rel="tooltip" data-placement="left">
+  </div>
+</div>
--- a/right-panel-proto/templates/settings/application.html
+++ b/right-panel-proto/templates/settings/application.html
@ -0,0 +1,49 @@
+<div class="settings-section">
+  <div class="settings-title">
+    Canvas settings:
+  </div>
+  <div class="settings-item">
+    <label>Background:</label>
+    <div id="background-picker-wrapper" class="background-picker-wrapper">
+      <div class="background-picker light-picker-background" data-background-class="light-canvas-background"
+            rel="tooltip" data-placement="bottom" title="light / high contrast">
+      </div>
+      <div class="background-picker medium-picker-background" data-background-class="medium-canvas-background"
+            rel="tooltip" data-placement="bottom" title="medium / high contrast">
+      </div>
+      <div class="background-picker lowcont-medium-picker-background" data-background-class="lowcont-medium-canvas-background"
+            rel="tooltip" data-placement="bottom" title="medium / low contrast">
+      </div>
+      <div class="background-picker lowcont-dark-picker-background" data-background-class="lowcont-dark-canvas-background"
+            rel="tooltip" data-placement="bottom" title="dark / low contrast">
+      </div>
+    </div>
+  </div>
+  <div class="settings-item">
+    <label for="grid-width">Grid :</label>
+    <select id="grid-width">
+      <option value="0">Disabled</option>
+      <option value="1">Enabled - 1px wide</option>
+      <option value="2">Enabled - 2px wide</option>
+      <option value="3">Enabled - 3px wide</option>
+      <option value="4">Enabled - 4px wide</option>
+    </select>
+  </div>
+
+  <div class="settings-title">
+    Overlay:
+  </div>
+  <div class="settings-item">
+    <label for="overlay">Display :</label>
+    <select id="overlay">
+      <option value="no-overlay">No overlay</option>
+      <option value="onion-skin">Onion skin</option>
+      <option value="layer-preview">Layer preview</option>
+    </select>
+  </div>
+  <!-- <div class="settings-item">
+    <label for="tiled-preview">Display tiled preview :</label>
+    <input type="checkbox" value="1" id="tiled-preview" name="tiled-preview-checkbox"/>
+  </div> -->
+</div>
+
--- a/right-panel-proto/templates/settings/export.html
+++ b/right-panel-proto/templates/settings/export.html
@ -0,0 +1,40 @@
+<div class="settings-section">
+  <div class="settings-title">
+    Export Spritesheet
+  </div>
+  <div class="png-export-preview"></div>
+  <div class="settings-item">
+    <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-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>
+    </div>
+  </div>
+  <div class="settings-title">
+    Export to Animated GIF
+  </div>
+  <div class="settings-item">
+    <form action="" method="POST" class="gif-export-form">
+      <div style="margin:10px 0;">
+        <label>Select resolution:</label>
+        <select class="gif-export-select-resolution"></select>
+        <script type="text/template" id="gif-export-option-template">
+          <option value="{{value}}">{{label}}</option>
+        </script>
+      </div>
+      <div style="margin:10px 0;">
+        <button type="button" class="button button-primary gif-download-button">Download GIF</button>
+        <button type="button" class="button button gif-upload-button">Get public URL</button>
+      </div>
+    </form>
+    <div class="clearfix">
+      <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>
--- a/right-panel-proto/templates/settings/import.html
+++ b/right-panel-proto/templates/settings/import.html
@ -0,0 +1,51 @@
+<div class="settings-section">
+  <div class="settings-title">
+    Open Piskel Project
+  </div>
+  <div class="settings-item">
+    <form action="" method="POST" name="open-piskel-form">
+      <span>Load a <span style="font-weight:bold;color:white">.piskel</span> file from your computer.</span>
+
+      <div class="import-section">
+        <button type="button" class="button  button-primary open-piskel-button">Open...</button>
+        <span class="file-input-open-piskel-status"></span>
+        <input style="display:none"
+          type="file" name="open-piskel-input"
+          value="file" accept=".piskel"/>
+      </div>
+    </form>
+  </div>
+  <div class="settings-title">
+    Import From Picture
+  </div>
+  <div class="settings-item">
+    <form action="" method="POST" name="import-form">
+      <div style="margin-top:5px;margin-bottom:5px;">Supports : PNG, JPG, BMP, Animated GIF ...</div>
+      <div class="import-section">
+        <button type="button" class="button  button-primary file-input-button">Browse...</button>
+        <span class="file-input-status"></span>
+        <input style="display:none"
+          type="file" name="file-upload-input"
+          value="file" accept="image/*"/>
+      </div>
+
+      <div class="import-options">
+        <div class="import-section">
+          <span class="import-section-title  import-section-title-small" style="vertical-align:top">Info :</span>
+          <div class="import-section-preview"></div>
+        </div>
+        <div class="import-section">
+          <span class="import-section-title  import-section-title-small">Size :</span>
+          <input type="text" class="textfield import-size-field" name="resize-width"/>x
+          <input type="text" class="textfield import-size-field" name="resize-height"/>
+        </div>
+        <div class="import-section">
+          <span class="import-section-title">Smooth resize :</span>
+          <input type="checkbox" checked="checked" name="smooth-resize-checkbox" value="1"/>
+        </div>
+        <input type="submit" name="import-submit" class="button button-primary import-button" value="Import" />
+      </div>
+
+    </form>
+  </div>
+</div>
--- a/right-panel-proto/templates/settings/localstorage.html
+++ b/right-panel-proto/templates/settings/localstorage.html
@ -0,0 +1,18 @@
+<div class="settings-section">
+  <div class="settings-title">
+    Browse Local Piskels
+  </div>
+  <div class="settings-item">
+    <table class="local-piskels-list">
+      <tbody></tbody>
+    </table>
+  </div>
+  <script type="text/template" id="local-storage-item-template">
+    <tr class="local-piskel-item">
+      <td class="local-piskel-name">{{name}}</td>
+      <td class="local-piskel-save-date">{{date}}</td>
+      <td><a class="local-piskel-load-link" data-action="load" data-name="{{name}}" href="javascript:void(0);">load</a></td>
+      <td><a class="local-piskel-delete-link" data-action="delete" data-name="{{name}}" href="javascript:void(0);">x</a></td>
+    </tr>
+  </script>
+</div>
--- a/right-panel-proto/templates/settings/resize.html
+++ b/right-panel-proto/templates/settings/resize.html
@ -0,0 +1,20 @@
+<div class="settings-section">
+  <div class="settings-title">
+    Resize drawing area
+  </div>
+  <div class="settings-item">
+    <form action="" method="POST" name="resize-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"/>
+      </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"/>
+      </div>
+      <input type="submit" class="button button-primary resize-button" value="Resize" />
+      <input type="button" class="button resize-cancel-button" value="Cancel" />
+    </form>
+  </div>
+</div>
--- a/right-panel-proto/templates/settings/save.html
+++ b/right-panel-proto/templates/settings/save.html
@ -0,0 +1,38 @@
+<div class="settings-section">
+  <form action="" method="POST" name="save-form">
+    <div class="settings-title">Describe your piskel</div>
+    <div class="settings-item">
+      <div class="settings-form-section">
+        <label class="row">Title : </label>
+        <input id="save-name" type="text" class="save-field textfield"/>
+      </div>
+      <div class="settings-form-section">
+        <label class="row">Description :</label>
+        <textarea id="save-description" class="save-field textfield" placeholder="Your piskel in a few words"></textarea>
+      </div>
+      <div class="settings-form-section save-public-section">
+        <label class="row">
+          Public : <input type="checkbox" value="1" name="save-public-checkbox"/>
+        </label>
+      </div>
+    </div>
+    <div class="settings-title">Save online</div>
+    <div class="settings-item">
+      <input type="submit" class="button button-primary" id="save-online-button" value="Upload" />
+      <div id="save-online-status" class="save-status"></div>
+    </div>
+    <div class="settings-title">Download Project</div>
+    <div class="settings-item">
+      <div id="save-local-status" class="save-status"></div>
+      <input type="button" class="button" id="save-local-button" value="Download Piskel Project" />
+    </div>
+  </form>
+
+  <script type="text/template" id="save-please-login-partial">
+    <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-local-status-template">
+    <span>Your piskel will be downloaded as <span class="save-local-name">{{name}}<span></span>
+  </script>
+</div>