Page MenuHomePhabricator

Appearance settings in the editing view
Closed, ResolvedPublic

Description

User story

As an editor on the iOS app, I would like a way to be able to change the appearance of the editing view.

Mocks

Appearance settings
04a text formatting options.png (1×750 px, 149 KB)
Zeplin: https://zpl.io/agrRLqN

Design details

  • Setting the reading theme in the editing view changes the theme for the whole app
  • When syntax highlighting is turned off, the line numbers are not shown
  • Note that these are universal settings (changing theme in Editing UX also changes reading theme).

Event Timeline

cmadeo triaged this task as High priority.Jan 8 2019, 7:27 PM
cmadeo created this task.
JMinor lowered the priority of this task from High to Medium.Feb 21 2019, 8:25 PM
JMinor updated the task description. (Show Details)

I would suggest adding an additional theme css file for syntax highlighting off codemirror-none.css rather than trying to use any built in syntax highlighting toggle

I would suggest adding an additional theme css file for syntax highlighting off codemirror-none.css rather than trying to use any built in syntax highlighting toggle

...may want to try the highlighting command, which already toggles it on and off without having to adjust the css.

...may want to try the highlighting command, which already toggles it on and off without having to adjust the css.

@Mhurd according to the mockup and confirmed with @cmadeo, disabling syntax highlighting should keep underline, bold, & italic formatting while removing the colors applied to the syntax. Using CodeMirror’s maxHighlightLength removes all formatting including underline, bold, & italic. Having a separate CSS file for this state allows us to keep the desired formatting and gives us more control should we want to customize anything else about it in the future.

I notice some of the styles currently show only the tags rather than formatting the text within on the editing view (see <u>bullet</u> & <s>bullet</s> in attachment), whereas bold bullet actually is bold within the "" tag. Is this expected to change with this ticket or are we only removing colors and not adding additional formatting for the highlighted state?

IMG_2666.PNG (2×1 px, 300 KB)

IMG_2665.PNG (2×1 px, 360 KB)

@Tsevener and I talked today about the idea of putting the appearance settings in the toolbar and having it appear as a submenu. I did a quick mock-up here. What do you think @JMinor?

Appearance settings as sub menu.png (1×750 px, 157 KB)

We came to the decision of auto dismissing the keyboard when the popover is opened but NOT auto reshowing the keyboard after the popover is dismissed.

Woo! This is working really nicely! Thanks, @Tsevener!
One thing though is that the text in the Syntax highlighting label looks a bit large. Can we reduce the text size to match the size used in the toggle options in settings (eg. dim images or expand tables in the reading preferences area)?