Page MenuHomePhabricator

Enable searching Wikipedia in multiple app languages
Closed, ResolvedPublic3 Story Points

Description

User story [Multilingual reader]

When searching articles...
...I want be able to quickly search across languages....
...so that I can easily find articles in all Wikipedia languages I read.

Proposed designs

Invision prototype: https://wikimedia.invisionapp.com/share/F4GNQ7VWQXB#/288670073_FLOW-_ENABLE_SEARCH_IN_MULTIPLE_LANGUAGES

Redline mocks on Zeplin board - tagged with Multilingual and Search

Notes on the design

  • The language filter bar is only shown if more than 1 app language is set
  • Order of the app languages determines the order they are shown in the search filter by language tabs
  • the language tab bar is scrollable in the case of language names length or if number of languages exceeds beyond the available screen width, but the MORE button is sticky to the RHS of the filter tab bar (language tabs overflow and are scrollable under the MORE button)

Interaction flow (QA required )

Scenario A: User has just 1 language set

Pre-conditions: User's system language is English only, and their Wikipedia app is also set to English.

  1. Open search in the Wikipedia app.
  2. Start typing a search term, for example "Egg tart" and note the results appearing from en.wiki
  3. Tap on "EN" search bar to open the app language settings screen
  4. Select "Add a language" and add Chinese Traditional as the second language.
  5. Tap to select "Chinese Traditional". It is expected that upon selection, the user is returned to the search screen now with an additional language filter bar, with Chinese Traditional as the 2nd language filter tab selected, and results for "Egg tart" shown in zh-hant.wiki
Scenario B: User has multiple app languages set

Pre-conditions: User's system language is English, and their Wikipedia app has the following languages selected (in order) as 1/English, 2/Chinese (Traditional) and 3/French.

  1. Open search in the Wikipedia app.
  2. Start typing a search term, for example "Egg tart" and note the results appearing from en.wiki
  3. Tap on the Chinese Traditional filter tab to see results for "Egg tart" in zh-hant.wiki.
  4. Tap on "MORE" in the language filter tab to open the app language settings screen
  5. Tap to add a 4th language "Danish". It is expected that upon selection, the user is returned to the search now with Danish as an additional 4th language filter tab, showing results for "Egg tart" in da.wiki
  6. Tap on “MORE” again and reorder languages to make French second and Traditional Chinese third.
  7. Tap on French. It is expected that the user is returned to search now with French as the active filter tab, showing results for "Egg tart" in fr.wiki

Event Timeline

RHo created this task.Mar 27 2018, 4:02 PM
RHo updated the task description. (Show Details)Apr 2 2018, 5:59 PM
RHo updated the task description. (Show Details)Apr 2 2018, 6:28 PM
Charlotte set the point value for this task to 3.Apr 3 2018, 5:12 PM
RHo updated the task description. (Show Details)Apr 5 2018, 2:56 PM
RHo updated the task description. (Show Details)Apr 6 2018, 3:11 PM
This comment was removed by Sharvaniharan.

Change 426118 had a related patch set uploaded (by Sharvaniharan; owner: Sharvaniharan):
[apps/android/wikipedia@master] Enable searching Wikipedia in multiple app languages

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

@RHo I am assuming the languages tab layout should not be visible at this point:

When the user has just clicked on search, but not entered a string yet.

RHo added a comment.Apr 13 2018, 6:51 PM

hi @Sharvaniharan - the language filter tab bar is never visible when there is only one language set in the app.
However, when there is more than one app language, this tab bar it is *always* shown, regardless of whether there a search string has been entered.
Also, when the language tab bar is shown, the language icon is no longer shown on the RHS of the Search input.
Finally, the "X" to clear the search string should only be visible when there is a search string entered.

Perhaps we can jump on a quick call to go through the flow again on Monday if that helps clarify.

Sharvaniharan added a comment.EditedApr 13 2018, 7:20 PM

Yes @Rita we should... i will put something on calendar for Tuesday.. I have more questions about showing recent search in languages, should area below tabs be swipeable, etc..

Change 426118 merged by jenkins-bot:
[apps/android/wikipedia@master] Enable searching Wikipedia in multiple app languages

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

