urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-12-22 18:31:44 +03:00
Code Issues Packages Projects Releases Wiki Activity

interface: correct modal stacking behaviour

Browse Source
This commit is contained in:
Liam Fitzgerald 2021-02-10 17:00:00 +10:00
parent 2f4de07435
commit 0995019ef9
No known key found for this signature in database
GPG Key ID: D390E12C61D1CFFB
3 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
pkg/interface/src/logic/lib/useOutsideClick.ts
View File

@ -2,14 +2,15 @@ import { useEffect, RefObject } from "react";
export function useOutsideClick( export function useOutsideClick(
ref: RefObject<HTMLElement | null | undefined>, ref: RefObject<HTMLElement | null | undefined>,
onClick: () => void onClick: () => void,
) { ) {
useEffect(() => { useEffect(() => {
function handleClick(event: MouseEvent) { function handleClick(event: MouseEvent) {
const portalRoot = document.querySelector('#portal-root')!;
if ( if (
ref.current && ref.current &&
!ref.current.contains(event.target as any) && !ref.current.contains(event.target as any) &&
!document.querySelector("#portal-root")!.contains(event.target as any) (!portalRoot.contains(ref.current) || portalRoot.contains(event.target as any))
) { ) {
onClick(); onClick();
} }

2
pkg/interface/src/views/apps/notifications/graph.tsx
View File

@ -129,6 +129,8 @@ const GraphNodeContent = ({ group, post, contacts, mod, description, index, remo
measure={() => {}} measure={() => {}}
group={group} group={group}
contacts={contacts} contacts={contacts}
groups={{}}
associations={{ graph: {}, groups: {}}}
msg={post} msg={post}
fontSize='0' fontSize='0'
pt='2' pt='2'

7
pkg/interface/src/views/components/leap/Omnibox.tsx
View File

@ -12,6 +12,7 @@ import { deSig } from '~/logic/lib/util';
import defaultApps from '~/logic/lib/default-apps'; import defaultApps from '~/logic/lib/default-apps';
import {Associations, Contacts, Groups, Tile, Invites} from '~/types'; import {Associations, Contacts, Groups, Tile, Invites} from '~/types';
import {useOutsideClick} from '~/logic/lib/useOutsideClick'; import {useOutsideClick} from '~/logic/lib/useOutsideClick';
import {Portal} from '../Portal';
interface OmniboxProps { interface OmniboxProps {
associations: Associations; associations: Associations;
@ -263,7 +264,8 @@ export function Omnibox(props: OmniboxProps) {
</Box>; </Box>;
}, [results, navigate, selected, props.contacts, props.notifications, props.invites]); }, [results, navigate, selected, props.contacts, props.notifications, props.invites]);
return ( return (
<Portal>
<Box <Box
backgroundColor='scales.black30' backgroundColor='scales.black30'
width='100%' width='100%'
@ -271,7 +273,7 @@ export function Omnibox(props: OmniboxProps) {
position='absolute' position='absolute'
top='0' top='0'
right='0' right='0'
zIndex='9' zIndex={11}
display={props.show ? 'block' : 'none'}> display={props.show ? 'block' : 'none'}>
<Row justifyContent='center'> <Row justifyContent='center'>
<Box <Box
@ -292,6 +294,7 @@ export function Omnibox(props: OmniboxProps) {
</Box> </Box>
</Row> </Row>
</Box> </Box>
</Portal>
); );
} }