diff --git a/src/app/molecules/following-members/FollowingMembers.jsx b/src/app/molecules/following-members/FollowingMembers.jsx new file mode 100644 index 00000000..65296535 --- /dev/null +++ b/src/app/molecules/following-members/FollowingMembers.jsx @@ -0,0 +1,59 @@ +/* eslint-disable react/prop-types */ +import React, { useState, useEffect } from 'react'; +import PropTypes from 'prop-types'; +import './FollowingMembers.scss'; + +import initMatrix from '../../../client/initMatrix'; +import cons from '../../../client/state/cons'; +import { openReadReceipts } from '../../../client/action/navigation'; + +import Text from '../../atoms/text/Text'; +import RawIcon from '../../atoms/system-icons/RawIcon'; +import TickMarkIC from '../../../../public/res/ic/outlined/tick-mark.svg'; + +import { getUsersActionJsx } from '../../organisms/room/common'; + +function FollowingMembers({ roomTimeline }) { + const [followingMembers, setFollowingMembers] = useState([]); + const { roomId } = roomTimeline; + const mx = initMatrix.matrixClient; + const { roomsInput } = initMatrix; + const myUserId = mx.getUserId(); + + const handleOnMessageSent = () => setFollowingMembers([]); + + useEffect(() => { + const updateFollowingMembers = () => { + setFollowingMembers(roomTimeline.getLiveReaders()); + }; + updateFollowingMembers(); + roomTimeline.on(cons.events.roomTimeline.LIVE_RECEIPT, updateFollowingMembers); + roomsInput.on(cons.events.roomsInput.MESSAGE_SENT, handleOnMessageSent); + return () => { + roomTimeline.removeListener(cons.events.roomTimeline.LIVE_RECEIPT, updateFollowingMembers); + roomsInput.removeListener(cons.events.roomsInput.MESSAGE_SENT, handleOnMessageSent); + }; + }, [roomTimeline]); + + const filteredM = followingMembers.filter((userId) => userId !== myUserId); + + return filteredM.length !== 0 && ( + + ); +} + +FollowingMembers.propTypes = { + roomTimeline: PropTypes.shape({}).isRequired, +}; + +export default FollowingMembers; diff --git a/src/app/molecules/following-members/FollowingMembers.scss b/src/app/molecules/following-members/FollowingMembers.scss new file mode 100644 index 00000000..42885bf5 --- /dev/null +++ b/src/app/molecules/following-members/FollowingMembers.scss @@ -0,0 +1,32 @@ + +.following-members { + width: 100%; + padding: 0 var(--sp-normal); + display: flex; + justify-content: flex-end; + align-items: center; + cursor: pointer; + + & .ic-raw { + min-width: var(--ic-extra-small); + opacity: 0.4; + margin: 0 var(--sp-extra-tight); + } + & .text { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: var(--tc-surface-low); + b { + color: var(--tc-surface-normal); + } + } + + &:hover, + &:focus { + background-color: var(--bg-surface-hover); + } + &:active { + background-color: var(--bg-surface-active); + } +} \ No newline at end of file diff --git a/src/app/molecules/message/TimelineChange.jsx b/src/app/molecules/message/TimelineChange.jsx index 2ef28c11..5ad33d31 100644 --- a/src/app/molecules/message/TimelineChange.jsx +++ b/src/app/molecules/message/TimelineChange.jsx @@ -10,7 +10,6 @@ import LeaveArraowIC from '../../../../public/res/ic/outlined/leave-arrow.svg'; import InviteArraowIC from '../../../../public/res/ic/outlined/invite-arrow.svg'; import InviteCancelArraowIC from '../../../../public/res/ic/outlined/invite-cancel-arrow.svg'; import UserIC from '../../../../public/res/ic/outlined/user.svg'; -import TickMarkIC from '../../../../public/res/ic/outlined/tick-mark.svg'; function TimelineChange({ variant, content, time, onClick, @@ -33,9 +32,6 @@ function TimelineChange({ case 'avatar': iconSrc = UserIC; break; - case 'follow': - iconSrc = TickMarkIC; - break; default: iconSrc = JoinArraowIC; break; @@ -67,7 +63,6 @@ TimelineChange.propTypes = { variant: PropTypes.oneOf([ 'join', 'leave', 'invite', 'invite-cancel', 'avatar', 'other', - 'follow', ]), content: PropTypes.oneOfType([ PropTypes.string, diff --git a/src/app/organisms/room/RoomViewCmdBar.jsx b/src/app/organisms/room/RoomViewCmdBar.jsx index 34c07014..e4a3e634 100644 --- a/src/app/organisms/room/RoomViewCmdBar.jsx +++ b/src/app/organisms/room/RoomViewCmdBar.jsx @@ -6,31 +6,19 @@ import parse from 'html-react-parser'; import twemoji from 'twemoji'; import initMatrix from '../../../client/initMatrix'; -import cons from '../../../client/state/cons'; import { toggleMarkdown } from '../../../client/action/settings'; import * as roomActions from '../../../client/action/room'; import { - selectTab, - selectRoom, openCreateRoom, openPublicRooms, openInviteUser, - openReadReceipts, } from '../../../client/action/navigation'; import { emojis } from '../emoji-board/emoji'; import AsyncSearch from '../../../util/AsyncSearch'; import Text from '../../atoms/text/Text'; -import Button from '../../atoms/button/Button'; -import IconButton from '../../atoms/button/IconButton'; -import ContextMenu, { MenuHeader } from '../../atoms/context-menu/ContextMenu'; import ScrollView from '../../atoms/scroll/ScrollView'; -import SettingTile from '../../molecules/setting-tile/SettingTile'; -import TimelineChange from '../../molecules/message/TimelineChange'; - -import CmdIC from '../../../../public/res/ic/outlined/cmd.svg'; - -import { getUsersActionJsx } from './common'; +import FollowingMembers from '../../molecules/following-members/FollowingMembers'; const commands = [{ name: 'markdown', @@ -61,121 +49,6 @@ const commands = [{ exe: (roomId, searchTerm) => openInviteUser(roomId, searchTerm), }]; -function CmdHelp() { - return ( - - General command - /command_name - Go-to commands - {'>*space_name'} - {'>#room_name'} - {'>@people_name'} - Autofill commands - :emoji_name - @name - - )} - render={(toggleMenu) => ( - - )} - /> - ); -} - -function ViewCmd() { - function renderAllCmds() { - return commands.map((command) => ( - {command.description})} - /> - )); - } - return ( - - General commands - {renderAllCmds()} - - )} - render={(toggleMenu) => ( - - - - )} - /> - ); -} - -function FollowingMembers({ roomId, roomTimeline, viewEvent }) { - const [followingMembers, setFollowingMembers] = useState([]); - const mx = initMatrix.matrixClient; - const myUserId = mx.getUserId(); - - const handleOnMessageSent = () => setFollowingMembers([]); - - useEffect(() => { - const updateFollowingMembers = () => { - setFollowingMembers(roomTimeline.getLiveReaders()); - }; - updateFollowingMembers(); - roomTimeline.on(cons.events.roomTimeline.LIVE_RECEIPT, updateFollowingMembers); - viewEvent.on('message_sent', handleOnMessageSent); - return () => { - roomTimeline.removeListener(cons.events.roomTimeline.LIVE_RECEIPT, updateFollowingMembers); - viewEvent.removeListener('message_sent', handleOnMessageSent); - }; - }, [roomTimeline]); - - const filteredM = followingMembers.filter((userId) => userId !== myUserId); - return filteredM.length !== 0 && ( - openReadReceipts(roomId, followingMembers)} - /> - ); -} - -FollowingMembers.propTypes = { - roomId: PropTypes.string.isRequired, - roomTimeline: PropTypes.shape({}).isRequired, - viewEvent: PropTypes.shape({}).isRequired, -}; - -function getCmdActivationMessage(prefix) { - function genMessage(prime, secondary) { - return ( - <> - {prime} - {secondary} - - ); - } - const cmd = { - '/': () => genMessage('General command mode activated. ', 'Type command name for suggestions.'), - '>*': () => genMessage('Go-to command mode activated. ', 'Type space name for suggestions.'), - '>#': () => genMessage('Go-to command mode activated. ', 'Type room name for suggestions.'), - '>@': () => genMessage('Go-to command mode activated. ', 'Type people name for suggestions.'), - ':': () => genMessage('Emoji autofill command mode activated. ', 'Type emoji shortcut for suggestions.'), - '@': () => genMessage('Name autofill command mode activated. ', 'Type name for suggestions.'), - }; - return cmd[prefix]?.(); -} - function CmdItem({ onClick, children }) { return ( -
+
{ const cords = getEventCords(e);