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

0.10.0-beta

Browse Source
This commit is contained in:
juliandescottes 2017-01-10 16:27:38 +01:00
parent 42c9eacf4f
commit cbb249ccdc
9 changed files with 35389 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3863
css/piskel-style-packaged-2017-01-10-04-26.css Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
img/icons.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

BIN
img/icons/common/common-warning-red.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 446 B

BIN
img/icons/common/common-warning-red@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 851 B

BIN
img/icons@2x.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 24 KiB

124
index.html
View File

@ -95,6 +95,7 @@
</script>
</div>
<div id="column-wrapper" class="column-wrapper">
<div class='column left-column'>
<div id="preview-list-wrapper" class="preview-list-wrapper">
@ -173,7 +174,7 @@
<script type="text/template" id="layer-item-template">
<li class="layer-item {{isselected:current-layer-item}}"
data-layer-index="{{layerindex}}">
{{layername}}
<span class="layer-name" data-placement="top">{{layername}}</span>
<span class="layer-item-opacity"
title="Layer opacity" rel="tooltip" data-placement="top">
{{opacity}}&#945;
@ -224,35 +225,35 @@
<div
data-setting="user"
class="tool-icon icon-settings-gear-white"
title="<span style='color:gold'>PREFERENCES</span></br>"
title="<span class='highlight'>PREFERENCES</span></br>"
rel="tooltip" data-placement="left">
</div>
<div
data-setting="resize"
class="tool-icon icon-settings-resize-white"
title="<span style='color:gold'>RESIZE</span></br>Resize the drawing area"
title="<span class='highlight'>RESIZE</span></br>Resize the drawing area"
rel="tooltip" data-placement="left">
</div>
<div
data-setting="save"
class="tool-icon icon-settings-save-white"
title="<span style='color:gold'>SAVE</span></br>Save to your gallery, save locally<br/>or export as a file"
title="<span class='highlight'>SAVE</span></br>Save to your gallery, save locally<br/>or export as a file"
rel="tooltip" data-placement="left" >
</div>
<div
data-setting="export"
class="tool-icon icon-settings-export-white"
title="<span style='color:gold'>EXPORT</span></br>Export as Image, as Spritesheet<br/>or as Animated GIF"
title="<span class='highlight'>EXPORT</span></br>Export as Image, as Spritesheet<br/>or as Animated GIF"
rel="tooltip" data-placement="left">
</div>
<div
data-setting="import"
class="tool-icon icon-settings-open-folder-white"
title="<span style='color:gold'>IMPORT</span></br>Import an existing image,<br/>an animated GIF or a .piskel file"
title="<span class='highlight'>IMPORT</span></br>Import an existing image,<br/>an animated GIF or a .piskel file"
rel="tooltip" data-placement="left">
</div>
@ -367,7 +368,10 @@
</script>
</div>
<span class="cheatsheet-link icon-common-keyboard-gold" rel="tooltip" data-placement="right" title="Keyboard shortcuts">&nbsp;</span>
<span class="cheatsheet-link icon-common-keyboard-gold"
rel="tooltip" data-placement="right" title="Keyboard shortcuts">&nbsp;</span>
<div class="performance-link icon-common-warning-red"
rel="tooltip" data-placement="left" title="Performance problem detected, learn more.">&nbsp;</div>
<!-- dialogs partials -->
<script type="text/template" id="templates/dialogs/create-palette.html">
@ -583,6 +587,56 @@
<span class="cheatsheet-description">{{description}}</span>
</li>
</script>
<script type="text/template" id="templates/dialogs/performance-info.html">
<div class="dialog-wrapper">
<h3 class="dialog-head">
Performance issues
<span class="dialog-close">X</span>
</h3>
<div class="dialog-performance-info-body">
<p>The current sprite may exceed the recommendations for Piskel.</p>
<p>You can ignore this warning and continue working with your sprite but you might experience the following issues:</p>
<ul>
<li>saving failures</li>
<li>slowdowns</li>
<li>crashes</li>
</ul>
<p>If you ignore this warning, please save often!</p>
<p>To fix the issue, try adjusting your sprite settings:</p>
<ul>
<li>sprite resolution <sup title="recommended: lower than 256x256, max: 512x512" rel="tooltip" data-placement="top">?</sup></li>
<li>number of layers <sup title="recommended: lower than 5, max: 20" rel="tooltip" data-placement="top">?</sup></li>
<li>number of frames <sup title="recommended: lower than 25, max: 100" rel="tooltip" data-placement="top">?</sup></li>
<li>number of colors <sup title="max: 100" rel="tooltip" data-placement="top">?</sup></li>
</ul>
<p>We strive to improve Piskel, its performances and stability, but this is a personal project with limited time and resources.
We prefer to warn you early rather than having you lose your work.</p>
<p>Feedback welcome at <a href="https://github.com/juliandescottes/piskel" target="_blank">https://github.com/juliandescottes/piskel</a></p>
<p>
<div class="warning-icon icon-common-warning-red">&nbsp;</div>
<div class="warning-icon-info">This icon will remain on the top-bottom of the application until the performance issue is fixed. You can click on it at anytime to display this information again.</div>
</p>
</div>
</div>
</script>
<script type="text/template" id="templates/dialogs/unsupported-browser.html">
<div class="dialog-wrapper">
<h3 class="dialog-head">
Browser not supported
<span class="dialog-close">X</span>
</h3>
<div class="dialog-content">
<p>Your current browser (<span id="current-user-agent"></span>) is not supported.</p>
<p>Piskel is currently tested for:</p>
<ul class="supported-browser-list">
<li>Google Chrome <a href="https://www.google.com/chrome/browser/desktop/" target="_blank">https://www.google.com/chrome/browser/desktop/</a></li>
<li>Mozilla Firefox <a href="https://www.mozilla.org/en-US/firefox/" target="_blank">https://www.mozilla.org/en-US/firefox/</a></li>
<li>Microsoft Edge <a href="https://www.microsoft.com/en-us/windows/microsoft-edge" target="_blank">https://www.microsoft.com/en-us/windows/microsoft-edge</a></li>
</ul>
<p>This browser has not been tested with Piskel, you might experience unknown bugs and crashes if you decide to continue.</p>
</div>
</div>
</script>
<!-- settings-panel partials -->
<script type="text/html" id="templates/settings/application.html">
@ -611,7 +665,7 @@
</div>
<div class="settings-item">
<label for="grid-width">Pixel Grid</label>
<label for="grid-width">Pixel grid</label>
<select id="grid-width" class="grid-width-select">
<option value="0">Disabled</option>
<option value="1">1px</option>
@ -622,9 +676,9 @@
</div>
<div class="settings-item">
<label>Layer Opacity</label>
<input type="range" class="layer-opacity-input" name="layer-opacity" min="0" max="1" step="0.05"/>
<span class="layer-opacity-text"></span>
<label>Layer opacity</label>
<input type="range" class="settings-opacity-input layer-opacity-input" name="layer-opacity" min="0" max="1" step="0.05"/>
<span class="settings-opacity-text layer-opacity-text"></span>
</div>
<div class="settings-item">
@ -634,11 +688,25 @@
</label>
</div>
<div class="settings-item">
<label>Seamless opacity</label>
<input type="range" class="settings-opacity-input seamless-opacity-input" name="seamless-opacity" min="0" max="0.5" step="0.01"/>
<span class="settings-opacity-text seamless-opacity-text"></span>
</div>
<div class="settings-item">
<label>Maximum FPS</label>
<input type="text" class="textfield textfield-small max-fps-input" autocomplete="off" name="max-fps"/>
</div>
<div class="settings-item">
<label for="color-format">Color format</label>
<select id="color-format" class="color-format-select">
<option value="hex">Hex</option>
<option value="rgb">RGB</option>
</select>
</div>
<input type="submit" class="button button-primary" value="Apply settings" />
</div>
</form>
@ -707,7 +775,7 @@
<input type="text" class="textfield resize-size-field" autocomplete="off" name="default-height"/>
<span>px</span>
</div>
<input type="submit" class="button button-primary resize-button" value="Set default" />
<input type="submit" class="button button-primary default-size-button" value="Set default" />
</form>
</div>
</div>
@ -741,10 +809,15 @@
<div class="settings-title">Save online</div>
<div class="settings-item">
<input type="button" class="button button-primary" id="save-gallery-button" value="Save to your gallery" />
<div class="save-status">Your piskel will be stored online in your gallery.</div>
<div class="save-status save-online-status">Your piskel will be stored online in your gallery.</div>
</div>
</script>
<script type="text/template" id="save-gallery-warning-partial">
<div class="save-status-warning-icon icon-common-warning-red">&nbsp;</div>
<div class="save-status-warning-text">Saving to the gallery might fail due to the sprite size.</div>
</script>
<!-- save-gallery-unavailable-partial -->
<script type="text/template" id="save-gallery-unavailable-partial">
<div class="settings-title">Save online</div>
@ -827,7 +900,7 @@
<script type="text/template" id="previous-session-info-template">
<div>
Restore a backup of <span style="color:gold">{{name}}</span>, saved at <span style="color:white">{{date}}</span> ?
Restore a backup of <span class="highlight">{{name}}</span>, saved at <span style="color:white">{{date}}</span> ?
<div style="margin-top:10px;">
<button type="button" class="button button-primary restore-session-button">Restore</button>
</div>
@ -863,7 +936,7 @@
<div class="export-panel-png">
<div class="export-panel-header export-info">Export your animation as a PNG spritesheet containing all frames.</div>
<div class="export-panel-section png-export-layout-section">
<div style="color: gold; padding-bottom: 5px;">Spritesheet layout options:</div>
<div class="highlight" style="padding-bottom: 5px;">Spritesheet layout options:</div>
<div style="display: flex; line-height: 20px;">
<div style="flex: 1;">
<span>Columns</span>
@ -883,8 +956,21 @@
<button type="button" style="white-space: nowrap;" class="button button-primary datauri-open-button">To data-uri</button>
<span class="png-export-datauri-info export-info">Open the PNG export in your browser as a data-uri</span>
</div>
<div class="export-panel-section">
<div style="padding-bottom: 5px">
<span class="highlight export-panel-row">Export for PixiJS Movie: </span>
</div>
<div class="export-panel-row">
<button type="button" class="button button-primary png-pixi-download-button"/>Download</button>
<span class="png-export-dimension-info export-info">Spritesheet with JSON metadata</span>
</div>
</div>
</div>
</script>
<script type="text/html" id="templates/settings/export/gif.html">
<div class="export-panel-gif">
<div class="export-panel-header export-info">
@ -928,7 +1014,7 @@
</div>
<div class="export-panel-section">
<div style="padding-bottom: 5px">
<span style="color: gold;">Export as C File: </span>
<span class="highlight">Export as C File: </span>
<span class="export-info">
C file with frame rendered as array.
</span>
@ -937,7 +1023,7 @@
</div>
<div class="export-panel-section">
<div style="padding-bottom: 5px">
<span style="color: gold;">Export selected frame as PNG File: </span>
<span class="highlight">Export selected frame as PNG File: </span>
<span class="export-info">
PNG export of the currently selected frame.
</span>
@ -951,9 +1037,9 @@
(function () {
/**
* See @Gruntfile.js => after build, -2016-10-10-12-12 is replaced by the build version
* See @Gruntfile.js => after build, -2017-01-10-04-26 is replaced by the build version
*/
var version = '-2016-10-10-12-12';
var version = '-2017-01-10-04-26';
var versionHasNotBeenReplaced = version.indexOf('@@') === 0;
if (versionHasNotBeenReplaced) {
version = '';

31299
js/piskel-packaged-2017-01-10-04-26.js Normal file
View File

File diff suppressed because one or more lines are too long

17
js/piskel-packaged-min-2017-01-10-04-26.js Normal file
View File

File diff suppressed because one or more lines are too long

124
piskelapp-partials/main-partial.html
View File

@ -47,6 +47,7 @@
</script>
</div>
<div id="column-wrapper" class="column-wrapper">
<div class='column left-column'>
<div id="preview-list-wrapper" class="preview-list-wrapper">
@ -125,7 +126,7 @@
<script type="text/template" id="layer-item-template">
<li class="layer-item {{isselected:current-layer-item}}"
data-layer-index="{{layerindex}}">
{{layername}}
<span class="layer-name" data-placement="top">{{layername}}</span>
<span class="layer-item-opacity"
title="Layer opacity" rel="tooltip" data-placement="top">
{{opacity}}&#945;
@ -176,35 +177,35 @@
<div
data-setting="user"
class="tool-icon icon-settings-gear-white"
title="<span style='color:gold'>PREFERENCES</span></br>"
title="<span class='highlight'>PREFERENCES</span></br>"
rel="tooltip" data-placement="left">
</div>
<div
data-setting="resize"
class="tool-icon icon-settings-resize-white"
title="<span style='color:gold'>RESIZE</span></br>Resize the drawing area"
title="<span class='highlight'>RESIZE</span></br>Resize the drawing area"
rel="tooltip" data-placement="left">
</div>
<div
data-setting="save"
class="tool-icon icon-settings-save-white"
title="<span style='color:gold'>SAVE</span></br>Save to your gallery, save locally<br/>or export as a file"
title="<span class='highlight'>SAVE</span></br>Save to your gallery, save locally<br/>or export as a file"
rel="tooltip" data-placement="left" >
</div>
<div
data-setting="export"
class="tool-icon icon-settings-export-white"
title="<span style='color:gold'>EXPORT</span></br>Export as Image, as Spritesheet<br/>or as Animated GIF"
title="<span class='highlight'>EXPORT</span></br>Export as Image, as Spritesheet<br/>or as Animated GIF"
rel="tooltip" data-placement="left">
</div>
<div
data-setting="import"
class="tool-icon icon-settings-open-folder-white"
title="<span style='color:gold'>IMPORT</span></br>Import an existing image,<br/>an animated GIF or a .piskel file"
title="<span class='highlight'>IMPORT</span></br>Import an existing image,<br/>an animated GIF or a .piskel file"
rel="tooltip" data-placement="left">
</div>
@ -319,7 +320,10 @@
</script>
</div>
<span class="cheatsheet-link icon-common-keyboard-gold" rel="tooltip" data-placement="right" title="Keyboard shortcuts">&nbsp;</span>
<span class="cheatsheet-link icon-common-keyboard-gold"
rel="tooltip" data-placement="right" title="Keyboard shortcuts">&nbsp;</span>
<div class="performance-link icon-common-warning-red"
rel="tooltip" data-placement="left" title="Performance problem detected, learn more.">&nbsp;</div>
<!-- dialogs partials -->
<script type="text/template" id="templates/dialogs/create-palette.html">
@ -535,6 +539,56 @@
<span class="cheatsheet-description">{{description}}</span>
</li>
</script>
<script type="text/template" id="templates/dialogs/performance-info.html">
<div class="dialog-wrapper">
<h3 class="dialog-head">
Performance issues
<span class="dialog-close">X</span>
</h3>
<div class="dialog-performance-info-body">
<p>The current sprite may exceed the recommendations for Piskel.</p>
<p>You can ignore this warning and continue working with your sprite but you might experience the following issues:</p>
<ul>
<li>saving failures</li>
<li>slowdowns</li>
<li>crashes</li>
</ul>
<p>If you ignore this warning, please save often!</p>
<p>To fix the issue, try adjusting your sprite settings:</p>
<ul>
<li>sprite resolution <sup title="recommended: lower than 256x256, max: 512x512" rel="tooltip" data-placement="top">?</sup></li>
<li>number of layers <sup title="recommended: lower than 5, max: 20" rel="tooltip" data-placement="top">?</sup></li>
<li>number of frames <sup title="recommended: lower than 25, max: 100" rel="tooltip" data-placement="top">?</sup></li>
<li>number of colors <sup title="max: 100" rel="tooltip" data-placement="top">?</sup></li>
</ul>
<p>We strive to improve Piskel, its performances and stability, but this is a personal project with limited time and resources.
We prefer to warn you early rather than having you lose your work.</p>
<p>Feedback welcome at <a href="https://github.com/juliandescottes/piskel" target="_blank">https://github.com/juliandescottes/piskel</a></p>
<p>
<div class="warning-icon icon-common-warning-red">&nbsp;</div>
<div class="warning-icon-info">This icon will remain on the top-bottom of the application until the performance issue is fixed. You can click on it at anytime to display this information again.</div>
</p>
</div>
</div>
</script>
<script type="text/template" id="templates/dialogs/unsupported-browser.html">
<div class="dialog-wrapper">
<h3 class="dialog-head">
Browser not supported
<span class="dialog-close">X</span>
</h3>
<div class="dialog-content">
<p>Your current browser (<span id="current-user-agent"></span>) is not supported.</p>
<p>Piskel is currently tested for:</p>
<ul class="supported-browser-list">
<li>Google Chrome <a href="https://www.google.com/chrome/browser/desktop/" target="_blank">https://www.google.com/chrome/browser/desktop/</a></li>
<li>Mozilla Firefox <a href="https://www.mozilla.org/en-US/firefox/" target="_blank">https://www.mozilla.org/en-US/firefox/</a></li>
<li>Microsoft Edge <a href="https://www.microsoft.com/en-us/windows/microsoft-edge" target="_blank">https://www.microsoft.com/en-us/windows/microsoft-edge</a></li>
</ul>
<p>This browser has not been tested with Piskel, you might experience unknown bugs and crashes if you decide to continue.</p>
</div>
</div>
</script>
<!-- settings-panel partials -->
<script type="text/html" id="templates/settings/application.html">
@ -563,7 +617,7 @@
</div>
<div class="settings-item">
<label for="grid-width">Pixel Grid</label>
<label for="grid-width">Pixel grid</label>
<select id="grid-width" class="grid-width-select">
<option value="0">Disabled</option>
<option value="1">1px</option>
@ -574,9 +628,9 @@
</div>
<div class="settings-item">
<label>Layer Opacity</label>
<input type="range" class="layer-opacity-input" name="layer-opacity" min="0" max="1" step="0.05"/>
<span class="layer-opacity-text"></span>
<label>Layer opacity</label>
<input type="range" class="settings-opacity-input layer-opacity-input" name="layer-opacity" min="0" max="1" step="0.05"/>
<span class="settings-opacity-text layer-opacity-text"></span>
</div>
<div class="settings-item">
@ -586,11 +640,25 @@
</label>
</div>
<div class="settings-item">
<label>Seamless opacity</label>
<input type="range" class="settings-opacity-input seamless-opacity-input" name="seamless-opacity" min="0" max="0.5" step="0.01"/>
<span class="settings-opacity-text seamless-opacity-text"></span>
</div>
<div class="settings-item">
<label>Maximum FPS</label>
<input type="text" class="textfield textfield-small max-fps-input" autocomplete="off" name="max-fps"/>
</div>
<div class="settings-item">
<label for="color-format">Color format</label>
<select id="color-format" class="color-format-select">
<option value="hex">Hex</option>
<option value="rgb">RGB</option>
</select>
</div>
<input type="submit" class="button button-primary" value="Apply settings" />
</div>
</form>
@ -659,7 +727,7 @@
<input type="text" class="textfield resize-size-field" autocomplete="off" name="default-height"/>
<span>px</span>
</div>
<input type="submit" class="button button-primary resize-button" value="Set default" />
<input type="submit" class="button button-primary default-size-button" value="Set default" />
</form>
</div>
</div>
@ -693,10 +761,15 @@
<div class="settings-title">Save online</div>
<div class="settings-item">
<input type="button" class="button button-primary" id="save-gallery-button" value="Save to your gallery" />
<div class="save-status">Your piskel will be stored online in your gallery.</div>
<div class="save-status save-online-status">Your piskel will be stored online in your gallery.</div>
</div>
</script>
<script type="text/template" id="save-gallery-warning-partial">
<div class="save-status-warning-icon icon-common-warning-red">&nbsp;</div>
<div class="save-status-warning-text">Saving to the gallery might fail due to the sprite size.</div>
</script>
<!-- save-gallery-unavailable-partial -->
<script type="text/template" id="save-gallery-unavailable-partial">
<div class="settings-title">Save online</div>
@ -779,7 +852,7 @@
<script type="text/template" id="previous-session-info-template">
<div>
Restore a backup of <span style="color:gold">{{name}}</span>, saved at <span style="color:white">{{date}}</span> ?
Restore a backup of <span class="highlight">{{name}}</span>, saved at <span style="color:white">{{date}}</span> ?
<div style="margin-top:10px;">
<button type="button" class="button button-primary restore-session-button">Restore</button>
</div>
@ -815,7 +888,7 @@
<div class="export-panel-png">
<div class="export-panel-header export-info">Export your animation as a PNG spritesheet containing all frames.</div>
<div class="export-panel-section png-export-layout-section">
<div style="color: gold; padding-bottom: 5px;">Spritesheet layout options:</div>
<div class="highlight" style="padding-bottom: 5px;">Spritesheet layout options:</div>
<div style="display: flex; line-height: 20px;">
<div style="flex: 1;">
<span>Columns</span>
@ -835,8 +908,21 @@
<button type="button" style="white-space: nowrap;" class="button button-primary datauri-open-button">To data-uri</button>
<span class="png-export-datauri-info export-info">Open the PNG export in your browser as a data-uri</span>
</div>
<div class="export-panel-section">
<div style="padding-bottom: 5px">
<span class="highlight export-panel-row">Export for PixiJS Movie: </span>
</div>
<div class="export-panel-row">
<button type="button" class="button button-primary png-pixi-download-button"/>Download</button>
<span class="png-export-dimension-info export-info">Spritesheet with JSON metadata</span>
</div>
</div>
</div>
</script>
<script type="text/html" id="templates/settings/export/gif.html">
<div class="export-panel-gif">
<div class="export-panel-header export-info">
@ -880,7 +966,7 @@
</div>
<div class="export-panel-section">
<div style="padding-bottom: 5px">
<span style="color: gold;">Export as C File: </span>
<span class="highlight">Export as C File: </span>
<span class="export-info">
C file with frame rendered as array.
</span>
@ -889,7 +975,7 @@
</div>
<div class="export-panel-section">
<div style="padding-bottom: 5px">
<span style="color: gold;">Export selected frame as PNG File: </span>
<span class="highlight">Export selected frame as PNG File: </span>
<span class="export-info">
PNG export of the currently selected frame.
</span>
@ -903,9 +989,9 @@
(function () {
/**
* See @Gruntfile.js => after build, -2016-10-10-12-12 is replaced by the build version
* See @Gruntfile.js => after build, -2017-01-10-04-26 is replaced by the build version
*/
var version = '-2016-10-10-12-12';
var version = '-2017-01-10-04-26';
var versionHasNotBeenReplaced = version.indexOf('@@') === 0;
if (versionHasNotBeenReplaced) {
version = '';