Page MenuHomePhabricator

Define which editing tools to expose in Content Translation
Closed, ResolvedPublic

Description

Content Translation is used to create an initial translation of an article, where users are mainly focused on adapting the existing content rather than changing the style or creating new content, which they can do later with the usual editors. That motivated to include in Content Translation a very limited set of editing tools in the initial stages of the project.

As the editing surface technology for Content Translation is replaced with the technology supporting VisualEditor, it will be much easier to provide more editing tools in Content Translation. This provides an opportunity to make the tool more powerful, but we also want to keep its simplicity.

We need to evaluate which editing tools should be provided in Content Translation, and at which prominence level. In addition, since Content Translation follows a card paradigm, some of the tools (e.g. the character insertion panel) may need some adaptation.

Proposed solution

The proposed solution aims at aligning the editing controls with those in Visual Editor, while keeping a simpler toolbar (considering the lower priority of styling content during translation). The mockups below capture the initial menu and how it can be expanded to reach further options:

The following tools are proposed as initially available for the edit card:

  • Undo and Redo
  • Styling menu. Including bold, italics and a "more" option as in VE.
  • Links. Despite providing an option in the toolbar, we still want to provide link preview cards when a link is selected and suggestions for adding a link when text is selected.
  • Lists menu. Including bullet and number lists.
  • "More" menu. Including cite, special characters (more on this below) and the items currently available under the "insert" menu in VE.

Tooltip inspectors with contextual options will become cards in the sidebar. Accessing the options they provide, some model dialogs may appear. We can later consider whether some of those could work better as cards.

Special characters panel
The special character panel can be adapted to the card format (mockup below), but if that requires too much effort, we can keep the special character option our of the first iteration and consider how to support it as it is integrated with support for input methods.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 20 2017, 4:14 PM
Pginer-WMF updated the task description. (Show Details)Mar 23 2017, 12:40 PM

I updated the ticket description with some initial ideas.

Pginer-WMF updated the task description. (Show Details)Mar 23 2017, 12:47 PM
santhosh updated the task description. (Show Details)Jun 29 2017, 9:32 AM
Amire80 updated the task description. (Show Details)Jul 11 2017, 3:06 PM

Change 419969 had a related patch set uploaded (by Santhosh; owner: Santhosh):
[mediawiki/extensions/ContentTranslation@master] CX2: Styling for the editing toolbar

https://gerrit.wikimedia.org/r/419969

Change 419969 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] CX2: Styling for the editing toolbar

https://gerrit.wikimedia.org/r/419969

Removing the right border should only be done in WMUI, it breaks the hover/active style in Apex:

Pginer-WMF closed this task as Resolved.Jul 12 2018, 7:52 AM
Pginer-WMF claimed this task.