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

Resurface dialogs: dynamic height

    XMLWordPrintable

Details

    • Task
    • Resolution: Fixed
    • Neutral
    • 6.0
    • None
    • None
    • Basel 156, Basel 157
    • 5

    Description

      This ticket is about reworking the Resurface POC dialogs to fulfil the scenarios described in Zeplin when it comes to content height (max-height, scroll bars, etc.).

      1. this will be tried with CSS exclusively by creichenbach
      2. if that doesn't work, the legacy logic will be carried over
        1. info.magnolia.ui.vaadin.gwt.client.dialog.connector.DialogContainingFormConnector#doResize() 
        2. https://vaadin.com/docs/v8/framework/gwt/gwt-extension.html

      User story:

      As a user I want dialogs (with a lot of input fields) to use available screen estate so that i can see and edit as much content as possible without scrolling.

      Acceptance criteria:

      Margin-top

      • All dialogs are displayed with a top margin of 77px.
      • No matter what height they have.

      Dialog height:

      • Dialogs have a fixed header and footer of 75px.
      • Only the content area is flexible in height.
      • Min. height of content area for simple dialogs is = 296px, see here https://zpl.io/aXzE55g.
      • Min. height of content area for complex dialogs is = 245px (because there is also a tab sheet), see here https://zpl.io/aRqDzXe.
      • If input fields don't fit in min. height the content area (height) adjusts dynamically so they can fit in.

      Flexible Margin-bottom

      • Bottom margin adjusts according to dialog height.
      • If the dialog height reaches bottom margin of 77px then

      Checklists

        Acceptance criteria

        Attachments

          Issue Links

            Activity

              People

                creichenbach Cedric Reichenbach
                mmichel Maxime Michel
                Votes:
                0 Vote for this issue
                Watchers:
                2 Start watching this issue

                Dates

                  Created:
                  Updated:
                  Resolved:

                  Checklists

                    Task DoR