Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-10-27 10:52:11 +01:00
Code Issues Projects Releases Wiki 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/components/AppBar.jsx
View File

@ -68,19 +68,19 @@ export default function AppBar({ title }) {
return (
<div
className={`w-full border-b border-gray-100 dark:border-gray-700 flex items-center align-middle p-4 space-x-2 fixed left-0 right-0 z-10 bg-white dark:bg-gray-900 transform transition-all duration-200 translate-y-0 ${
className={`w-full border-b border-gray-200 dark:border-gray-700 flex items-center align-middle p-4 space-x-2 fixed left-0 right-0 z-10 bg-white dark:bg-gray-900 transform transition-all duration-200 translate-y-0 ${
!show ? '-translate-y-full' : ''
} ${!atZero ? 'shadow' : ''}`}
>
<div className="lg:hidden">
<Button className="rounded-full w-12 h-12" onClick={handleShowSidebar} type="text">
<Button color="black" className="rounded-full w-12 h-12" onClick={handleShowSidebar} type="text">
<MenuIcon />
</Button>
</div>
<LinkedLogo />
<div className="flex-grow-1 flex justify-end w-full">
<div ref={moreRef}>
<Button className="rounded-full w-12 h-12" onClick={handleShowMenu} type="text">
<Button color="black" className="rounded-full w-12 h-12" onClick={handleShowMenu} type="text">
<MoreIcon />
</Button>
</div>

5
web/src/components/Button.jsx
View File

@ -24,6 +24,11 @@ const ButtonColors = {
outlined: '',
text: '',
},
black: {
contained: '',
outlined: '',
text: 'text-black dark:text-white',
},
};
const ButtonTypes = {

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 });