Hi @scblr, I would like to claim this ticket, is this ready for dev?

@cooltey — yes it is! thx

Hi, @scblr, the implementation is completed. Please check the APK in the ticket description.

@cooltey tried to test it with the apk from the task’s description, but the links in the overflow menu and footer lead to a separate view. This is the preferred behavior but does not allow me to test it (since there’s no button next to the article’s title yet).

Despite a few color updates to the sidepanel (comparison below, details on Figma), the screenshot you posted looks good though!

Design	vs	Implementation

Hey @cooltey — great work so far!

01) Can the upper area of the side panel have the same height as the app bar? (the grey line sits a bit lower in the same panel). Also same vertical font centering and icon size as in the app bar (if it’s not the same).

02) Tapping a topic in the list leads users to the subject view, which is great. After tapping back from the subject view — the panel should be open again.

03) Mentioned in the previous comment:

Despite a few color updates to the sidepanel (comparison below, details on Figma), the screenshot you posted looks good though!

Design	vs	Implementation

• Can we also update the TOC with these designs?
• The separator lines might need adaptation as well (they’re lighter in the designs)

04) The edit history info at the bottom should take users to the edit history of the talk page — it currently doesn’t do anything

05) Swipe actions: If the panel is open, the same swipe action as for the TOC (swipe right) should close it.

Hi @scblr, the APK has been updated. Please download the updated APK from the ticket description.

! In T299033#7748242, @scblr wrote:
Hey @cooltey — great work so far!

01) Can the upper area of the side panel have the same height as the app bar? (the grey line sits a bit lower in the same panel). Also same vertical font centering and icon size as in the app bar (if it’s not the same).

Done! And I also make the title also clickable, not sure if that is what you want.

02) Tapping a topic in the list leads users to the subject view, which is great. After tapping back from the subject view — the panel should be open again.

Done.

03) Mentioned in the previous comment:

Despite a few color updates to the sidepanel (comparison below, details on Figma), the screenshot you posted looks good though!

Design	vs	Implementation

Done!

• Can we also update the TOC with these designs?

Not sure what kind of design you would like to apply to the current ToC? It would be very helpful if you can provide a mock of it 😉

• The separator lines might need adaptation as well (they’re lighter in the designs)

Done.

04) The edit history info at the bottom should take users to the edit history of the talk page — it currently doesn’t do anything

Done.

05) Swipe actions: If the panel is open, the same swipe action as for the TOC (swipe right) should close it.

Done.

everything looks good now — great work @cooltey 👏

ps: the only thing left to check before a release is making sure that the current TOC button doesn’t trigger the talk pages side panel + adding the button next to the article’s title.

Moved to Blocked/Waiting since the mobile-html updates are still under review.

I just reviewed this and think the side panel design, which is reduced to showing the title of the talk page and listing topics, is exactly what it needs to be. Enhanced functionality, like search, amount of replies per topic, and last comment per topic, is available on the detail screen.

As we introduced new sort options with the new design, the one thing I suggest is to adapt the side panel view to the sort option that the user has chosen in the detail view:

https://www.figma.com/file/Ky1oBd1bNezM0ovToBzDxB/Talk-pages-visual-distinction-T297617?node-id=1014%3A33613

Moving this to ready for dev again!

In T299033#7994460, @scblr wrote:

I just reviewed this and think the side panel design, which is reduced to showing the title of the talk page and listing topics, is exactly what it needs to be. Enhanced functionality, like search, amount of replies per topic, and last comment per topic, is available on the detail screen.

As we introduced new sort options with the new design, the one thing I suggest is to adapt the side panel view to the sort option that the user has chosen in the detail view:

https://www.figma.com/file/Ky1oBd1bNezM0ovToBzDxB/Talk-pages-visual-distinction-T297617?node-id=1014%3A33613

Moving this to ready for dev again!

Hi @scblr

Since we have a new talk page design, not sure if you want to sync the design in the side panel instead of the original design.

The screenshot below is the current implementation, in which we share the same component in the side panel and the talk topics list.

Another question: where should we put the sort button on the side panel?

Per discussion with @scblr

in short, don’t show the three dots per topic, sort option and “last edited” footer in the side panel

