UX review and overhaul

[dan-bowerman]

It has been a couple of years since the original mockups for RESPECT were presented to us by the UX Team. During this time, the Editor has seen many improvements, enhancements, refactors, and library/widget replacements. As new features areintroduced, we are losing consistency in the look & feel of the application.

I think it would be worth having the UX team conduct a thorough review of the application interface, and bringing @spencerwahl back into the fold during CCCS downtime to help with the implementation.

Some early thoughts:

• Support for smaller screen sizes
• Buttons and consistent layout.. maybe we need a bottom "toolbar" for things like Help, Feedback, etc.
• Sentence case labeling (e.g. "Send us feedback" instead of "Send Us Feedback", "Save changes" instead of "Save Changes"
• WCAG review and remediation
• Translations
• Other UX and workflow improvements

[RyanCoulsonCA]

If we do this, it may also be a good time to do #281

[yileifeng]

Some of the key UI features that have been introduced since last mockup (add as needed):

• RAMP4 config slide editor
• advanced custom editor
• version history
• video slide editor
• dynamic slide editor
• dynamic slideshow slide editor
• center/full slide controls header
• copy slides functionality (from other language and individual slides)
• user authentication

[james-rae]

Used the editor for the first time today. Was trying to find a map slide and had to do a bunch of clicking. Thought something like this (but better looking, smarter layout) would be noice. All the permutations for how slides can be arranged (left, right, full right, etc) are over my head so don't know if the concept becomes unwieldy. Very low priority.

[yileifeng]

#357 (review)

Referencing comment made in PR for copying slides from other language feature:

Not strictly related to this issue since its bug fixing, but here are some ideas to improve this feature:

• a confirmation modal would be pretty useful as a user may hit copy all with no way to revert without resetting product (doable in this PR)
• add a range selector to allow users to select multiple slides rather than be limited to copying a single slide or all slides
• it is easy to confuse the top-level copy from other language functionality vs copying individual slides in the slide deck, solution might be included in the UX megathread
• we might want to consider adding tooltips for slide mini-icons (delete, copy, reorder)

[RyanCoulsonCA]

For download progress bar on the metadata page:

Found some helpful information here: https://stackoverflow.com/questions/35711724/upload-progress-indicators-for-fetch

It seems like it is doable for fetch calls, but axios has built-in onUploadProgress and onDownloadProgress handlers. We currently use axios for uploading the ZIP to the server, but we use fetch to download. Not sure if there's a reason behind this, but maybe if it's possible to switch to using axios for both we can make use of these handlers.