Little bit of a mix of things in this one:
* Support variable-width dialogs. Default is fixed-width as before,
only UploadConformDialog is variable-width. Controlled by a prop
to BaseDialog.
* Fixes to the cancel 'x' - scale the mask image, tweak size & colour
* Colour & boldness of dialog titles
* Align the dialog title & cancel 'x'
* Remove gap between dialog buttons & right hand side of dialog(!)
* Round corners on dialogs
* Add grey border on image preview in upload confirm dialog
* and, squeezing in slightly randomly, finish the partially renamed
ChatInviteDialog to AddressPickerDialog.
Hopefully makes the syntax a bit nicer. Also uses ES6 async import
rather than require.ensure which is now deprecated. Also also
displays an error if the component fails to load rather than falling
over in a heap, which is nice.
leaving it in the Modal manager.
We are using Modal manager to load other components not just BaseDialog
and its subclasses and they might require different keyboard handling.
Also depend on focus-trap-react rather than react-focus-trap for locking
keyboard focus inside the dialog. The experience is much nicer and even
the FocusTrap element it-self no longer gains the focus.
On a side note using the FocusTrap element outside the dialog (on
its parent) stops it from working properly.
- Wrapped all the modals inside a react-focus-trap component disabling
keyboard navigation outside the modal dialogs
- Disabled our custom key handling at dialog level. Cancelling on esc
key is now handled via FocusTrap component.
- Removed onEnter prop from the BaseDialog component. Dialogs that
submit data all now embed a form with onSubmit handler. And since
keyboard focus is now managed better via FocusTrap it no longer makes
sense for the other dialog types. Fixes
https://github.com/vector-im/riot-web/issues/5736
- Set aria-hidden on the matrixChat outer node when showing dialogs to
disable navigating outside the modals by using screen reader specific
features.
Don't attempt to reuse the same AsyncWrapper for different dialogs - which ends
up pushing the props for the new dialog into the old dialog.
Fixes https://github.com/vector-im/riot-web/issues/3020
Add Modal.createDialogAsync, which can be used to display asynchronously-loaded
React components. Also make EncryptedEventDialog use it as a handy
demonstration.
David Baker