Design updates are completed. Please check the APK link from the ticket description, thanks!

@cooltey – the apk in the ticket description seems outdated – I used this one to review:

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

and noticed the following things:

01) the edit pencil uses a different color than the talk page bubble. can we streamline it, so the edit pencil also uses color_group_9 ?

02) in the apk I tested, the overflow menu is still visible – please hide it

03) the space below a title, when there are no replies/comments, is not the same as the top margin, could you make sure to make it the same?

it’s the same on the detail page itself:

to fine-tune it → what are the current dp values for the top and bottom margin you are using here? thanks!

05) will add comments related to the coffee roll here T310801

great work so far @cooltey 👏

In T299033#8022155, @scblr wrote:

@cooltey – the apk in the ticket description seems outdated – I used this one to review:

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

Sorry forgot to update that. I've updated the link in the description.

and noticed the following things:

01) the edit pencil uses a different color than the talk page bubble. can we streamline it, so the edit pencil also uses color_group_9 ?

This will require creating a ticket for the content transform team to update it since it is controlled by mobile-html.

02) in the apk I tested, the overflow menu is still visible – please hide it

Done.

03) the space below a title, when there are no replies/comments, is not the same as the top margin, could you make sure to make it the same?

it’s the same on the detail page itself:

to fine-tune it → what are the current dp values for the top and bottom margin you are using here? thanks!

It is basically 16dp. But since the overflow menu aligns to the top and bottom of the title, it will require extra space for accessibility.

Here's the actual size of the components

We can either increase the height of the title view or adjust the size of the overflow menu, which is not recommended.

05) will add comments related to the coffee roll here T310801

Yes we can do that together.

Hi @scblr

As we discussed on Slack, please take a look at the screenshots of all the possible layout conditions, and also please check out the layout in the side panel as well.

The APK has been updated.

Hey @cooltey – the apk in the task’s description doesn’t seem to work correctly; see this video:

https://www.dropbox.com/s/lknf5zjvx3il566/screen-20220613-105828.mp4?dl=0

The two screenshots you posted look good in general, some remarks:

01) The coffee roll text seems to use too much space between lines, please update it to font_group_3, which uses font-size: 14sp; line-height: 21sp; to make it more compact

(also needs to be applied to the side panel)

02) The space here is imbalanced and too big (which results in making the topics list unnecessary long)

Can you tell me what dp (or sp) values you currently use for 1, 2, 3, 4, and 5 – so we can tweak them?

(also needs to be applied to the side panel)

Thanks!

Hi @scblr >

! In T299033#8032181, @scblr wrote:
Hey @cooltey – the apk in the task’s description doesn’t seem to work correctly; see this video:

https://www.dropbox.com/s/lknf5zjvx3il566/screen-20220613-105828.mp4?dl=0

Looks like you have a network connection issue, you may need to restart or turn on/off the WIFI.

The two screenshots you posted look good in general, some remarks:

01) The coffee roll text seems to use too much space between lines, please update it to font_group_3, which uses font-size: 14sp; line-height: 21sp; to make it more compact

Done.

(also needs to be applied to the side panel)

02) The space here is imbalanced and too big (which results in making the topics list unnecessary long)

Can you tell me what dp (or sp) values you currently use for 1, 2, 3, 4, and 5 – so we can tweak them?

The old version:

1. 12dp
2. 12dp
3. 12dp
4. 8dp
5. 12dp

New version

From #1 to #5, all have the same 8dp. Please let me know if you need other variables for them.

Please download the latest APK in the ticket description. Thanks

Thanks @cooltey – a few more comments on the latest implementation 👇

01)

{F35310508}
New version
From #1 to #5, all have the same 8dp. Please let me know if you need other variables for them.

Thanks for the new values. Can you adapt them from:

1. 8dp
2. 8dp
3. 8dp
4. 8dp
5. 8dp

To:

1. 6dp
2. 8dp
3. 8dp
4. 6dp
5. 8dp

02)

Please apply title truncation in the side panel only, not in the full view:

✅	❌

03)

Please align the subject footer info (amount of replies, last comment) to the top in both the side panel and full talk view – it looks odd when there are multiple lines in the footer:

04)

