Issue #744 - show notification when exporting to GIF can not preserve colors

This commit is contained in:
Julian Descottes 2017-09-24 15:48:41 +02:00
parent d502d3416b
commit dd8217e21b
3 changed files with 33 additions and 3 deletions

View File

@ -43,8 +43,29 @@
float : left; float : left;
} }
.gif-export-warning {
display: none;
}
.gif-export-warning.visible {
display: flex;
align-items: center;
border: 1px solid red;
padding: 5px;
margin: 5px 0;
}
.gif-export-warning-icon {
flex-shrink: 0;
margin-right: 5px;
}
.gif-export-warning-message {
font-weight: normal;
}
.preview-upload-ongoing:before{ .preview-upload-ongoing:before{
content: "Upload ongoing ..."; content: "Upload in progress...";
position: absolute; position: absolute;
display: block; display: block;
height: 100%; height: 100%;

View File

@ -14,7 +14,6 @@
pskl.utils.inherit(ns.GifExportController, pskl.controller.settings.AbstractSettingController); pskl.utils.inherit(ns.GifExportController, pskl.controller.settings.AbstractSettingController);
ns.GifExportController.prototype.init = function () { ns.GifExportController.prototype.init = function () {
this.uploadStatusContainerEl = document.querySelector('.gif-upload-status'); this.uploadStatusContainerEl = document.querySelector('.gif-upload-status');
this.previewContainerEl = document.querySelector('.gif-export-preview'); this.previewContainerEl = document.querySelector('.gif-export-preview');
this.uploadButton = document.querySelector('.gif-upload-button'); this.uploadButton = document.querySelector('.gif-upload-button');
@ -22,6 +21,10 @@
this.addEventListener(this.uploadButton, 'click', this.onUploadButtonClick_); this.addEventListener(this.uploadButton, 'click', this.onUploadButtonClick_);
this.addEventListener(this.downloadButton, 'click', this.onDownloadButtonClick_); this.addEventListener(this.downloadButton, 'click', this.onDownloadButtonClick_);
var currentColors = pskl.app.currentColorsService.getCurrentColors();
var tooManyColors = currentColors.length >= MAX_GIF_COLORS;
document.querySelector('.gif-export-warning').classList.toggle('visible', tooManyColors);
}; };
ns.GifExportController.prototype.getZoom_ = function () { ns.GifExportController.prototype.getZoom_ = function () {

View File

@ -1,7 +1,13 @@
<script type="text/html" id="templates/settings/export/gif.html"> <script type="text/html" id="templates/settings/export/gif.html">
<div class="export-panel-gif"> <div class="export-panel-gif">
<div class="export-panel-header export-info"> <div class="export-panel-header export-info">
Convert your sprite to an animated GIF. Opacity will not be preserved. Colors might be resampled. Convert your sprite to an animated GIF.
</div>
<div class="gif-export-warning">
<div class="gif-export-warning-icon icon-common-warning-red">&nbsp;</div>
<div class="gif-export-warning-message">
Too many colors: can not preserve original colors or transparency.
</div>
</div> </div>
<div class="export-panel-section export-panel-row"> <div class="export-panel-section export-panel-row">
<button type="button" class="button button-primary gif-download-button">Download</button> <button type="button" class="button button-primary gif-download-button">Download</button>