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

src/css/settings-export.css

@@ -43,8 +43,29 @@
   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{
-  content: "Upload ongoing ...";
+  content: "Upload in progress...";
   position: absolute;
   display: block;
   height: 100%;

src/js/controller/settings/exportimage/GifExportController.js

@@ -14,7 +14,6 @@
   pskl.utils.inherit(ns.GifExportController, pskl.controller.settings.AbstractSettingController);
 
   ns.GifExportController.prototype.init = function () {
-
     this.uploadStatusContainerEl = document.querySelector('.gif-upload-status');
     this.previewContainerEl = document.querySelector('.gif-export-preview');
     this.uploadButton = document.querySelector('.gif-upload-button');
@@ -22,6 +21,10 @@
 
     this.addEventListener(this.uploadButton, 'click', this.onUploadButtonClick_);
     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 () {

src/templates/settings/export/gif.html

@@ -1,7 +1,13 @@
 <script type="text/html" id="templates/settings/export/gif.html">
   <div class="export-panel-gif">
     <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 class="export-panel-section export-panel-row">
       <button type="button" class="button button-primary gif-download-button">Download</button>