Page MenuHomePhabricator

CX2: Adjust editing tools card to better fit the available space
Closed, ResolvedPublic

Description

Content translation provides a card with editing tools in the tools column. After the initial implementation (T176422), some adjustments may be needed for it to better fit the available space.

Currently, the tools overflow the card and horizontal scroll appear. Making the layout look broken and the tools harder to access. This is illustrated below:

Proposed solution

Several interventions are proposed to solve the issue:

Make the buttons smaller
The buttons used in the editing toolbar are larger that the same ones when they are used in VE. It seems that the toolbar in CX is based on a 16px font size. To adjust the size, we may want to use a 14px font size instead.

Move the Cite tool inside the "..." menu
We can make the Cite tool available inside the "more" ("...") menu. The action should be styled as it is in Visual Editor, with the quote icon (") and the label.

(Consider) moving the tools dynamically inside the "..." menu
Ideally, tools that do not fit in the toolbar could be moved dynamically to the "more" menu based on the available space. This requires to detect when there is not enough room for the default tools to fit in the card.

In addition, we need to deal with the tool groups that provide multiple tools inside a drop-down (e.g., the list drop-down includes bullet and numbered list tools among other options). When such groups move inside the "..." menu, the individual tools of such group can be added to the "..." menu, and separator lines can be used to differentiate the groups.

For an initial iteration we may want to do a quick exploration to determine the complexity of this approach, and create a separate ticket for it if it requires a bigger effort.

(Alternatively) allow the editing card to wrap into multiple rows
If the previous approach is too complex for an initial iteration, we can start with the same approach currently used by Visual editor as a first step: make tools to wrap to a second row when there is not enough room for them to fir in a single row. In the example below the editing toolbar is shown for a 850px wide window, where it goes to two lines:

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 6 2018, 12:12 PM

Here is screenshot where you can see the reason. VE toolbar is overflowing tools column, which has maximum width of 400px after T187700.

Pginer-WMF renamed this task from CX2: Horizontal scroll bar appears to CX2: Adjust editing tools card to better fit the available space.Mar 7 2018, 10:18 AM
Pginer-WMF updated the task description. (Show Details)
Pginer-WMF updated the task description. (Show Details)
Pginer-WMF triaged this task as Normal priority.Mar 7 2018, 10:20 AM
Pginer-WMF moved this task from Backlog to Priority backlog on the Language-2018-Jan-Mar board.

I edited the description to detail a bit more the issue and propose some interventions to improve the current state.

Change 417227 had a related patch set uploaded (by Santhosh; owner: Santhosh):
[mediawiki/extensions/ContentTranslation@master] CX2: Avoid overflow of the VE toolbar

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

https://gerrit.wikimedia.org/r/417227 is a quick fix to get

, but we need better solution.

I've provided a separator line a while ago in OOUI for wrapping toolbars. This lack should be fixed upstream.

Change 417227 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] CX2: Avoid overflow of the VE toolbar

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

Petar.petkovic moved this task from Needs Triage to CX2 on the ContentTranslation board.
Petar.petkovic moved this task from In Review to QA on the Language-2018-Jan-Mar board.

Checked in cx2-testing.

(1)

Make the buttons smaller

Not sure if the following is quite done - the original VE element (oo-ui-iconElement) is 40x40, but in cx2 integrated VE tool bar element is 50x50.
(2) The following is done

Move the Cite tool inside the "..." menu

(3)

(Consider) moving the tools dynamically inside the "..." menu
(Alternatively) allow the editing card to wrap into multiple rows

With Cite tool moved to "..." all tools fit in one line, however, there is an additional empty slot (see the above screenshot).

Etonkovidova closed this task as Resolved.Mar 13 2018, 10:41 AM
Etonkovidova moved this task from QA to Done on the Language-2018-Jan-Mar board.

(1)

Make the buttons smaller

Not sure if the following is quite done - the original VE element (oo-ui-iconElement) is 40x40, but in cx2 integrated VE tool bar element is 50x50.

I created a follow-up ticket for this one: T189771: CX2: Reduce the size of editing tools