Uploaded image for project: 'Magnolia UI'
  1. Magnolia UI
  2. MGNLUI-5426

Harmonize light and strong dialogs

XMLWordPrintable

    • Icon: Improvement Improvement
    • Resolution: Done
    • Icon: Neutral Neutral
    • 6.2
    • None
    • None
    • Yes
    • UI framework 9, UI Framework 10, UI Framework 11
    • 8

      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

       

       

       

        Acceptance criteria

              fgrilli Federico Grilli
              avongunten Anja von Gunten
              Votes:
              0 Vote for this issue
              Watchers:
              3 Start watching this issue

                Created:
                Updated:
                Resolved: