Lottie icons

[raineorshine]

Update the toolbar icons to the 59 new Lottie icons and animate on click.

Assets

• lottie-icons.zip
  • Includes SVG and Lottie JSON files
  • icons1 contains 27 icons that are shown in the toolbar by default
  • icons2 contains 32 icons that can be added to the toolbar via Settings/Customize Toolbar.

Requirements

Milestone 1

• Replace existing toolbar svg’s with new static svg’s
• Pixel perfect positioning

Milestone 2

• Animate on click
  • Complete animation regardless of mousedown time, i.e. even if the mouse is released before the animation duration
  • Smooth appearance when clicked again before the first animation has completed
• Preserve drag-and-drop behavior in customize mode
  • Do not animate on drag

Milestone 3

• Scale with state.fontSize
• Desktop and mobile
• Dark and Light theme
• Preserve highlighting and dimming when icon is active and inactive

Milestone 4

• Special handling of ternary button: Sort
  • The sort button has three states: Ascending, Descending, and Manual
  • The icon needs to animate smoothly from one state to the next on click
    • Manual → Ascending
    • Ascending → Descending
    • Descending → Manual

Notes

• The only new functionality is replacing the existing "press" animation with the new Lottie animation. The rest of the requirements are about preserving the existing behavior. Play around with the existing app to get familiar with the existing toolbar behavior.
• Each command has an svg.
• The toolbar has a customize mode that allows users to add and remove commands from the toolbar. This can be accessed from the Settings. The click behavior is slightly different in order to accommodate drag-and-drop functionality. Familiarize yourself with customize mode and make sure that that functionality is preserved.