Change report modal to include category selection in web UI #17565
Conversation
Gargron
force-pushed
the
feature-multi-step-report
branch
2 times, most recently
from
04e48c5 to
6ad517e
Compare
Gargron
force-pushed
the
feature-multi-step-report
branch
from
6ad517e to
ff02832
Compare
|
Overall it looks nice and welcoming, and the addition of a last screen is useful, however:
|
|
Reading the code (which I haven't fully reviewed yet), my understanding is that “I don't like it” skips to the last screen without actually submitting a report. If that's true, then that last screen's text for this case is seriously misleading. |
|
If the screen does not have enough vertical space (such as when using some phones in landscape mode), the modal is unusable: |
|
Also, the forwarded report won't include the category and rules, so if the report relies on that, it may be of lesser quality. Not much that can be done about that (I mean, we could add a property or two for that, but ultimately, local rules may not mean much to a remote user's admin), but maybe adding a bit to the “The account is from another server. Send anonymized copy of the report there as well?” text may help. For instance “The forwarded report will include statuses and additional comments, but not the selected category”. |
|
Addressed points (except federation of category, though I feel like it could actually be fairly easily added) |
- Change thank you text to be different based on category - Change starting headline to be different for account and status reports - Change toggle components to have a checkmark when checked - Fix report dialog being cut off on small screens - Fix thank you screen offering mute or block if already muted or blocked - Refactor toggle components in report dialog into one component
Gargron
force-pushed
the
feature-multi-step-report
branch
from
05ea007 to
19e96ef
Compare
| <input type={multiple ? 'checkbox' : 'radio'} name={name} value={value} checked={checked} onChange={this.handleChange} /> | ||
|
|
||
| <span | ||
| className={classNames('poll__input', { active: checked })} |
There was a problem hiding this comment.
the classNames call should probably read like { active: checked, checkbox: multiple }
There was a problem hiding this comment.
I understand that for consistency with polls and system input designs, multiple choice boxes should be square, but in the iOS design we used circles for both types and I wanted to give it a go. I do not believe there should be actual confusion over whether or not you can select multiple, since the text says "Select all that apply" and it's otherwise pretty obvious from context.
There was a problem hiding this comment.
but in the iOS design we used circles for both types and I wanted to give it a go
but… why… circles are pretty much universally for radio buttons and squares for checkboxes…
|
Changed wording on the thank you screen when "I don't like this" was selected:
Added option to unfollow when the reported account is followed. Made it so the mute/block buttons say "Muted" and "Blocked" when the account is already muted or blocked. Made all actions close the modal. Chose to skip the mute dialog because I think opening another dialog right after this one is not good. |
Gargron
force-pushed
the
feature-multi-step-report
branch
from
9e41bbf to
e8b6fa2
Compare
|
That the “Muted” and “Blocked” buttons are clickable is slightly weird but is not a big deal. Same with the buttons closing the modal without any kind of feedback. I think those things can be improved upon later. I still don't understand why you would use round buttons for checkboxes, in opposition to design conventions used everywhere in Mastodon and outside. Since you're bringing up the iOS app, let me quote Apple's human interface guidelines (for MacOS, as for iOS it doesn't seem to recommend checkboxes or radio buttons at all, but switch buttons and pickers or table views):
https://developer.apple.com/design/human-interface-guidelines/macos/buttons/radio-buttons |
|
Changed because I don't want border-radius to block an important feature, but personally I liked the round ones more |
|
Excellent PR. Thanks 👍 |
|
|
|
Yes, I adjusted button styles. I might make the text slightly smaller again though, it doesn't look quite right. |
A redesign of the report dialog in the web UI which integrates the report category functionality. You select the reason for reporting at the start, and are led through multiple screens depending on your choices. The violation category leads to an additional screen where you can check off which server rules you think were violated. As before, there is a screen for attaching statuses and a screen for writing additional comments. The report dialog now displays a thank you message at the end instead of automatically closing. The "I don't like it" choice at the beginning leads right to the "thank you" screen, which presents options such as muting and blocking the account.
Funded through the BMBF (BMBF Förderkennzeichen: 01IS21S29)