separate save button accent color, implement flash animation in css (#11292)

Author: hlfan

css/80_app.css

@@ -622,6 +622,9 @@ button.bar-button.dragging.removing {
     cursor: url(img/cursor-select-remove.png), pointer;
 }
 
+button.save {
+    background-image: linear-gradient(0, var(--accent-color), var(--accent-color));
+}
 button.save .count {
     display: inline-block;
     min-width: 32px;
@@ -1254,6 +1257,14 @@ a.hide-toggle {
     font-style: italic;
 }
 
+button.preset-reset .label.flash-bg {
+    animation: flash-bg 750ms;
+}
+@keyframes flash-bg {
+    0% { background-color: #fff; }
+    100% { background-color: #f6f6f6; }
+}
+
 .preset-list-button .label-inner {
     width: 100%;
     line-height: 1.35em;

modules/ui/entity_editor.js

@@ -1,4 +1,5 @@
 import { dispatch as d3_dispatch } from 'd3-dispatch';
+import { select as d3_select } from 'd3-selection';
 import deepEqual from 'fast-deep-equal';
 
 import { presetManager } from '../presets';
@@ -142,10 +143,10 @@ export function uiEntityEditor(context) {
             if (priorActivePreset && _activePresets.length === 1 && priorActivePreset !== _activePresets[0]) {
                 // flash the button to indicate the preset changed
                 context.container().selectAll('.entity-editor button.preset-reset .label')
-                    .style('background-color', '#fff')
-                    .transition()
-                    .duration(750)
-                    .style('background-color', null);
+                    .classed('flash-bg', true)
+                    .on('animationend', function() {
+                        d3_select(this).classed('flash-bg', false);
+                    });
             }
         }
     }

modules/ui/tools/save.js

@@ -42,10 +42,10 @@ export function uiToolSave(context) {
             return null;
         } else if (numChanges <= 50) {
             step = numChanges / 50;
-            return d3_interpolateRgb('#fff', '#ff8')(step);  // white -> yellow
+            return d3_interpolateRgb('#fff0', '#ff08')(step);  // transparent -> yellow
         } else {
             step = Math.min((numChanges - 50) / 50, 1.0);
-            return d3_interpolateRgb('#ff8', '#f88')(step);  // yellow -> red
+            return d3_interpolateRgb('#ff08', '#f008')(step);  // yellow -> red
         }
     }
 
@@ -64,7 +64,7 @@ export function uiToolSave(context) {
         if (button) {
             button
                 .classed('disabled', isDisabled())
-                .style('background', bgColor(_numChanges));
+                .style('--accent-color', bgColor(_numChanges));
 
             button.select('span.count')
                 .text(_numChanges);