Page MenuHomePhabricator
Create Task
Maniphest T269445

Build Watchlist main screen
Closed, ResolvedPublic
Actions

Assigned To
Dbrant
Authored By
Dbrant
Dec 4 2020, 1:46 PM
Tags
Referenced Files
F34091290: IMG_20210203_195349.jpg
Feb 3 2021, 7:02 PM
F34091292: IMG_20210203_195355.jpg
Feb 3 2021, 7:02 PM
F34091288: IMG_20210203_195341.jpg
Feb 3 2021, 7:02 PM
F33995792: watchlist-06-list copy.png
Jan 11 2021, 2:47 PM
F33995788: Screenshot_20210111-151323 copy.png
Jan 11 2021, 2:47 PM
F33995801: watchlist-06-list copy 2.png
Jan 11 2021, 2:47 PM
F33995804: watchlist-06-list copy 3.png
Jan 11 2021, 2:47 PM
F33995794: Screenshot_20210111-151323.png
Jan 11 2021, 2:47 PM
View All 18 Files
Subscribers
ABorbaWMF
Aklapper
cooltey
Dbrant
scblr
YacineBoussoufa

Description

👨‍🎨 Check out the latest designs for this task on Zeplin.

1.2.3.
watchlist-01-home.png (1×720 px, 186 KB)
watchlist-06-list.png (2×720 px, 185 KB)
watchlist-02-list-dialog.png (2×720 px, 193 KB)

Remarks:

  • Users access their Watchlist via More main navigation item.
  • Watchlist features items from all active user languages by default. The languages can be selected via language icon in the app bar (see 2.).
    • Hide the language icon in the app bar if only 1 app language is set.
  • Quick filters at the top (All, Talk, Pages, Other) allow filtering the view (similar to the Mobile web version).
  • Tapping a Watchlist item leads to the diff view, see chapter 3).
  • A Watchlist card item consists of:
    • Title (article, talk page, other)
    • Language indicator (e.g. EN)
      • Hide the language indicator if only 1 app language is set.
    • Time
    • Diff summary, if available
      • If not available, preview the change itself
    • Characters added / removed
    • Link to user profile (preferably in-app)
      • User icon (person or anonymous)
      • User name

Related Objects
Search...

StatusSubtypeAssignedTask
 ResolvedLGotoT264010 [EPIC] In-app watchlists
 ResolvedDbrantT269445 Build Watchlist main screen

Event Timeline

Dbrant created this task.Dec 4 2020, 1:46 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptDec 4 2020, 1:46 PM
Dbrant claimed this task.Dec 4 2020, 1:49 PM
Dbrant moved this task from Ready for dev to Doing on the Wikipedia-Android-App-Backlog (Android-app-release-v2.7.33x-R-Rosgulla) board.
Dbrant added a parent task: T264010: [EPIC] In-app watchlists.Dec 7 2020, 4:46 PM
LGoto triaged this task as Medium priority.Dec 7 2020, 5:03 PM
Dbrant moved this task from Doing to Code Review on the Wikipedia-Android-App-Backlog (Android-app-release-v2.7.33x-R-Rosgulla) board.Dec 8 2020, 4:27 PM
scblr updated the task description. (Show Details)Dec 10 2020, 2:53 PM
Dbrant moved this task from Code Review to Design signoff on the Wikipedia-Android-App-Backlog (Android-app-release-v2.7.33x-R-Rosgulla) board.Dec 11 2020, 2:27 PM

Note: the APK for testing is here:
https://github.com/wikimedia/apps-android-wikipedia/suites/1645794588/artifacts/30507765

...since this is on a feature branch, not yet merged.

scblr subscribed.Dec 11 2020, 5:24 PM
In T269445#6684801, @Dbrant wrote:

Note: the APK for testing is here:
https://github.com/wikimedia/apps-android-wikipedia/suites/1645794588/artifacts/30507765

...since this is on a feature branch, not yet merged.

404 for this link 😏

image.png (1×2 px, 1 MB)

scblr moved this task from Design signoff to Did not pass QA on the Wikipedia-Android-App-Backlog (Android-app-release-v2.7.33x-R-Rosgulla) board.Dec 11 2020, 6:50 PM
cooltey subscribed.Dec 16 2020, 12:22 AM

404 for this link 😏

Hi @schoenbaechler

Looks like it requires permission to download the APK.

Do you have a Github account that can be added to the https://github.com/wikimedia user group? If not, I suggest creating a free account on Github and let us know your user name.

