From c63c764060de1a8392b8392f8d5c7d86bda21078 Mon Sep 17 00:00:00 2001
From: Julian Descottes <julian.descottes@gmail.com>
Date: Mon, 23 May 2016 22:29:20 +0200
Subject: [PATCH] Issue #446: Improve export panels style consistency

---
 src/css/settings-export.css                   | 26 +++++++++++--------
 src/css/settings.css                          |  2 +-
 src/css/style.css                             |  1 -
 .../exportimage/ZipExportController.js        |  1 +
 src/templates/settings/export/gif.html        |  8 +++---
 src/templates/settings/export/misc.html       | 19 +++++++++-----
 src/templates/settings/export/png.html        |  8 +++---
 src/templates/settings/export/zip.html        | 26 +++++++++----------
 8 files changed, 52 insertions(+), 39 deletions(-)

diff --git a/src/css/settings-export.css b/src/css/settings-export.css
index 9e069ac4..1dbf14e2 100644
--- a/src/css/settings-export.css
+++ b/src/css/settings-export.css
@@ -137,13 +137,24 @@
   border-width: 1px;
 }
 
-.export-panel-gif .settings-item {
+.export-info {
+  padding: 10px 5px 0px;
+  font-weight: normal;
+  text-shadow: none;
+  font-style: italic;
+}
+
+.export-panel-section {
+  padding: 5px;
+  margin-top: 10px;
+  border: 1px solid #5d5d5d;
+  border-radius: 2px;
+}
+
+.export-panel-gif .export-panel-section {
   display: flex;
   align-items: center;
   overflow: hidden;
-  padding: 5px;
-  border: 1px solid #5d5d5d;
-  border-radius: 2px;
 }
 
 .export-panel-gif .button {
@@ -151,10 +162,3 @@
   width: 75px;
   flex-shrink: 0;
 }
-
-.gif-export-info {
-  padding: 10px 5px 0px;
-  font-weight: normal;
-  text-shadow: none;
-  font-style: italic;
-}
diff --git a/src/css/settings.css b/src/css/settings.css
index 606f9551..f5a615ef 100644
--- a/src/css/settings.css
+++ b/src/css/settings.css
@@ -35,7 +35,7 @@
 .drawer-content {
   overflow: hidden;
   background-color: #444;
-  height: 650px;
+  height: 550px;
   max-height: 100%;
   width: 280px;
   border-top-left-radius: 4px;
diff --git a/src/css/style.css b/src/css/style.css
index 8375d1a2..3f69f9f3 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -52,7 +52,6 @@ body {
 }
 
 .checkbox-fix {
-  vertical-align: -2px;
   margin-left: 0;
 }
 
diff --git a/src/js/controller/settings/exportimage/ZipExportController.js b/src/js/controller/settings/exportimage/ZipExportController.js
index 9d0185d0..be0ab283 100644
--- a/src/js/controller/settings/exportimage/ZipExportController.js
+++ b/src/js/controller/settings/exportimage/ZipExportController.js
@@ -53,6 +53,7 @@
     var layers = this.piskelController.getLayers();
     var framePaddingLength = ('' + this.piskelController.getFrameCount()).length;
     var layerPaddingLength = ('' + layers.length).length;
+    var zoom = this.exportController.getExportZoom();
     for (var j = 0; this.piskelController.hasLayerAt(j); j++) {
       var layer = this.piskelController.getLayerAt(j);
       var layerid = pskl.utils.StringUtils.leftPad(j, layerPaddingLength, '0');
diff --git a/src/templates/settings/export/gif.html b/src/templates/settings/export/gif.html
index d839ba85..7162762c 100644
--- a/src/templates/settings/export/gif.html
+++ b/src/templates/settings/export/gif.html
@@ -1,11 +1,13 @@
 <script type="text/html" id="templates/settings/export/gif.html">
   <div class="export-panel-gif">
-    <div class="gif-export-info">The animation will be converted to an animated GIF. Opacity will not be preserved. Colors might be resampled.</div>
-    <div class="settings-item">
+    <div class="export-info">
+      Convert your sprite to an animated GIF. Opacity will not be preserved. Colors might be resampled.
+    </div>
+    <div class="export-panel-section">
       <button type="button" class="button button-primary gif-download-button">Download</button>
       <div>Download as an animated GIF.</div>
     </div>
-    <div class="settings-item">
+    <div class="export-panel-section">
       <button type="button" class="button button-primary gif-upload-button">Upload</button>
       <div>Upload as an animated GIF to a public URL.</div>
     </div>
diff --git a/src/templates/settings/export/misc.html b/src/templates/settings/export/misc.html
index 5f2e004c..bfc64e1b 100644
--- a/src/templates/settings/export/misc.html
+++ b/src/templates/settings/export/misc.html
@@ -1,9 +1,16 @@
 <script type="text/html" id="templates/settings/export/misc.html">
-  <div class="settings-title">
-    Export as C File
-  </div>
-  <div class="settings-item">
-    <div class="settings-description">C file with frame rendered as array.</div>
-    <button type="button" class="button button-primary c-download-button">Download C file</button>
+  <div class="export-panel-misc">
+    <div class="export-info">
+      Less usual export formats. Feedback and improvements welcome.
+    </div>
+    <div class="export-panel-section">
+      <div style="padding-bottom: 5px">
+        <span style="color: gold;">Export as C File: </span>
+        <span style="font-weight: normal; text-shadow: none; font-style: italic">
+          C file with frame rendered as array.
+        </span>
+      </div>
+      <button type="button" class="button button-primary c-download-button">Download C file</button>
+    </div>
   </div>
 </script>
\ No newline at end of file
diff --git a/src/templates/settings/export/png.html b/src/templates/settings/export/png.html
index fd0dc42c..39f176f0 100644
--- a/src/templates/settings/export/png.html
+++ b/src/templates/settings/export/png.html
@@ -1,6 +1,8 @@
 <script type="text/html" id="templates/settings/export/png.html">
-  <div class="settings-item">
-    <div class="settings-description">Export Spritesheet as a PNG with all frames side by side.</div>
-    <button type="button" class="button button-primary png-download-button">Download PNG</button>
+  <div class="export-panel-png">
+    <div class="export-info">Export your animation as a PNG spritesheet containing all frames.</div>
+    <div class="export-panel-section">
+      <button type="button" class="button button-primary png-download-button">Download PNG</button>
+    </div>
   </div>
 </script>
\ No newline at end of file
diff --git a/src/templates/settings/export/zip.html b/src/templates/settings/export/zip.html
index 564795e9..362d0fa7 100644
--- a/src/templates/settings/export/zip.html
+++ b/src/templates/settings/export/zip.html
@@ -1,19 +1,17 @@
 <script type="text/html" id="templates/settings/export/zip.html">
-  <div>
-    <div class="settings-item">
-      <div class="settings-description">ZIP with one PNG file per frame.</div>
-      <div class="settings-description">File names will start with the prefix below.</div>
-      <div class="settings-item">
-        <label>Prefix</label>
-        <input type="text" class="zip-prefix-name  textfield" autocomplete="off" placeholder="PNG file prefix ...">
+  <div class="export-panel-zip">
+    <div class="export-info">ZIP archive containing one PNG for each frame. File names will start with the prefix below.</div>
+    <div class="export-panel-section">
+      <div style="display: flex; line-height: 23px;">
+        <label style="flex-shrink: 0; padding-right:5px;">Prefix</label>
+        <input type="text" style="flex: 1;" class="zip-prefix-name textfield"
+               autocomplete="off" placeholder="PNG file prefix ...">
       </div>
+      <div style="margin: 5px 0;">
+        <input id="zip-split-layers" class="zip-split-layers-checkbox checkbox-fix" type="checkbox" />
+        <label for="zip-split-layers">Split by layers</label>
+      </div>
+      <button type="button" class="button button-primary zip-generate-button"/>Download ZIP</button>
     </div>
-    <div class="settings-item">
-      <label>
-        <input class="zip-split-layers-checkbox  checkbox-fix" type="checkbox" />
-        Split by layers
-      </label>
-    </div>
-    <button type="button" class="button button-primary zip-generate-button"/>Download ZIP</button>
   </div>
 </script>
\ No newline at end of file