Maximize/Minimize Dialog functionality jmix-framework/jmix#4926

[KremnevDmitry]

Summary

A View opened in a DialogWindow can now be maximized to the whole viewport and restored back, via a toggle button in the dialog header or from code. The feature is opt-in and inert for dialogs that don't enable it.

What was done

• Added the maximizable attribute to @DialogMode (module flowui), false by default. When enabled, a toggle button appears in the dialog header next to the close button.
• Added the maximize API to AbstractDialogWindow: isMaximizable() / setMaximizable(boolean), isMaximized() / setMaximized(boolean), and addMaximizedChangeListener(Consumer<MaximizedChangeEvent<V>>). The event reports isMaximized(), isFromClient(), the dialog window and the view shown in it.
• While a dialog is maximized, dragging and resizing are suppressed. Values passed to setDraggable(...) / setResizable(...) in this state are stored and applied when the dialog is restored, and the getters report the configured value.
• Maximizing no longer touches the dialog geometry on the server: the maximized layout is applied by the theme, driven by the jmix-maximized attribute set on the dialog element.

How it works

setMaximized(true) marks the dialog element with jmix-maximized and turns off dragging and resizing, remembering their previous values. The themes (jmix-aura, jmix-lumo) stretch the dialog overlay over the viewport for that attribute, overriding the inline geometry Vaadin keeps on the overlay when a dialog is dragged or resized. Because width, height and position are never read or rewritten on the server, restoring removes the attribute and the dialog returns exactly to the size and position the user left it in — including a dialog that was dragged and resized first. Clicking the header button toggles the same state and fires MaximizedChangeEvent with fromClient = true; the button icon and description switch between "maximize" and "restore".

Components contributed through View#configureDialogWindowHeader keep their place: they stay in the header content, before the maximize and close buttons.

How to use

Declaratively:

@DialogMode(width = "50em", height = "40em", resizable = true, maximizable = true)
public class OrderDetailView extends StandardDetailView<Order> {
}

Programmatically, including opening a dialog already maximized:

DialogWindow<OrderDetailView> dialogWindow = dialogWindows.view(this, OrderDetailView.class).build();
dialogWindow.setMaximizable(true);
dialogWindow.setMaximized(true);
dialogWindow.addMaximizedChangeListener(event -> log.debug("maximized: {}", event.isMaximized()));
dialogWindow.open();

A theme can adjust the maximized layout through the:

• --jmix-dialog-maximized-position
• --jmix-dialog-maximized-inset
• --jmix-dialog-maximized-width
• --jmix-dialog-maximized-height

Compatibility

Opt-in; existing applications are unaffected. The header of every dialog now contains one extra button element, hidden unless maximizable is enabled — worth knowing for tests that assert on the dialog header DOM.