New Dialog Component #275
Merged
New Dialog Component #275
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Improve resize logic - Remove unnecessary components
- Improve and move util to geometry.ts - Improve css naming - Add handle of blur
- Improve verification of clientX and clientY values < 0. - Improve resizing when size is increased and size on right < rightPadding
This was necessary in order to make `dash-generate-components` work.
- Only perform window resize event when dialog is open. - Detect if dialog is outside window when opening - Adjust size according to available space when opening dialog
Did not adjust width on first open
Utilize mutationObserver to detect when dialog is open and adjust position and width accordingly.
Only need for keyup event listener
- stop propagation of native mousedown and touchstart for Close button using addEventListener. - Could not handle with onMouseDown and onTouchStart
Added new `Renderer` component to move `createPortal` usage out of main component in order to make Dash's `generate-components` command work.
- Renderer was initially returning <div></div>, this initial mutationObserver call was not performed. Resulting in incorrect initial width and position. - Add scrollArea for content when height of dialog > half window size when opening
Gave issues with initial position and size when initial open state = true. Thereby it was no mutation of attribute and thereby no adjustment of dialog position and size.
…ew-dialog-component
- Utilize Size object from geometry - Fix incorrect code for activating ScrollArea
rubenthoms
requested changes
Oct 14, 2022
react/src/lib/components/WebvizDialog/components/WebvizDialogTitle/WebvizDialogTitle.tsx
Outdated
Show resolved
Hide resolved
react/src/lib/components/WebvizDialog/components/WebvizDialogTitle/WebvizDialogTitle.tsx
Outdated
Show resolved
Hide resolved
- Remove isMovedOutsideWindow state and check if dialog is outside the previous window directly in the window resize handler. - Minor bug fix for window width increase when actual dialog margin right is less than margin.right. Made dialog left jump with margin.right
- Did not work correctly when content was sized to trigger scrollArea
…nents - Add heightOwner prop to control height of dialog - no height owner implies that height is adjusted according to content - Do not use ScrollArea if heightOwner is undefined - height adjusts to content - Refactor dialog content and dialog actions into separate sub-components - Use min/max width - Remove min/max height usage - Prevent automatic calculation of width/height as content must be more controlled - gave resize issues and initializing issues.
- Control of z-index to ensure correct dialog "on top" at all time
For correct placeholder className and z-index
- Add dialog to easier show correct behavior of z-index control with three non-modal dialogs.
rubenthoms
requested changes
Nov 11, 2022
react/src/lib/components/WebvizDialog/components/WebvizRenderer.tsx
Outdated
Show resolved
Hide resolved
react/src/lib/components/WebvizDialog/components/WebvizDialogTitle/webviz-dialog-title.css
Outdated
Show resolved
Hide resolved
react/src/lib/components/WebvizDialog/components/WebvizDialogTitle/webviz-dialog-title.css
Outdated
Show resolved
Hide resolved
rubenthoms
approved these changes
Nov 15, 2022
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
New draggable dialog component for usage in
Webviz.Dialog component draggable, with width and position adjustment when window width is resized. Functionality for handling multiple dialogs open at the same time, by controlling
cssfor currently active dialog. This will make currently active dialog on top and with highlighting. The dialogs can be set modal - resulting in a clickable backdrop with adjusted opacity. When backdrop is clicked, the modal dialog is closed.All dialogs are placed within a
divas child of<body>namedWebvizDialog__root. Therebyz-indexcan be controlled and the content of theWebvizDialog__rootwill have maximum one active dialog - controlled by theWebvizDialog--activeclass name.WebvizDialogfor settings inWebvizViewElementCloses: #261