scblr added a comment.Dec 16 2020, 9:26 AM

Looks like it requires permission to download the APK.

Do you have a Github account that can be added to the https://github.com/wikimedia user group? If not, I suggest creating a free account on Github and let us know your user name.

Thanks @cooltey for initiating. My Github username is schoenbaechler.

cooltey moved this task from Did not pass QA to Design signoff on the Wikipedia-Android-App-Backlog (Android-app-release-v2.7.33x-R-Rosgulla) board.Dec 16 2020, 9:51 PM
scblr added a comment.Dec 17 2020, 4:54 PM

Great work so far @Dbrant! 👏

01) Don’t show the language when there’s only one app language.

Screenshot_20201217-164016 copy.png (2×1 px, 211 KB)

02) Truncate at 4 lines

Screenshot_20201217-164210.png (2×1 px, 231 KB)

03) Use truncation to keep longer buttons on 1 line (no value is added when they’re on 2 lines)

Screenshot_20201217-164150.png (2×1 px, 222 KB)

04) Check out the correct margin-top for dates on Zeplin: https://zpl.io/29rkR8Y

Screenshot_20201217-164131.png (2×1 px, 221 KB)

05) Link to user talk page here

Screenshot_20201217-164016.png (2×1 px, 209 KB)

scblr moved this task from Design signoff to Did not pass QA on the Wikipedia-Android-App-Backlog (Android-app-release-v2.7.33x-R-Rosgulla) board.Dec 17 2020, 4:54 PM
Dbrant moved this task from Did not pass QA to Design signoff on the Wikipedia-Android-App-Backlog (Android-app-release-v2.7.33x-R-Rosgulla) board.Jan 8 2021, 10:21 PM
scblr added a comment.EditedJan 11 2021, 2:47 PM

Solid work @Dbrant 👏 I think the screen works, in general!

A few touch ups left:

01) Remove back button from here (it’s basically a main nav item, but positioned in the overflow menu).

Screenshot_20210111-151323 copy.png (2×1 px, 227 KB)

02) Show main navigation, see designs on Zeplin or screenshots below.

watchlist-06-list copy 2.png (1×720 px, 125 KB)
watchlist-06-list copy 3.png (1×720 px, 101 KB)

03) Decrease the line spacing to make it more compact (see font_group_4 from Android font guidelines)

watchlist-06-list copy.png (2×1 px, 409 KB)

04) I think we should use the talk page icon here to set expectations correctly and for reasons of consistency. I’m not 100% convinced though, what do you think @Dbrant ?

Screenshot_20210111-151323.png (2×1 px, 211 KB)

05) When there’s no summary, adapt the the size of the card to make it more. E.g. in this case, there’s unnecessary space below “Joe Biden”:

Screenshot_20210111-152742.png (2×1 px, 270 KB)

scblr moved this task from Design signoff to Did not pass QA on the Wikipedia-Android-App-Backlog (Android-app-release-v2.7.33x-R-Rosgulla) board.Jan 11 2021, 5:18 PM
scblr mentioned this in T272172: Watchlist main screen optimizations.Jan 15 2021, 6:02 PM
Dbrant moved this task from Did not pass QA to Design signoff on the Wikipedia-Android-App-Backlog (Android-app-release-v2.7.33x-R-Rosgulla) board.Jan 15 2021, 11:12 PM
scblr added a comment.Jan 18 2021, 11:09 AM

Perfetto @Dbrant 👍 → QA signoff!

scblr moved this task from Design signoff to QA signoff on the Wikipedia-Android-App-Backlog (Android-app-release-v2.7.33x-R-Rosgulla) board.Jan 20 2021, 10:00 AM
ABorbaWMF moved this task from QA signoff to Ready for signoff on the Wikipedia-Android-App-Backlog (Android-app-release-v2.7.33x-R-Rosgulla) board.Jan 25 2021, 6:39 PM
ABorbaWMF subscribed.

Looking good on 2.7.50339-alpha-2021-01-25

Dbrant closed this task as Resolved.Feb 2 2021, 10:02 PM
YacineBoussoufa subscribed.Feb 3 2021, 7:02 PM

I've just noticed a minor issue: if you select a language where you don't have any watched page it shows a message that says that, but if you deselect every language it shows a blanc page.

IMG_20210203_195341.jpg (1×1 px, 63 KB)
no watched page in a random language
IMG_20210203_195349.jpg (1×1 px, 58 KB)
deselect every language
IMG_20210203_195355.jpg (1×1 px, 38 KB)
blanc page appears
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits