Lets figure out the tool tip later. Right now the default should be reading mode off and toolbar as our default settings. We will do more indepth thinking of onboarding then decide the tooltip at that time

@JTannerWMF

Lets figure out the tool tip later. Right now the default should be reading mode off and toolbar as our default settings. We will do more indepth thinking of onboarding then decide the tooltip at that time

Sounds good to me!

Just to note that certain items from this task are handled as part of T254771:

• Changing the "Font" heading to "Reading".
• Adding the "Reading focus mode" checkbox.
• Adding the grabby shape at the top of the bottom-sheet.

Hi @JTannerWMF @schoenbaechler I implemented the tooltip by detecting behind the scenes where the theme button is. Please take a look at this and let me know your thoughts:
https://youtu.be/jqjMnRvjR7A
The top tooltip is aimed to point at the overflow icon... looks a few pixels off. I will look into fixing it if you feel this solution is ok. You can also use the apk to play around:
https://github.com/wikimedia/apps-android-wikipedia/pull/3060/checks

This works and looks good to me @Sharvaniharan. If you can look into the “few pixels off” aspect, it will be great!

What do you think @JTannerWMF ?

So the tooltip went away for me because it conflicts with watchlist. I saw the watchlist one and then I clicked it away and then the toolbar one came and i accidentally clicked it away before being able to read it, what is the current logic of when we show it?

Also, I am in dark mode and I am not seeing the link for the customizable toolbar?

Otherwise Reading Mode looks great.

Reviewed in the latest Alpha as of this time stamp

I need the APK for the tooltip, but going by the video, will it always say "See whats new"? I ask because what if a year from now a new user creates an account, it will say "see whats new", technically it is new to that person but maybe not a new feature? Sorry if I'm being too pedantic.

What about "Optimize your experience by customizing your toolbar and trying out Reading Focus Mode" @schoenbaechler

I need the APK for the tooltip,

Same here!

but going by the video, will it always say "See whats new"? I ask because what if a year from now a new user creates an account, it will say "see whats new", technically it is new to that person but maybe not a new feature? Sorry if I'm being too pedantic.

Good point @JTannerWMF, how about something even less wordy, like Customize your toolbar and try reading focus mode (without the 'See what’s new' title) ?

Hi @JTannerWMF @schoenbaechler Please review the latest version here: https://github.com/wikimedia/apps-android-wikipedia/pull/3060/checks
I have also made copy changes..

Hi @schoenbaechler
Wanted to discuss this here:
https://phabricator.wikimedia.org/T296753#7625615 #3

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 feel it belongs to this task... and I have currently set the height of the bottom sheet to be 2/3 of the screen as mentioned in the task description. So, we can either have that restriction or we can be able to expand all the way to show the customize button without scrolling, but not both.. :-)

Hey @Sharvaniharan, thanks for the work on this so far! Here are a few things to optimize:

01)

The bottom sheet doesn’t use 2/3 of the screen, it’s more in the area of 1/3. I’d say we should completely show the bottom sheet if the space allows for it. Can you think of a smart logic to achieve this? We had a similar logic for the draggable bottom sheet in the image recommendations project (that @cooltey developed as far as I can remember)

02) Icon for reading focus mode is missing

Implementation | vs | Design

Icon:

03) Change 'Quick action' to 'Toolbar'

04) Change copy: 'Customize quick action' to 'Customize toolbar'

05) The font style is off for the label, it uses letter spacing but it shouldn’t. Please use the same style used for the other labels in the sheet.

Hi @schoenbaechler
Thank you for the review.

I have fixed 02) through 05)

For 01),

Currently I am setting the peekHeight, which is the initial height that the bottom sheet "peeks out" at, to be 1/3 the screen height. Incidentally, this also is the same height at which the bottom sheet snaps back to, when lowered. That is how the bottomsheet is engineered internally. So if you want the bottomSheet to snap back at 1/3 the screenHeight, we will need to set the initial peekHeight to 1/3. The second parameter we can set is to restrict how far the bottomSheet can be expanded/dragged, which I have set to 2/3 the screen height. So if we have content more than that, the bottom sheet height will snap at the top to 2/3 and the remaining content will have to scroll.

So current behavior is, open 1/3, expand to 2/3 and snap back at 1/3 when lowered:

Option#2 is to only set the 1/3 peekHeight, which means it will open at 1/3, and I have set no restriction on expansion, which means it can be expanded to screenSize, and when lowered, snaps back to 1/3 [ Which is what we have on image captions.]:

Option#3 is to set the peekHeight to screenSize, which means the bottom sheet will fully open to screenSize, but when we lower it, it cannot snap at 1/3, and will just disappear. Like this:

What we cannot do : Open at full screen size, but snap back to 1/3

Please let me know which one you prefer.

@Sharvaniharan

02) to 05) are all still unchanged for me?

For 01)

Can we do this:

If the sheet does not cover the entire article in the background (which is important to preview theme changes):
Open and expand at 2/3 without snapping
Else
Open and expand at 1/3 without snapping (to make sure users can preview the changes they make on smaller devices)

@schoenbaechler the 0.75 * screenHeight worked perfectly! Please re-install, take a look again and lmk what you feel :)

@Sharvaniharan the height is perfect now. Also the other issues are fixed. Thanks for being open to experimentation! 👩‍🚀 Moving this to Code review.

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