new version

css/fonts/piskel.svg

@@ -0,0 +1,12 @@
+<?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="M548.568 469.33c-230.956 1.035-548.568-255.999-548.568-255.999s288.019-255.998 548.568-255.998c229.744 0 548.568 255.998 548.568 255.998s-319.896 254.974-548.568 255.999zM543.082 387.731c100.382 0 181.713-81.33 181.713-181.713s-81.331-181.713-181.713-181.713c-100.382 0-181.827 81.331-181.827 181.713s81.445 181.713 181.827 181.713zM543.197 320.645c-65.289 0-118.285-52.996-118.285-118.285s52.996-118.171 118.285-118.171c65.289 0 118.17 52.882 118.17 118.171s-52.882 118.285-118.17 118.285z" horiz-adv-x="1097" />
+<glyph unicode="&#xe601;" d="M340.96 469.333l-32.981-29.267-1.969 10.697-18.862-5.459v-36.471l1.221-25.849 35.952 31.903c-0.462-6.572-0.68-13.508-0.223-21.207 0.724-12.19 4.071-23.146 10.733-31.718s15.637-14.063 25.589-18.607c19.904-9.088 44.707-23.995 75.102-49.258 57.553-47.833 64.672-71.707 75.043-113.771 9.874-54.678-5.819-94.055-28.463-127.459-16.179-23.866-36.205-45.046-80.229-53.974s-85.245-11.81-114.725-11.81v-29.712c31.378 0 73.891 2.924 120.63 12.404s92.839 24.688 121.002 54.15c30.486 31.892 59.625 89.691 42.191 180.054l-0.074 0.297c-7.766 36.041-31.345 90.17-123.528 130.25-38.13 16.578-58.817 27.279-74.37 34.381-7.777 3.551-12.257 8.151-14.697 11.29s-4.042 6.988-4.531 15.228c-1.101 18.541 1.596 32.644 4.42 41.968s5.2 12.925 5.2 12.925l-22.433 19.015zM308.574 410.875c0 0-21.425 5.601-21.425-1.56 0-39.679-0.543-46.688 13.068-74.726s31.172-56.883 57.683-81.363c50.137-46.294 46.077-53.33 54.399-77.145 3.064-8.767 4.356-29.132 2.228-45.125s-8.091-37.102-15.933-49.099c-12.322-18.852-22.247-38.122-45.82-51.216-24.626-13.678-45.867-16.634-65.626-16.634v-29.712c24.75 0 52.923 5.962 82.673 17.976s58.387 30.034 75.728 56.564c11.616 17.771 23.842 44.829 26.541 66.454s8.060 40.281-6.041 69.411c-21.705 44.841-50.569 58.307-85.806 88.136-21.815 18.466-41.428 40.207-53.325 64.713s-17.61 49.391-18.347 63.324zM304.637 391.785l-17.488-1.597c0.887-16.769 0-51.279 0-84.047 0-15.558 2.587-34.459 5.019-47.508 4.685-25.143 12.495-41.458 17.392-57.248 3.892-12.55 8.256-30.116 11.158-36.87 7.858-18.288 8.948-40.637 0.897-66.369-8.154-26.060-20.866-51.039-42.106-59.238l7.64-25.197c30.736 11.865 73.733 45.32 85.493 82.907 10.6 33.878 3.906 64.497-5.757 86.981-5.858 13.634-11.428 23.024-17.668 34.392-7.678 13.987-23.993 31.521-28.665 45.802-4.248 12.988-9.303 28.695-10.605 44.761-2.605 32.132-4.319 65.104-5.311 83.231zM235.254 469.297l32.98-29.267 1.969 10.697 18.862-5.459v-36.471l-1.221-25.85-35.952 31.903c0.463-6.572 0.68-13.508 0.223-21.207-0.724-12.19 0.731-24.346-5.931-32.918s-14.437-20.066-24.389-24.61c-19.904-9.088-43.506-23.995-73.901-49.258-57.553-47.833-56.268-60.902-66.639-102.966-3.871-55.878-7.038-55.096 5.653-93.844 7.669-23.416 26.602-46.246 70.624-67.18 40.566-19.291 102.053-35.822 131.533-35.822v-29.712c-31.378 0-73.891 2.924-120.63 12.404s-92.839 24.688-121.002 54.15c-30.485 31.892-59.626 89.691-42.191 180.054l0.074 0.297c7.766 36.041 31.345 90.17 123.528 130.25 38.13 16.578 58.816 27.279 74.37 34.381 7.777 3.551 12.256 8.151 14.697 11.29s4.042 6.988 4.531 15.228c1.101 18.541-1.595 32.644-4.419 41.968s-5.2 12.925-5.2 12.925l22.433 19.015zM279.99 414.237l10.697-15.18c-0.887-16.769 0-51.279 0-84.047 0-15.558 4.204-36.156 1.772-49.205-4.685-25.143-4.006-33.818-8.903-49.609-3.892-12.55-8.256-34.361-11.158-41.114-7.858-18.288-9.797-60.161-1.745-85.894 8.154-26.060 13.226-59.528 25.976-78.763l4.742-48.906c-28.188 38.181-56.634 82.055-68.394 119.642-10.6 33.878-9.848 93.36-0.185 115.844 5.858 13.634 11.428 27.269 17.668 38.636 7.678 13.987 12.048 27.92 15.519 43.401 2.99 13.334 8.248 35.049 9.55 51.115 2.605 32.131 3.469 65.953 4.462 84.079z" horiz-adv-x="576" />
+</font></defs></svg>

