From e711f6c1649ac8d8d92ffdfb0bc36d97f347aa69 Mon Sep 17 00:00:00 2001
From: Roland Bernard <rolbernard@unibz.it>
Date: Mon, 21 Jun 2021 22:54:08 +0200
Subject: [PATCH] Different attempt at making the popup modal
---
.../CircularProgress/circular-progress.scss | 7 ++--
.../src/components/navigation/Tabs/tabs.scss | 5 ++-
client/src/components/ui/Popup/index.tsx | 39 ++++++++++++++-----
client/src/components/ui/Popup/popup.scss | 2 +-
client/src/components/ui/Task/task.scss | 7 ++--
5 files changed, 41 insertions(+), 19 deletions(-)
diff --git a/client/src/components/graphs/CircularProgress/circular-progress.scss b/client/src/components/graphs/CircularProgress/circular-progress.scss
index 272a162..9919e0d 100644
--- a/client/src/components/graphs/CircularProgress/circular-progress.scss
+++ b/client/src/components/graphs/CircularProgress/circular-progress.scss
@@ -1,5 +1,6 @@
-@use 'styles/settings.scss'as s;
-@use 'styles/functions.scss'as fn;
+
+@use 'styles/settings.scss' as s;
+@use 'styles/functions.scss' as fn;
.circular-progress {
position: relative;
@@ -60,4 +61,4 @@
display: flex;
margin: 0 !important;
}
-}
\ No newline at end of file
+}
diff --git a/client/src/components/navigation/Tabs/tabs.scss b/client/src/components/navigation/Tabs/tabs.scss
index 644e1d6..474899a 100644
--- a/client/src/components/navigation/Tabs/tabs.scss
+++ b/client/src/components/navigation/Tabs/tabs.scss
@@ -1,4 +1,5 @@
-@use 'styles/settings.scss'as s;
+
+@use 'styles/settings.scss' as s;
.tabs-container {
display: flex;
@@ -71,4 +72,4 @@
box-shadow: 0 0 5px rgba(s.$black, 0.05);
transition: left 300ms ease;
}
-}
\ No newline at end of file
+}
diff --git a/client/src/components/ui/Popup/index.tsx b/client/src/components/ui/Popup/index.tsx
index ee00914..d820a6b 100644
--- a/client/src/components/ui/Popup/index.tsx
+++ b/client/src/components/ui/Popup/index.tsx
@@ -1,23 +1,17 @@
-import { ReactNode, useEffect } from 'react';
+import { ReactNode, useEffect, useRef } from 'react';
import { createPortal } from 'react-dom';
import './popup.scss';
-const body = document.getElementsByTagName('body')[0];
-
interface Props {
children: ReactNode
onClose: Function
}
export default function Popup({ children, onClose }: Props) {
- useEffect(() => {
- body.style.overflow = 'hidden';
- return () => {
- body.style.overflow = '';
- }
- }, []);
+ const body = document.getElementsByTagName('body')[0];
+ const root = useRef<HTMLDivElement>(null);
useEffect(() => {
const onKeyDown = (e: KeyboardEvent) => {
@@ -31,8 +25,33 @@ export default function Popup({ children, onClose }: Props) {
}
}, [onClose]);
+ useEffect(() => {
+ const ignoreEvent = (e: Event) => {
+ e.preventDefault();
+ return false;
+ };
+ const elements = [ root.current, body ];
+ const events = [
+ 'scroll', 'wheel', 'mousewheel', 'DOMMouseScroll',
+ 'keydown', 'keypress', 'keyup', 'touchmove',
+ 'touchstart', 'touchend', 'focus', 'click'
+ ];
+ for (const elem of elements) {
+ for (const event of events) {
+ elem?.addEventListener(event, ignoreEvent);
+ }
+ }
+ return () => {
+ for (const elem of elements) {
+ for (const event of events) {
+ elem?.removeEventListener(event, ignoreEvent);
+ }
+ }
+ }
+ });
+
return createPortal(
- <div className="popup-container">
+ <div className="popup-container" ref={root}>
<div className="popup">
{children}
</div>
diff --git a/client/src/components/ui/Popup/popup.scss b/client/src/components/ui/Popup/popup.scss
index 6222ba9..ec41fcd 100644
--- a/client/src/components/ui/Popup/popup.scss
+++ b/client/src/components/ui/Popup/popup.scss
@@ -12,10 +12,10 @@
justify-content: center;
z-index: 2000;
align-items: center;
+
& ~ div {
overflow: hidden;
}
-
.popup {
will-change: transform;
diff --git a/client/src/components/ui/Task/task.scss b/client/src/components/ui/Task/task.scss
index eabdf8d..9b690a7 100644
--- a/client/src/components/ui/Task/task.scss
+++ b/client/src/components/ui/Task/task.scss
@@ -1,5 +1,6 @@
-@use 'styles/settings.scss'as s;
-@use 'styles/mixins.scss'as mx;
+
+@use 'styles/settings.scss' as s;
+@use 'styles/mixins.scss' as mx;
.task {
padding: 30px;
@@ -78,4 +79,4 @@
right: -15px;
bottom: -20px;
}
-}
\ No newline at end of file
+}
--
GitLab