[PAGES-324] Iteration 3: Differentiate color of area/components dynamically Created: 06/Aug/20  Updated: 21/Jan/21  Resolved: 16/Sep/20

Status: Closed
Project: Magnolia pages module
Component/s: None
Affects Version/s: None
Fix Version/s: 6.2.4

Type: Improvement Priority: Neutral
Reporter: Anja von Gunten Assignee: Quach Hao Thien
Resolution: Done Votes: 0
Labels: None
Remaining Estimate: 0d
Time Spent: 5d 2.5h
Original Estimate: Not Specified

Attachments: PNG File page editor color palette.png     File pages editor bars green light green.mov    
Issue Links:
dependency
is depended upon by DOCU-2879 DOC: Visually differentiate between m... Open
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)
Documentation update required:
Yes
Date of First Response:
Epic Link: M6 UI & UX Improvements
Sprint: CM & OC 9, CM & OC 10, CM & OC 11
Story Points: 5

 Description   

Follow-up ticket based on https://jira.magnolia-cms.com/browse/PAGES-235

In M5 not all area/components are active all the time. Whereas in M6.x there is no differentiation btw active and inactive areas/components. They are all the same green all the time.

Apply pattern to differentiate area/components that are "active" and "inactive" depending on what you click.

  • active: strong green shades
  • inactive: light green shades

 

AC:

Interaction pattern

  • The selected area/component plus 1st level children are active (strong green)
  • All others (parent, children 2nd level) are inactive (light green)

 

Color pattern

  • Selected & Active (be it a selected area or component, it's the same pattern)
    • Selected #599900
      • no hover
      • Icons bg hover effect: color white; opacity default 0.3 / hover 0.5
    • Active #A2C86E
      • hover color: #7CB22A
      • Icons bg hover effect: color white; opacity default 0.3 / hover 0.5
  • Default (inactive)
    • for areas: #D5E5C1
      • hover color: #C3DAA3
      • Icons bg hover effect: color white; opacity default 0.5 / hover 0.7
    • for components: #EEF4E4
      • hover color: #DEEBCB
      • Icons bg hover effect: color white; opacity default 0.8 / hover 100%

 

Note that for live copy pages we do not change anything.

 

 

 

 


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