Speaking of multiple lines in the subject footer info, I think we should not allow them in the side panel – there are three possible solutions to solve it:

A) Truncate the subject footer (same as the subject title)
B) Don’t show the “Last comment: " text string (only output the date)
C) Choose a shorter way to output date/time, e.g. 04/26/2022, 09:51 PM instead of Apr 26, 2022, 09:51 PM

Or do you have other suggestions to reduce it to one line @cooltey? (e.g. manipulating the side panel width or so?) I can imagine that solution A is the easiest to implement, and acceptable to me.

In T299033#8060722, @scblr wrote:

Thanks @cooltey – a few more comments on the latest implementation 👇

01)

{F35310508}
New version
From #1 to #5, all have the same 8dp. Please let me know if you need other variables for them.

Thanks for the new values. Can you adapt them from:

1. 8dp
2. 8dp
3. 8dp
4. 8dp
5. 8dp

Done. I have updated the layout in the last comment date, so please verify the padding of #4 and #5 are correct.

02)

Please apply title truncation in the side panel only, not in the full view:

03)
Please align the subject footer info (amount of replies, last comment) to the top in both the side panel and full talk view – it looks odd when there are multiple lines in the footer:

Done.

04)

Speaking of multiple lines in the subject footer info, I think we should not allow them in the side panel – there are three possible solutions to solve it:

A) Truncate the subject footer (same as the subject title)
B) Don’t show the “Last comment: " text string (only output the date)
C) Choose a shorter way to output date/time, e.g. 04/26/2022, 09:51 PM instead of Apr 26, 2022, 09:51 PM

I preferred to remove the "Last comment" and output the current text string, but please see the possible solutions you suggested.

Please download and test the APK from here: T310801#8066966

@cooltey — mostly looks good, but there are some new issues:

01) Some items are cut off now:

The text field should grow towards the bottom, not the top 👇

Design	vs	Implementation

The current implementation also leads to inconsistent spacing:

02) I observed this:

A) When there is no reply icon, the space between title and date is perfect:

B) When there is a reply icon, on the other hand, the space between title and date is too big:

Please ensure it’s always balanced like in A) with the reply icon.

Thanks!

Hi @scblr

Sorry about going back and forth so many times 😓, adjusting the item view layout is pretty tricky since it contains some logic to control the visibility. Please make sure to check the user talk page to see if the changes are correct for you.

(Maybe we can have a real-time syncing on Monday).

In T299033#8096959, @scblr wrote:

@cooltey — mostly looks good, but there are some new issues:

01) Some items are cut off now:

Done

The current implementation also leads to inconsistent spacing:

Done. (Relate to the one above).

One thing I would like to let you know is that if there is only the topic title, the text might not be able to align with the middle of the height since the overflow menu icon has the minimum height of it.

I have tried to make the topic title sit in the middle, but the trade-off will be the overflow icon not aligning with the top of the topic title text.

02) I observed this:

A) When there is no reply icon, the space between title and date is perfect:

Done. Please make sure to check the layout of a user talk page.

Please download the updated APK from the ticket description or from the link below, thanks!
https://github.com/wikimedia/apps-android-wikipedia/pull/3464

Thanks @cooltey – all the previous items seem to fixed!

Sorry about going back and forth so many times 😓

No worries about that, we’re going to get it right soon :)

I spotted these additional things:

01) Can we remove User from the title in the app bar?

02) Not quite sure why the first topic on this user talk page is outputted as a coffee roll. Do you know why? Thanks for the insights.

03) The 'Date published' filter doesn’t work as a toggle. Tapping 'Date published ↑' should change the label to 'Date published ↓' and reverse the order of the list.

https://www.dropbox.com/s/tu8qk5bkr0xrc9t/screen-20220726-142724.mp4?dl=0

Hi @scblr,

All these issues can be fixed in separate PRs (and I'll fix them). Is it possible to move this ticket to the code review if the design tweaks look good to you?

02) Not quite sure why the first topic on this user talk page is outputted as a coffee roll. Do you know why? Thanks for the insights.

This is an issue from the discussiontools API side, and I have created a bug ticket for it.

Sure @cooltey – I created a new task for 1) and 3) → T313890