[MGNLUI-840] Simplify and clarify coloring scheme of edit bars in the page editor Created: 06/Mar/13  Updated: 28/Jun/13  Resolved: 28/Jun/13

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: Espen Jervidalo
Resolution: Outdated Votes: 0
Labels: review-ux-201303, usability
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified
Environment:

Device: Safari 6.0.2, Mac OS X 10.8.2
Build: magnolia_bundle-stable #18


Issue Links:
dependency
is depended upon by MGNLUI-835 In the page editor, placeholders shou... Closed
is depended upon by MGNLUI-836 In the page editor, placeholders shou... 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)

 Description   

The page editor uses gray plus three shades of green to visualize context and hierarchy of an element on a page as well as to indicate its selection.

I've found a solution to simplify and clarify the currently implemented scheme, which I'd like to further evaluate and discuss.

The slightly changed rules for applying color are:

  • the bar of the currently selected element is dark green
  • the bars of all the elements it contains and which are direct children, are colored in a light green
  • all indirect children (children further down than on the next hierarchy level) are colored in a light green
  • if the current selected element is a component, the bar of all its sibling components and placeholders, as well as the bar of its parent area are colored in a very light green as well. For areas, there's no additional coloring.
  • all other, visible bars are colored in a very light gray

The effect of this change is to consistently to illuminate the halo or context of the currently selected element:

  • if it is a component, its siblings and parent area are illuminated as well with a very light green color. This puts the component in its context. If the component contains an area, it's assuming the light green color reserved for direct children.
  • if the selected element is an area or the page itself, all elements it contains are colored in a light green (direct children and the placeholder) or very light green (indirect children). This helps to understand the extent and content of an area.

This new scheme will also help significantly to recognize the extend of an area, since all bars inside an area will be green while those outside are gray.


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