mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

Issue #446: Improve export panels style consistency

Browse Source
This commit is contained in:
Julian Descottes 2016-05-23 22:29:20 +02:00
parent ba8964a2af
commit c63c764060
8 changed files with 52 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/css/settings-export.css
View File

@ -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;
}

2
src/css/settings.css
View File

@ -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;

1
src/css/style.css
View File

@ -52,7 +52,6 @@ body {
}
.checkbox-fix {
vertical-align: -2px;
margin-left: 0;
}

1
src/js/controller/settings/exportimage/ZipExportController.js
View File

@ -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');

8
src/templates/settings/export/gif.html
View File

@ -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>

19
src/templates/settings/export/misc.html
View File

@ -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>

8
src/templates/settings/export/png.html
View File

@ -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>

26
src/templates/settings/export/zip.html
View File

@ -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>