[MGNLUI-5426] Harmonize light and strong dialogs Created: 15/Oct/19  Updated: 03/Dec/19  Resolved: 25/Nov/19

Status: Closed
Project: Magnolia UI
Component/s: None
Affects Version/s: None
Fix Version/s: 6.2

Type: Improvement Priority: Neutral
Reporter: Anja von Gunten Assignee: Federico Grilli
Resolution: Done Votes: 0
Labels: M6-UI-1
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: PNG File Bildschirmfoto 2019-10-03 um 14.25.36.png     PNG File Bildschirmfoto 2019-10-03 um 14.28.57.png     PNG File dialogs.png    
Issue Links:
Relates
relates to MGNLUI-4884 Optiongroup wraps too quickly despite... Closed
dependency
is depended upon by MGNLUI-5407 Harden various editor implementations... Closed
documentation
to be documented by MGNLUI-5540 DOC: Dialog types - 6 UI Closed
relation
is related to MGNLUI-5419 Replace search box with filters in ch... Closed
is related to MGNLUI-5511 Harmonize dialogs - follow up Closed
supersession
supersedes MGNLUI-5342 Dialogs not expanding in new ui frame... Closed
supersedes MGNLUI-5094 Light dialogs not resizing correctly Closed
supersedes MGNLUI-5352 Dialog footer height not responsive, ... Closed
supersedes MGNLUI-5146 Change strong dialogs to light dialog Closed
supersedes MGNLUI-5207 Strong dialogs to adapt to actual con... 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)
Documentation update required:
Yes
Date of First Response:
Epic Link: M6 UI & UX Improvements
Sprint: UI framework 9, UI Framework 10, UI Framework 11
Story Points: 8

 Description   

Problem with current dialogs:

  • light dialogs are often too small > little window with lots of fields to be scrolled
  • strong dialogs are often too big > huge window with one field and amply white space
  • various glitches on both dialog types (browser resizing, responsiveness, button sizes)
  • bad usability
  • 2 (fixed) sizes is a concept from M5 which comes from a time where responsiveness hadn't established yet

 

Solution:

"One responsive dialog size with option light or strong"

  1. harmonize size for both light and strong dialogs
    • fixed width: 740px (intermediate size btw current light and strong)
    • min height: 312px
    • flexible height according to the content, max height can span from browser top to bottom (top/bottom spacing 30px)
    • scroll bar only if more content than max height
  2. add responsive behavior
    • 2 breakpoints, 3 sizes
  3.  light, strong and tabs are configurable options
    • background: light or strong (both block interaction with the part of the interface it covers, note that in the current implementation in M6 only the strong dialogs block the interaction)
    • tab sheet: yes or no (aka complex dialog)

 

Detailed specs

https://app.zeplin.io/project/5acc848ede054e0a4865f805/dashboard?seid=5da5d523b61eac2f84fc407e

 

Note for documentation:

https://documentation.magnolia-cms.com/display/DOCS61/Dialog+types

When to use light or strong dialogs

  • strong dialogs ask for data collection
  • light dialogs ask for quick input but do not severely interrupt the user

When to use simple or complex dialogs (with or without tabs)

  • simple: whenever only few data points need to be collected
  • complex: allows to collect larger amounts of data than its simple counterpart

 

 

 


Generated at Mon Feb 12 09:26:29 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.