Added options to control room notifications (#25)

src/app/organisms/room/RoomViewContent.jsx

@@ -10,7 +10,7 @@ import cons from '../../../client/state/cons';
 import { redactEvent, sendReaction } from '../../../client/action/roomTimeline';
 import { getUsername, getUsernameOfRoomMember, doesRoomHaveUnread } from '../../../util/matrixUtil';
 import colorMXID from '../../../util/colorMXID';
-import { diffMinutes, isNotInSameDay } from '../../../util/common';
+import { diffMinutes, isNotInSameDay, getEventCords } from '../../../util/common';
 import { openEmojiBoard, openReadReceipts } from '../../../client/action/navigation';
 
 import Divider from '../../atoms/divider/Divider';
@@ -176,12 +176,7 @@ function toggleEmoji(roomId, eventId, emojiKey, roomTimeline) {
 }
 
 function pickEmoji(e, roomId, eventId, roomTimeline) {
-  const boxInfo = e.target.getBoundingClientRect();
-  openEmojiBoard({
-    x: boxInfo.x,
-    y: boxInfo.y,
-    detail: e.detail,
-  }, (emoji) => {
+  openEmojiBoard(getEventCords(e), (emoji) => {
     toggleEmoji(roomId, eventId, emoji.unicode, roomTimeline);
     e.target.click();
   });

src/app/organisms/room/RoomViewHeader.jsx

@@ -2,20 +2,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import initMatrix from '../../../client/initMatrix';
-import { togglePeopleDrawer, openInviteUser } from '../../../client/action/navigation';
-import * as roomActions from '../../../client/action/room';
+import { togglePeopleDrawer, openRoomOptions } from '../../../client/action/navigation';
 import colorMXID from '../../../util/colorMXID';
+import { getEventCords } from '../../../util/common';
 
 import Text from '../../atoms/text/Text';
 import IconButton from '../../atoms/button/IconButton';
 import Header, { TitleWrapper } from '../../atoms/header/Header';
 import Avatar from '../../atoms/avatar/Avatar';
-import ContextMenu, { MenuItem, MenuHeader } from '../../atoms/context-menu/ContextMenu';
 
 import UserIC from '../../../../public/res/ic/outlined/user.svg';
 import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
-import LeaveArrowIC from '../../../../public/res/ic/outlined/leave-arrow.svg';
-import AddUserIC from '../../../../public/res/ic/outlined/add-user.svg';
 
 function RoomViewHeader({ roomId }) {
   const mx = initMatrix.matrixClient;
@@ -33,24 +30,10 @@ function RoomViewHeader({ roomId }) {
         { typeof roomTopic !== 'undefined' && <p title={roomTopic} className="text text-b3">{roomTopic}</p>}
       </TitleWrapper>
       <IconButton onClick={togglePeopleDrawer} tooltip="People" src={UserIC} />
-      <ContextMenu
-        placement="bottom"
-        content={(toogleMenu) => (
-          <>
-            <MenuHeader>Options</MenuHeader>
-            {/* <MenuBorder /> */}
-            <MenuItem
-              iconSrc={AddUserIC}
-              onClick={() => {
-                openInviteUser(roomId); toogleMenu();
-              }}
-            >
-              Invite
-            </MenuItem>
-            <MenuItem iconSrc={LeaveArrowIC} variant="danger" onClick={() => roomActions.leave(roomId)}>Leave</MenuItem>
-          </>
-        )}
-        render={(toggleMenu) => <IconButton onClick={toggleMenu} tooltip="Options" src={VerticalMenuIC} />}
+      <IconButton
+        onClick={(e) => openRoomOptions(getEventCords(e), roomId)}
+        tooltip="Options"
+        src={VerticalMenuIC}
       />
     </Header>
   );

src/app/organisms/room/RoomViewInput.jsx

@@ -9,7 +9,7 @@ import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import settings from '../../../client/state/settings';
 import { openEmojiBoard } from '../../../client/action/navigation';
-import { bytesToSize } from '../../../util/common';
+import { bytesToSize, getEventCords } from '../../../util/common';
 import { getUsername } from '../../../util/matrixUtil';
 import colorMXID from '../../../util/colorMXID';
 
@@ -327,12 +327,10 @@ function RoomViewInput({
         <div ref={rightOptionsRef} className="room-input__option-container">
           <IconButton
             onClick={(e) => {
-              const boxInfo = e.target.getBoundingClientRect();
-              openEmojiBoard({
-                x: boxInfo.x + (document.dir === 'rtl' ? -80 : 80),
-                y: boxInfo.y - 250,
-                detail: e.detail,
-              }, addEmoji);
+              const cords = getEventCords(e);
+              cords.x += (document.dir === 'rtl' ? -80 : 80);
+              cords.y -= 250;
+              openEmojiBoard(cords, addEmoji);
             }}
             tooltip="Emoji"
             src={EmojiIC}