Issue #446: Cleanup gif export panel

This commit is contained in:
Julian Descottes 2016-05-23 00:40:23 +02:00
parent f66c2578ab
commit ba8964a2af
4 changed files with 47 additions and 28 deletions

View File

@ -136,3 +136,25 @@
border-style: solid; border-style: solid;
border-width: 1px; 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;
}

View File

@ -1,14 +1,14 @@
<script type="text/html" id="templates/settings/export/gif.html"> <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-upload">
<div class="gif-export-preview"></div> <div class="gif-export-preview"></div>
<div class="gif-upload-status"></div> <div class="gif-upload-status"></div>

View File

@ -1,9 +1,6 @@
<script type="text/html" id="templates/settings/export/png.html"> <script type="text/html" id="templates/settings/export/png.html">
<div class="settings-title">
Export Spritesheet
</div>
<div class="settings-item"> <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> <button type="button" class="button button-primary png-download-button">Download PNG</button>
</div> </div>
</script> </script>

View File

@ -1,19 +1,19 @@
<script type="text/html" id="templates/settings/export/zip.html"> <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"> <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>
<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> </div>
<button type="button" class="button button-primary zip-generate-button"/>Download ZIP</button>
</script> </script>