Page MenuHomePhabricator

Build Activity list for Edit History
Closed, ResolvedPublic

Authored By
JTannerWMF
Jan 13 2022, 11:08 PM
Referenced Files
F34972396: Screenshot_20220302-152943.png
Mar 2 2022, 2:35 PM
F34963197: Screenshot_20220223-170233.png
Feb 23 2022, 4:16 PM
F34957043: alignmnet.png
Feb 18 2022, 4:43 PM
F34957038: Screenshot_20220218-173532.png
Feb 18 2022, 4:43 PM
F34933621: Screen Shot 2022-01-27 at 5.36.32 PM.png
Jan 28 2022, 1:42 AM
F34933616: blnk.png
Jan 28 2022, 1:42 AM
F34924655: Edit history.png
Jan 20 2022, 4:40 PM
F34917469: IMG_2549.PNG
Jan 13 2022, 11:08 PM

Description

Background

As the designs for Edit History is being built there are some technical tasks that can be created without designs, this task serves as one of them.

The Task

Create the Activity List page of Edit history with the list of revisions shown newest to oldest.

User Story

As a Wikipedia Android app user I want to see the revision history of a Wikipedia page natively, so that I don't have to leave the app or go into web view to know what edits were made recently to the page I am interested in reading.

Design (Figma)

Edit history.png (1×720 px, 98 KB)

The revision history home screen features:

  • A visual representation of how the article has been edited in the past few months or weeks. Please sync with the iOS engineers on the technical specs as it should be consistent.
  • A search bar that lets users roughly search a the revision history
  • A filter button/icon in the search bar that lets users filter their edits
  • Date titles (from Watchlist view)
  • Card design (from Watchlist view) that show:
    • The edit summary
    • Edit time
    • Amount of characters/Bytes added/removed
    • The username, which should trigger a bottom sheet with a link to the users profile or talk page
  • Tapping a card item takes users to the diff view (edit detail screen)

Event Timeline

Hi @schoenbaechler
I wanted to discuss 2 things:

  1. The comment line in the revision details, may be we should mimic the ios designs and have it at the right bottom like this:

https://www.figma.com/file/XuMaiGvAgrJKvsm2esbm75/Edit-history-T297759?node-id=163%3A2263

Because, for many edits, there are no comments and having it at the top leaves a bad blank space:

blnk.png (2×1 px, 131 KB)

  1. Is it ok if we just say the size in bytes [150,210], like we see here in the edit history:

Screen Shot 2022-01-27 at 5.36.32 PM.png (598×1 px, 253 KB)

instead of character count [69]?
We can change the color to something less prominent and display as %d bytes. This will save one more api call, as it is hard to convert the bytes size to char count here.
[This is a minor one, so if you need the count, that is fine]

Thank you :)

Thanks @Sharvaniharan, good questions 🙃

Hi @schoenbaechler
I wanted to discuss 2 things:

  1. The comment line in the revision details, may be we should mimic the ios designs and have it at the right bottom like this:

https://www.figma.com/file/XuMaiGvAgrJKvsm2esbm75/Edit-history-T297759?node-id=163%3A2263

Because, for many edits, there are no comments and having it at the top leaves a bad blank space:

blnk.png (2×1 px, 131 KB)

If there’s no edit summary, can we instead show a preview of the edit itself? I think that’d be more helpful.

  1. Is it ok if we just say the size in bytes [150,210], like we see here in the edit history:

Screen Shot 2022-01-27 at 5.36.32 PM.png (598×1 px, 253 KB)

instead of character count [69]?
We can change the color to something less prominent and display as %d bytes. This will save one more api call, as it is hard to convert the bytes size to char count here.
[This is a minor one, so if you need the count, that is fine]

Thank you :)

Sounds good to me!

Because, for many edits, there are no comments and having it at the top leaves a bad blank space:

If there’s no edit summary, can we instead show a preview of the edit itself? I think that’d be more helpful.

Somewhat disagree. Showing a preview of the edit will almost certainly not show the actual spot where the change was made; there's simply too much contextual text surrounding the diff for this to be useful.

It would be more useful to state explicitly that there was no comment included with the edit. This is an indication that the edit might not be good quality.

Looks good so far @Sharvaniharan, great work! 👍

01)

Screenshot_20220218-173532.png (2×1 px, 191 KB)

Can we make these items *not* behave like buttons? Tapping the entire card should lead users to the detail view. Tapping an item highlights it but it does not navigate to the detail screen, see this video:

https://www.dropbox.com/s/d3exm40k1k4dh0b/screen-20220218-173839.mp4?dl=0

02)

alignmnet.png (1×1 px, 207 KB)

Some things aren’t 100% aligned yet, please check the specs on Figma

@schoenbaechler Thank you so much for the review. I have fixed these issues. Please review them https://github.com/wikimedia/apps-android-wikipedia/pull/3077/checks.

However, this still doesn't eliminate the use of another api call for each row, so I also changed the diff size to just be expressed in bytes. I created a separate branch for you to review how that would look. Please take a look at that here: https://github.com/wikimedia/apps-android-wikipedia/pull/3134/checks If that looks good, we can go with that approach as well.

Thanks @Sharvaniharan

01)

Screenshot_20220218-173532.png (2×1 px, 191 KB)

Can we make these items *not* behave like buttons? Tapping the entire card should lead users to the detail view. Tapping an item highlights it but it does not navigate to the detail screen, see this video:

https://www.dropbox.com/s/d3exm40k1k4dh0b/screen-20220218-173839.mp4?dl=0

Can we remove the hover animation / highlight on the buttons on when long pressing a card item?

02)

alignmnet.png (1×1 px, 207 KB)

Some things aren’t 100% aligned yet, please check the specs on Figma

Looks good now!


Quickly wanted to tag @JTannerWMF for consultation. Sharvani and Dmitry mentioned that previewing the edit, when there is no edit summary, might cause performance issues (too many API calls), so they are suggesting to show copy that there’s no edit summary, like this 👇

Screenshot_20220223-170233.png (2×1 px, 222 KB)

I’m not the biggest fan of this solution but also acknowledge that our options are limited. IMO the copy could be streamlined from There is no comment associated with this edit' to No edit summary`, Empty edit summary or something like that. Thoughts @JTannerWMF ? Thx!

Hi @scblr
I have fixed the ripple issue and updated the copy to "Empty edit summary". Please review and let me know.
[Note: I have updated the APK link. Please download from the new one again]

@Sharvaniharan
The design specifies different avatar icons for different types of edits:

  • regular user (current avatar icon)
  • bot edit (robot icon)
  • anonymous edit (hat-with-glasses icon)

Edit history.png (1×720 px, 98 KB)

Thanks @Dbrant . @scblr Did this change as well. ^ The api response doesnt give the info for a bot edit, so you will only see 2 types of user icons, regular for logged in and the hat-with-glasses for anon users

@Sharvaniharan, thanks for the update!

I see this in the latest apk from the task’s description 👇

Screenshot_20220302-152943.png (2×1 px, 154 KB)

... seems like there’s an issue with retrieving the amount of bytes? thanks for checking! (I’ve set my system and primary app language to German in case you need to reproduce it, article: Ukraine)


the rest looks good Sharvani (👏) and thx @Dbrant for the hint re: iconography!

@scblr Thank you for the review..

This will get fixed in an upcoming build that Dmitry is working on. Actually the current alpha has it if you want to check it out :)

looks good to me now @Sharvaniharan — per discussion with @Dbrant last week: we’re going to remove the button style for the byte indicator in the list view cards and move the username button to the most left position.

... thanks for working on this!