Page MenuHomePhabricator

Adjust the controls of the translation card
Closed, ResolvedPublic

Description

The translation card needs some adjustments to make actions more clear:

currentProposed

Proposed changes:

  • The engine selector (where Apertium or Yandex is selected) should be a flushed dropdown. That is, there should be a line above it that helps determine the area, and the chevron should be aligned to the right side towards the end of the area.
  • A pin icon should be used for the "keep as default action". The checkmark could be confusing since it can be interpreted as a state indicator (this is the default) as opposed to the action (making it the default).

These are specific changes for this particular card, there is a related ticket about changes for the general card style (T158410) that may be also of interest.

Event Timeline

@Pginer-WMF , there is no drop down without border in OOJS-UI to match this selector. See https://doc.wikimedia.org/oojs-ui/master/demos/#widgets-mediawiki-ltr-desktop
Should we customize it or go with default styles as given below?

cc @Volker_E

Change 353214 had a related patch set uploaded (by Santhosh; owner: Santhosh):
[mediawiki/extensions/ContentTranslation@master] CX2: UI changes for the MT tool card

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

Change 353214 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] CX2: UI changes for the MT tool card

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

@Pginer-WMF , there is no drop down without border in OOJS-UI to match this selector. See https://doc.wikimedia.org/oojs-ui/master/demos/#widgets-mediawiki-ltr-desktop
Should we customize it or go with default styles as given below?

The idea discussed with other designers is to have a special "flushed" mode for some widgets including drop-downs: making them expand to fill a container (as the publish button does in VE taking the toolbar space without margins). This mode should be useful for dialogs or cards to make them more lightweight (avoiding too many boxes inside of other boxes in a small area).

This is preferably to be supported in a general way, so it would be ideal to be in the UI-Standardization list, and CX just using it when it is available. So I guess we can go with the regular dropdown until that is available.

santhosh closed this task as Resolved.May 16 2017, 7:03 AM

@santhosh @Pginer-WMF Picking this up a bit delayed.
There are two options from UI-Standardization and OOUI perspective:

  • Having a certain treatment of several widgets in a still-to-be-defined card context. In order to support “flushed” mode out of the box in OOjs-UI we need to make sure that it is intended to be widely used. Otherwise we're bloating the default library for context. We already have a special treatment for flushed buttons in “Quick” dialogs. They are used in VE. Filed T165506 as follow-up.
  • Specially treat the dropdown in CX only context via CSS.

@santhosh @Pginer-WMF Picking this up a bit delayed.
There are two options from UI-Standardization and OOUI perspective:

  • Having a certain treatment of several widgets in a still-to-be-defined card context. In order to support “flushed” mode out of the box in OOjs-UI we need to make sure that it is intended to be widely used. Otherwise we're bloating the default library for context. We already have a special treatment for flushed buttons in “Quick” dialogs. They are used in VE. Filed T165506 as follow-up.
  • Specially treat the dropdown in CX only context via CSS.

Thanks @Volker_E. This is not critical, the component seems usable in the current form. As discussed during the design review, in contexts such as cards this can be useful and collecting usecases in T165506 seems the path forward to decide at which level to support this.