To be very clear: Navigation to this screen may change, but the idea of using some screen to customize the toolbar will not. We can create the customizable toolbar and this placeholder screen to change the buttons now.

@schoenbaechler The APK is available to review, please download the APK in the task description, thanks!

@cooltey, what can I say — this is perfect! It feels super natural to use... 😍

I guess this APK is about the interaction, as it doesn’t update menu and toolbar options yet (on my device). More details to be found in T296087:

• Actual overflow menu and quick actions don’t change yet when moving things around
• Button to access it via 'Theme' isn’t styled yet
• Some copy updates are missing, see Figma (source of truth)
• Minor: use letter spacing from buttons for the 'Reset to default' action at the bottom

Wow thanks for doing this @cooltey , I need to spend some time playing with it but one thing I am certain about is maintaining the original scope that I put in the task about having 5 things in quick actions at all time.

We haven't explored what does it mean for users to not access quick actions at all. We also haven't sorted out if its better for it to be centered, right aligned or left. In a future iteration we can explore an empty state but for now lets please stick with the original product decision of not making the number of quick actions variable.

Hi @schoenbaechler
The APK is ready for review.

This is great @cooltey , the purple button will become like the original design I imagine?

When I first used the tool I thought if I dragged the name it would move it but then I discovered I have to drag the actual icon to the far right of the name of each quick action. Is this deliberate? Is it problematic to drag and drop from the name of the quick action and the far right icon that indicates it can be moved?

@schoenbaechler do you think maybe the "Reset to Default" should look a bit different? In dark mode it looks like another title instead of a button to click?

Also, @schoenbaechler, check out the following steps:

-Go to the polar bear article 
- Move theme from your bottom toolbar
- Go to whatever the mainpage is for that day
- Try to access themes in the overflow menu

What you will find is that themes isn't in the overflow menu because it is disabled. During our normal design where themes is in the toolbar, when you go to mainpage, it is greyed out to indicate you can't access that action on that page. However, here it just disappears, we should talk about if this is ok or if we should do something about it.

Finally, @cooltey can we update the language "Customize your bottom toolbar links to your favorite Wikipedia actions and destinations." to read "Customize your bottom navigation toolbar with the actions and destinations you find most helpful."

@schoenbaechler : I wonder if we should have the link in the bottom sheet read: Customize Toolbar (instead of favorites), where it says "Customize quick actions" we should write "Customize Toolbar", and where it says quick actions we should write "Toolbar" or "Navigation Toolbar" or "Bottom Toolbar". I say this because it isn't consistent right now.

In T296753#7620862, @JTannerWMF wrote:

This is great @cooltey , the purple button will become like the original design I imagine?

The purple button was for testing only, the actual implementation is T297134.

When I first used the tool I thought if I dragged the name it would move it but then I discovered I have to drag the actual icon to the far right of the name of each quick action. Is this deliberate? Is it problematic to drag and drop from the name of the quick action and the far right icon that indicates it can be moved?

This is the same behavior like the one in Explore feed setting, in which you'll need to drag the icon to drag the whole item.

Finally, @cooltey can we update the language "Customize your bottom toolbar links to your favorite Wikipedia actions and destinations." to read "Customize your bottom navigation toolbar with the actions and destinations you find most helpful."

Yes I can do it!

Thanks both! Replies below 👇

01)

@schoenbaechler do you think maybe the "Reset to Default" should look a bit different? In dark mode it looks like another title instead of a button to click?

@JTannerWMF The issue here is that the section titles use accent50, which is reserved for links only:

Since the title uses the link color, the RESET TO DEFAULT button is de-emphasized and perceived as another section title. We’re doing this already within languages, so I suggest that @cooltey applies the same style to Quick actions and Menu:

→ This feedback is emphasized by the design team, namely @bmartinezcalvo @cmadeo @Volker_E

02)

In T296753#7620969, @cooltey wrote:

In T296753#7620862, @JTannerWMF wrote:

This is great @cooltey , the purple button will become like the original design I imagine?

The purple button was for testing only, the actual implementation is T297134.

👍

03)

When I first used the tool I thought if I dragged the name it would move it but then I discovered I have to drag the actual icon to the far right of the name of each quick action. Is this deliberate? Is it problematic to drag and drop from the name of the quick action and the far right icon that indicates it can be moved?

This is the same behavior like the one in Explore feed setting, in which you'll need to drag the icon to drag the whole item.

