Modal Dialogs

Modal dialogs are sometimes necessary to allow interaction with a windows that doesn't have the necessary controls in place. Typically this would be a File>Save dialog. The dialog doesn't really stand on its own, it only makes sense in relation to the parent window. While the dialog is open, interaction with the parent window is not possible, but it is desirable to see the content of the parent window to better understand the context of the dialog (realize what sort of file I am saving in the case of the Save As dialog).

The dialog opens up with a fast (200ms) animation of it coming out of the parent window. At the same time the parent window is shaded out to signify one cannot interact with it, while still allowing the content to be visible. The final shaded overlay should be rgba(0,0,0,0.3)

http://git.gnome.org/browse/gnome-shell-design/plain/mockups/static/modal-dialogs.png

Implementation Notes

These modal dialogs should be treated as 'modal_dialog' in mutter so that the gradient bend and the shading of the border can be created as a window titlebar. In addition, the dialogs need to have the dropshadows treated differently. The shadow needs to be masked out towards the top so it doesn't apprear to be floating on top of the parent window, but touch it on top.

http://git.gnome.org/browse/gnome-shell-design/plain/mockups/static/modal-dialogs-breakdown.png

Discussion

  • The vertical scale transition is ok for now, but ideally the dialog should come out of the parent window in an arc in Z. Mock it up -- JakubSteiner

  • As you can actually drag the parent window around, ideally the shading should exclude the titlebar. Sadly our titlebar extends to the application menubar so due to implementation, the shading should happen across the whole window.

Comments

See Also

Design/OS/ModalDialogs (last edited 2013-12-04 19:16:52 by WilliamJonMcCann)