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

Proposed

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

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

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 15 2018, 11:51 AM

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.

santhosh claimed this task.Mar 16 2018, 4:00 AM

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 closed this task as Resolved.Mar 16 2018, 8:19 AM
Etonkovidova added a subscriber: Etonkovidova.

Checked in cx2-testing:

Petar.petkovic moved this task from QA to Done on the Language-2018-Jan-Mar board.

@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.

Pginer-WMF reopened this task as Open.Mar 21 2018, 12:01 PM

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 Normal.

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

@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

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.

Petar.petkovic moved this task from QA to Done on the Language-2018-Jan-Mar board.Mar 26 2018, 5:33 PM