Added options to control room notifications (#25)

src/app/organisms/navigation/Selector.jsx

@@ -5,7 +5,9 @@ import PropTypes from 'prop-types';
 import initMatrix from '../../../client/initMatrix';
 import { doesRoomHaveUnread } from '../../../util/matrixUtil';
 import navigation from '../../../client/state/navigation';
+import { openRoomOptions } from '../../../client/action/navigation';
 import { createSpaceShortcut, deleteSpaceShortcut } from '../../../client/action/room';
+import { getEventCords } from '../../../util/common';
 
 import IconButton from '../../atoms/button/IconButton';
 import RoomSelector from '../../molecules/room-selector/RoomSelector';
@@ -16,6 +18,7 @@ import SpaceIC from '../../../../public/res/ic/outlined/space.svg';
 import SpaceLockIC from '../../../../public/res/ic/outlined/space-lock.svg';
 import StarIC from '../../../../public/res/ic/outlined/star.svg';
 import FilledStarIC from '../../../../public/res/ic/filled/star.svg';
+import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
 
 function Selector({
   roomId, isDM, drawerPostie, onClick,
@@ -44,43 +47,56 @@ function Selector({
     };
   }, []);
 
+  if (room.isSpaceRoom()) {
+    return (
+      <RoomSelector
+        key={roomId}
+        name={room.name}
+        roomId={roomId}
+        iconSrc={room.getJoinRule() === 'invite' ? SpaceLockIC : SpaceIC}
+        isUnread={doesRoomHaveUnread(room)}
+        notificationCount={room.getUnreadNotificationCount('total') || 0}
+        isAlert={room.getUnreadNotificationCount('highlight') !== 0}
+        onClick={onClick}
+        options={(
+          <IconButton
+            size="extra-small"
+            variant={initMatrix.roomList.spaceShortcut.has(roomId) ? 'positive' : 'surface'}
+            tooltip={initMatrix.roomList.spaceShortcut.has(roomId) ? 'Remove favourite' : 'Favourite'}
+            tooltipPlacement="right"
+            src={initMatrix.roomList.spaceShortcut.has(roomId) ? FilledStarIC : StarIC}
+            onClick={() => {
+              if (initMatrix.roomList.spaceShortcut.has(roomId)) deleteSpaceShortcut(roomId);
+              else createSpaceShortcut(roomId);
+              forceUpdate({});
+            }}
+          />
+        )}
+      />
+    );
+  }
+
   return (
     <RoomSelector
       key={roomId}
       name={room.name}
       roomId={roomId}
       imageSrc={isDM ? imageSrc : null}
-      iconSrc={
+      // eslint-disable-next-line no-nested-ternary
-        isDM
+      iconSrc={isDM ? null : room.getJoinRule() === 'invite' ? HashLockIC : HashIC}
-          ? null
-          : (() => {
-            if (room.isSpaceRoom()) {
-              return (room.getJoinRule() === 'invite' ? SpaceLockIC : SpaceIC);
-            }
-            return (room.getJoinRule() === 'invite' ? HashLockIC : HashIC);
-          })()
-      }
       isSelected={isSelected}
       isUnread={doesRoomHaveUnread(room)}
       notificationCount={room.getUnreadNotificationCount('total') || 0}
       isAlert={room.getUnreadNotificationCount('highlight') !== 0}
       onClick={onClick}
       options={(
-        !room.isSpaceRoom()
+        <IconButton
-          ? null
+          size="extra-small"
-          : (
+          tooltip="Options"
-            <IconButton
+          tooltipPlacement="right"
-              size="extra-small"
+          src={VerticalMenuIC}
-              variant={initMatrix.roomList.spaceShortcut.has(roomId) ? 'positive' : 'surface'}
+          onClick={(e) => openRoomOptions(getEventCords(e), roomId)}
-              tooltip={initMatrix.roomList.spaceShortcut.has(roomId) ? 'Remove favourite' : 'Favourite'}
+        />
-              src={initMatrix.roomList.spaceShortcut.has(roomId) ? FilledStarIC : StarIC}
-              onClick={() => {
-                if (initMatrix.roomList.spaceShortcut.has(roomId)) deleteSpaceShortcut(roomId);
-                else createSpaceShortcut(roomId);
-                forceUpdate({});
-              }}
-            />
-          )
       )}
     />
   );

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(getEventCords(e), (emoji) => {
-  openEmojiBoard({
-    x: boxInfo.x,
-    y: boxInfo.y,
-    detail: e.detail,
-  }, (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 { togglePeopleDrawer, openRoomOptions } from '../../../client/action/navigation';
-import * as roomActions from '../../../client/action/room';
 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
+      <IconButton
-        placement="bottom"
+        onClick={(e) => openRoomOptions(getEventCords(e), roomId)}
-        content={(toogleMenu) => (
+        tooltip="Options"
-          <>
+        src={VerticalMenuIC}
-            <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} />}
       />
     </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();
+              const cords = getEventCords(e);
-              openEmojiBoard({
+              cords.x += (document.dir === 'rtl' ? -80 : 80);
-                x: boxInfo.x + (document.dir === 'rtl' ? -80 : 80),
+              cords.y -= 250;
-                y: boxInfo.y - 250,
+              openEmojiBoard(cords, addEmoji);
-                detail: e.detail,
-              }, addEmoji);
             }}
             tooltip="Emoji"
             src={EmojiIC}

src/app/templates/client/Client.jsx

@@ -8,6 +8,7 @@ import Room from '../../organisms/room/Room';
 import Windows from '../../organisms/pw/Windows';
 import Dialogs from '../../organisms/pw/Dialogs';
 import EmojiBoardOpener from '../../organisms/emoji-board/EmojiBoardOpener';
+import RoomOptions from '../../organisms/room-optons/RoomOptions';
 
 import initMatrix from '../../../client/initMatrix';
 
@@ -44,6 +45,7 @@ function Client() {
       <Windows />
       <Dialogs />
       <EmojiBoardOpener />
+      <RoomOptions />
     </div>
   );
 }