chris/frigate
1
0
Fork 0
forked from Github/frigate
Code Pull Requests Packages Activity

fix(web): ensure relative modals have proper padding

Browse Source
This commit is contained in:
Paul Armstrong
2021-02-03 15:43:24 -08:00
committed by Blake Blackshear
parent ba278dfc3d
commit 9867f4eeee
3 changed files with 17 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
web/src/components/RelativeModal.jsx
View File

@@ -1,6 +1,8 @@
import { h, Fragment } from 'preact';
import { createPortal } from 'preact/compat';
import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
const WINDOW_PADDING = 20;
export default function RelativeModal({ className, role = 'dialog', children, onDismiss, portalRootID, relativeTo }) {
const [position, setPosition] = useState({ top: -999, left: 0, width: 0 });
@@ -37,7 +39,7 @@ export default function RelativeModal({ className, role = 'dialog', children, on
[ref.current]
);
useEffect(() => {
useLayoutEffect(() => {
if (ref && ref.current && relativeTo && relativeTo.current) {
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
@@ -46,15 +48,15 @@ export default function RelativeModal({ className, role = 'dialog', children, on
let top = y + height;
let left = x;
// too far right
if (left + menuWidth > windowWidth) {
left = windowWidth - menuWidth;
if (left + menuWidth >= windowWidth - WINDOW_PADDING) {
left = windowWidth - menuWidth - WINDOW_PADDING;
}
// too far left
else if (left < 0) {
left = 0;
else if (left < WINDOW_PADDING) {
left = WINDOW_PADDING;
}
// too close to bottom
if (top + menuHeight > windowHeight) {
if (top + menuHeight > windowHeight - WINDOW_PADDING) {
top = y - menuHeight;
}
setPosition({ left, top, width });