Hi @Sharvaniharan - 99% there! Just a few visual design tweaks as far as I can see:

  1. the "X" to clear the search string should only be visible when there is a search string entered, at the moment it inexplicably appears when the device button to hide keyboard is tapped
  2. Search text should be 72dp from LHS edge of screen
  3. Search text style is larger than expected (should use standard Material Search text style (Subhead) Roboto Regular 16sp (Actual looks like ~18sp)
  4. Language code icon (when only one language) is larger than expected (should be 24x24dp)
  5. Language code should have Roboto Medium font-weight


  1. First icon on the Language tab bar should start ~4dp further from the LHS edge of the screen

  1. X clear icon should be 8dp further away from RHS edge of the screen when it does appear on screen

  1. MORE should also be ~8dp away from the RHS edge of the screen
  2. Language codes on the tab bar are larger than expected (should be 24x24dp)
  3. missing gradual fade to alpha 0 behind “MORE”

Then I think all other search results visual design tweaks are captured in T192397 and T192390 (text cursor color)

Dbrant added a comment.May 2 2018, 2:20 PM

Note that the following items are done via my follow-up patch:

  1. First icon on the Language tab bar should start ~4dp further from the LHS edge of the screen
  1. MORE should also be ~8dp away from the RHS edge of the screen
  1. missing gradual fade to alpha 0 behind “MORE”

Change 432140 had a related patch set uploaded (by Sharvaniharan; owner: Sharvaniharan):
[apps/android/wikipedia@master] Tweaks: Multilingual search

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

Sharvaniharan added a comment.EditedMay 9 2018, 7:05 PM

@RHo I made all changes here : https://gerrit.wikimedia.org/r/#/c/432140/
Here is a screenshot of how the label looks now. I have chosen a long lang code for edge case:

Change 432140 merged by jenkins-bot:
[apps/android/wikipedia@master] Tweaks: Multilingual search

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

Hi @Sharvaniharan - just a few items still to be completed from the previous feedback:

  1. Search text should be 72dp from LHS edge of screen
  2. Language code should have Roboto Medium font-weight

  1. X clear icon should be 8dp further away from RHS edge of the screen when it does appear on screen

+ And a new visual bug is just noticed that the distance between the start of the language tab and the language code should only be 8dp (the actual appears to be 12dp)

Change 432704 had a related patch set uploaded (by Sharvaniharan; owner: Sharvaniharan):
[apps/android/wikipedia@master] Tweaks: searching Wikipedia in multiple app languages

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

Change 432704 merged by jenkins-bot:
[apps/android/wikipedia@master] Tweaks: searching Wikipedia in multiple app languages

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

Sharvaniharan added a comment.EditedMay 14 2018, 4:09 PM

@RHo changes done and merged

RHo added a comment.May 15 2018, 8:35 PM

so close @Sharvaniharan ! Still need to update the following

  1. Search text style is larger than expected (should use standard Material Search text style (Subhead) Roboto Regular 16sp (Actual looks like ~18sp)
  1. X clear icon should be 8dp further away from RHS edge of the screen when it does appear on screen

Change 433289 had a related patch set uploaded (by Sharvaniharan; owner: Sharvaniharan):
[apps/android/wikipedia@master] Tweaks: multilingual search

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

Change 433289 merged by jenkins-bot:
[apps/android/wikipedia@master] Tweaks: multilingual search

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

hi @RHo made changes. lmk.

RHo added a comment.May 16 2018, 8:18 PM

hi @Sharvaniharan - the close is now 8dp too far from the RHS edge

I think this is resolved by changing the android:layout_marginEnd from "16dp" to "8dp" on line39 of the apps/android/wikipedia / app/src/main/res/layout/fragment_search.xml file. Have commented on gerrit as well

Change 433510 had a related patch set uploaded (by Sharvaniharan; owner: Sharvaniharan):
[apps/android/wikipedia@master] Tweak: multilingual search

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

RHo added a comment.May 17 2018, 10:02 AM

Great, all points resolved and ready for QA now thanks @Sharvaniharan

Change 433510 merged by jenkins-bot:
[apps/android/wikipedia@master] Tweak: multilingual search

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

Thanks @RHo ... sorry it took some back and forth... I previously made all changes to the library file that renders the search bar and it just stayed local.. thanks for the re-reviews!

ABorbaWMF added a subscriber: ABorbaWMF.

Looks good on 2.7.232-alpha-2018-05-18

I was able to add languages and reorder them. Tested both scenarios on two devices.

Dbrant closed this task as Resolved.Jun 27 2018, 8:05 PM