[MGNLUI-250] Style the GroupManagement and RoleManagement fields Created: 28/Nov/12  Updated: 11/Feb/13  Resolved: 04/Dec/12

Status: Closed
Project: Magnolia UI
Component/s: design, forms
Affects Version/s: None
Fix Version/s: 5.0

Type: Improvement Priority: Major
Reporter: Jozef Chocholacek Assignee: Federico Grilli
Resolution: Fixed Votes: 0
Labels: design
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: PNG File Desktop04_17_Form_text image image.png     PNG File assigned-groups.png     PNG File groups-2nd-take.png     PNG File groups.png     PNG File roles-2nd-take.png     PNG File roles-3.png     PNG File roles.png    
Issue Links:
relation
is related to MGNLUI-337 Allow TwinColumnSelect to swap lists Closed
is related to MGNLUI-338 Labels for small height fields, such ... Closed
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:

 Description   

The group/role management fields created for the Security App should be designed to comply with the M5 UX style.



 Comments   
Comment by Andreas Weder [ 30/Nov/12 ]

I'm raising the priority on this, as it is very visible and should be tackled for Alpha1.

Comment by Antti Hietala [ 30/Nov/12 ]

Currently it is easy to mix up the lists. Which list contains assigned groups and which available groups? The label is currently next to the "wrong" list. In the screenshot, user eric belongs to group demo-project-editors. Maybe two labels above each list would help?

Comment by Andreas Weder [ 30/Nov/12 ]

I agree with Antti. As an example, check out the second, quick sketch for the Change Group Membership dialog of the Security App:

http://wiki.magnolia-cms.com/display/UX/Security+App

There must be labels on top of every column.

Comment by Andreas Weder [ 30/Nov/12 ]

As for the visual design, please make sure that the buttons are dark gray, as our buttons within forms are. Adjust paddings and margins to ensure the field fits in well into our generous design: don't make things fit too tightly, but make sure the field can still be perceived as a single element.

If in doubt, please make a first version, then ask me to review it. Thanks.

Comment by Andreas Weder [ 03/Dec/12 ]

Added component(s) to make it easier to filter issues.

Comment by Federico Grilli [ 03/Dec/12 ]

here's what I managed to hack given the currently not so flexible html structure of the TwinColSelect widget

Comment by Andreas Weder [ 04/Dec/12 ]

Thanks, looks great already. Visually, I would leave things the way they are.

But I propose the following changes:

  • swap the assigned groups/roles box and the all available groups/rights box. Since we're reading left-to-right, the important thing (e.g. the groups I'm member of) should come first aka on the left.
  • I would still see a purpose for the label for the entire field, since it's nowhere said now what you're actually doing or you're supposed to do.

I.e. for group membership:

  • Label: "Assign user to groups"
  • Label on top of the boxes "User is member of" and "Other available groups"

And for additionally assigned roles:

  • Label: "Grant additional roles to user"
  • Label on top of the boxes "Granted roles" and "Other available roles"

We can't use "all groups/roles", since elements are actually moved between the boxes, so I'd say we use "other" instead.

Comment by Federico Grilli [ 04/Dec/12 ]

Unfortunately, at least to my understanding, it is not trivial to switch columns in Vaadin's TwinColSelect widget. That would involve extending and rewriting some parts of it which I would not do at this stage. Also, you'll notice that the label for roles is truncated but displaying it completely would mean break the dialog design concerning margins between label and fields.

Comment by Andreas Weder [ 04/Dec/12 ]

Switching columns: too bad. Can you confirm that with Sasha or Samuli? I'd love to see those switched. If this doesn't work, well, then be it, but if you could add an issue to the 5.0 backlog, that'd be great.

Truncated labels: I'd expect long labels to extend over multiple lines then. Can that be done? That should be something the dialog does in general (if it doesn't, we should report that). If this requires too much effort to fix, use "Grant further roles" instead.

Thanks.

Comment by Federico Grilli [ 04/Dec/12 ]

Switching columns: Sasha confirmed to me that this requires some client-side coding, so I would add an issue to the backlog, given also that I've seen at least another problem with the TwinSelectCol widget.
Truncated labels: that can be done for dialogs in general but the text is right aligned else it would look ugly, i.e. large margin space between label and field when the text id short. Attaching screenshot.

Comment by Andreas Weder [ 04/Dec/12 ]

Ok, thanks for researching the column thingy - please add an issue for this.

As for the labels, that's fine. Since labels are right-aligned, it's perfectly fine if the text they contain is right aligned as well. I actually do have screen shots from the designers where they do just that (not that that is the only reference I would use, but it is an important one ).

If you dislike the way the words are spread over the two lines, you could force a line break after "additional" or use "further" instead to shorten the line. I wouldn't do that here, though, I'd leave the first three words together, as they do belong together like this (i.e. you can miss the second line and still understand what you'll have to do).

Comment by Federico Grilli [ 04/Dec/12 ]

Issues related to TwinColSelect and aligning of labels are going to be filed.

Generated at Mon Feb 12 08:35:03 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.