Open space options on right click pinned space icon

Signed-off-by: Ajay Bura <ajbura@gmail.com>

diff --git a/src/app/molecules/sidebar-avatar/SidebarAvatar.jsx b/src/app/molecules/sidebar-avatar/SidebarAvatar.jsx
index e67b69fd9308c8c9aa79d6b965d7fb44eb3ea51b..39238a5ec5c9dffee1625be1e9fbe9c028617590 100644 (file)
--- a/src/app/molecules/sidebar-avatar/SidebarAvatar.jsx
+++ b/src/app/molecules/sidebar-avatar/SidebarAvatar.jsx
@@ -12,7 +12,8 @@ import { blurOnBubbling } from '../../atoms/button/script';
 
 const SidebarAvatar = React.forwardRef(({
   tooltip, text, bgColor, imageSrc,
-  iconSrc, active, onClick, isUnread, notificationCount, isAlert,
+  iconSrc, active, onClick, onContextMenu,
+  isUnread, notificationCount, isAlert,
 }, ref) => {
   let activeClass = '';
   if (active) activeClass = ' sidebar-avatar--active';
@@ -27,6 +28,7 @@ const SidebarAvatar = React.forwardRef(({
         type="button"
         onMouseUp={(e) => blurOnBubbling(e, '.sidebar-avatar')}
         onClick={onClick}
+        onContextMenu={onContextMenu}
       >
         <Avatar
           text={text}
@@ -52,6 +54,7 @@ SidebarAvatar.defaultProps = {
   imageSrc: null,
   active: false,
   onClick: null,
+  onContextMenu: null,
   isUnread: false,
   notificationCount: 0,
   isAlert: false,
@@ -65,6 +68,7 @@ SidebarAvatar.propTypes = {
   iconSrc: PropTypes.string,
   active: PropTypes.bool,
   onClick: PropTypes.func,
+  onContextMenu: PropTypes.func,
   isUnread: PropTypes.bool,
   notificationCount: PropTypes.oneOfType([
     PropTypes.string,

diff --git a/src/app/organisms/navigation/SideBar.jsx b/src/app/organisms/navigation/SideBar.jsx
index 8e630d79d8ea575cc922ca1ba848b5b3b99ca03b..c99929fd267f8e1e7acd9c9d588219ebb0569730 100644 (file)
--- a/src/app/organisms/navigation/SideBar.jsx
+++ b/src/app/organisms/navigation/SideBar.jsx
@@ -5,12 +5,14 @@ import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import colorMXID from '../../../util/colorMXID';
 import {
-  selectTab, openInviteList, openSearch, openSettings,
+  selectTab, openInviteList, openSearch,
+  openSettings, openReusableContextMenu,
 } from '../../../client/action/navigation';
-import { abbreviateNumber } from '../../../util/common';
+import { abbreviateNumber, getEventCords } from '../../../util/common';
 
 import ScrollView from '../../atoms/scroll/ScrollView';
 import SidebarAvatar from '../../molecules/sidebar-avatar/SidebarAvatar';
+import SpaceOptions from '../../molecules/space-options/SpaceOptions';
 
 import HomeIC from '../../../../public/res/ic/outlined/home.svg';
 import UserIC from '../../../../public/res/ic/outlined/user.svg';
@@ -96,6 +98,15 @@ function SideBar() {
     };
   }, []);
 
+  const openSpaceOptions = (e, spaceId) => {
+    e.preventDefault();
+    openReusableContextMenu(
+      'right',
+      getEventCords(e, '.sidebar-avatar'),
+      (closeMenu) => <SpaceOptions roomId={spaceId} afterOptionSelect={closeMenu} />,
+    );
+  };
+
   function getHomeNoti() {
     const orphans = roomList.getOrphans();
     let noti = null;
@@ -174,6 +185,7 @@ function SideBar() {
                       notificationCount={abbreviateNumber(notifications.getTotalNoti(sRoomId))}
                       isAlert={notifications.getHighlightNoti(sRoomId) !== 0}
                       onClick={() => selectTab(shortcut)}
+                      onContextMenu={(e) => openSpaceOptions(e, sRoomId)}
                     />
                   );
                 })