[MGNLUI-5808] Provide dialog widths medium and small Created: 08/Apr/20  Updated: 21/Jan/21  Resolved: 10/Aug/20

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

Type: Improvement Priority: Neutral
Reporter: Anja von Gunten Assignee: Dai Ha
Resolution: Fixed Votes: 4
Labels: ux-improvement
Remaining Estimate: Not Specified
Time Spent: 1d 3.5h
Original Estimate: Not Specified

Attachments: PNG File dialog - light - medium.png     PNG File dialog - light - small.png     PNG File dialog - light - wide.png    
Issue Links:
Relates
relates to MGNLUI-5956 Add wide property to M6 dialog defini... Closed
relates to MGNLUI-5957 multivalue composite field is hard to... Closed
dependency
is depended upon by MGNLUI-5792 Add expand option to dialogs - horizo... 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: Dialog UX improvements
Sprint: CM & OC 8
Story Points: 5

 Description   

MGNLUI-5426 has harmonized dialogs and set their width to be fixed at 740px. That width has proven to be too small when using complex layouts. Examples can be found on linked tickets.

Ongoing improvements

  • option for wide dialogs is filed as --MGNLUI-5956
  • option to expand rich text fields into a wide dialog is filed as MGNLUI-5792

In addition we provide configuration for 2 other options: medium and small dialogs

As a user I want to configure the width of a dialog so that the dialog size is appropriate to it's content.

  • Wide dialogs are for complex forms (approx. >15 input fields, nested fields, horizontal layout etc.)
  • Medium dialogs are for default forms (approx. >5 and <15 input fields)
  • Small dialogs are for small forms (approx. <5 input fields)

AC's

  • Define 2 additional dialog widths: medium (1000px) & small (700px)
    • no property set -> medium (new default! current default is 700px)
    • 'wide: true' -> keep existing behavior introduced by MGNLUI-5956 & keep compatibility with M5 definitions
    • add option to set dialogs to be 'small'
  • Input fields span over the full dialog width (make sure there is enough space for the field description icon and lock icon for live copy)
  • If the dialog width is greater than the viewport, then the dialog should behave like any other dialog with 'wide: true' property (MGNL-5956); i.e. take the space available but do not add horizontal scrolling
  • No changes to flexible height and min. height (as it is with current default dialogs)
  • Make the default: medium

 

 



 Comments   
Comment by Christopher Chard [ 15/Jul/20 ]

+1 for this, the new vaadin dialogs waste so much screen real-estate (as stated in https://jira.magnolia-cms.com/browse/SUPPORT-11422). Thank you!!

Comment by Anja von Gunten [ 22/Jul/20 ]

Hi cchard

Instead of custom widths we are thinking of introducing 3 dialog sizes

  • Wide dialogs: full screen width (for complex form layouts) (already available)
  • Medium dialogs: for default dialogs - what would be your preferred default width? we were thinking of 1000px. Or more?
  • Small dialogs: 700px

Thanks for your feedback.

Comment by Tomáš Gregovský [ 22/Jul/20 ]

like it!

medium (1000px) and small (700px) sounds perfect to me  thanks

Comment by Tom Wespi [ 22/Jul/20 ]

+1 for medium (1000px) and small (700px)

Comment by Christopher Chard [ 03/Aug/20 ]

Hello Anja,

that sounds good!

I would however recommend keeping small at the current standard width (740 px) and make this the default setting. Then, all dialogs built for MGNL 6.2 behave as expected without change.

Question:

Wide dialogs: full screen width (for complex form layouts) (already available)

How can this be achieved for "normal" component dialogs?

Cheers,

Chris

Comment by Anja von Gunten [ 04/Aug/20 ]

Hi cchard

Dialog definitions are documented here https://documentation.magnolia-cms.com/display/DOCS62/Dialog+definition.

Note that we are currently implementing the field width to span across the available space for all dialogs https://jira.magnolia-cms.com/browse/MGNLUI-6064.

As for the default: multiple customers reported that 740px is too small for their form layouts, especially when using composite fields or link fields with long path names, hence we chose the medium to be the new default.

Hope these improvements will help your projects succeed.

Best Anja

Comment by Christopher Chard [ 06/Aug/20 ]

Hello Anja,

ineed, I was one of those customers

On a side-note: I am very happy to see the pace in which you guys are adding features / fixing bugs!!

Cheers,

Chris

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