Create new Dialog component

[jorgenherje]

Create new Dialog component for wcc.

The current Dialog component is implemented by use of MaterialUI and has issues when it comes to have multiple dialogs open simultaneously. The dialog opens on top, placed on top with backdrop and higher z-index than the previously opened dialog. This prevents interaction with the dialogs opened prior to the last opened dialog. Thereby one cannot ensure interaction with multiple dialogs opened at the same time. The dialog is placed deep within parent structure in DOM and thus it is hard to control z-index and correct behavior.

The content can also trigger scroll area, rather than placing the content on top. E.g. when using a dropdown, the suggestions list does not appear on top, but triggers scroll area for the dialog.

Resolves:

• Fix content on top in settings Dialog for view element settings in WLF #253

---

TODO:

• Make dialog component for handling multiple dialogs at the same time
• Create dialogs placed at body-level
• Control using class names: Dialog, DialogActive, DialogModal
• Control content to be on top, prevent scrollable area. E.g. suggestions for a dropdown opens on top/overflow

---

Examples on issues:

When opening the settings dialog on the right first, the settings dialog on the left is on top with overlay. Thereby one cannot interact with the dropdown in the right hand side dialog.

When opening the dropdown suggestions for the dialog content, the scroll area of the dialog triggers. Goal is to place content on top and obtain a overflow-like behavior. Issue with overflow is shown below.

NOTE: Issue with overflow: visible of the current Dialog paper component is that content is shown when re-sizing window smaller than the original content.