[magnolia-dev] [JIRA] (MGNLUI-4229) CLONE - Restyle combobox and its positioning

Evzen Fochr created an issue

Magnolia UI / https://jira.magnolia-cms.com/browse/MGNLUI-4229 MGNLUI-4229

CLONE - Restyle combobox and its positioning

Issue Type:
Improvement

Assignee:
Oanh Thai Hoang

Created:
26/Jun/17 10:49 AM

Priority:
Neutral

Reporter:
Evzen Fochr

Original Estimate:
3d

Remaining Estimate:
3d

We've discussed this in UX. Our main aim now is to avoid that a second combobox (or any other UI element) on the right jumps horizontally if the value in the combobox changes. This has been the main feedback so far, and it's perfectly valid, and it makes sense from a visual design standpoint as well. We also still want to keep the arrow next to the value so that it remains clear that that value can be changed.

One common solution in visual design - and the one we've settled with - is to give such elements a fixed, configurable width and visually anchor the element with faint separators on the left and the right - see part "A" in the explanations attached below. You'll also find a similar solution in the original design for selectors in the edit bar (see e.g. [^3-1 Visual design of selectors.png]). Part "B" lists the details on paddings, fonts and colors used.

Unable to render embedded object: File (Combobox in dialog footer.png) not found.

The main design intent is:

- Every switcher in the dialog footer has a fixed width (minimum: 125px), which can be configured to be wider. We expect 125px for the language and 180px for the variant switcher to be good defaults.

- The width of the actual combobox (minimum: 120px) is independent of the width of the switcher. It should open above the value label - we've understood this is currently hard to achieve.

- Switchers are bordered by a 22px high and 1px wide separators on the left and the right*.

- The distance between the left separator and the value, between the value and the arrow is fixed (10 px or 15 px resp.). The distance between the arrow and the right separator is at least 10px.

- Values are truncated using an ellipsis ("...") in case they don't fit within the chosen width of the combobox.

Please let us know if you plan to adapt other instances of the combobox. We might want to slightly translate or adjust this design.

https://jira.magnolia-cms.com/browse/MGNLUI-4229#add-comment
Add Comment

This message was sent by Atlassian JIRA (v7.2.6#72008-sha1:26175bf)

----------

----------------------------------------------------------------

For list details, see: http://www.magnolia-cms.com/community/mailing-lists.html

Alternatively, use our forums: http://forum.magnolia-cms.com/

To unsubscribe, E-mail to: <[email protected]>

----------------------------------------------------------------