Pages Editor: design updates for internal test

shaunanoordin commented 1 week ago

PR Overview

Part of: Pages Editor MVP project and FEM Lab super-project Follows #7105 Staging branch URL: https://pr-7129.pfe-preview.zooniverse.org/lab/1982/workflows/editor/3711?env=staging

This PR adds a number of small design updates, in preparation for additional internal tests. Here's the ToDo List from Slack, 10 Jun:

[x] TasksPage: "Add New Task" button shouldn't take up 100% width when there are 0 tasks
[x] EditStepDialog: "Add New Task" button should take up 66% of space, "Done" button should take up 33% of space
[x] EditStepDialog: collapsible "Help" text box (original query from Sean: should Page only have 1 Help box? But this is a larger question, so collapsible first)
- New behaviour: 1. "Help" fields can be collapsed & expanded. 2. a "Help" field of a Task starts off automatically expanded if EITHER the Task is the first in its Page, OR the Help field is not empty.
✖️ ~~BranchingNextPage: answers' Next Page should have "New Task" option~~ Won't be done in this PR
[x] NewTaskDialog: centre Task options
[x] Teal should be 005d69
[x] ⭐ project: Make Project 23976 use PageEditor links in Edit Workflow (i.e. modify /lab/workflows to automatically use /editor in links)
[x] Design: dropdown menu missing carats
- ❗ EXPLANATION: in 7105, I added select { -webkit-appearance: none } to remove a weird coloured gradient overlay on all HTML <select> dropdown elements. Unfortunately, this also removed the decorative "collapse/expand" carats/arrows on the dropdowns of EVERY browser. I've decided to ignore relatively small style issues on Safari, if the workarounds end up borking more browsers.

Status

Ready for review!

coveralls commented 1 week ago

coverage: 56.991%. remained the same when pulling 66d24fb2c0e84117ae139db146fab8882331a2a0 on pages-editor-pt26 into 78699da2a1e70781887dfb44c892ee1bb7ecc8fa on master.

coveralls commented 1 week ago

coverage: 56.999% (+0.008%) from 56.991% when pulling 7376979a85c5ced352e410e01ca91c21a18e1cd1 on pages-editor-pt26 into 78699da2a1e70781887dfb44c892ee1bb7ecc8fa on master.

shaunanoordin commented 1 week ago

Testing Steps

Test with macOS + Chrome or Firefox. If you use Safari, please be warned that the dropdowns look gradient-ly, which is out of design.

Testing Feature update: Workflow URLs on the Workflows listing

View the workflows of a project that's not on the "use Pages Editor" list (example), and ensure that clicking on any example workflow DOESN'T take you to the Pages Editor page, but instead takes you to the classic PFE "Edit Workflow" page. (example)
View the workflows of a(/the one and only) test project that IS on the "use Pages Editor" list (example), and ensure that clicking on any example workflow DOES take you to the Pages Editor page. (example)
NOTE: this updated URL only works on the default workflows view, not the "reorder workflows" view.

Testing Feature update: collapsible Help fields

Create a new Page
Add a new Text/Question/Drawing Task. Observe that the Help field is automatically expanded.
Add two more Tasks (of any type). Observe that the Help fields for the 2nd Task onwards are automatically collapsed.
Click on the expand/collapse icons to expand/collapse various Help fields.
Open the Help field of the 3rd Task, and type in something.
Close the Page, then open/edit it again.
Observe that the following Tasks' help fields start off automatically expanded: the 1st Task on the Page (even if the Help text is empty), and the 3rd Task on the Page (because the Help text isn't empty)
- All other Tasks' help fields start off automatically collapsed.

Testing Design updates:

Testing URL: https://pr-7129.pfe-preview.zooniverse.org/lab/1982/workflows/editor/3711?env=staging
eyeball it based on the descriptions above, or defer to @seanmiller26 to give his thumbs up

coveralls commented 1 week ago

coverage: 56.999% (+0.008%) from 56.991% when pulling d8a1927b060023f4965b69134f7938fce36fc421 on pages-editor-pt26 into 78699da2a1e70781887dfb44c892ee1bb7ecc8fa on master.

shaunanoordin commented 1 week ago

PR Update