css/piskel-style-packaged.css

@@ -172,12 +172,14 @@ body {
   background: url(../img/canvas_background/lowcont_dark_canvas_background.png) repeat;
 }
 
-.layers-canvas {
+.layers-canvas,
+.canvas.onion-skin-canvas {
   opacity: 0.2;
 }
 
 .canvas.canvas-overlay,
-.canvas.layers-canvas {
+.canvas.layers-canvas,
+.canvas.onion-skin-canvas {
   position: absolute;
   top: 0;
   left: 0;
@@ -193,60 +195,10 @@ body {
 .canvas.layers-below-canvas  {z-index:  7;}
 .canvas.drawing-canvas       {z-index:  8;}
 .canvas.layers-above-canvas  {z-index:  9;}
-.canvas.canvas-overlay       {z-index: 10;}
+.canvas.onion-skin-canvas    {z-index: 10;}
+.canvas.canvas-overlay       {z-index: 11;}
 
-/**
- * Animated preview styles.
- */
 
-.preview-container {
-  border : 0px Solid black;
-  border-radius:5px 0px 0px 5px;
-  box-shadow : 0px 0px 2px rgba(0,0,0,0.2);
-  font-size: 0;
-}
-
-.preview-container .canvas-container {
-  overflow : hidden;
-}
-
-.preview-container canvas {
-  border : 0px Solid transparent;
-}
-
-#animated-preview-container {
-  background: #333;
-  border-radius : 0 0 2px 2px;
-  overflow : hidden;
-}
-
-#animated-preview-canvas-container {
-  height :200px;
-  width : 200px;
-}
-
-.tiled-frame-container {
-  height: 100%;
-  width: 100%;
-  position: relative;
-  background-repeat : repeat;
-}
-
-.display-fps {
-  float: left;
-  color: #aaa;
-  font-size: 12px;
-  min-width: 55px;
-  vertical-align: bottom;
-  line-height: 24px;
-}
-
-.range-fps {
-  overflow: hidden;
-  width: 120px;
-  height : 24px;
-  margin : 0;
-}
 
 /**
  * User messages
@@ -315,6 +267,40 @@ body {
   font-weight:bold;
   font-family:Courier;
 }
+@font-face {
+  font-family: 'piskel';
+  src:url('fonts/piskel.eot?-3olv93');
+  src:url('fonts/piskel.eot?#iefix-3olv93') format('embedded-opentype'),
+    url('fonts/piskel.woff?-3olv93') format('woff'),
+    url('fonts/piskel.ttf?-3olv93') format('truetype'),
+    url('fonts/piskel.svg?-3olv93#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+[class^="piskel-icon-"], [class*=" piskel-icon-"] {
+  font-family: 'piskel';
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.piskel-icon-eye:before {
+  content: "\e600";
+}
+
+.piskel-icon-onion:before {
+  content: "\e601";
+}
+
+
 .row {
   display: block;
 }
@@ -514,6 +500,7 @@ body {
 }
 
 .settings-title {
+  color : gold;
   margin-top: 20px;
   margin-bottom: 10px;
   text-transform: uppercase;
@@ -1415,6 +1402,28 @@ body {
   background-size: 22px;
   background-repeat: no-repeat;
   background-position: 97%;
+  position: relative;
+}
+
+.layers-toggle-preview {
+  position: absolute;
+  top : 0.9em;
+  right: 3.3em;
+
+  color: #999;
+  font-size: 0.8em;
+  cursor: pointer;
+
+  transition: 0.2s linear;
+}
+
+.layers-toggle-preview:hover {
+  color: white;
+}
+
+.layers-toggle-preview-enabled,
+.layers-toggle-preview-enabled:hover {
+  color : gold;
 }
 
 .layers-list {
@@ -1522,6 +1531,82 @@ body {
   right: 1px;
   border-left-color: transparent;
 }
+/**
+ * Animated preview styles.
+ */
+
+.preview-container {
+  border : 0px Solid black;
+  border-radius:5px 0px 0px 5px;
+  box-shadow : 0px 0px 2px rgba(0,0,0,0.2);
+  font-size: 0;
+}
+
+.preview-container .canvas-container {
+  overflow : hidden;
+}
+
+.preview-container canvas {
+  border : 0px Solid transparent;
+}
+
+#animated-preview-container {
+  background: #333;
+  border-radius : 0 0 2px 2px;
+  overflow : hidden;
+}
+
+#animated-preview-canvas-container {
+  height :200px;
+  width : 200px;
+}
+
+.tiled-frame-container {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  background-repeat : repeat;
+}
+
+.display-fps {
+  float: left;
+  color: #aaa;
+  font-size: 12px;
+  min-width: 55px;
+  vertical-align: bottom;
+  line-height: 26px;
+}
+
+.range-fps {
+  overflow: hidden;
+  width: 100px;
+  height : 26px;
+  margin : 0;
+  box-sizing: border-box;
+  padding:0;
+}
+
+.preview-toggle-onion-skin {
+  font-size: 1.6rem;
+  color: #aaa;
+  float: left;
+  line-height: 26px;
+  height: 100%;
+  padding-left: 5px;
+  padding-right: 5px;
+  border-right: 1px solid #222;
+  transition: 0.2s linear;
+  cursor:pointer;
+}
+
+.preview-toggle-onion-skin:hover {
+  color : white;
+}
+
+.preview-toggle-onion-skin-enabled,
+.preview-toggle-onion-skin-enabled:hover {
+  color : gold;
+}
 /***
 Spectrum Colorpicker v1.1.2
 https://github.com/bgrins/spectrum

templates/layers-list.html

@@ -1,5 +1,10 @@
 <div class="toolbox-container layers-list-container">
-  <h3 class="toolbox-title layers-title">Layers</h3>
+  <h3 class="toolbox-title layers-title">Layers
+    <div title="Toggle layer preview (alt+L)"
+         rel="tooltip"
+         data-placement="top"
+         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>

templates/preview.html

@@ -3,6 +3,10 @@
     <div class="canvas-background"></div>
   </div>
   <div>
+    <div title="Toggle onion skin (alt+O)"
+         rel="tooltip"
+         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"/>
   </div>

templates/settings/application.html

@@ -29,9 +29,10 @@
       <option value="4">Enabled - 4px wide</option>
     </select>
   </div>
-  <div class="settings-item">
+
+  <!-- <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> -->
 </div>
 

templates/settings/export-gif.html

@@ -3,17 +3,19 @@
     Export to Animated GIF
   </div>
   <div class="settings-item">
-    <label>Select resolution:</label>
+    <form action="" method="POST" class="gif-export-form">
-    <form action="" method="POST" name="gif-export-upload-form">
+      <label>Select resolution:</label>
       <script type="text/template" id="gif-export-radio-template">
           <label style="display:block"><input type="radio" name="gif-zoom-level" value="{{value}}"/>
           {{label}}</label>
       </script>
       <div class="gif-export-radio-group"></div>
-      <input type="submit" class="button button-primary gif-upload-button" value="Upload" />
+
-      <span class="gif-export-progress-status"></span>
+      <button type="button" class="button button-primary gif-download-button">Download GIF</button>
-      <div class="gif-export-progress-bar"></div>
+      <button type="button" class="button button gif-upload-button">Export online</button>
     </form>
+    <span class="gif-export-progress-status"></span>
+    <div class="gif-export-progress-bar"></div>
     <div class="gif-export-preview"></div>
     <div class="gif-upload-status"></div>
   </div>

templates/settings/export-png.html

@@ -6,8 +6,8 @@
     <span>Preview : </span>
     <div class="png-export-preview"></div>
     <div class="png-export-radio-group"></div>
-    <input type="button" class="button button-primary png-download-button" value="Download PNG" />
+    <button type="button" class="button button-primary png-download-button">Download PNG</button>
-    <input type="button" class="button png-upload-button" value="Upload PNG" />
+    <button type="button" class="button png-upload-button">Export online</button>
     <!-- <input type="button" class="button png-download-button" value="Download" /> -->
     <div class="png-upload-status"></div>
   </div>

templates/settings/localstorage.html

@@ -1,4 +1,9 @@
 <div class="settings-section">
+  <div class="settings-title">
+    Restore previous session
+  </div>
+  <div class="settings-item previous-session">
+  </div>
   <div class="settings-title">
     Browse Local Piskels
   </div>
@@ -15,4 +20,12 @@
       <td><a class="local-piskel-delete-link" data-action="delete" data-name="{{name}}" href="javascript:void(0);">x</a></td>
     </tr>
   </script>
+  <script type="text/template" id="previous-session-info-template">
+    <div>
+      Restore a backup of <span style="color:gold">{{name}}</span>, saved at <span style="color:white">{{date}}</span> ?
+      <div style="margin-top:10px;">
+        <button type="button" class="button  button-primary restore-session-button">Restore</button>
+      </div>
+    </div>
+  </script>
 </div>