Update gh-pages after PR merge : zoom-level, keyboard-shortcuts, model-size

templates/cheatsheet.html

@@ -0,0 +1,19 @@
+<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>
+</div>
+<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>

templates/drawing-tools.html

@@ -0,0 +1,18 @@
+<div class="sticky-section left-sticky-section" id="tool-section">
+  <div class="sticky-section-wrap">
+    <div class="vertical-centerer">
+      <ul id="tools-container" class="tools-wrapper"></ul>
+      <div class="palette-wrapper">
+        <div class="tool-icon tool-color-picker">
+          <input id="color-picker" class="color {hash:true}" type="text" value="" />
+          <input id="secondary-color-picker" class="secondary-color-picker color {hash:true}" type="text" value="" />
+        </div>
+        <div class="tool-icon tool-palette">
+          <div>
+            <span class="tool-icon palette-color" data-color="TRANSPARENT" title="Transparent"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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>

templates/layers-list.html

@@ -0,0 +1,13 @@
+<div class="layers-list-container">
+  <h3 class="layers-title">Layers</h3>
+  <div class="layers-button-container">
+    <button class="button layers-button" data-action="add"  >Add</button>
+    <button class="button layers-button" data-action="delete"  >Delete</button>
+    <button class="button layers-button layers-button-arrow" data-action="up"   >&#8593;</button>
+    <button class="button layers-button layers-button-arrow" data-action="down" >&#8595;</button>
+  </div>
+  <script type="text/template" id="layer-item-template">
+    <li class="layer-item" data-layer-name="{{layername}}">{{layername}}</li>
+  </script>
+  <ul class="layers-list"></ul>
+</div>

templates/preview.html

@@ -0,0 +1,9 @@
+<div class='preview-container'>
+  <div id='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>

templates/settings.html

@@ -0,0 +1,45 @@
+<div class="vertical-centerer">
+  <div
+    data-setting="user"
+    class="tool-icon gear-icon"
+    title="Preferences"
+    rel="tooltip" data-placement="left">
+  </div>
+
+  <div
+    data-setting="import"
+    class="tool-icon import-icon"
+    title="Import an existing picture"
+    rel="tooltip" data-placement="left">
+  </div>
+
+<!--   <a
+    class="tool-icon gallery-icon"
+    title="Visit gallery"
+    href="http://juliandescottes.github.io/piskel-website/"
+    rel="tooltip" data-placement="left" target="_blank">
+  </a> -->
+
+  <div
+    class="tool-icon save-icon"
+    title="Save to gallery"
+    onclick="pskl.app.storeSheet()"
+    rel="tooltip" data-placement="left" >
+  </div>
+
+  <div
+    data-setting="gif"
+    class="tool-icon upload-cloud-icon"
+    title="Upload as an animated GIF"
+    rel="tooltip" data-placement="left">
+    <span class="label">GIF</span>
+  </div>
+
+  <div
+    class="tool-icon upload-cloud-icon"
+    title="Upload as a spritesheet PNG"
+    onclick="pskl.app.uploadAsSpritesheetPNG()"
+    rel="tooltip" data-placement="left">
+    <span class="label">PNG</span>
+  </div>
+</div>

templates/settings/application.html

@@ -0,0 +1,26 @@
+<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="show-grid">Show grid:</label> <input id="show-grid" type="checkbox"/>
+  </div>
+</div>
+

templates/settings/export-gif.html

@@ -0,0 +1,18 @@
+<div class="settings-section">
+  <div class="settings-title">
+    Export to Animated GIF
+  </div>
+  <div class="settings-item">
+    <label>Select resolution:</label>
+    <form action="" method="POST" name="gif-export-upload-form">
+      <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" />
+      <button type="button" class="button gif-render-button">Render</button>
+    </form>
+    <div class="gif-export-preview"></div>
+  </div>
+</div>

templates/settings/import.html

@@ -0,0 +1,31 @@
+<div class="settings-section">
+  <div class="settings-title">
+    Import Picture
+  </div>
+  <div class="settings-item">
+    <form action="" method="POST" name="import-form">
+      <div class="import-section">
+        <span class="import-section-title  import-section-title-small">File :</span>
+        <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-section import-section-disabled">
+        <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 import-section-disabled">
+        <span class="import-section-title  import-section-title-small">Size :</span>
+        <input type="text" disabled="disabled" class="textfield import-resize-field" name="resize-width"/>x
+        <input type="text" disabled="disabled" class="textfield import-resize-field" name="resize-height"/>
+      </div>
+      <div class="import-section import-section-disabled">
+        <span class="import-section-title">Smooth resize :</span>
+        <input type="checkbox" disabled="disabled" checked="checked" name="smooth-resize-checkbox" value="1"/>
+      </div>
+      <input type="submit" name="import-submit" disabled="disabled" class="button button-primary import-button" value="Import" />
+    </form>
+  </div>
+</div>