Modal Dialog element 🖼️

RobAndrewHurst commented 3 weeks ago

Description

Before going into the PR we need to understand what the Dialog/Modal actually are. Simply put a Dialog is a pop up that appears on the current page. A Modal is the same thing however it is designed to take control over the entire page not allowing the user to interact with other elements until the Modal is closed.

Replaced the <div> element in the modal creation with the <dialog> element.
The <dialog> element has two modes Dialog/Modal.
They are put into the different modes by either executing the function .show() or .showModal()
Introduced a new param modal.dialog which will control the class and the show method for the <dialog> element. This will default to true.
Replaced the target element remove with close() method that is part of the tag
The CSS rules dialog & modal have been introduced.
A new class modal-map (Used for the no locales found Modal) has been established.

GitHub Issue

1124

Type of Change

✅ Enhancement

How have you tested this?

Test this with any form of modal. Please check for any odd behaviours.

Testing Checklist

✅ Existing Tests still pass
✅ Ran locally on my machine

Code Quality Checklist

✅ My code follows the guidelines of XYZ
✅ My code has been commented
✅ Documentation has been updated
✅ New and existing unit tests pass locally with my changes
✅ Main has been merged into this PR

RobAndrewHurst commented 3 weeks ago

Going back into draft as discussed in the meeting to refactor all the elements to use dialog instead of modal.

RobAndrewHurst commented 3 weeks ago

Refactoring has been complete.

The modal.mjs module has been renamed to dialog.mjs. This would also require the helpModal.mjs module to also be renamed to helpDialog.mjs to keep with the naming.

There is no mapp.ui.elements.modal object anymore but mapp.ui.elemets.dialog

modal -> dialog helpModal -> helpDialog

dbauszus-glx commented 2 weeks ago

dialog.close must be executed on close if instance of function.

RobAndrewHurst commented 2 weeks ago

@dbauszus-glx I have added logic that if the dialog is a modal do not use the shiftContained method to ensure the dialog remains in the map container.

RobAndrewHurst commented 2 weeks ago

Going back into draft due to the modal mask being a draggable element.

RobAndrewHurst commented 2 weeks ago

The modal Dialog will now append to the body of the document. The user will not be able to adjust the position of the modal in the window. The close button will always appear on a modal.