Page MenuHomePhabricator

Add controls for reading themes to Settings view
Closed, ResolvedPublic

Assigned To
Authored By
JMinor
Jun 29 2017, 6:07 PM
Referenced Files
F8840511: T169255 1.PNG
Jul 25 2017, 2:15 AM
F8840509: T169255 2.PNG
Jul 25 2017, 2:15 AM
F8840512: T169255 4.PNG
Jul 25 2017, 2:15 AM
F8840514: T169255 6.PNG
Jul 25 2017, 2:15 AM
F8840510: T169255 3.PNG
Jul 25 2017, 2:15 AM
F8840513: T169255 5.PNG
Jul 25 2017, 2:15 AM
F8735881: Settings.png
Jul 13 2017, 7:17 PM
F8735880: Settings > Reading themes.png
Jul 13 2017, 7:17 PM

Description

Design

Settings screenReading themes detail view
Settings.png (1×375 px, 75 KB)
Settings > Reading themes.png (667×375 px, 40 KB)
Zeplin: https://zpl.io/NHVRXZeplin: https://zpl.io/Z27D3Ay

Design details

  • Selecting a reading theme from the detail view immediately changes the theme throughout the app
  • The selected theme has a blue check-mark
  • Image dimming is available on all themes
  • Auto night mode is disabled when dark mode is manually activated

Questions

  • Do we want a preview of what image dimming and the reading themes will look like from inside of the settings?
  • Do we want to include text resizing in settings (and if so would we also include image brightness?)
  • Dark or Night mode?

Testing criteria:

  1. Tap on the Settings icon in the app
  2. Ensure that the "Appearance" cell displays the name of the current app theme ("Default", "Sepia" or "Dark")
  3. Tap on "Appearance"
  4. Ensure that there's a checkmark next to the name of the current app theme
  5. Tap on different theme names and ensure that the selected theme is being applied to the app
  6. Ensure that there's a checkmark next to the selected theme
  7. After selecting a theme, tap on "< Settings" to go back to main settings
  8. Ensure that the name of the selected theme is being displayed in the "Appearance" cell
  9. Tap on "Appearance"
  10. Ensure that the "Dim images" switch is enabled only for the dark mode
  11. Tap on "Dark"
  12. Leave Settings and go to any article in the app
  13. Tap on the "tT" icon to reveal themes controls
  14. Tap on the the first button on the left
  15. Go back to Settings
  16. Ensure that the "Appearance" cell displays "Default"

Event Timeline

  • Add sample text under the selection area (similar to accessibility settings)
  • Add text size change here too
  • Blue tick mark instead of active badge
  • Rename light, default
  • Decide on Dark vs. Night
  • How does night mode shift look like?
  • If possible have the auto night mode work off of system clock rather than sensor
  • Appearance
  • Text sizing should be added

@cmadeo

Do we want to include text resizing in settings (and if so would we also include image brightness?)

I'm leaning "no" having kicked the tires on @NHarateh_WMF's pull request. Since this slider only affects the article text it seems odd to have it here when sliding it doesn't cause any of the text you're presently seeing to change size due to native text size being controlled by Dynamic Type settings.

@Mhurd, ah right, I totally forgot that text sizing is only applied on the article view. Yes, let's not include it here.

Testing criteria:

  1. Tap on the Settings icon in the app
  2. Ensure that the "Appearance" cell displays the name of the current app theme ("Default", "Sepia" or "Dark")
  3. Tap on "Appearance"
  4. Ensure that there's a checkmark next to the name of the current app theme
  5. Tap on different theme names and ensure that the selected theme is being applied to the app
  6. Ensure that there's a checkmark next to the selected theme
  7. After selecting a theme, tap on "< Settings" to go back to main settings
  8. Ensure that the name of the selected theme is being displayed in the "Appearance" cell
  9. Tap on "Appearance"
  10. Ensure that the "Dim images" switch is enabled only for the dark mode
  11. Tap on "Dark"
  12. Leave Settings and go to any article in the app
  13. Tap on the "tT" icon to reveal themes controls
  14. Tap on the the first button on the left
  15. Go back to Settings
  16. Ensure that the "Appearance" cell displays "Default"

@NHarateh_WMF overall this looks great! I'm still seeing a slight shift in the cells when returning back from the 'Appearance' detail view and am still having the issue where the previously selected theme is still presented in the Settings view. I understand that this might be an issue with the library we're using though. Put this back into ready for dev for now re: the behavior above.

Thanks!

@cmadeo could you describe repro steps? This is what I'm seeing:

gif

@NHarateh_WMF Sorry I wrote this comment before the new release went out. It's working perfectly for me now.

Testing on iPhone 6s (iOS 10.3.3) and Wikipedia app 5.6.0 (1182). According to the below screencaps this is fixed and working as expected.

T169255 2.PNG (1×750 px, 48 KB)
T169255 1.PNG (1×750 px, 94 KB)
T169255 3.PNG (1×750 px, 47 KB)
T169255 4.PNG (1×750 px, 49 KB)
T169255 5.PNG (1×750 px, 91 KB)
T169255 6.PNG (1×750 px, 987 KB)