matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use DropdownMenu for events page

Browse Source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak
2024-08-16 15:22:50 +02:00
parent fd194938a6
commit bc1853f4d8
2 changed files with 6 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/dropdown-menu/dropdown-menu.tsx
View File

@ -86,9 +86,6 @@ const DropdownMenu = (props: IDropdownMenu) => {
} }
}; };
/**
* On mobile screens, let's replace the Popper dropdown with a Modal.
*/
const handleOpen = () => { const handleOpen = () => {
dispatch(openDropdownMenu()); dispatch(openDropdownMenu());
setIsOpen(true); setIsOpen(true);

35
src/features/event/components/event-header.tsx
View File

@ -12,10 +12,10 @@ import { deleteStatusModal, toggleStatusSensitivityModal } from 'soapbox/actions
import { initMuteModal } from 'soapbox/actions/mutes'; import { initMuteModal } from 'soapbox/actions/mutes';
import { initReport, ReportableEntities } from 'soapbox/actions/reports'; import { initReport, ReportableEntities } from 'soapbox/actions/reports';
import { deleteStatus } from 'soapbox/actions/statuses'; import { deleteStatus } from 'soapbox/actions/statuses';
import DropdownMenu, { type Menu as MenuType } from 'soapbox/components/dropdown-menu';
import Icon from 'soapbox/components/icon'; import Icon from 'soapbox/components/icon';
import StillImage from 'soapbox/components/still-image'; import StillImage from 'soapbox/components/still-image';
import { Button, HStack, IconButton, Menu, MenuButton, MenuDivider, MenuItem, MenuLink, MenuList, Stack, Text } from 'soapbox/components/ui'; import { Button, HStack, IconButton, Stack, Text } from 'soapbox/components/ui';
import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
import VerificationBadge from 'soapbox/components/verification-badge'; import VerificationBadge from 'soapbox/components/verification-badge';
import { useAppDispatch, useFeatures, useOwnAccount, useSettings } from 'soapbox/hooks'; import { useAppDispatch, useFeatures, useOwnAccount, useSettings } from 'soapbox/hooks';
import { useChats } from 'soapbox/queries/chats'; import { useChats } from 'soapbox/queries/chats';
@ -27,7 +27,6 @@ import PlaceholderEventHeader from '../../placeholder/components/placeholder-eve
import EventActionButton from '../components/event-action-button'; import EventActionButton from '../components/event-action-button';
import EventDate from '../components/event-date'; import EventDate from '../components/event-date';
import type { Menu as MenuType } from 'soapbox/components/dropdown-menu';
import type { Status as StatusEntity } from 'soapbox/types/entities'; import type { Status as StatusEntity } from 'soapbox/types/entities';
const messages = defineMessages({ const messages = defineMessages({
@ -379,39 +378,17 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
<Stack space={2}> <Stack space={2}>
<HStack className='w-full' alignItems='start' space={2}> <HStack className='w-full' alignItems='start' space={2}>
<Text className='grow' size='lg' weight='bold'>{event.name}</Text> <Text className='grow' size='lg' weight='bold'>{event.name}</Text>
<Menu>
<MenuButton <DropdownMenu items={makeMenu()} placement='bottom-end'>
as={IconButton} <IconButton
src={require('@tabler/icons/outline/dots.svg')} src={require('@tabler/icons/outline/dots.svg')}
theme='outlined' theme='outlined'
className='h-[30px] px-2' className='h-[30px] px-2'
iconClassName='h-4 w-4' iconClassName='h-4 w-4'
children={null} children={null}
/> />
</DropdownMenu>
<MenuList>
{makeMenu().map((menuItem, idx) => {
if (typeof menuItem?.text === 'undefined') {
return <MenuDivider key={idx} />;
} else {
const Comp = (menuItem.href ? MenuLink : MenuItem) as any;
const itemProps = menuItem.href ? { href: menuItem.href, target: menuItem.target || '_self' } : { onSelect: menuItem.action };
return (
<Comp key={idx} {...itemProps} className='group'>
<div className='flex items-center'>
{menuItem.icon && (
<SvgIcon src={menuItem.icon} className='mr-3 h-5 w-5 flex-none text-gray-400 group-hover:text-gray-500' />
)}
<div className='truncate'>{menuItem.text}</div>
</div>
</Comp>
);
}
})}
</MenuList>
</Menu>
{account.id === ownAccount?.id ? ( {account.id === ownAccount?.id ? (
<Button <Button
size='sm' size='sm'