Issue #446: Cleanup gif export panel

src/css/settings-export.css

@@ -136,3 +136,25 @@
   border-style: solid;
   border-width: 1px;
 }
+
+.export-panel-gif .settings-item {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  padding: 5px;
+  border: 1px solid #5d5d5d;
+  border-radius: 2px;
+}
+
+.export-panel-gif .button {
+  margin-right: 5px;
+  width: 75px;
+  flex-shrink: 0;
+}
+
+.gif-export-info {
+  padding: 10px 5px 0px;
+  font-weight: normal;
+  text-shadow: none;
+  font-style: italic;
+}

src/templates/settings/export/gif.html

@@ -1,14 +1,14 @@
 <script type="text/html" id="templates/settings/export/gif.html">
-  <div class="settings-title">
+  <div class="export-panel-gif">
-    Export to Animated 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>
+    <div class="settings-item">
-  <div class="settings-item">
+      <button type="button" class="button button-primary gif-download-button">Download</button>
-    <form action="" method="POST" class="gif-export-form">
+      <div>Download as an animated GIF.</div>
-      <div class="settings-item">
+    </div>
-        <button type="button" class="button button-primary gif-download-button">Download GIF</button>
+    <div class="settings-item">
-        <button type="button" class="button button gif-upload-button">Get public URL</button>
+      <button type="button" class="button button-primary gif-upload-button">Upload</button>
-      </div>
+      <div>Upload as an animated GIF to a public URL.</div>
-    </form>
+    </div>
     <div class="gif-upload">
       <div class="gif-export-preview"></div>
       <div class="gif-upload-status"></div>

src/templates/settings/export/png.html

@@ -1,9 +1,6 @@
 <script type="text/html" id="templates/settings/export/png.html">
-  <div class="settings-title">
-    Export Spritesheet
-  </div>
   <div class="settings-item">
-    <div class="settings-description">PNG with all frames side by side.</div>
+    <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>
 </script>

src/templates/settings/export/zip.html

@@ -1,19 +1,19 @@
 <script type="text/html" id="templates/settings/export/zip.html">
-  <div class="settings-title">
+  <div>
-    Export as ZIP
-  </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>
+      <div class="settings-description">ZIP with one PNG file per frame.</div>
-      <input type="text" class="zip-prefix-name  textfield" autocomplete="off" placeholder="PNG file prefix ...">
+      <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>
     </div>
-  <div class="settings-item">
+    <div class="settings-item">
-    <label>
+      <label>
-      <input class="zip-split-layers-checkbox  checkbox-fix" type="checkbox" />
+        <input class="zip-split-layers-checkbox  checkbox-fix" type="checkbox" />
-      Split by layers
+        Split by layers
-    </label>
+      </label>
+    </div>
+    <button type="button" class="button button-primary zip-generate-button"/>Download ZIP</button>
   </div>
-  <button type="button" class="button button-primary zip-generate-button"/>Download ZIP</button>
 </script>