[MGNLUI-205] Adapt bars in page editor to match new design Created: 23/Nov/12  Updated: 11/Feb/13  Resolved: 31/Dec/12

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

Type: Improvement Priority: Critical
Reporter: Andreas Weder Assignee: Christopher Zimmermann
Resolution: Fixed Votes: 0
Labels: design, frontend, usability
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: PNG File Colors Page editor.png    
Issue Links:
relation
is related to MGNLUI-484 Page Editor: When a component in an a... Closed
supersession
supersedes MGNLUI-78 Find new colors for the bars in the p... 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)
Release notes required:
Yes
Date of First Response:

 Description   

We've defined new colors and a small form change for the bars in the page editor. Please implement these changes so that the editor matches the rest of the visual design by the time we release Alpha 1.

In essence the changes in form are:

  • we'll eventually use a different, more apparent form to distinguish areas from components. We no longer use two greens for that.
  • for now just take away the rounded corners from area bars, but stick with the thicker bar at the top, the thinner bar at the bottom.
  • So don't implement the white arrow as shown in the attached screen shot.

The changes in color are:

  • the dark green marks the currently selected element
  • its direct children are marked green. With "direct children" I mean children on the next hierarchy level only.
  • its sibling bars (any bars on the same level) and its parent bar are light green.
  • all other visible elements are light gray

The idea behind the new color scheme is:

  • we use less actual colors, but merely shades of green. The selection color in the page editor is the Magnolia typical dark green.
  • we use shades of green to mark the current edit focus, with the dark green clearly marking the currently selected element.
  • its children are marked with a less strong green to explain what the selected element contains. This helps to read the context inside the selected element.
  • the bars the currently selected element finds itself in is indicated with a light green. This helps to read the context above the selected element, which is useful to understand where I could move the element to.
  • all other visible elements are visible, but not colored (light gray)

I'll post some additional explanations and images illustrating them on a wiki page. I plan to not do this now, but if it helps, I can do that earlier.



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

The visual design has been finalized, but I'm currently waiting for the PNGs and color definitions. Same goes for the heights of the bars. As soon as those are available, I'll update this issue.

Comment by Christopher Zimmermann [ 29/Nov/12 ]

Dup of MGNLUI-205

Comment by Christopher Zimmermann [ 29/Nov/12 ]

Sorry closed wrong ticket.

Comment by Andreas Weder [ 30/Nov/12 ]

I'd like to raise the priority of this ticket to critical, because:

  • the current colors in the page editor are simply not working, in particular the selection color isn't.
  • I like to collect feedback from the community to prepare a possible form change of area bars. For this to be effective, I'd like the rest of the editor to be as ready as possible.
  • I like to use Alpha1 to run user tests and don't want to stumble over the known problems in the page editor.
Comment by Andreas Weder [ 03/Dec/12 ]

Added components to make it easier to filter issues.

Comment by Andreas Weder [ 04/Dec/12 ]

I've also added the color scheme to be used by the page editor bars to the style guide pages, but there's nothing new for readers of this issue there :
http://wiki.magnolia-cms.com/display/UX/Style+guides+for+visual+design#Styleguidesforvisualdesign-Colorscheme

Comment by Andreas Weder [ 04/Dec/12 ]

Here's the color scheme plus a visual of the explanations I gave in my last comment.

Comment by Andreas Weder [ 04/Dec/12 ]

Changed description to contain what is to do.

Comment by Andreas Weder [ 21/Dec/12 ]

If this is resolved, we should add this to the release notes.

Comment by Christopher Zimmermann [ 31/Dec/12 ]

Updated and added styles in pageeditor.css
Was able to make use of the sibling selector "~" in order to properly color the decendants of the selected element.

I've implemented that the siblings of the selected element are hilighted the same color as the parent as specced, but I recommend a UX review. It may be sufficient and clearer to leave the siblings of the selected element grey.

Comment by Christopher Zimmermann [ 31/Dec/12 ]

See followup ticket: http://jira.magnolia-cms.com/browse/MGNLUI-484

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