Added options to control room notifications (#25)

This commit is contained in:
unknown 2021-09-09 18:36:39 +05:30
parent 80551124f1
commit 8bf5a6e0bc
5 changed files with 56 additions and 62 deletions

View file

@ -5,7 +5,9 @@ import PropTypes from 'prop-types';
import initMatrix from '../../../client/initMatrix'; import initMatrix from '../../../client/initMatrix';
import { doesRoomHaveUnread } from '../../../util/matrixUtil'; import { doesRoomHaveUnread } from '../../../util/matrixUtil';
import navigation from '../../../client/state/navigation'; import navigation from '../../../client/state/navigation';
import { openRoomOptions } from '../../../client/action/navigation';
import { createSpaceShortcut, deleteSpaceShortcut } from '../../../client/action/room'; import { createSpaceShortcut, deleteSpaceShortcut } from '../../../client/action/room';
import { getEventCords } from '../../../util/common';
import IconButton from '../../atoms/button/IconButton'; import IconButton from '../../atoms/button/IconButton';
import RoomSelector from '../../molecules/room-selector/RoomSelector'; 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 SpaceLockIC from '../../../../public/res/ic/outlined/space-lock.svg';
import StarIC from '../../../../public/res/ic/outlined/star.svg'; import StarIC from '../../../../public/res/ic/outlined/star.svg';
import FilledStarIC from '../../../../public/res/ic/filled/star.svg'; import FilledStarIC from '../../../../public/res/ic/filled/star.svg';
import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
function Selector({ function Selector({
roomId, isDM, drawerPostie, onClick, 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 ( return (
<RoomSelector <RoomSelector
key={roomId} key={roomId}
name={room.name} name={room.name}
roomId={roomId} roomId={roomId}
imageSrc={isDM ? imageSrc : null} 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} isSelected={isSelected}
isUnread={doesRoomHaveUnread(room)} isUnread={doesRoomHaveUnread(room)}
notificationCount={room.getUnreadNotificationCount('total') || 0} notificationCount={room.getUnreadNotificationCount('total') || 0}
isAlert={room.getUnreadNotificationCount('highlight') !== 0} isAlert={room.getUnreadNotificationCount('highlight') !== 0}
onClick={onClick} onClick={onClick}
options={( 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({});
}}
/>
)
)} )}
/> />
); );

View file

@ -10,7 +10,7 @@ import cons from '../../../client/state/cons';
import { redactEvent, sendReaction } from '../../../client/action/roomTimeline'; import { redactEvent, sendReaction } from '../../../client/action/roomTimeline';
import { getUsername, getUsernameOfRoomMember, doesRoomHaveUnread } from '../../../util/matrixUtil'; import { getUsername, getUsernameOfRoomMember, doesRoomHaveUnread } from '../../../util/matrixUtil';
import colorMXID from '../../../util/colorMXID'; 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 { openEmojiBoard, openReadReceipts } from '../../../client/action/navigation';
import Divider from '../../atoms/divider/Divider'; import Divider from '../../atoms/divider/Divider';
@ -176,12 +176,7 @@ function toggleEmoji(roomId, eventId, emojiKey, roomTimeline) {
} }
function pickEmoji(e, roomId, eventId, 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); toggleEmoji(roomId, eventId, emoji.unicode, roomTimeline);
e.target.click(); e.target.click();
}); });

View file

@ -2,20 +2,17 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import initMatrix from '../../../client/initMatrix'; 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 colorMXID from '../../../util/colorMXID';
import { getEventCords } from '../../../util/common';
import Text from '../../atoms/text/Text'; import Text from '../../atoms/text/Text';
import IconButton from '../../atoms/button/IconButton'; import IconButton from '../../atoms/button/IconButton';
import Header, { TitleWrapper } from '../../atoms/header/Header'; import Header, { TitleWrapper } from '../../atoms/header/Header';
import Avatar from '../../atoms/avatar/Avatar'; 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 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 LeaveArrowIC from '../../../../public/res/ic/outlined/leave-arrow.svg';
import AddUserIC from '../../../../public/res/ic/outlined/add-user.svg';
function RoomViewHeader({ roomId }) { function RoomViewHeader({ roomId }) {
const mx = initMatrix.matrixClient; const mx = initMatrix.matrixClient;
@ -33,24 +30,10 @@ function RoomViewHeader({ roomId }) {
{ typeof roomTopic !== 'undefined' && <p title={roomTopic} className="text text-b3">{roomTopic}</p>} { typeof roomTopic !== 'undefined' && <p title={roomTopic} className="text text-b3">{roomTopic}</p>}
</TitleWrapper> </TitleWrapper>
<IconButton onClick={togglePeopleDrawer} tooltip="People" src={UserIC} /> <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> </Header>
); );

View file

@ -9,7 +9,7 @@ import initMatrix from '../../../client/initMatrix';
import cons from '../../../client/state/cons'; import cons from '../../../client/state/cons';
import settings from '../../../client/state/settings'; import settings from '../../../client/state/settings';
import { openEmojiBoard } from '../../../client/action/navigation'; import { openEmojiBoard } from '../../../client/action/navigation';
import { bytesToSize } from '../../../util/common'; import { bytesToSize, getEventCords } from '../../../util/common';
import { getUsername } from '../../../util/matrixUtil'; import { getUsername } from '../../../util/matrixUtil';
import colorMXID from '../../../util/colorMXID'; import colorMXID from '../../../util/colorMXID';
@ -327,12 +327,10 @@ function RoomViewInput({
<div ref={rightOptionsRef} className="room-input__option-container"> <div ref={rightOptionsRef} className="room-input__option-container">
<IconButton <IconButton
onClick={(e) => { 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" tooltip="Emoji"
src={EmojiIC} src={EmojiIC}

View file

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