michael/cinny
1
0
Fork 0
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity

Add search icon in room header

Browse source 
Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2022-01-16 18:18:33 +05:30
parent 48a701ef87
commit f3615117d8
4 changed files with 22 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/app/organisms/room/RoomSettings.jsx
View file

@ -131,10 +131,13 @@ function RoomSettings({ roomId }) {
useEffect(() => { useEffect(() => {
let mounted = true; let mounted = true;
const settingsToggle = (isVisible) => { const settingsToggle = (isVisible, tab) => {
if (!mounted) return; if (!mounted) return;
if (isVisible) forceUpdate(); if (isVisible) {
else setTimeout(() => forceUpdate(), 200); 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); navigation.on(cons.events.navigation.ROOM_SETTINGS_TOGGLED, settingsToggle);
return () => { return () => {
@ -176,4 +179,7 @@ RoomSettings.propTypes = {
roomId: PropTypes.string.isRequired, roomId: PropTypes.string.isRequired,
}; };
export default RoomSettings; export {
RoomSettings as default,
tabText,
};

7
src/app/organisms/room/RoomViewHeader.jsx
View file

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

4
src/client/action/navigation.js
View file

@ -23,10 +23,10 @@ export function selectRoom(roomId, eventId) {
}); });
} }
export function toggleRoomSettings(roomId) { export function toggleRoomSettings(tabText) {
appDispatcher.dispatch({ appDispatcher.dispatch({
type: cons.actions.navigation.TOGGLE_ROOM_SETTINGS, type: cons.actions.navigation.TOGGLE_ROOM_SETTINGS,
roomId, tabText,
}); });
} }

6
src/client/state/navigation.js
View file

@ -91,7 +91,11 @@ class Navigation extends EventEmitter {
}, },
[cons.actions.navigation.TOGGLE_ROOM_SETTINGS]: () => { [cons.actions.navigation.TOGGLE_ROOM_SETTINGS]: () => {
this.isRoomSettings = !this.isRoomSettings; 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]: () => { [cons.actions.navigation.OPEN_INVITE_LIST]: () => {
this.emit(cons.events.navigation.INVITE_LIST_OPENED); this.emit(cons.events.navigation.INVITE_LIST_OPENED);