@scblr A question about colors:

When selecting two items for comparison, the first item is colored yellow, and the second is colored blue:

But then in the Compare screen, the "from" item is colored blue, and the "to" item is colored yellow:

This seems inconsistent. Can we agree on the same color scheme for both cases?

now available for testing:
https://github.com/wikimedia/apps-android-wikipedia/actions/runs/1934353019

@Dbrant — wow, this is amazing work! 👏 I’m impressed how good this is working already...

01) Please apply strikethrough formatting for removals.

02) Once users are scrolling up, the from and to area should be sticky at the top of the screen, like in the designs

03) Diff formatting: Empty lines should be indicated like this (see iOS for reference):

04) Diff formatting: Moved lines should be indicated like this:

05) Letter spacing (0.5sp) is for the 'COMPARE' link👇

Figma →

06) In compare mode, the entire card should become a tap area for the radio selection. Tapping anywhere in the card (+ usernames) should 'enable' the radio button.

07) Use color_group_62 as the border color for the second item

08) Can the navbar have the same color as the area above?

09) Remove button style from bytes indicator and move it to the right of the username (per discussion in last week’s Product × Design × Engineering call)

10. Move watch functionality to the overflow menu for less visual noise (per discussion in last week’s Product × Design × Engineering call)

11. Change order of buttons and byte label to the following: Thanks, Undo, Byte indicator and align it to the left of the screen

12. Move navigation arrows to the right of the polar bear article title

13. Remove shadow here and use the same separator line as in the other places, e.g. below

Implementation	vs	Design

14. Reuse color of the newer version in the comparison for the the 'Line' indication

Implementation	vs	Design

15. Now we’re getting into visual design theory 😅. Can we apply a minus margin-left of 2sp for both buttons here to visually perceive them on the same level as the text above it?

Done:
https://github.com/wikimedia/apps-android-wikipedia/actions/runs/1970247739

In T299180#7757834, @scblr wrote:

01) Please apply strikethrough formatting for removals.

👍

02) Once users are scrolling up, the from and to area should be sticky at the top of the screen, like in the designs

👍

03) Diff formatting: Empty lines should be indicated like this (see iOS for reference):

👍

05) Letter spacing (0.5sp) is for the 'COMPARE' link👇

👍

06) In compare mode, the entire card should become a tap area for the radio selection. Tapping anywhere in the card (+ usernames) should 'enable' the radio button.

👍

07) Use color_group_62 as the border color for the second item

👍

08) Can the navbar have the same color as the area above?

👍

09) Remove button style from bytes indicator and move it to the right of the username (per discussion in last week’s Product × Design × Engineering call)

👍

10. Move watch functionality to the overflow menu for less visual noise (per discussion in last week’s Product × Design × Engineering call)

👍

11. Change order of buttons and byte label to the following: Thanks, Undo, Byte indicator and align it to the left of the screen

👍

12. Move navigation arrows to the right of the polar bear article title

👍

13. Remove shadow here and use the same separator line as in the other places, e.g. below

👍

14. Reuse color of the newer version in the comparison for the the 'Line' indication

👍

15. Now we’re getting into visual design theory 😅. Can we apply a minus margin-left of 2sp for both buttons here to visually perceive them on the same level as the text above it?

👍

04) Diff formatting: Moved lines should be indicated like this:

The desired design for moved lines/paragraphs is extremely complex to accomplish using standard Android components. Let's chat next time regarding possible alternatives.,

Wow @Dbrant — you catched them all 🤩

I spotted two more minor inconsistencies and have one question:

01) Can we change the label from Add to Watchlist to Watch anywhere in the app? (we already changed it in the article overflow menu):

02) Please apply the same “visual design hack” (minus margin of -2sp) to the thank button so they are aligned

03) What was the final decision re: the undo button @JTannerWMF @Johan ? Move it to the overflow menu ?

I mean → the question is: should we put an emphasis on 'Undo' or not? IMO, red is the right choice as it’s a destructive action, see our design system guidelines:

Variants of red indicate errors in components, such as invalid text in a text field. **They also represent destructive actions, such as delete or cancel.**

https://design.wikimedia.org/style-guide/visual-style_colors.html

So the two options we have from a design standpoint are: keep it as is (exposed next to thanks) or move it to the overflow menu. What do you think? Thanks for the feedback.

04) Diff formatting: Moved lines should be indicated like this:

The desired design for moved lines/paragraphs is extremely complex to accomplish using standard Android components. Let's chat next time regarding possible alternatives.,

Ok, let’s talk about alternatives tomorrow.

03) What was the final decision re: the undo button @JTannerWMF @Johan ? Move it to the overflow menu ?

I can't speak to any final decisions, of course, that's Jazmin's decision, but since I was pinged: my preference would be to keep it visible and accessible and not move it to the overflow menu. Deciding whether something needs to be reverted or not is a key reason to look at a diff, and this would simplify that workflow.

01) Can we change the label from Add to Watchlist to Watch anywhere in the app? (we already changed it in the article overflow menu):

👍

02) Please apply the same “visual design hack” (minus margin of -2sp) to the thank button so they are aligned

👍

03) What was the final decision re: the undo button @JTannerWMF @Johan ? Move it to the overflow menu ?

Since the Undo feature is still behind a feature flag, we can move forward with releasing this, and refine the feature as we go along.

This is a masterpiece @Dbrant. Picasso had Mona Lisa, Michelangelo had David, Niki de Saint Phalle had Nana and Dmitry Brant had Revision history on Android. The best work so far! 👏👏👏

I have one last design request:

The upper area feels dense from a visual design standpoint:

Diffs are hard to understand, especially for newcomers. We need to be careful and deliver information piece by piece so it remains processable.

I suggest to go with the same design from the list view to makes the upper area less busy:

@cooltey implemented a way to add the title of the screen to the app bar when scrolling. This makes sure that the entire screen estate is used:

Video

Can we reuse that same design & pattern for the diff detail screen?

Can we reuse that same design & pattern for the diff detail screen?

👍 (in alpha)

looks great @Dbrant – can we use the exact same type definitions (as in the list), they differ slightly in line height:

thx!

Alignment is perfect now @Dbrant 👍

We might need to increase the tap target size of these buttons to 48 * 48 dp in order to be accessible? (cc @cooltey Accessibility)

Here’s a draft of how it could be achieved without changing/moving the current type attributes 👇

In T299180#7795645, @scblr wrote:

We might need to increase the tap target size of these buttons to 48 * 48 dp in order to be accessible? (cc @cooltey Accessibility)

I made the buttons exactly how they appeared in Figma, but now they have changed again. Is this the final design?

Here we go! (alpha)

Looks good to me on 2.7.50400-alpha-2022-05-05