Merge pull request #665 from airgap-it/fix/toast_collapse

fix: toast collapse
airgap-it · Nov 17, 2023 · 5f0b170 · 5f0b170
2 parents f31aa29 + 99eef81
commit 5f0b170
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git a/packages/beacon-ui/src/components/toast/index.tsx b/packages/beacon-ui/src/components/toast/index.tsx
@@ -55,17 +55,26 @@ const Toast: Component<ToastProps> = (props: ToastProps) => {
 
   const onMouseDownHandler = (event: MouseEvent) => {
     event.preventDefault() // prevents inner text highlighting
-    const boundinRect = (event.target as HTMLElement).getBoundingClientRect()
+    const target = event.target as HTMLElement
+
+    if (target.className !== 'toast-header' && target.parentElement?.className !== 'toast-header') {
+      return
+    }
+
+    const boundinRect = target.getBoundingClientRect()
     offset.x = event.clientX - boundinRect.x
     offset.y = event.clientY - boundinRect.y
     setIsDragging(true)
   }
 
   const onMouseMoveHandler = (event: MouseEvent) => {
     if (isDragging() && event.buttons === 1) {
+      const newX = Math.min(Math.max(event.clientX - offset.x, 0), window.innerWidth - 460)
+      const newY = Math.min(Math.max(event.clientY - offset.y, 0), window.innerHeight - 12)
+
       setDivPosition({
-        x: event.clientX - offset.x,
-        y: event.clientY - offset.y
+        x: newX,
+        y: newY
       })
     }
   }
@@ -74,6 +83,10 @@ const Toast: Component<ToastProps> = (props: ToastProps) => {
     setIsDragging(false)
   }
 
+  const onClickHandler = () => {
+    setIsDragging(false)
+  }
+
   // when the mouse is out of the div boundaries but it is still pressed, keep moving the toast
   createEffect(() => {
     if (isDragging()) {
@@ -97,6 +110,8 @@ const Toast: Component<ToastProps> = (props: ToastProps) => {
       style={{ left: `${divPosition().x}px`, top: `${divPosition().y}px` }}
       class={props.open ? 'toast-wrapper-show' : 'toast-wrapper-hide'}
       onMouseDown={onMouseDownHandler}
+      onClick={onClickHandler}
+      onDblClick={onClickHandler}
     >
       <div class="toast-header">
         <Loader />

diff --git a/packages/beacon-ui/src/components/toast/styles.css b/packages/beacon-ui/src/components/toast/styles.css
@@ -1,5 +1,4 @@
 .toast-wrapper-show {
-  cursor: move;
   max-width: 460px;
   overflow: hidden;
   background-color: white;
@@ -32,6 +31,7 @@
 }
 
 .toast-header {
+  cursor: move;
   padding: 0px 0.6em 0px 1.2em;
   display: flex;
   align-items: center;