From e83bc9c1ca486fba4087531d4fba9190e13d386d Mon Sep 17 00:00:00 2001 From: Isacco Date: Wed, 15 Nov 2023 18:26:51 +0100 Subject: [PATCH 1/3] fix: toast collapse --- packages/beacon-ui/src/components/toast/index.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/beacon-ui/src/components/toast/index.tsx b/packages/beacon-ui/src/components/toast/index.tsx index c47034a17..63b92d1c2 100644 --- a/packages/beacon-ui/src/components/toast/index.tsx +++ b/packages/beacon-ui/src/components/toast/index.tsx @@ -63,10 +63,13 @@ const Toast: Component = (props: ToastProps) => { 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, + }); } } From 9d5ac565537301ac2c22699d206acf3fda488553 Mon Sep 17 00:00:00 2001 From: Isacco Date: Thu, 16 Nov 2023 09:27:34 +0100 Subject: [PATCH 2/3] fix: on click movements --- .../beacon-ui/src/components/toast/index.tsx | 26 +++++++++++++++---- 1 file changed, 21 insertions(+), 5 deletions(-) diff --git a/packages/beacon-ui/src/components/toast/index.tsx b/packages/beacon-ui/src/components/toast/index.tsx index 63b92d1c2..428f4de95 100644 --- a/packages/beacon-ui/src/components/toast/index.tsx +++ b/packages/beacon-ui/src/components/toast/index.tsx @@ -48,6 +48,14 @@ const [showMoreInfo, setShowMoreInfo] = createSignal(true) const Toast: Component = (props: ToastProps) => { const hasWalletObject = props.label.includes('{{wallet}}') && props.walletInfo const isRequestSentToast = props.label.includes('Request sent to') + const debounce = (fun: Function, delay: number) => { + let timerId: NodeJS.Timeout + + return (...args: any[]) => { + clearTimeout(timerId) + timerId = setTimeout(() => fun(...args), delay) + } + } const offset = { x: isMobileOS(window) ? 12 : window.innerWidth - 460, y: 12 } const [divPosition, setDivPosition] = createSignal(offset) @@ -65,25 +73,31 @@ const Toast: Component = (props: ToastProps) => { 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: newX, - y: newY, - }); + y: newY + }) } } + const debouncedMouseMoveHandler = debounce(onMouseMoveHandler, 15) + const onMouseUpHandler = () => { 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()) { - window.addEventListener('mousemove', onMouseMoveHandler) + window.addEventListener('mousemove', debouncedMouseMoveHandler) window.addEventListener('mouseup', onMouseUpHandler) } else { - window.removeEventListener('mousemove', onMouseMoveHandler) + window.removeEventListener('mousemove', debouncedMouseMoveHandler) window.removeEventListener('mouseup', onMouseUpHandler) } }) @@ -100,6 +114,8 @@ const Toast: Component = (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} >
From 99eef81fc361f97902b586c5aebfa506ac9368c3 Mon Sep 17 00:00:00 2001 From: Isacco Date: Thu, 16 Nov 2023 10:42:57 +0100 Subject: [PATCH 3/3] fix: toast movements --- .../beacon-ui/src/components/toast/index.tsx | 22 ++++++++----------- .../beacon-ui/src/components/toast/styles.css | 2 +- 2 files changed, 10 insertions(+), 14 deletions(-) diff --git a/packages/beacon-ui/src/components/toast/index.tsx b/packages/beacon-ui/src/components/toast/index.tsx index 428f4de95..a150a0b1e 100644 --- a/packages/beacon-ui/src/components/toast/index.tsx +++ b/packages/beacon-ui/src/components/toast/index.tsx @@ -48,14 +48,6 @@ const [showMoreInfo, setShowMoreInfo] = createSignal(true) const Toast: Component = (props: ToastProps) => { const hasWalletObject = props.label.includes('{{wallet}}') && props.walletInfo const isRequestSentToast = props.label.includes('Request sent to') - const debounce = (fun: Function, delay: number) => { - let timerId: NodeJS.Timeout - - return (...args: any[]) => { - clearTimeout(timerId) - timerId = setTimeout(() => fun(...args), delay) - } - } const offset = { x: isMobileOS(window) ? 12 : window.innerWidth - 460, y: 12 } const [divPosition, setDivPosition] = createSignal(offset) @@ -63,7 +55,13 @@ const Toast: Component = (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) @@ -81,8 +79,6 @@ const Toast: Component = (props: ToastProps) => { } } - const debouncedMouseMoveHandler = debounce(onMouseMoveHandler, 15) - const onMouseUpHandler = () => { setIsDragging(false) } @@ -94,10 +90,10 @@ const Toast: Component = (props: ToastProps) => { // when the mouse is out of the div boundaries but it is still pressed, keep moving the toast createEffect(() => { if (isDragging()) { - window.addEventListener('mousemove', debouncedMouseMoveHandler) + window.addEventListener('mousemove', onMouseMoveHandler) window.addEventListener('mouseup', onMouseUpHandler) } else { - window.removeEventListener('mousemove', debouncedMouseMoveHandler) + window.removeEventListener('mousemove', onMouseMoveHandler) window.removeEventListener('mouseup', onMouseUpHandler) } }) diff --git a/packages/beacon-ui/src/components/toast/styles.css b/packages/beacon-ui/src/components/toast/styles.css index 0a3a21254..41a90ff1f 100644 --- 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;