Page MenuHomePhabricator

CX2: Reduce the size of editing tools
Closed, ResolvedPublic

Description

As a follow-up of T188987, we may want to reduce the size of the buttons of the editing toolbar.
Currently they are bigger than expected (compared to VE). The reason is that the default font size in Content Translation is 16px, which affects the size of the icons. We may want to use a 14px font size for the icons of the toolbar.

The current state and the proposal are illustrated below:

Current

Screen Shot 2018-03-15 at 12.44.08.png (259×542 px, 42 KB)

Proposed

Screen Shot 2018-03-15 at 12.44.04.png (259×542 px, 42 KB)

The adjustment in the example was achieved with the following CSS:

.cx-tools-editing-toolbar-container {
    font-size: 14px;
}

Event Timeline

For now we should stay with the em value as anywhere else: font-size: 0.875em equals 14px on 16px user default.
There are conversations around if putting ems as font-size value unit is still making sense (without text-only zooming browsers in support range any more), but for now we have 0.875em set throughout and might stick in order to make it easier discoverable for a later change.

Change 419968 had a related patch set uploaded (by Santhosh; owner: Santhosh):
[mediawiki/extensions/ContentTranslation@master] CX2: Reduce the size of editing tools

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

Change 419968 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] CX2: Reduce the size of editing tools

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

For now we should stay with the em value as anywhere else: font-size: 0.875em equals 14px on 16px user default.

I'm ok with the technical choice to implement this that developers decide. Just wanted to caution once more that "0.875em equals 14px on 16px user default" is true unless the element is inside a container with a different em-based font-size. That is, a 0.875em font-size element inside another 0.875em font-size element will result in a 12.25px font size (example). This is a common source for size inconsistencies, really hard to track, and very fragile with respect to layout changes.

Etonkovidova subscribed.

Checked in cx2-testing:

Screen Shot 2018-03-16 at 12.08.27 PM.png (606×606 px, 118 KB)

@Pginer-WMF I agree with your statement, but also see the stated issue as duty of a good front-end engineer to take care for such inheritances. On the other hand, we'll evaluate possibility of px based font-size values in near-future.

The intention was to adjust the size of the editing toolbar, but the change was applied to the whole tools column affecting other cards. As a consequence, the Introduction card (and potentially other cards that can be added later) got its font size reduced too.

Would it be possible to apply the font size adjustment to the editing toolbar instead?

Pginer-WMF raised the priority of this task from Low to Medium.Mar 21 2018, 12:01 PM
Pginer-WMF moved this task from Done to Priority backlog on the Language-2018-Jan-Mar board.

Change 421355 had a related patch set uploaded (by Petar.petkovic; owner: Petar.petkovic):
[mediawiki/extensions/ContentTranslation@master] Fix tools column font sizes

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

Change 421355 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Fix tools column font sizes

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

@Pginer-WMF - it seems that one important point from the mockup in T188987: CX2: Adjust editing tools card to better fit the available space is missing: the horizontal width of the tool bar should be the same as cx-translation-view-header. Or it's ok to have it like that?
Compare:

mockupcx2-testing
Screen Shot 2018-03-23 at 11.38.26 AM.png (205×644 px, 36 KB)
Screen Shot 2018-03-23 at 11.39.05 AM.png (182×911 px, 32 KB)

@Petar.petkovic - what happened to the gear button?

@Petar.petkovic - what happened to the gear button?

It was changed in OOUI, but reverted again to have the old look. You should soon see things being back to previous state. Here is a relevant ticket - T190175.

@Pginer-WMF - it seems that one important point from the mockup in T188987: CX2: Adjust editing tools card to better fit the available space is missing: the horizontal width of the tool bar should be the same as cx-translation-view-header. Or it's ok to have it like that?

the width of the toolbar should fit the tools column, which it is 1/3 of the horizontal space, but it has a max-with, so for larger screen sizes it will remain fixed at ~400px, leaving more percentage of the space to the content. That's intentional.

@Pginer-WMF - it seems that one important point from the mockup in T188987: CX2: Adjust editing tools card to better fit the available space is missing: the horizontal width of the tool bar should be the same as cx-translation-view-header. Or it's ok to have it like that?
Compare:

mockupcx2-testing
Screen Shot 2018-03-23 at 11.38.26 AM.png (205×644 px, 36 KB)
Screen Shot 2018-03-23 at 11.39.05 AM.png (182×911 px, 32 KB)

It seems to me that @Etonkovidova wanted to compare heights rather than widths.

It seems to me that @Etonkovidova wanted to compare heights rather than widths.

The heights are ok. They should follow the card spec, regardless of the height of the header in the content document. As more cards will be added, cards of different sizes can become the ones next to it.