@JTannerWMF has a point here. I also suggest to change the behavior so the entire list item is draggable. Btw. in the Customize the feed view, *it is possible to drag the entire item*, not only the icon itself.

04)

Finally, @cooltey can we update the language "Customize your bottom toolbar links to your favorite Wikipedia actions and destinations." to read "Customize your bottom navigation toolbar with the actions and destinations you find most helpful."

Yes I can do it!

👍

05)

Also, @schoenbaechler, check out the following steps:

-Go to the polar bear article 
- Move theme from your bottom toolbar
- Go to whatever the mainpage is for that day
- Try to access themes in the overflow menu

What you will find is that themes isn't in the overflow menu because it is disabled. During our normal design where themes is in the toolbar, when you go to mainpage, it is greyed out to indicate you can't access that action on that page. However, here it just disappears, we should talk about if this is ok or if we should do something about it.

@JTannerWMF you’re getting into UX master territory here, nice! 👏I completely agree, we should make sure the overflow menu and bottom toolbar are exactly the same as in the article view. If the feature is not available (e.g. Theme, we need to grey it out).

06)

@schoenbaechler : I wonder if we should have the link in the bottom sheet read: Customize Toolbar (instead of favorites), where it says "Customize quick actions" we should write "Customize Toolbar", and where it says quick actions we should write "Toolbar" or "Navigation Toolbar" or "Bottom Toolbar". I say this because it isn't consistent right now.

Sounds good @JTannerWMF. @cooltey can you make the following two changes then:

A) Change to Customize toolbar

B) Change to Customize toolbar and Toolbar

Hi @schoenbaechler

All done and the APK with updated changes is ready for download.

In T296753#7622157, @schoenbaechler wrote:

Thanks both! Replies below 👇

Since the title uses the link color, the RESET TO DEFAULT button is de-emphasized and perceived as another section title. We’re doing this already within languages, so I suggest that @cooltey applies the same style to Quick actions and Menu:

→ This feedback is emphasized by the design team, namely @bmartinezcalvo @cmadeo @Volker_E

@schoenbaechler's proposal looks harmonious and great to me!

Since the title uses the link color, the RESET TO DEFAULT button is de-emphasized and perceived as another section title. We’re doing this already within languages, so I suggest that @cooltey applies the same style to Quick actions and Menu:

→ This feedback is emphasized by the design team, namely @bmartinezcalvo @cmadeo @Volker_E

@schoenbaechler I was reviewing your proposal (which seems great and harmonious to me too) and I was thinking that also the numbers should be gray like the title "Your languages". I would try to use the blue for link items only.

Thanks @Volker_E and @bmartinezcalvo for the replies! 🙌

I was thinking that also the numbers should be gray like the title "Your languages". I would try to use the blue for link items only.

I like that too @bmartinezcalvo — @cooltey can you change the numbers on the left too from color_group_3 to color_group_30 as well? Thanks!

@cooltey

All done and the APK with updated changes is ready for download.

Thanks for all the changes, four more questions / issues 👇

01) When dragging and dropping items from 'Menu' to 'Toolbar' (or vice versa), the menu label flickers (it disappears quickly):

~~https://www.dropbox.com/s/1ruc4vobf2uf82m/screen-20220117-122026.mp4?dl=0~~

Can this be optimized?

We’ll leave it for now. Would not be an issue anymore with the changes in T297821.

02) When opening a new tab, 'Theme' options are greyed out — would it be possible to still allow users to customize their toolbar from here? Namely, allow people to tap 'Theme' in the toolbar and 'Customize toolbar' but grey out other options that are not available when a new tab’s been opened?

(also: dreaming of a main page in 4 different themes someday) ✨

03) Currently, users have to scroll down in order to see 'Customize toolbar' (it’s below the fold) . Can we reveal more of the bottom sheet so people see 'Customize toolbar' right away (without having to scroll the sheet)?

04) I noticed that the labels in the main navigation 'Explore' and the 'Article' toolbar use different spacing. Can you adjust the labels in the article to use the same spacing as on 'Explore'? Thanks!

Hi @schoenbaechler

In T296753#7625615, @schoenbaechler wrote:

@cooltey

02) When opening a new tab, 'Theme' options are greyed out — would it be possible to still allow users to customize their toolbar from here? Namely, allow people to tap 'Theme' in the toolbar and 'Customize toolbar' but grey out other options that are not available when a new tab’s been opened?

