Features/sidebar

[pavittarx]

Changelog

• Sidebar fields use Accrordion style tabs (takes suggestions from #9
• Alpha Field accepts values from 0-1, and steps only by 0.01
• Color Data bar is redesigned. It doesn't takes unwanted space anymore and fits well with the design.
• A copy button to copy values of Shape Url, Tile Url, & Generated Color Data (assigned seprately to each field)
• No scrollbars for the sidebar. The sidebar is scrollable even if the content overflows, but scrollbars are invisible
• Scrollbar hidden by default. A clearly visible button at the bottom allows for toggle between Sidebar open & closed states. nice animations using framer-motion (addresses #15)

• Code refactored for sidebar. It uses React's Composition pattern for creating sections for Sidebar. (except for Colors Section & Alpha Section) Why?

  • 13 needs addressing.

  • Alpha doesn't fit within the format. And, I don't feel to create complex generalisations.

  Deploy Preview: https://5fe91b583f08a40007e5f2c0--rasterify.netlify.app/

[pavittarx]

• Fixes #8 (in earlier commits)
• Fixes #9
• Fixes #13 (allows reordering colors via Drag & Drop API)

Changelog

• React specific files changed to .jsx extension (only in sidebar components)
• color-input.jsx component refactored, splitted and rewritten from scratch.
• Now, color-input, uses GenericContainer React component created in earlier commits. Refer: this
• Color reordering is done via Drag N Drop API
• Color boxes are placed auto placed over grid (CSS Grid). The grid maintains a layout of (n * 3) matrix.
• A button to add new colors. It is also placed on the grid.

Deploy Preview: https://deploy-preview-26--raster-playground.netlify.app/

[Note]: Force pushes are just for minor changes, that arise while deployement or on deployed version. I wish not to maintain such minor commit history.