Things missing (probably not exhaustive):

• Green button in "Set filters" under the "Set filters" link on the special page - or decide to use a blue one
• Date picker for "Set filters" under data range - T91148

Design idea:

In T347732#9212617, @Snaevar wrote:

Things missing (probably not exhaustive):

• Green button in "Set filters" under the "Set filters" link on the special page - or decide to use a blue one
• Date picker for "Set filters" under data range - T91148

Design idea:

I could live with something like this. Looks better than a couple of our previous attempts.

What are next steps? Are the icons you use in your screenshot in Codex? (https://doc.wikimedia.org/codex/latest/icons/all-icons.html) Should we get them added there first?

The check mark icon indicates review status based on color. So we would probably want the ability to color that button green for reviewed, and purple/pink-ish for autopatrolled.

The trash can icon also needs to convey status based on color. If an article is tagged for deletion, it needs to be indicated somehow.

I did some exploratory conversion to mediawiki styling using some of the Codex design tokens and here are the results:

Before	After

I've tried to keep most changes to a minimum here

Thanks Soda. I like all those changes too, except the blue information icon, which hopefully we can change to a blue exclamation mark.

In T347732#9270793, @Novem_Linguae wrote:

Thanks Soda. I like all those changes too, except the blue information icon, which hopefully we can change to a blue exclamation mark.

Definitely, I don't think we have a round icon, but I think the error icon should work:

Seems like a good compromise. Looks good to me. Feel free to code it up.

Change 967661 had a related patch set uploaded (by Sohom Datta; author: Sohom Datta):

[mediawiki/extensions/PageTriage@master] [WIP] Bring NewPagesFeed inline with Codex/Wikimedia styling

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

Test wiki created on Patch demo by Sohom Datta using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/d624fa1751/w

Test wiki on Patch demo by Sohom Datta using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/d624fa1751/w/

Test wiki created on Patch demo by Sohom Datta using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/24413b3b03/w

Thanks for your work on this, I think it looks great! I have some observations for things that might warrant changes:

'That...' items seem to be slightly misaligned from the radio buttons:

When first opening the feed, neither Newest or Oldest appear visually to be selected - I think Newest should be selected by default?

At small screen widths the issues tags butt right up against each other and the text above.

Sohom's UI suggestion looks good.

In T347732#9272349, @Samwalton9-WMF wrote:

Thanks for your work on this, I think it looks great! I have some observations for things that might warrant changes:

'That...' items seem to be slightly misaligned from the radio buttons:

Yeah that is a good catch, I'll try to do some pixel pushing to see if I can get smaller radio buttons to work.

When first opening the feed, neither Newest or Oldest appear visually to be selected - I think Newest should be selected by default?

This seems to a be a bug in the underlying storage mechanism, I will submit a patch seperately for this :)

At small screen widths the issues tags butt right up against each other and the text above.

I've fixed this in a later revision of the patch :)

In T347732#9270779, @Soda wrote:

I did some exploratory conversion to mediawiki styling using some of the Codex design tokens and here are the results:

Before	After

I've tried to keep most changes to a minimum here

Hey @Soda, great to see your exploration, it looks well-done from a number of angles already!
Quick design guidelines input – having more than one primary button per view is not recommended in order to help users navigate the interface. If there are several equal-weighted important actions, then normal progressive buttons should be used instead. I'm clear that this would mean a change for the interface, but it would really mean a win for consistency and user expectations compared to all our interfaces.

Just noting this because it tickled my brain: I did previously take a look at possible toolbar icons here:
T342051#9064115
T342051#9064127

Someone has added a new grey bar to the bottom of the new pages feed, which has a couple of UI switches on it and some stats. It's an abomination. Please get rid of it.

If you have to give us more controls, put them in the grey bar at the top. If you have to give us more statistics (hint: you do not), put them in the grey bar at the top.

Do not presume to annex 7% the screen real estate for your new UI controls. Do not put something unwanted, persistently, in my field of vision. I want to scan the list of new pages. I do not want to have an ugly grey thing obscuring the bottom of the list. I want to see the list. This is not difficult.

This is **really bad** UI design, as rotten as any I've seen in a long time. UI controls should not get in the way of whatever it is that the user wants to do. These controls are completely in the way and yet they provide trivial functionality. Whoever put them together has lost sight of the task: the page it not there to demonstrate your ability to provide unwanted controls. The page is there to allow us to scan a list. Get your tank off our lawn.

@Tagishsimon: Hi, please read and follow https://www.mediawiki.org/wiki/Bug_management/Phabricator_etiquette and https://www.mediawiki.org/wiki/Code_of_Conduct if you would like to be active here. Thanks for using a respectful tone and keeping discussions technical and not personal.

In T347732#9286660, @Tagishsimon wrote:

Someone has added a new grey bar to the bottom of the new pages feed, which has a couple of UI switches on it and some stats. It's an abomination. Please get rid of it.

If you have to give us more controls, put them in the grey bar at the top. If you have to give us more statistics (hint: you do not), put them in the grey bar at the top.

Do not presume to annex 7% the screen real estate for your new UI controls. Do not put something unwanted, persistently, in my field of vision. I want to scan the list of new pages. I do not want to have an ugly grey thing obscuring the bottom of the list. I want to see the list. This is not difficult.