(also: dreaming of a main page in 4 different themes someday) ✨

---

Done

03) Currently, users have to scroll down in order to see 'Customize toolbar' (it’s below the fold) . Can we reveal more of the bottom sheet so people see 'Customize toolbar' right away (without having to scroll the sheet)?

---

I have discussed this with @Sharvaniharan, and she will be working on this in T297134.

04) I noticed that the labels in the main navigation 'Explore' and the 'Article' toolbar use different spacing. Can you adjust the labels in the article to use the same spacing as on 'Explore'? Thanks!

Done.

Please download the APK from the link in the ticket description.

@JTannerWMF

I’m a bit late to the copywriting party, but I think we should enhance the copy with the amount of actions or destinations (five) users can add to the toolbar so it’s more clear.

Old:

Customize your bottom navigation toolbar with the actions and destinations you find most helpful.

New:

Customize your bottom navigation toolbar with five actions and destinations you find most helpful.

What do you think?

Thanks @cooltey

01) Seems like Sepia theme is still displayed as active in 'New tab' 👇

02) Also the light theme selection’s got an odd active state in 'New tab' ?

This is how it usually looks in articles:

03) Alignment is way better but there’s a 1px difference (the label sits a bit lower in the article page)

(please don’t kill me for 🙈😅)

In T296753#7631473, @schoenbaechler wrote:

Thanks @cooltey

01) Seems like Sepia theme is still displayed as active in 'New tab' 👇

Done!

02) Also the light theme selection’s got an odd active state in 'New tab' ?

Done

03) Alignment is way better but there’s a 1px difference (the label sits a bit lower in the article page)

(please don’t kill me for 🙈😅)

😅 Done!

Please download the APK to see the changes.

@cooltey

In T296753#7635416, @cooltey wrote:

In T296753#7631473, @schoenbaechler wrote:

Thanks @cooltey

01) Seems like Sepia theme is still displayed as active in 'New tab' 👇

Done!

02) Also the light theme selection’s got an odd active state in 'New tab' ?

Done

Seems like this is also the case when accessing it in Sepia, Dark and Black theme:

Also, there’s some strange things going on with the labels (e.g. Reading focus mode) in the 'New tab' page? It’s using black color. Can this be updated as well?

03) Alignment is way better but there’s a 1px difference (the label sits a bit lower in the article page)

😅 Done!

Looks good to me now! 🎯

Hi @schoenbaechler

Seems like this is also the case when accessing it in Sepia, Dark and Black theme:

Done. Here are the screenshots from my devices, not sure why it didn't apply on your device 🤔

Please download the APK again and let me know if you see something different on your device, thank you!

looks good to me now @cooltey, thx 👍

Hi @schoenbaechler and @JTannerWMF

Per code review comments from @Dbrant, here are two things that need discussion:
https://github.com/wikimedia/apps-android-wikipedia/pull/3022#pullrequestreview-863787636

1. The current build enables the whole list item draggable, but it will also make the list slightly difficult to be scrolled up and down (you'll need to touch the edge of the list to scroll). Our suggestion is to make it consistent with the language list screen, which only allows dragging the item if touch on the drag icon.

2. Some items have longer text, such as "View edit history" or "Find in article". Would it be possible to provide a short version of the text for each item so that we can show them in the bottom toolbar?

note: @schoenbaechler will look into updating the icon color in dark mode

hey @cooltey — just checked the designs re: this 👇

In T296753#7657034, @schoenbaechler wrote:

note: @schoenbaechler will look into updating the icon color in dark mode

Are we using color_group_13 for these icons currently?

If yes, I think they should be visible in dark mode as well? It’s a helper element. If you think they don’t have enough contrast from an accessibility standpoint, we can change it to color_group_11 — ok?

@cooltey re: shortening text strings — could we update the following strings per discussion with @JTannerWMF 👇

Add to Watchlist → Watch
View talk page → Talk page
View edit history → Edit history
Share article → Share

Hi @schoenbaechler

Done. Not sure if you need to update the text generally or separately. Now it will show the shorten version of texts on both bottom toolbar and overflow menu.

Per discussion on Slack, changing the labels both for toolbar and overflow menu is the way to go. So this is perfect @cooltey, thanks.

Looks good to me on 2.7.50393-beta-2022-02-07