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 ( return (
<div <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' : '' !show ? '-translate-y-full' : ''
} ${!atZero ? 'shadow' : ''}`} } ${!atZero ? 'shadow' : ''}`}
> >
<div className="lg:hidden"> <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 /> <MenuIcon />
</Button> </Button>
</div> </div>
<LinkedLogo /> <LinkedLogo />
<div className="flex-grow-1 flex justify-end w-full"> <div className="flex-grow-1 flex justify-end w-full">
<div ref={moreRef}> <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 /> <MoreIcon />
</Button> </Button>
</div> </div>

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

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

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

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