Add search icon in room header

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

diff --git a/src/app/organisms/room/RoomSettings.jsx b/src/app/organisms/room/RoomSettings.jsx
index cfccd003b5946ebcc18d44da21330aa16854c7b4..d00f092d85b89070cf31e9b9b149d1b29ac3a5ee 100644 (file)
--- a/src/app/organisms/room/RoomSettings.jsx
+++ b/src/app/organisms/room/RoomSettings.jsx
@@ -131,10 +131,13 @@ function RoomSettings({ roomId }) {
 
   useEffect(() => {
     let mounted = true;
-    const settingsToggle = (isVisible) => {
+    const settingsToggle = (isVisible, tab) => {
       if (!mounted) return;
-      if (isVisible) forceUpdate();
-      else setTimeout(() => forceUpdate(), 200);
+      if (isVisible) {
+        const tabItem = tabItems.find((item) => item.text === tab);
+        if (tabItem) setSelectedTab(tabItem);
+        forceUpdate();
+      } else setTimeout(() => forceUpdate(), 200);
     };
     navigation.on(cons.events.navigation.ROOM_SETTINGS_TOGGLED, settingsToggle);
     return () => {
@@ -176,4 +179,7 @@ RoomSettings.propTypes = {
   roomId: PropTypes.string.isRequired,
 };
 
-export default RoomSettings;
+export {
+  RoomSettings as default,
+  tabText,
+};

diff --git a/src/app/organisms/room/RoomViewHeader.jsx b/src/app/organisms/room/RoomViewHeader.jsx
index 2f5e434148765148d69cedae667102eb257c6341..8fcb5ed6a1463ff53598fb2feba6da654499382c 100644 (file)
--- a/src/app/organisms/room/RoomViewHeader.jsx
+++ b/src/app/organisms/room/RoomViewHeader.jsx
@@ -13,6 +13,7 @@ import { togglePeopleDrawer } from '../../../client/action/settings';
 import colorMXID from '../../../util/colorMXID';
 import { getEventCords } from '../../../util/common';
 
+import { tabText } from './RoomSettings';
 import Text from '../../atoms/text/Text';
 import RawIcon from '../../atoms/system-icons/RawIcon';
 import IconButton from '../../atoms/button/IconButton';
@@ -20,8 +21,9 @@ import Header, { TitleWrapper } from '../../atoms/header/Header';
 import Avatar from '../../atoms/avatar/Avatar';
 import RoomOptions from '../../molecules/room-options/RoomOptions';
 
-import UserIC from '../../../../public/res/ic/outlined/user.svg';
 import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
+import SearchIC from '../../../../public/res/ic/outlined/search.svg';
+import UserIC from '../../../../public/res/ic/outlined/user.svg';
 import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
 
 import { useForceUpdate } from '../../hooks/useForceUpdate';
@@ -74,7 +76,7 @@ function RoomViewHeader({ roomId }) {
       <button
         ref={roomHeaderBtnRef}
         className="room-header__btn"
-        onClick={toggleRoomSettings}
+        onClick={() => toggleRoomSettings()}
         type="button"
         onMouseUp={(e) => blurOnBubbling(e, '.room-header__btn')}
       >
@@ -84,6 +86,7 @@ function RoomViewHeader({ roomId }) {
         </TitleWrapper>
         <RawIcon src={ChevronBottomIC} />
       </button>
+      <IconButton onClick={() => toggleRoomSettings(tabText.SEARCH)} tooltip="People" src={SearchIC} />
       <IconButton onClick={togglePeopleDrawer} tooltip="People" src={UserIC} />
       <IconButton
         onClick={openRoomOptions}

diff --git a/src/client/action/navigation.js b/src/client/action/navigation.js
index 28aa0477d3b87a3cf3af4742260eea7ea8aebb90..d62ef1e3c2a3ad7ce3c771f38ab4a44edf14e88e 100644 (file)
--- a/src/client/action/navigation.js
+++ b/src/client/action/navigation.js
@@ -23,10 +23,10 @@ export function selectRoom(roomId, eventId) {
   });
 }
 
-export function toggleRoomSettings(roomId) {
+export function toggleRoomSettings(tabText) {
   appDispatcher.dispatch({
     type: cons.actions.navigation.TOGGLE_ROOM_SETTINGS,
-    roomId,
+    tabText,
   });
 }
 

diff --git a/src/client/state/navigation.js b/src/client/state/navigation.js
index 26ffca3fce1511ddb904d04ae2d7f4d7d6056912..fc9d41a7924f963a33067f6da9e9729286c26d10 100644 (file)
--- a/src/client/state/navigation.js
+++ b/src/client/state/navigation.js
@@ -91,7 +91,11 @@ class Navigation extends EventEmitter {
       },
       [cons.actions.navigation.TOGGLE_ROOM_SETTINGS]: () => {
         this.isRoomSettings = !this.isRoomSettings;
-        this.emit(cons.events.navigation.ROOM_SETTINGS_TOGGLED, this.isRoomSettings);
+        this.emit(
+          cons.events.navigation.ROOM_SETTINGS_TOGGLED,
+          this.isRoomSettings,
+          action.tabText,
+        );
       },
       [cons.actions.navigation.OPEN_INVITE_LIST]: () => {
         this.emit(cons.events.navigation.INVITE_LIST_OPENED);