From 32e528525c2265b056505ee9c6bb700b56d8b0da Mon Sep 17 00:00:00 2001
From: jdescottes <julian.descottes@gmail.com>
Date: Wed, 27 Aug 2014 01:12:29 +0200
Subject: [PATCH] Small cleanup zip export screen

---
 src/js/controller/settings/PngExportController.js | 6 ++++--
 src/templates/settings/export.html                | 7 ++++---
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/js/controller/settings/PngExportController.js b/src/js/controller/settings/PngExportController.js
index c28ddaf1..d4aab120 100644
--- a/src/js/controller/settings/PngExportController.js
+++ b/src/js/controller/settings/PngExportController.js
@@ -8,7 +8,9 @@
   };
 
   ns.PngExportController.prototype.init = function () {
-    this.previewContainerEl = document.querySelectorAll(".png-export-preview")[0];
+    this.previewContainerEl = document.querySelector(".png-export-preview");
+    this.pngFilePrefixInput = document.getElementById('zip-prefix-name');
+    this.pngFilePrefixInput.value = 'sprite_';
 
     document.querySelector(".png-download-button").addEventListener('click', this.onPngDownloadButtonClick_.bind(this));
 
@@ -30,7 +32,7 @@
     for (var i = 0; i < this.piskelController.getFrameCount(); i++) {
       var frame = this.piskelController.getFrameAt(i);
       var canvas = this.getFrameAsCanvas_(frame);
-      var basename = document.getElementById("zip-file-name").value || "sprite_";
+      var basename = this.pngFilePrefixInput.value;
       var filename =  basename + (i+1) + ".png";
       zip.file(filename, pskl.CanvasUtils.getBase64FromCanvas(canvas) + '\n', {base64: true});
     }
diff --git a/src/templates/settings/export.html b/src/templates/settings/export.html
index ca344873..56865939 100644
--- a/src/templates/settings/export.html
+++ b/src/templates/settings/export.html
@@ -11,10 +11,11 @@
     Export as ZIP
   </div>
   <div class="settings-item">
-    <span class="settings-description">ZIP with one PNG file per frame. Name will use the prefix above and append the frame index, ex: sprite_1.png</span>
+    <span class="settings-description">ZIP with one PNG file per frame.</span>
+    <span class="settings-description" style="display:block">File names will start with the prefix below.</span>
     <div class="settings-item">
-      <label for="zip-file-name">File prefix:</label>
-      <input id="zip-file-name" type="text" class="textfield" placeholder="sprite_">
+      <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>