[MGNLPN-372] More subtle appearance of variant switcher in dialogs Created: 13/Mar/17  Updated: 20/Mar/17  Resolved: 16/Mar/17

Status: Closed
Project: Magnolia Personalization
Component/s: Component p13n
Affects Version/s: None
Fix Version/s: 1.4.3

Type: Improvement Priority: Neutral
Reporter: Andreas Weder Assignee: Evzen Fochr
Resolution: Fixed Votes: 0
Labels: estimate-with-uncertainty, form, next, ux, visual-design
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: PNG File 1 Current visual of lang switcher.png     PNG File 2 How selectors look and work.png     PNG File 3-1 Visual design of selectors.png     PNG File 3-2 Visual design of selectors.png     PNG File Combobox in dialog footer.png     PNG File Styleguide.closed-box.png     PNG File Styleguide.open-box.colors.png     PNG File Styleguide.open-box.fonts.png     PNG File Styleguide.open-box.sizes.png     PNG File positionOfNextElement.png    
Issue Links:
Cloners
clones MGNLUI-3571 More subtle appearance of language sw... Closed
Relates
relates to MGNLUI-3567 Elements in dialog footer not vertica... Closed
relates to MGNLUI-4162 Restyle combobox and its positioning Closed
relation
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Date of First Response:
Sprint: Kromeriz 87
Story Points: 3

 Description   

The language switcher in dialogs should be more subtle. While we may use standard comboboxes with forms, we use a text-only variant in headers, footers and filters. This will improve the overall appearance of dialogs and allows to better align the main buttons and the switcher.

Please change the language switcher to:

  • be a text-only in Magnolia green, followed by an arrow (see attachments)
  • use our dark grey for text and icon, use white on hover
  • use the subtle popup for showing the values

If creating a popup like this seems like too much off the standard component, let's have a look together. Note that the bottom padding is wrong in the popup shown in the attachment.

Visual design for language/variant selector

So far, we've had mainly comboboxes on green, black and white backgrounds. Here's how language and variant selector look and work on gray backgrounds and in dialogs.

Closed selector

  • Set the left margin to approx.16px.
    The goal should be to left-align the combobox value with the dialog and tab titles.
  • Choose the dark green color palette for the value: text color <31>, hover color <32>.

The hover color only needs to slightly tint the base text color. It's about giving visual feedback, not about readability or good contrast.

Open selector

Positioning
  • Open the box above (not below) the selected value, at the approx. same position as the value itself.
Padding and widths

  • Ensure a minimum width of 120px. There's no minimum height, although the screenshot seems to suggest so.
  • Set left + right inner paddings to 10px (includes the 1px border).
  • Set top + bottom inner paddings to 8px (includes the 1px border).
Colors and fonts

  • Background color of the box is white, the border color is <13>.
  • Highlight color is <16>.
  • The font is Verdana regular 12px, font color is black.
    The screenshot shows DIN regular, but this doesn't apply here.


 Comments   
Comment by Evzen Fochr [ 13/Mar/17 ]

& .v-filterselect-button {
position: relative;
margin: 0 0 0 -22px;
}



& .v-filterselect-input {
min-width: 120px
}
Comment by Andreas Weder [ 14/Mar/17 ]

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.

The main design intent is:

  1. 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.
  2. The width of the actual combobox (minimum: 120px) is independant of the width of the switcher. It should open above the value label - we've understood this is currently hard to achieve.
  3. Switchers are bordered by a 22px high and 1px wide separators on the left and the right*.
  4. 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.
  5. 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.

Comment by Milan Divilek [ 17/Mar/17 ]

Restyling of combobox has to be done in UI module -> MGNLUI-4162

Generated at Mon Feb 12 06:36:59 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.