Page MenuHomePhabricator

Overflow menu: As a contributor, I want to easily and quickly have access to additional actions and content that is available on web for talk pages.
Closed, ResolvedPublic

Assigned To
Authored By
OTichonova
Jun 9 2022, 3:28 PM
Referenced Files
F35608156: IMG_9404.PNG
Oct 21 2022, 1:50 PM
F35608155: Dark.PNG
Oct 21 2022, 1:50 PM
F35546813: background color.png
Oct 4 2022, 6:42 PM
F35546773: background color.png
Oct 4 2022, 6:19 PM
F35513658: background color.png
Sep 8 2022, 4:32 PM
F35513656: New topic added.png
Sep 8 2022, 4:32 PM
F35461342: Screen Shot 2022-08-16 at 9.45.48 AM.png
Aug 16 2022, 2:48 PM
F35461223: out.gif
Aug 16 2022, 2:48 PM

Description

Why are we doing this?

For power contributors to have access to additional tools/actions that are currently not available in the V1 version of native iOS talk pages.

Audience story

As a contributor, I want to easily and quickly have access to additional actions and content that is available on web for talk pages.

Relevant information

Access

  • Opened when the ‘overflow menu’ icon in the top right corner is tapped.

Display

  • Instead of a full page modal the overflow menu will now display a context menu.
  • When the overflow menu icon is tapped on and the context menu is open the icon itself turns semi-transparent.

Overflow menu on article talk

  • Options: Out of the presented options some won’t be available on all talk pages, so whatever is available in mobile view should be used. These options should be available for all logged in and logged out contributors.
Context menu opened
Context menu.png (812×375 px, 103 KB)

See more information about the UI in the - Figma file ‘Talk pages screens & specs’ slide 7

Overflow menu on user talk

Context menu
background color.png (812×375 px, 101 KB)
Additional research and resources

Event Timeline

OTichonova renamed this task from More menu: As a contributor, I want to easily and quickly have access to additional actions and content that is available on web for talk pages. to Overflow menu: As a contributor, I want to easily and quickly have access to additional actions and content that is available on web for talk pages. .Jun 9 2022, 4:50 PM
OTichonova updated the task description. (Show Details)
OTichonova updated the task description. (Show Details)
LGoto triaged this task as Medium priority.Jun 13 2022, 6:40 PM

@OTichonova some notes/questions from engineering sync:

’Read in web’ - alters view to show web view

Altering the view inline is a bit different than what we usually do (that is, removing the native talk page info and replacing it with a web view) - would you be open to us pushing on a new web view onto the navigation stack, or kicking the user out to Safari instead?

‘Archives’ - takes you to the appropriate external link.

I've had trouble figuring out how to do this in the past - do you know of any mobile web menu option or Android option for us to use as an example? I'm not sure that there's any stable link for Archives like there is with the other links, so we may need to scrap it.

About talk pages - takes you to a new page/modal. There will be a quick summary of the purpose of talk pages and what they won’t include in V1.

Just a reminder that we'll eventually need this mock, but I understand if you're waiting for us to figure out the final V1 scope.

@OTichonova

We plan to bring this up in task sync, but just mentioning it now for documentation and to give you some time to consider it. In engineering sync we discussed that this will be faster if we used a stock iOS component for this. We could use an action sheet, which has the ability to scroll if there many more options than what can be displayed on screen. I do not see a good way to add an image icon though. A contextual menu might also be easy, and that does allow us to add an icon.

Both options in the HIG recommend using them for a small number of items, but I still think it's worth discussing.
https://developer.apple.com/design/human-interface-guidelines/components/menus-and-actions/context-menus
https://developer.apple.com/design/human-interface-guidelines/components/presentation/action-sheets

Hi @Tsevener, sorry for the late response.
I am updating the ticket with what we discussed in our meeting.

For

’Read in web’ - alters view to show web view

  • Will push people to 'Desktop' view from the current talk page experience.

‘Archives’ - takes you to the appropriate external link.

  • Android has 'Archived' pages in their here are some screenshots I received from Robin. Not sure to what view the list of archived pages links to though.
Screenshot_20220811-183138.png (2×1 px, 198 KB)
Screenshot_20220811-183147.png (2×1 px, 147 KB)

About talk pages

  • Won't be too different to the Notifications FAQ page (found in the notifications onboarding screen)

We could use an action sheet, which has the ability to scroll if there many more options than what can be displayed on screen. I do not see a good way to add an image icon though. A contextual menu might also be easy, and that does allow us to add an icon.

  • Out of the two I have a preference for the context menu, as the list can be longer and have icons. After discussing this with the team, we will replace the sheet with a context menu.

Hi @Tsevener, just a brief update on the overflow menu:

  • I changed and updated the designs in the description and in the Figma file. Now the options are displayed in a context menu.
  • In the process of updating the designs, I realized that some of the options were missing, esp. in the user talk context menu. Hence, I updated the design and the options.

Checking in with the Android experience for the Archive link:

out.gif (886×428 px, 478 KB)

Also here's an empty state screenshot:

Screen Shot 2022-08-16 at 9.45.48 AM.png (888×434 px, 69 KB)

Upon tap in this video, the Android app used this API call to get the Archive links, which it must use to populate the basic list screen:

https://en.wikipedia.org/w/api.php?format=json&formatversion=2&errorformat=html&errorsuselocal=1&action=query&redirects=&converttitles=&prop=info&generator=prefixsearch&inprop=varianttitles&gpssearch=Talk%3AAnne_Heche%2F&gpslimit=30

Those links can then be tapped to load the archived talk page.

@OTichonova do you have a mock for the basic list screen? This would be a new native screen if we're to follow what Android is doing.

Mazevedo subscribed.

> @OTichonova do you have a mock for the basic list screen? This would be a new native screen if we're to follow what Android is doing.

Hi @Tsevener, so so sorry I somehow missed this.
Here are two propositions. The second one is much simpler, I was wondering when you say basic list, do you mean just the list of Archived pages or also the topic/content list once a contributor taps on a specific archived page?

New topic added.png (812×375 px, 33 KB)
background color.png (812×375 px, 9 KB)

Things remaining to develop:

Need button functionality on all of these

Tsevener moved this task from Doing to Needs Code Review on the ios-app-v7.0 board.

@OTichonova Hi, just letting you know that we are blocked on the final web link for this - the "About talk pages" / "About user talk page" wiki page.

The notifications FAQ link is here for reference:

https://www.mediawiki.org/wiki/Wikimedia_Apps/iOS_FAQ#Notifications

Hi @Tsevener,
Sorry for the delay, but here is the FAQ section for the 'About talk pages' web link.

Things remaining to develop:

  • Adding FAQ link for "About talk pages / About user talk page"
  • Archive screen
Tsevener moved this task from Doing to Needs Code Review on the ios-app-v7.0 board.

Hi @Tsevener!
Saw this today, not sure if this is fixed already but I found that the 'change language' icon in dark and black theme stays dark (instead of switching to the light gray color).

darkblack
Dark.PNG (1×750 px, 1 MB)
IMG_9404.PNG (1×750 px, 1 MB)

FYI - We're going to take out the Archive option from this task and tackle it as a separate task, so that the rest of this can move forward with design review and QA.

https://phabricator.wikimedia.org/T321853

JMinor claimed this task.