Page MenuHomePhabricator

Update reading themes controls in the article reader
Closed, ResolvedPublic

Assigned To
Authored By
JMinor
Jun 28 2017, 9:46 PM
Referenced Files
F8887147: T169145 default dim button on.PNG
Jul 28 2017, 9:32 PM
F8887148: T169145 sepia dim button on.PNG
Jul 28 2017, 9:32 PM
F8887137: T169145 tT slider left.PNG
Jul 28 2017, 9:32 PM
F8887135: T169145 default.PNG
Jul 28 2017, 9:32 PM
F8887139: T169145 tT slider right.PNG
Jul 28 2017, 9:32 PM
F8887136: T169145 dark.PNG
Jul 28 2017, 9:32 PM
F8887138: T169145 sepia.PNG
Jul 28 2017, 9:32 PM
F8836570: Reading Controls Sepia.png
Jul 24 2017, 8:08 PM

Description

Designs
DefaultSepiaDark
Reading Controls Default.png (667×375 px, 176 KB)
Reading Controls Sepia.png (667×375 px, 180 KB)
02 Dark.png (667×375 px, 199 KB)
Zeplin: https://zpl.io/ADWNlZeplin: https://zpl.io/Z1J0VtVZeplin: https://zpl.io/83NMv

Please check T169153 + T169154 for updated colors

Design details
  • Slider color is defined by color palette
  • Slide affects overall system brightness
  • Platter on dark theme is #222
  • Selected theme is outlined in the palette's blue link color
Testing criteria:
  1. Open any article in the app
  2. Tap on the "tT" icon
  3. Slide the brightness slider and ensure that the screen brightness is being adjusted
  4. Swipe up to reveal the phone's Control Center
  5. Slide the brightness slider in the Control Center and ensure that the brightness slider in the article controls matches the system slider
  6. Slide the font size slider and ensure that the font size in the article is being adjusted
  7. Tap on theme buttons and ensure that respective themes are being applied to the app
  8. Ensure that the bordered theme button corresponds to the current theme of the app
  9. Ensure that the "Dim images" switch is enabled only for the dark theme

Event Timeline

JMinor triaged this task as Medium priority.Jun 29 2017, 6:24 PM
  • Progress bar / slider can stay blue in Sepia

@JMinor @cmadeo maybe "Dim images" instead of "Image dimming"?

@NHarateh_WMF If not we probably want the "D" in dimming to be lower case - looks like it's upper case presently.

@Mhurd we can definitely do 'Dim images,' would it be possible to run a quick review of the string in a couple of longer languages?

Also prefer "Dim images", we generally use the Verb-Object pattern in settings ("Send reports", "Clear cached data", "Support Wikipedia", etc)

Testing criteria:

  1. Open any article in the app
  2. Tap on the "tT" icon
  3. Slide the brightness slider and ensure that the screen brightness is being adjusted
  4. Swipe up to reveal the phone's Control Center
  5. Slide the brightness slider in the Control Center and ensure that the brightness slider in the article controls matches the system slider
  6. Slide the font size slider and ensure that the font size in the article is being adjusted
  7. Tap on theme buttons and ensure that respective themes are being applied to the app
  8. Ensure that the bordered theme button corresponds to the current theme of the app
  9. Ensure that the "Dim images" switch is enabled only for the dark theme

@NHarateh_WMF

Yay! This is looking really good!

I just have a few small design updates that came up from playing around with the feature more:

  • Would it be possible to dismiss the popover when the user clicks on a different item in the toolbar? Eg. I've finished selecting a Reading Theme and would like to open the table of contents
  • Currently the disabled state for 'Dim images' looks clear on Sepia and Default when the user has the toggle set to on, but it's not clear that it's disabled when it's set to off. Could we make the disabled state a bit more prominent?
cmadeo updated the task description. (Show Details)

Testing on iPhone 6s (iOS 10.3.3) and Wikipedia app 5.6.0 (1185). This is mostly working as expected as shown in a few sample images I'm providing (mostly default theme, but can test in sepia and dark too)

T169145 tT slider right.PNG (1×750 px, 397 KB)
T169145 tT slider left.PNG (1×750 px, 419 KB)
T169145 default.PNG (1×750 px, 302 KB)
T169145 sepia.PNG (1×750 px, 420 KB)
T169145 dark.PNG (1×750 px, 391 KB)

Now, while the dim images button can only *be enabled* in the dark theme, if it is already enabled there then it will continue to be turned on when switched to sepia and default themes, this is the one area for the staff to decide if it is ok or not

T169145 default dim button on.PNG (1×750 px, 413 KB)
T169145 sepia dim button on.PNG (1×750 px, 420 KB)

ABorbaWMF added a subscriber: ABorbaWMF.

Tested on iPhone 7+ with iOS 10.3, iPhone 4 with iOS 9.3, and iPad Pro with iOS 10.3 on Beta App version 5.6.0 (1185)

Looks good.