Add space options context menu

Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2022-01-29 14:11:05 +05:30
parent 833edc9568
commit 2bc21f13d4
2 changed files with 96 additions and 2 deletions

View file

@ -0,0 +1,83 @@
import React from 'react';
import PropTypes from 'prop-types';
import { twemojify } from '../../../util/twemojify';
import initMatrix from '../../../client/initMatrix';
import { openSpaceSettings, openInviteUser } from '../../../client/action/navigation';
import { leave, createSpaceShortcut, deleteSpaceShortcut } from '../../../client/action/room';
import { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
import AddUserIC from '../../../../public/res/ic/outlined/add-user.svg';
import SettingsIC from '../../../../public/res/ic/outlined/settings.svg';
import LeaveArrowIC from '../../../../public/res/ic/outlined/leave-arrow.svg';
import PinIC from '../../../../public/res/ic/outlined/pin.svg';
import PinFilledIC from '../../../../public/res/ic/filled/pin.svg';
function SpaceOptions({ roomId, afterOptionSelect }) {
const mx = initMatrix.matrixClient;
const room = mx.getRoom(roomId);
const canInvite = room?.canInvite(mx.getUserId());
const isPinned = initMatrix.roomList.spaceShortcut.has(roomId);
const handleInviteClick = () => {
openInviteUser(roomId);
afterOptionSelect();
};
const handlePinClick = () => {
if (isPinned) deleteSpaceShortcut(roomId);
else createSpaceShortcut(roomId);
afterOptionSelect();
};
const handleSettingsClick = () => {
openSpaceSettings(roomId);
afterOptionSelect();
};
const handleLeaveClick = () => {
if (confirm('Are you really want to leave this space?')) {
leave(roomId);
afterOptionSelect();
}
};
return (
<>
<MenuHeader>{twemojify(`Options for ${initMatrix.matrixClient.getRoom(roomId)?.name}`)}</MenuHeader>
<MenuItem
onClick={handlePinClick}
iconSrc={isPinned ? PinFilledIC : PinIC}
>
{isPinned ? 'Unpin from sidebar' : 'Pin to sidebar'}
</MenuItem>
<MenuItem
iconSrc={AddUserIC}
onClick={handleInviteClick}
disabled={!canInvite}
>
Invite
</MenuItem>
<MenuItem onClick={handleSettingsClick} iconSrc={SettingsIC}>Settings</MenuItem>
<MenuItem
variant="danger"
onClick={handleLeaveClick}
iconSrc={LeaveArrowIC}
>
Leave
</MenuItem>
</>
);
}
SpaceOptions.defaultProps = {
afterOptionSelect: null,
};
SpaceOptions.propTypes = {
roomId: PropTypes.string.isRequired,
afterOptionSelect: PropTypes.func,
};
export default SpaceOptions;

View file

@ -7,9 +7,10 @@ import { twemojify } from '../../../util/twemojify';
import initMatrix from '../../../client/initMatrix';
import cons from '../../../client/state/cons';
import {
openSpaceSettings, openPublicRooms, openCreateRoom, openInviteUser,
openPublicRooms, openCreateRoom, openInviteUser, openReusableContextMenu,
} from '../../../client/action/navigation';
import { createSpaceShortcut, deleteSpaceShortcut } from '../../../client/action/room';
import { getEventCords } from '../../../util/common';
import { blurOnBubbling } from '../../atoms/button/script';
@ -18,6 +19,7 @@ import RawIcon from '../../atoms/system-icons/RawIcon';
import Header, { TitleWrapper } from '../../atoms/header/Header';
import IconButton from '../../atoms/button/IconButton';
import ContextMenu, { MenuItem, MenuHeader } from '../../atoms/context-menu/ContextMenu';
import SpaceOptions from '../../molecules/space-options/SpaceOptions';
import PlusIC from '../../../../public/res/ic/outlined/plus.svg';
import HashPlusIC from '../../../../public/res/ic/outlined/hash-plus.svg';
@ -35,12 +37,21 @@ function DrawerHeader({ selectedTab, spaceId }) {
const room = mx.getRoom(spaceId);
const spaceName = selectedTab === cons.tabs.DIRECTS ? null : (room?.name || null);
const openSpaceOptions = (e) => {
e.preventDefault();
openReusableContextMenu(
'bottom',
getEventCords(e, '.drawer-header__btn'),
(closeMenu) => <SpaceOptions roomId={spaceId} afterOptionSelect={closeMenu} />,
);
};
return (
<Header>
{spaceName ? (
<button
className="drawer-header__btn"
onClick={() => openSpaceSettings(spaceId)}
onClick={openSpaceOptions}
type="button"
onMouseUp={(e) => blurOnBubbling(e, '.drawer-header__btn')}
>