This is **really bad** UI design, as rotten as any I've seen in a long time. UI controls should not get in the way of whatever it is that the user wants to do. These controls are completely in the way and yet they provide trivial functionality. Whoever put them together has lost sight of the task: the page it not there to demonstrate your ability to provide unwanted controls. The page is there to allow us to scan a list. Get your tank off our lawn.

The floating bottom bar has always been there. I don't like floating stuff so I wrote a custom ad blocker thing to get rid of it in my particular browser years ago. But it's always been there. This is the wrong ticket.

I actually don't mind exploring the option of getting rid of the bottom bar. Although I would suggest that you use a nicer tone and not call things "abominations", "rotten", etc. Let's discuss more at https://en.wikipedia.org/wiki/Wikipedia_talk:New_pages_patrol/Reviewers#Floating_footer and T349886: Delete Special:NewPagesFeed floating footer, and move all its stuff into the header

having more than one primary button per view is not recommended in order to help users navigate the interface.

Are you referring to the blue "Review" buttons? The fix would be to make those non-blue, right? That sounds fine.

In T347732#9282448, @Volker_E wrote:

In T347732#9270779, @Soda wrote:

I did some exploratory conversion to mediawiki styling using some of the Codex design tokens and here are the results:

Before	After

I've tried to keep most changes to a minimum here

Hey @Soda, great to see your exploration, it looks well-done from a number of angles already!
Quick design guidelines input – having more than one primary button per view is not recommended in order to help users navigate the interface. If there are several equal-weighted important actions, then normal progressive buttons should be used instead. I'm clear that this would mean a change for the interface, but it would really mean a win for consistency and user expectations compared to all our interfaces.

I've gone ahead and changed the button types + made a few a changes to the top bar, this is how it looks :)

Before	After

Thank you for quickly following-up @Soda and @Novem_Linguae! One more refinement question: The view in T347732#9287142 currently shows “Set filters” and “Review” buttons as progressive normal buttons. I'd suggest to make the Review buttons just normal buttons. Progressive normal buttons from a general use case should be more less limited if there are 2 or max 3 possibly equal high-level decision paths for the users to choose from (unlike the primary buttons which represent the one most important path).
Think @Novem_Linguae was already pointing into this direction as well, that normal buttons seem fine to use for “Review”.

In T347732#9325591, @Volker_E wrote:

Thank you for quickly following-up @Soda and @Novem_Linguae! One more refinement question: The view in T347732#9287142 currently shows “Set filters” and “Review” buttons as progressive normal buttons. I'd suggest to make the Review buttons just normal buttons. Progressive normal buttons from a general use case should be more less limited if there are 2 or max 3 possibly equal high-level decision paths for the users to choose from (unlike the primary buttons which represent the one most important path).
Think @Novem_Linguae was already pointing into this direction as well, that normal buttons seem fine to use for “Review”.

Implementing the feedback here :)

Before	After

Change 967661 merged by jenkins-bot:

[mediawiki/extensions/PageTriage@master] Bring NewPagesFeed inline with Codex/Wikimedia styling

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

Change 974103 had a related patch set uploaded (by Sohom Datta; author: Sohom Datta):

[mediawiki/extensions/PageTriage@master] Make the feed gracefully handle long snippets and urls

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

Test wiki created on Patch demo by Novem Linguae using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/3e3a040d71/wiki/Special:NewPagesFeed

Change 975028 had a related patch set uploaded (by Sohom Datta; author: Sohom Datta):

[mediawiki/extensions/PageTriage@wmf/1.42.0-wmf.5] Make the feed gracefully handle long snippets and urls

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

I'm getting some formatting wierdness caused by the padding-right in this CSS rule:

.mwe-vue-pt-snippet {

color: #54595d;
padding-right: 14em;

}

In T347732#9339167, @Curb_Safe_Charmer wrote:

I'm getting some formatting wierdness caused by the padding-right in this CSS rule:

.mwe-vue-pt-snippet {

color: #54595d;
padding-right: 14em;

}

That's probably T351463: mwe-vue-pt-snippet is way too narrow. We will try to fix today :)

Change 974103 merged by jenkins-bot:

[mediawiki/extensions/PageTriage@master] Make the feed gracefully handle long snippets and urls

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

Change 975028 merged by jenkins-bot:

[mediawiki/extensions/PageTriage@wmf/1.42.0-wmf.5] Make the feed gracefully handle long snippets and urls

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

Mentioned in SAL (#wikimedia-operations) [2023-11-16T21:50:37Z] <dr0ptp4kt@deploy2002> Started scap: Backport for [[gerrit:975028|Make the feed gracefully handle long snippets and urls (T347732 T351463)]]

Mentioned in SAL (#wikimedia-operations) [2023-11-16T21:51:50Z] <dr0ptp4kt@deploy2002> dr0ptp4kt and soda: Backport for [[gerrit:975028|Make the feed gracefully handle long snippets and urls (T347732 T351463)]] synced to the testservers (https://wikitech.wikimedia.org/wiki/Mwdebug)

Mentioned in SAL (#wikimedia-operations) [2023-11-16T22:00:27Z] <dr0ptp4kt@deploy2002> Finished scap: Backport for [[gerrit:975028|Make the feed gracefully handle long snippets and urls (T347732 T351463)]] (duration: 09m 50s)

Moving back, as this ticket includes the toolbar migration too.

Test wiki on Patch demo by Sohom Datta using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/24413b3b03/w/

Test wiki on Patch demo by Novem Linguae using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/3e3a040d71/w/