Page MenuHomePhabricator

Add "mark as read" buttons for each day on the no-JS Special:Notifications page
Closed, ResolvedPublic

Description

From T129460#2110076:

The submitted patch adds the option to mark read by date/section only to the no-js version. A Javascript-specific version will be implemented later.

Event Timeline

Change 276376 had a related patch set uploaded (by Catrope):
Add 'mark section as read' to Special:Notifications

https://gerrit.wikimedia.org/r/276376

Change 276376 merged by jenkins-bot:
Add 'mark section as read' to Special:Notifications

https://gerrit.wikimedia.org/r/276376

Checked in betalabs - the functionality works fine.

Need @Pginer-WMF feedback on the following:

    • 'MARK AS READ' is all capitalized
  • the button pushes date labels up

Screen Shot 2016-05-12 at 11.13.33 AM.png (207×615 px, 25 KB)

Screen Shot 2016-05-12 at 11.14.50 AM.png (168×656 px, 24 KB)

Just a general screenshot:
Screen Shot 2016-05-12 at 11.11.30 AM.png (392×731 px, 52 KB)

I have a question about the Mark as Read function in general: @Pginer-WMF, should we make it so that the option doesn't appear unless there are >2 unread messages for the day? It's not necessary, but see the attached screenshot (which is for the JS version, BTW).

Screen Shot 2016-05-12 at 11.36.56 AM.png (936×783 px, 133 KB)

To add to the previous comment - do we really need to display Special:NotificationsMarkRead page after a user explicitly clicked on 'MARK AS READ' ?

Screen Shot 2016-05-12 at 11.07.18 AM.png (241×617 px, 22 KB)

@Mooeypoo, please see Elena's question:

do we really need to display Special:NotificationsMarkRead page after a user explicitly clicked on 'MARK AS READ' ?

She's asking, why the extra step? Is that a constraint of the no-JS environment?

Checked in betalabs - the functionality works fine.

Need @Pginer-WMF feedback on the following:

    • 'MARK AS READ' is all capitalized
  • the button pushes date labels up

Screen Shot 2016-05-12 at 11.13.33 AM.png (207×615 px, 25 KB)

Screen Shot 2016-05-12 at 11.14.50 AM.png (168×656 px, 24 KB)

Just a general screenshot:
Screen Shot 2016-05-12 at 11.11.30 AM.png (392×731 px, 52 KB)

I'd propose to adjust the following aspects:

  • Button text style. The text should be non-capitalised and the size closer to that of regular text. Currently it seems affected by the styling modifications of the heading which should not be the case.
  • Button text. The proposal was to have it as "Mark group as read", which connects it with the notifications it affects.
  • Button icon. An icon was proposed for the button ().
  • Immediate action. Once the user clicks the button, we should mark he affected notifications as read. Given we are defining the no-JS behaviour, a page reload seems ok, but we should not add additional steps for it if possible.

You can check the mockup below or the prototype as a reference:

notif-page-initial-step.png (889×1 px, 157 KB)

I have a question about the Mark as Read function in general: @Pginer-WMF, should we make it so that the option doesn't appear unless there are >2 unread messages for the day? It's not necessary, but see the attached screenshot (which is for the JS version, BTW).

I'd like to see the effects of reducing the button prominence first. Having the button appear randomly could become more distracting than having a regular pattern. If it still feels too prominent after the changes we have several options to adjust.

Change 288940 had a related patch set uploaded (by Sbisson):
Adjust styling for "Mark group as read"

https://gerrit.wikimedia.org/r/288940

Change 288940 merged by jenkins-bot:
Adjust styling for "Mark group as read"

https://gerrit.wikimedia.org/r/288940

Checked in betalabs - see the screenshots below. Looks like all @Pginer-WMF specs are all in place (minor issue T136571: ButtonGroupWidget with two adjacent disabled buttons should show a dividing line between the buttons. Functionality works correctly.

Screen Shot 2016-05-30 at 11.08.07 AM.png (376×1 px, 60 KB)

Screen Shot 2016-05-30 at 12.22.30 PM.png (483×1 px, 69 KB)

Screen Shot 2016-05-30 at 12.37.53 PM.png (694×1 px, 93 KB)

@Pginer-WMF - just to double-check with you: date format for the top date(s) is displayed with the weekday label (e.g. Tuesday) and the day/month/year in grey color.

It looks like you're testing with JavaScript enabled. This is a task about no-JS, so you need to retest with JS disabled.

You should wait until https://gerrit.wikimedia.org/r/#/c/291383/ is merged, since that changes how it works.

Checked in betalabs - in no-JS mode each day will have 'Mark as read' button.

Screen Shot 2016-06-01 at 2.26.10 PM.png (658×957 px, 83 KB)