V0 WACZ Uploader UI/UX Implementation

[Shrinks99]

This issue will be completed once the U for the V0 implementation of our WACZ Uploader has been merged.

User Flow

Mockups

Figma file (Still a WIP at the moment but most stages are pretty well ironed out, enough for @RangerMauve to implement the stages that should exist!) Most current stuff is in the bottom right corner :)

Certain parts (like the file upload history, also the archive static site visual settings which aren't implemented yet in web-replay-gen) can be omitted for the initial implementation dependent on timelines and technical requirements.

Homepage:

TODO:

• [x] Mockup animated transition between stages & settings page
• [x] Mockup implementation notes
• [x] Copy decisions & description writing, what should everything be named?

[Shrinks99]

Interactive mockup available here, Implementation notes are available here.

File drag animation mockup (occurs when users drag files into the window, does not happen on mobile)

https://user-images.githubusercontent.com/5672810/196774631-9e8d9852-6b12-4714-9ddd-7405ee533118.mp4

Caveats

Icon buttons may not correctly change the icon's colour when hovered. This is a Figma limitation, don't change anything about how these should work, just imagine the icon highlights the same way it does currently.

[SuaYoo]

@Shrinks99 Nice! Are the transitions based on Shoelace animations? If so, can you send me the animation properties?

[Shrinks99]

Some of them can be. Others are a little more complicated... Have a look at zoomIn for the expanding / fade transitions, they don't start at 80% size like the ones in the mockup but they can also be implemented with one line of text! zoomOut is likely a perfect match?

For the lerped card fade & grow in, animate.css does not offer a suitable match :( zoomIn is the closest we would get and again, it's too exaggerated for this (starts at 30% size).

I had flipInY in mind for the settings toggle but that probably won't work given that the other side also needs to come in behind it. Also the bounce at the start of flipOutY is kinda weird... I get that it's just the reversed flip in animation but it doesn't have the weight behind it that causes it to bounce at the end like it does in flip-in. Bad choice IMO.

The stroke-dashoffset SVG animation mockup (the best way I've found of doing this but I'd be interested if you have a better way because I seem to remember you mentioning that you've done that once before?) was actually created with Keyshape so if you want the animated SVG for that (or the project file) I can send it. Animate.css does not seem to offer a grow / shrink animation for the text shrinking on file drag into the box.

[SuaYoo]

Yeah I'll take the animated SVG!

[RangerMauve]

is there still work to be done in this issue? e.g. the settings and disclaimer stuff we talked about today? cc @Shrinks99

[Shrinks99]

Arguably yes if we want to the animations and some of the interaction as designed in the scope of this issue... Making the stroke-dashoffset move on drag into the window instead of on hover & is probably the biggest nitpick I have. The rest of the things can be dealt with at a later date / separate issue if you want to close this one out.

I think the settings, improving warnings states, and other things can be spun out as separate issues for task tracking now that we have moved away from the single monolithic initial dev commit... Though at that point maybe my aforementioned nitpick can too 😅

[Shrinks99]

Closing this as per my discussion with Ilya last week, may do an improved animation / interaction apass at some point.

Leaving the settings discussion to happen in #12