Accessibility: the Help input fields, when hidden, now use <textarea hidden=true>. Thanks, Jim! 👍

eatyourgreens commented 1 week ago

@shaunanoordin you're welcome. You'll still need to add the expanded state etc. to your toggle button, so that it's announced as open/closed for blind users. I'll add a comment to the PR.

seanmiller26 commented 1 week ago

Observe that the following Tasks' help fields start off automatically expanded: the 1st Task on the Page (even if the Help text is empty), and the 3rd Task on the Page (because the Help text isn't empty) All other Tasks' help fields start off automatically collapsed.

Interesting UX choices here. Let's see how it tests first, but I hope we can revisit the '1 Help text entry per page' discussion at a later stage to really sort this out.

1 minor styling nitpick: Can we change the Help Text header to be less bold than the Main Text/Text Task header style?

Figma:

coveralls commented 1 week ago

coverage: 56.999% (+0.03%) from 56.969% when pulling 7bcfb063da44ce216d4635330309ae9b60680bd6 on pages-editor-pt26 into 67033277e544c626292be15c3d0a696c2f9f6443 on master.

eatyourgreens commented 1 week ago

Very minor styling point. Since you're hiding the input with hidden, maybe use a CSS animation to transition between the visible and hidden states.

coveralls commented 1 week ago

coverage: 56.999% (+0.03%) from 56.969% when pulling c19dbac0024bf4f49ff819218d4b96e6d2639ca6 on pages-editor-pt26 into 67033277e544c626292be15c3d0a696c2f9f6443 on master.

coveralls commented 1 week ago

coverage: 56.999% (+0.03%) from 56.969% when pulling c19dbac0024bf4f49ff819218d4b96e6d2639ca6 on pages-editor-pt26 into 67033277e544c626292be15c3d0a696c2f9f6443 on master.

coveralls commented 1 week ago

coverage: 56.999% (+0.03%) from 56.969% when pulling c19dbac0024bf4f49ff819218d4b96e6d2639ca6 on pages-editor-pt26 into 67033277e544c626292be15c3d0a696c2f9f6443 on master.

coveralls commented 1 week ago

coverage: 56.999% (+0.03%) from 56.969% when pulling 55c4a95f2378385d57fd4e617470c80083e81c93 on pages-editor-pt26 into 67033277e544c626292be15c3d0a696c2f9f6443 on master.

shaunanoordin commented 1 week ago

PR Update

Accessibility: recommendations from Jim incorporated; expand/collapse buttons now indicate change of state via ARIA.
Design: "Help" field's label has been de-bolded; expand/collapse icon changed from caret (solid triangle) to angle-triangle-arrow-thing

👍

coveralls commented 1 week ago

coverage: 56.999% (+0.008%) from 56.991% when pulling 740ed7ca8df7a2b301e1da359c9136bb09744541 on pages-editor-pt26 into 25a04dc7381509eea0dd1a9d44aeb2325411a606 on master.

coveralls commented 1 week ago

coverage: 56.948% (+0.008%) from 56.94% when pulling 1f9d10dfe0cc493ff6397b84e8f477bcd53263b6 on pages-editor-pt26 into d7f9954ff59851d1af9b91766807fd94b30b48e9 on master.

coveralls commented 1 week ago

coverage: 56.948% (+0.008%) from 56.94% when pulling 46db5b5a726f8e8b099bc70074de7e914669a981 on pages-editor-pt26 into d7f9954ff59851d1af9b91766807fd94b30b48e9 on master.

shaunanoordin commented 1 week ago

Thanks Travis!

I've adjusted the aria-label for the Tasks accordingly. 👌
Agreed that the QuestionTask, DrawingTask, and TextTask need to be re-written to use shared code; the amount of repeated code in 'em is a bit ridiculous, if I'm honest.
- For context, there was a lot of copy-pasting instead of setting up shared code, because early on, I wasn't sure which bits could be shared and which couldn't. For example, we'd think the "main text" of a task should be shared, but the question tasks use task.question while everything else uses task.instructions 🤦

eatyourgreens commented 1 week ago

I've adjusted the aria-label for the Tasks accordingly.

The aria-label shouldn’t change when the button is pressed. That can make the UX confusing in a screen reader.

zooniverse / Panoptes-Front-End