Page MenuHomePhabricator

Improve the alignment for individual settings
Closed, DuplicatePublic

Description

settings-rn.png (1×750 px, 110 KB)

Individual setting's alignment is not standard. there needs to be a separation between

  • title
  • byline (explanation of feature)
  • control (checkbox, dropdown, +/-)

We need a better format. the alignment shouldn't be dependent on what type of control it is.

Proposal

right-control .png (1×750 px, 93 KB)

Title and by line goes on left,

  • easier to scan the features, as they start at the same point
  • better hierarchy and paddings between title, byline
  • the space given to the controls is independent of the type of control.

Note: the order shown in the mockup is after we promote font size and expand articles. before we do them, they will fall under beta

Zeplin spec
https://zpl.io/aRmMMgN

Event Timeline

This might as well be fixed in T169369. It's touching all this code and rewriting it in oojsui anyway so effectively starting from a clean slate. It also changed which widgets should be used.

Id suggest merging this into that card to avoid wasting developer time.

I thought developers love breaking down work into smaller chunks... I wanted to avoid "sneaking in" design changes but I guess, I will!

@Volker_E - how can this be achieved via OOUI?

Closest I can get without hacking the css is:

Screen Shot 2017-11-14 at 2.51.18 PM.png (224×1 px, 28 KB)

In particular I'm curious if we can

  1. control width of drop down
  2. right align the checkbox alongside the dropdown.

@Nirzar I spent some time understanding OOUI a little more and I see a problem with the proposed design and the select menu. On a mobile screen the labels of the dropdown and the accompanying text conflict (and if the translation text is longer there will be more problems)

Using 75/25% split of the available space we get:

Nexus 5:

Screen Shot 2017-11-15 at 4.39.47 PM.png (535×416 px, 50 KB)

Screen Shot 2017-11-15 at 4.39.39 PM.png (462×430 px, 45 KB)

iPhone 5

Screen Shot 2017-11-15 at 4.39.47 PM.png (535×416 px, 50 KB)

Increasing available space for controls to 50% ensures labels do not get cut off in English

Screen Shot 2017-11-15 at 4.43.25 PM.png (410×329 px, 31 KB)

Makes me wonder if the select menu widget should be on its own line or more similar to Material design https://material.io/guidelines/components/menus.html#menus-simple-menus

Let me know your thoughts!

I just looked into the issue. It seems OOJS UI dropdown widget doesn't actually trigger select element using native OS UI.

This looks like a major issue in OOJS UI in general. very concerning one.

OOJS UI on iOS

IMG_6076.PNG (1×750 px, 183 KB)

What it should actually work like

IMG_6077.PNG (1×750 px, 211 KB)

@Volker_E we need to get this fixed really soon.

@Jdlrobson let's go with using what you are showing but we will fix the OOJS UI dropdown widget at the source

I've raised a bug for the more serious issue here - T180730 (alignment tracked here T180652). I hadn't even got round to testing how it behaved on a mobile device!

The non-focused state would still be problematic... The drop down in the example you've given works nicely as the labels are two characters maximum. Is the clipping behaviour okay even if we can't read the label? An alternative might be to drop it down to the line below.

Screen Shot 2017-11-16 at 11.14.14 AM.png (98×323 px, 14 KB)

Screen Shot 2017-11-16 at 11.13.52 AM.png (205×331 px, 18 KB)

what is the width you are trying?

here's what it looks like on a 350pt wide phone with exact sizes

image.png (426×866 px, 36 KB)

also we can reduce the labels to

  • Small
  • Default
  • Large
  • X Large

for now.