ilyakooo0/urbit
1
0
Fork 0
mirror of https://github.com/ilyakooo0/urbit.git synced 2024-11-29 04:04:02 +03:00
Code Issues Packages Projects Releases Wiki Activity

groups: show group settings menu when pressing settings cog on mobile

Browse Source
This commit is contained in:
Patrick O'Sullivan 2022-04-07 14:25:10 -05:00
parent a15efab60c
commit 9f25f74d93
2 changed files with 52 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
pkg/interface/src/logic/lib/useMedia.ts Normal file
View File

@ -0,0 +1,21 @@
import { useCallback, useEffect, useState } from 'react';
export const useMedia = (mediaQuery: string) => {
const [match, setMatch] = useState(false);
const update = useCallback((e: MediaQueryListEvent) => {
setMatch(e.matches);
}, []);
useEffect(() => {
const query = window.matchMedia(mediaQuery);
query.addEventListener('change', update);
update({ matches: query.matches } as MediaQueryListEvent);
return () => {
query.removeEventListener('change', update);
};
}, [update]);
return match;
};

42
pkg/interface/src/views/landscape/components/GroupSwitcher.tsx
View File

@ -10,6 +10,7 @@ import { Link } from 'react-router-dom';
import { uxToHex } from '~/logic/lib/util'; import { uxToHex } from '~/logic/lib/util';
import { getTitleFromWorkspace } from '~/logic/lib/workspace'; import { getTitleFromWorkspace } from '~/logic/lib/workspace';
import useMetadataState from '~/logic/state/metadata'; import useMetadataState from '~/logic/state/metadata';
import { useMedia } from '~/logic/lib/useMedia';
import { Workspace } from '~/types/workspace'; import { Workspace } from '~/types/workspace';
import { Dropdown } from '~/views/components/Dropdown'; import { Dropdown } from '~/views/components/Dropdown';
import { MetadataIcon } from './MetadataIcon'; import { MetadataIcon } from './MetadataIcon';
@ -76,6 +77,7 @@ export function GroupSwitcher(props: {
isAdmin: any; isAdmin: any;
}) { }) {
const { workspace, isAdmin } = props; const { workspace, isAdmin } = props;
const isMobile = useMedia('(max-width: 639px)')
const associations = useMetadataState(state => state.associations); const associations = useMetadataState(state => state.associations);
const title = getTitleFromWorkspace(associations, workspace); const title = getTitleFromWorkspace(associations, workspace);
const metadata = (workspace.type === 'home' || workspace.type === 'messages') const metadata = (workspace.type === 'home' || workspace.type === 'messages')
@ -144,14 +146,26 @@ export function GroupSwitcher(props: {
/> />
<Text> Participants</Text> <Text> Participants</Text>
</GroupSwitcherItem> </GroupSwitcherItem>
<GroupSwitcherItem to={navTo('/popover/settings')}> {isMobile ? (
<Icon <GroupSwitcherItem to={navTo('/popover')}>
mr={2} <Icon
color="gray" mr={2}
icon="Gear" color="gray"
/> icon="Gear"
<Text> Group Settings</Text> />
</GroupSwitcherItem> <Text> Group Settings</Text>
</GroupSwitcherItem>
) : (
<GroupSwitcherItem to={navTo('/popover/settings')}>
<Icon
mr={2}
color="gray"
icon="Gear"
/>
<Text> Group Settings</Text>
</GroupSwitcherItem>
)}
{isAdmin && (<GroupSwitcherItem bottom to={navTo('/invites')}> {isAdmin && (<GroupSwitcherItem bottom to={navTo('/invites')}>
<Icon <Icon
mr={2} mr={2}
@ -181,9 +195,15 @@ export function GroupSwitcher(props: {
ml='12px' ml='12px'
/> />
</Link>)} </Link>)}
<Link to={navTo('/popover/settings')}> {isMobile ? (
<Icon color='gray' display="inline-block" ml={'12px'} icon="Gear" /> <Link to={navTo('/popover')}>
</Link> <Icon color='gray' display="inline-block" ml={'12px'} icon="Gear" />
</Link>
) : (
<Link to={navTo('/popover/settings')}>
<Icon color='gray' display="inline-block" ml={'12px'} icon="Gear" />
</Link>
)}
</> </>
)} )}
</Row> </Row>