diff --git a/src/app/molecules/channel-intro/ChannelIntro.jsx b/src/app/molecules/room-intro/RoomIntro.jsx similarity index 64% rename from src/app/molecules/channel-intro/ChannelIntro.jsx rename to src/app/molecules/room-intro/RoomIntro.jsx index 362dc14..df5618d 100644 --- a/src/app/molecules/channel-intro/ChannelIntro.jsx +++ b/src/app/molecules/room-intro/RoomIntro.jsx @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import './ChannelIntro.scss'; +import './RoomIntro.scss'; import Linkify from 'linkifyjs/react'; import colorMXID from '../../../util/colorMXID'; @@ -12,27 +12,27 @@ function linkifyContent(content) { return {content}; } -function ChannelIntro({ +function RoomIntro({ roomId, avatarSrc, name, heading, desc, time, }) { return ( -
+
-
- {heading} - {linkifyContent(desc)} - { time !== null && {time}} +
+ {heading} + {linkifyContent(desc)} + { time !== null && {time}}
); } -ChannelIntro.defaultProps = { +RoomIntro.defaultProps = { avatarSrc: false, time: null, }; -ChannelIntro.propTypes = { +RoomIntro.propTypes = { roomId: PropTypes.string.isRequired, avatarSrc: PropTypes.oneOfType([ PropTypes.string, @@ -44,4 +44,4 @@ ChannelIntro.propTypes = { time: PropTypes.string, }; -export default ChannelIntro; +export default RoomIntro; diff --git a/src/app/molecules/channel-intro/ChannelIntro.scss b/src/app/molecules/room-intro/RoomIntro.scss similarity index 93% rename from src/app/molecules/channel-intro/ChannelIntro.scss rename to src/app/molecules/room-intro/RoomIntro.scss index 35186af..8e923f3 100644 --- a/src/app/molecules/channel-intro/ChannelIntro.scss +++ b/src/app/molecules/room-intro/RoomIntro.scss @@ -1,4 +1,4 @@ -.channel-intro { +.room-intro { margin-top: calc(2 * var(--sp-extra-loose)); margin-bottom: var(--sp-extra-loose); padding-left: calc(var(--sp-normal) + var(--av-small) + var(--sp-tight)); @@ -11,7 +11,7 @@ } } - .channel-intro__content { + .room-intro__content { margin-top: var(--sp-extra-loose); max-width: 640px; } diff --git a/src/app/molecules/channel-selector/ChannelSelector.jsx b/src/app/molecules/room-selector/RoomSelector.jsx similarity index 76% rename from src/app/molecules/channel-selector/ChannelSelector.jsx rename to src/app/molecules/room-selector/RoomSelector.jsx index 076b5fe..01e2ffc 100644 --- a/src/app/molecules/channel-selector/ChannelSelector.jsx +++ b/src/app/molecules/room-selector/RoomSelector.jsx @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import './ChannelSelector.scss'; +import './RoomSelector.scss'; import colorMXID from '../../../util/colorMXID'; @@ -9,40 +9,40 @@ import Avatar from '../../atoms/avatar/Avatar'; import NotificationBadge from '../../atoms/badge/NotificationBadge'; import { blurOnBubbling } from '../../atoms/button/script'; -function ChannelSelectorWrapper({ +function RoomSelectorWrapper({ isSelected, onClick, content, options, }) { return ( -
+
-
{options}
+
{options}
); } -ChannelSelectorWrapper.defaultProps = { +RoomSelectorWrapper.defaultProps = { options: null, }; -ChannelSelectorWrapper.propTypes = { +RoomSelectorWrapper.propTypes = { isSelected: PropTypes.bool.isRequired, onClick: PropTypes.func.isRequired, content: PropTypes.node.isRequired, options: PropTypes.node, }; -function ChannelSelector({ +function RoomSelector({ name, roomId, imageSrc, iconSrc, isSelected, isUnread, notificationCount, isAlert, options, onClick, }) { return ( - @@ -67,12 +67,12 @@ function ChannelSelector({ /> ); } -ChannelSelector.defaultProps = { +RoomSelector.defaultProps = { imageSrc: null, iconSrc: null, options: null, }; -ChannelSelector.propTypes = { +RoomSelector.propTypes = { name: PropTypes.string.isRequired, roomId: PropTypes.string.isRequired, imageSrc: PropTypes.string, @@ -85,4 +85,4 @@ ChannelSelector.propTypes = { onClick: PropTypes.func.isRequired, }; -export default ChannelSelector; +export default RoomSelector; diff --git a/src/app/molecules/channel-selector/ChannelSelector.scss b/src/app/molecules/room-selector/RoomSelector.scss similarity index 77% rename from src/app/molecules/channel-selector/ChannelSelector.scss rename to src/app/molecules/room-selector/RoomSelector.scss index 31385f3..61e2cbc 100644 --- a/src/app/molecules/channel-selector/ChannelSelector.scss +++ b/src/app/molecules/room-selector/RoomSelector.scss @@ -1,15 +1,15 @@ -.channel-selector-flex { +.room-selector-flex { display: flex; align-items: center; } -.channel-selector-flexItem { +.room-selector-flexItem { flex: 1; min-width: 0; min-height: 0; } -.channel-selector { - @extend .channel-selector-flex; +.room-selector { + @extend .room-selector-flex; border: 1px solid transparent; border-radius: var(--bo-radius); @@ -19,7 +19,7 @@ background-color: var(--bg-surface); border-color: var(--bg-surface-border); - & .channel-selector__options { + & .room-selector__options { display: flex; } } @@ -27,7 +27,7 @@ @media (hover: hover) { &:hover { background-color: var(--bg-surface-hover); - & .channel-selector__options { + & .room-selector__options { display: flex; } } @@ -46,9 +46,9 @@ } } -.channel-selector__content { - @extend .channel-selector-flexItem; - @extend .channel-selector-flex; +.room-selector__content { + @extend .room-selector-flexItem; + @extend .room-selector-flex; padding: 0 var(--sp-extra-tight); min-height: 40px; cursor: inherit; @@ -58,7 +58,7 @@ } & > .text { - @extend .channel-selector-flexItem; + @extend .room-selector-flexItem; margin: 0 var(--sp-extra-tight); color: var(--tc-surface-normal); @@ -67,8 +67,8 @@ text-overflow: ellipsis; } } -.channel-selector__options { - @extend .channel-selector-flex; +.room-selector__options { + @extend .room-selector-flex; display: none; margin-right: var(--sp-ultra-tight); diff --git a/src/app/molecules/channel-tile/ChannelTile.jsx b/src/app/molecules/room-tile/RoomTile.jsx similarity index 78% rename from src/app/molecules/channel-tile/ChannelTile.jsx rename to src/app/molecules/room-tile/RoomTile.jsx index dfb384d..a9a680d 100644 --- a/src/app/molecules/channel-tile/ChannelTile.jsx +++ b/src/app/molecules/room-tile/RoomTile.jsx @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import './ChannelTile.scss'; +import './RoomTile.scss'; import Linkify from 'linkifyjs/react'; import colorMXID from '../../../util/colorMXID'; @@ -12,20 +12,20 @@ function linkifyContent(content) { return {content}; } -function ChannelTile({ +function RoomTile({ avatarSrc, name, id, inviterName, memberCount, desc, options, }) { return ( -
-
+
+
-
+
{name} { @@ -36,12 +36,12 @@ function ChannelTile({ { desc !== null && (typeof desc === 'string') - ? {linkifyContent(desc)} + ? {linkifyContent(desc)} : desc }
{ options !== null && ( -
+
{options}
)} @@ -49,14 +49,14 @@ function ChannelTile({ ); } -ChannelTile.defaultProps = { +RoomTile.defaultProps = { avatarSrc: null, inviterName: null, options: null, desc: null, memberCount: null, }; -ChannelTile.propTypes = { +RoomTile.propTypes = { avatarSrc: PropTypes.string, name: PropTypes.string.isRequired, id: PropTypes.string.isRequired, @@ -69,4 +69,4 @@ ChannelTile.propTypes = { options: PropTypes.node, }; -export default ChannelTile; +export default RoomTile; diff --git a/src/app/molecules/channel-tile/ChannelTile.scss b/src/app/molecules/room-tile/RoomTile.scss similarity index 94% rename from src/app/molecules/channel-tile/ChannelTile.scss rename to src/app/molecules/room-tile/RoomTile.scss index ce20195..bbed710 100644 --- a/src/app/molecules/channel-tile/ChannelTile.scss +++ b/src/app/molecules/room-tile/RoomTile.scss @@ -1,4 +1,4 @@ -.channel-tile { +.room-tile { display: flex; &__content { diff --git a/src/app/organisms/create-channel/CreateChannel.jsx b/src/app/organisms/create-room/CreateRoom.jsx similarity index 81% rename from src/app/organisms/create-channel/CreateChannel.jsx rename to src/app/organisms/create-room/CreateRoom.jsx index c44b536..d94c4b1 100644 --- a/src/app/organisms/create-channel/CreateChannel.jsx +++ b/src/app/organisms/create-room/CreateRoom.jsx @@ -1,6 +1,6 @@ import React, { useState, useRef } from 'react'; import PropTypes from 'prop-types'; -import './CreateChannel.scss'; +import './CreateRoom.scss'; import initMatrix from '../../../client/initMatrix'; import { isRoomAliasAvailable } from '../../../util/matrixUtil'; @@ -18,7 +18,7 @@ import SettingTile from '../../molecules/setting-tile/SettingTile'; import HashPlusIC from '../../../../public/res/ic/outlined/hash-plus.svg'; import CrossIC from '../../../../public/res/ic/outlined/cross.svg'; -function CreateChannel({ isOpen, onRequestClose }) { +function CreateRoom({ isOpen, onRequestClose }) { const [isPublic, togglePublic] = useState(false); const [isEncrypted, toggleEncrypted] = useState(true); const [isValidAddress, updateIsValidAddress] = useState(null); @@ -69,10 +69,10 @@ function CreateChannel({ isOpen, onRequestClose }) { onRequestClose(); } catch (e) { if (e.message === 'M_UNKNOWN: Invalid characters in room alias') { - updateCreatingError('ERROR: Invalid characters in channel address'); + updateCreatingError('ERROR: Invalid characters in room address'); updateIsValidAddress(false); } else if (e.message === 'M_ROOM_IN_USE: Room alias already taken') { - updateCreatingError('ERROR: Channel address is already in use'); + updateCreatingError('ERROR: Room address is already in use'); updateIsValidAddress(false); } else updateCreatingError(e.message); } @@ -110,26 +110,26 @@ function CreateChannel({ isOpen, onRequestClose }) { return ( } onRequestClose={onRequestClose} > -
-
{ e.preventDefault(); createRoom(); }}> +
+ { e.preventDefault(); createRoom(); }}> } - content={Public channel can be joined by anyone.} + content={Public room can be joined by anyone.} /> {isPublic && (
- Channel address -
+ Room address +
# {hsString}
- {isValidAddress === false && {`#${addressValue}${hsString} is already in use`}} + {isValidAddress === false && {`#${addressValue}${hsString} is already in use`}}
)} {!isPublic && ( @@ -140,26 +140,26 @@ function CreateChannel({ isOpen, onRequestClose }) { /> )} -
- +
+
{isCreatingRoom && ( -
+
- Creating channel... + Creating room...
)} - {typeof creatingError === 'string' && {creatingError}} + {typeof creatingError === 'string' && {creatingError}}
); } -CreateChannel.propTypes = { +CreateRoom.propTypes = { isOpen: PropTypes.bool.isRequired, onRequestClose: PropTypes.func.isRequired, }; -export default CreateChannel; +export default CreateRoom; diff --git a/src/app/organisms/create-channel/CreateChannel.scss b/src/app/organisms/create-room/CreateRoom.scss similarity index 99% rename from src/app/organisms/create-channel/CreateChannel.scss rename to src/app/organisms/create-room/CreateRoom.scss index 6d59f65..c587fa2 100644 --- a/src/app/organisms/create-channel/CreateChannel.scss +++ b/src/app/organisms/create-room/CreateRoom.scss @@ -1,4 +1,4 @@ -.create-channel { +.create-room { margin: 0 var(--sp-normal); margin-right: var(--sp-extra-tight); diff --git a/src/app/organisms/invite-list/InviteList.jsx b/src/app/organisms/invite-list/InviteList.jsx index 297478e..2fee050 100644 --- a/src/app/organisms/invite-list/InviteList.jsx +++ b/src/app/organisms/invite-list/InviteList.jsx @@ -11,7 +11,7 @@ import Button from '../../atoms/button/Button'; import IconButton from '../../atoms/button/IconButton'; import Spinner from '../../atoms/spinner/Spinner'; import PopupWindow from '../../molecules/popup-window/PopupWindow'; -import ChannelTile from '../../molecules/channel-tile/ChannelTile'; +import RoomTile from '../../molecules/room-tile/RoomTile'; import CrossIC from '../../../../public/res/ic/outlined/cross.svg'; @@ -47,13 +47,13 @@ function InviteList({ isOpen, onRequestClose }) { }; }, [procInvite]); - function renderChannelTile(roomId) { + function renderRoomTile(roomId) { const myRoom = initMatrix.matrixClient.getRoom(roomId); const roomName = myRoom.name; let roomAlias = myRoom.getCanonicalAlias(); if (roomAlias === null) roomAlias = myRoom.roomId; return ( - Spaces
)} - { Array.from(initMatrix.roomList.inviteSpaces).map(renderChannelTile) } + { Array.from(initMatrix.roomList.inviteSpaces).map(renderRoomTile) } { initMatrix.roomList.inviteRooms.size !== 0 && (
- Channels + Rooms
)} - { Array.from(initMatrix.roomList.inviteRooms).map(renderChannelTile) } + { Array.from(initMatrix.roomList.inviteRooms).map(renderRoomTile) }
); diff --git a/src/app/organisms/invite-list/InviteList.scss b/src/app/organisms/invite-list/InviteList.scss index bdb78c4..70e82c7 100644 --- a/src/app/organisms/invite-list/InviteList.scss +++ b/src/app/organisms/invite-list/InviteList.scss @@ -14,7 +14,7 @@ } } - & .channel-tile { + & .room-tile { margin-top: var(--sp-normal); &__options { align-self: flex-end; diff --git a/src/app/organisms/invite-user/InviteUser.jsx b/src/app/organisms/invite-user/InviteUser.jsx index cac9060..a6ff242 100644 --- a/src/app/organisms/invite-user/InviteUser.jsx +++ b/src/app/organisms/invite-user/InviteUser.jsx @@ -13,7 +13,7 @@ import IconButton from '../../atoms/button/IconButton'; import Spinner from '../../atoms/spinner/Spinner'; import Input from '../../atoms/input/Input'; import PopupWindow from '../../molecules/popup-window/PopupWindow'; -import ChannelTile from '../../molecules/channel-tile/ChannelTile'; +import RoomTile from '../../molecules/room-tile/RoomTile'; import CrossIC from '../../../../public/res/ic/outlined/cross.svg'; import UserIC from '../../../../public/res/ic/outlined/user.svg'; @@ -188,7 +188,7 @@ function InviteUser({ const userId = user.user_id; const name = typeof user.display_name === 'string' ? user.display_name : userId; return ( -
-
+
-
+
{ activeTab === 'home' ? diff --git a/src/app/organisms/navigation/Drawer.scss b/src/app/organisms/navigation/Drawer.scss index 4b12bce..e5d3f71 100644 --- a/src/app/organisms/navigation/Drawer.scss +++ b/src/app/organisms/navigation/Drawer.scss @@ -28,14 +28,14 @@ display: none; height: var(--header-height); } -.channels__wrapper { +.rooms__wrapper { @extend .drawer-flexItem; } -.channels-container { +.rooms-container { padding-bottom: var(--sp-extra-loose); - & > .channel-selector { + & > .room-selector { width: calc(100% - var(--sp-extra-tight)); margin-left: auto; @@ -46,7 +46,7 @@ } - & > .channel-selector:first-child { + & > .room-selector:first-child { margin-top: var(--sp-extra-tight); } diff --git a/src/app/organisms/navigation/DrawerHeader.jsx b/src/app/organisms/navigation/DrawerHeader.jsx index c86b09b..8915536 100644 --- a/src/app/organisms/navigation/DrawerHeader.jsx +++ b/src/app/organisms/navigation/DrawerHeader.jsx @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { - openPublicChannels, openCreateChannel, openInviteUser, + openPublicRooms, openCreateRoom, openInviteUser, } from '../../../client/action/navigation'; import Text from '../../atoms/text/Text'; @@ -26,22 +26,22 @@ function DrawerHeader({ activeTab }) { ( <> - Add channel + Add room { hideMenu(); openCreateChannel(); }} + onClick={() => { hideMenu(); openCreateRoom(); }} > - Create new channel + Create new room { hideMenu(); openPublicChannels(); }} + onClick={() => { hideMenu(); openPublicRooms(); }} > - Add Public channel + Add public room )} - render={(toggleMenu) => ()} + render={(toggleMenu) => ()} /> )} {/* ''} tooltip="Menu" src={VerticalMenuIC} size="normal" /> */} diff --git a/src/app/organisms/navigation/Home.jsx b/src/app/organisms/navigation/Home.jsx index 80cd3c0..a39ad5d 100644 --- a/src/app/organisms/navigation/Home.jsx +++ b/src/app/organisms/navigation/Home.jsx @@ -70,7 +70,7 @@ function Home() { /> ))} - { roomIds.length !== 0 && Channels } + { roomIds.length !== 0 && Rooms } { roomIds.map((id) => (
changeTab('home')} tooltip="Home" iconSrc={HomeIC} /> - changeTab('dms')} tooltip="People" iconSrc={UserIC} /> - openPublicChannels()} tooltip="Public channels" iconSrc={HashSearchIC} /> + changeTab('dm')} tooltip="People" iconSrc={UserIC} /> + openPublicRooms()} tooltip="Public rooms" iconSrc={HashSearchIC} />
diff --git a/src/app/organisms/public-channels/PublicChannels.jsx b/src/app/organisms/public-rooms/PublicRooms.jsx similarity index 62% rename from src/app/organisms/public-channels/PublicChannels.jsx rename to src/app/organisms/public-rooms/PublicRooms.jsx index b7388e5..b8f9244 100644 --- a/src/app/organisms/public-channels/PublicChannels.jsx +++ b/src/app/organisms/public-rooms/PublicRooms.jsx @@ -1,6 +1,6 @@ import React, { useState, useEffect, useRef } from 'react'; import PropTypes from 'prop-types'; -import './PublicChannels.scss'; +import './PublicRooms.scss'; import initMatrix from '../../../client/initMatrix'; import cons from '../../../client/state/cons'; @@ -13,7 +13,7 @@ import IconButton from '../../atoms/button/IconButton'; import Spinner from '../../atoms/spinner/Spinner'; import Input from '../../atoms/input/Input'; import PopupWindow from '../../molecules/popup-window/PopupWindow'; -import ChannelTile from '../../molecules/channel-tile/ChannelTile'; +import RoomTile from '../../molecules/room-tile/RoomTile'; import CrossIC from '../../../../public/res/ic/outlined/cross.svg'; import HashSearchIC from '../../../../public/res/ic/outlined/hash-search.svg'; @@ -53,7 +53,7 @@ function TryJoinWithAlias({ alias, onRequestClose }) { } catch (e) { setStatus({ isJoining: false, - error: `Unable to join ${alias}. Either channel is private or doesn't exist.`, + error: `Unable to join ${alias}. Either room is private or doesn't exist.`, roomId: null, tempRoomId: null, }); @@ -84,38 +84,38 @@ TryJoinWithAlias.propTypes = { onRequestClose: PropTypes.func.isRequired, }; -function PublicChannels({ isOpen, searchTerm, onRequestClose }) { +function PublicRooms({ isOpen, searchTerm, onRequestClose }) { const [isSearching, updateIsSearching] = useState(false); const [isViewMore, updateIsViewMore] = useState(false); - const [publicChannels, updatePublicChannels] = useState([]); + const [publicRooms, updatePublicRooms] = useState([]); const [nextBatch, updateNextBatch] = useState(undefined); const [searchQuery, updateSearchQuery] = useState({}); - const [joiningChannels, updateJoiningChannels] = useState(new Set()); + const [joiningRooms, updateJoiningRooms] = useState(new Set()); - const channelNameRef = useRef(null); + const roomNameRef = useRef(null); const hsRef = useRef(null); const userId = initMatrix.matrixClient.getUserId(); - async function searchChannels(viewMore) { - let inputChannelName = channelNameRef?.current?.value || searchTerm; + async function searchRooms(viewMore) { + let inputRoomName = roomNameRef?.current?.value || searchTerm; let isInputAlias = false; - if (typeof inputChannelName === 'string') { - isInputAlias = inputChannelName[0] === '#' && inputChannelName.indexOf(':') > 1; + if (typeof inputRoomName === 'string') { + isInputAlias = inputRoomName[0] === '#' && inputRoomName.indexOf(':') > 1; } - const hsFromAlias = (isInputAlias) ? inputChannelName.slice(inputChannelName.indexOf(':') + 1) : null; + const hsFromAlias = (isInputAlias) ? inputRoomName.slice(inputRoomName.indexOf(':') + 1) : null; let inputHs = hsFromAlias || hsRef?.current?.value; if (typeof inputHs !== 'string') inputHs = userId.slice(userId.indexOf(':') + 1); - if (typeof inputChannelName !== 'string') inputChannelName = ''; + if (typeof inputRoomName !== 'string') inputRoomName = ''; if (isSearching) return; if (viewMore !== true - && inputChannelName === searchQuery.name + && inputRoomName === searchQuery.name && inputHs === searchQuery.homeserver ) return; updateSearchQuery({ - name: inputChannelName, + name: inputRoomName, homeserver: inputHs, }); if (isViewMore !== viewMore) updateIsViewMore(viewMore); @@ -128,26 +128,26 @@ function PublicChannels({ isOpen, searchTerm, onRequestClose }) { since: viewMore ? nextBatch : undefined, include_all_networks: true, filter: { - generic_search_term: inputChannelName, + generic_search_term: inputRoomName, }, }); - const totalChannels = viewMore ? publicChannels.concat(result.chunk) : result.chunk; - updatePublicChannels(totalChannels); + const totalRooms = viewMore ? publicRooms.concat(result.chunk) : result.chunk; + updatePublicRooms(totalRooms); updateNextBatch(result.next_batch); updateIsSearching(false); updateIsViewMore(false); - if (totalChannels.length === 0) { + if (totalRooms.length === 0) { updateSearchQuery({ - error: `No result found for "${inputChannelName}" on ${inputHs}`, - alias: isInputAlias ? inputChannelName : null, + error: `No result found for "${inputRoomName}" on ${inputHs}`, + alias: isInputAlias ? inputRoomName : null, }); } } catch (e) { - updatePublicChannels([]); + updatePublicRooms([]); updateSearchQuery({ error: 'Something went wrong!', - alias: isInputAlias ? inputChannelName : null, + alias: isInputAlias ? inputRoomName : null, }); updateIsSearching(false); updateNextBatch(undefined); @@ -156,13 +156,13 @@ function PublicChannels({ isOpen, searchTerm, onRequestClose }) { } useEffect(() => { - if (isOpen) searchChannels(); + if (isOpen) searchRooms(); }, [isOpen]); function handleOnRoomAdded(roomId) { - if (joiningChannels.has(roomId)) { - joiningChannels.delete(roomId); - updateJoiningChannels(new Set(Array.from(joiningChannels))); + if (joiningRooms.has(roomId)) { + joiningRooms.delete(roomId); + updateJoiningRooms(new Set(Array.from(joiningRooms))); } } useEffect(() => { @@ -170,36 +170,36 @@ function PublicChannels({ isOpen, searchTerm, onRequestClose }) { return () => { initMatrix.roomList.removeListener(cons.events.roomList.ROOM_JOINED, handleOnRoomAdded); }; - }, [joiningChannels]); + }, [joiningRooms]); - function handleViewChannel(roomId) { + function handleViewRoom(roomId) { selectRoom(roomId); onRequestClose(); } - function joinChannel(roomIdOrAlias) { - joiningChannels.add(roomIdOrAlias); - updateJoiningChannels(new Set(Array.from(joiningChannels))); + function joinRoom(roomIdOrAlias) { + joiningRooms.add(roomIdOrAlias); + updateJoiningRooms(new Set(Array.from(joiningRooms))); roomActions.join(roomIdOrAlias, false); } - function renderChannelList(channels) { - return channels.map((channel) => { - const alias = typeof channel.canonical_alias === 'string' ? channel.canonical_alias : channel.room_id; - const name = typeof channel.name === 'string' ? channel.name : alias; - const isJoined = initMatrix.roomList.rooms.has(channel.room_id); + function renderRoomList(rooms) { + return rooms.map((room) => { + const alias = typeof room.canonical_alias === 'string' ? room.canonical_alias : room.room_id; + const name = typeof room.name === 'string' ? room.name : alias; + const isJoined = initMatrix.roomList.rooms.has(room.room_id); return ( - - {isJoined && } - {!isJoined && (joiningChannels.has(channel.room_id) ? : )} + {isJoined && } + {!isJoined && (joiningRooms.has(room.room_id) ? : )} )} /> @@ -210,26 +210,26 @@ function PublicChannels({ isOpen, searchTerm, onRequestClose }) { return ( } onRequestClose={onRequestClose} > -
-
{ e.preventDefault(); searchChannels(); }}> -
- +
+ { e.preventDefault(); searchRooms(); }}> +
+
-
+
{ typeof searchQuery.name !== 'undefined' && isSearching && ( searchQuery.name === '' ? (
- {`Loading public channels from ${searchQuery.homeserver}...`} + {`Loading public rooms from ${searchQuery.homeserver}...`}
) : ( @@ -243,28 +243,28 @@ function PublicChannels({ isOpen, searchTerm, onRequestClose }) { { typeof searchQuery.name !== 'undefined' && !isSearching && ( searchQuery.name === '' - ? {`Public channels on ${searchQuery.homeserver}.`} + ? {`Public rooms on ${searchQuery.homeserver}.`} : {`Search result for "${searchQuery.name}" on ${searchQuery.homeserver}.`} ) } { searchQuery.error && ( <> - {searchQuery.error} + {searchQuery.error} {typeof searchQuery.alias === 'string' && ( )} )}
- { publicChannels.length !== 0 && ( -
- { renderChannelList(publicChannels) } + { publicRooms.length !== 0 && ( +
+ { renderRoomList(publicRooms) }
)} - { publicChannels.length !== 0 && publicChannels.length % SEARCH_LIMIT === 0 && ( -
+ { publicRooms.length !== 0 && publicRooms.length % SEARCH_LIMIT === 0 && ( +
{ isViewMore !== true && ( - + )} { isViewMore && }
@@ -274,14 +274,14 @@ function PublicChannels({ isOpen, searchTerm, onRequestClose }) { ); } -PublicChannels.defaultProps = { +PublicRooms.defaultProps = { searchTerm: undefined, }; -PublicChannels.propTypes = { +PublicRooms.propTypes = { isOpen: PropTypes.bool.isRequired, searchTerm: PropTypes.string, onRequestClose: PropTypes.func.isRequired, }; -export default PublicChannels; +export default PublicRooms; diff --git a/src/app/organisms/public-channels/PublicChannels.scss b/src/app/organisms/public-rooms/PublicRooms.scss similarity index 97% rename from src/app/organisms/public-channels/PublicChannels.scss rename to src/app/organisms/public-rooms/PublicRooms.scss index 3eef310..66b77c0 100644 --- a/src/app/organisms/public-channels/PublicChannels.scss +++ b/src/app/organisms/public-rooms/PublicRooms.scss @@ -1,4 +1,4 @@ -.public-channels { +.public-rooms { margin: 0 var(--sp-normal); margin-right: var(--sp-extra-tight); margin-top: var(--sp-extra-tight); @@ -75,7 +75,7 @@ } } - & .channel-tile { + & .room-tile { margin-top: var(--sp-normal); &__options { align-self: flex-end; diff --git a/src/app/organisms/pw/Windows.jsx b/src/app/organisms/pw/Windows.jsx index 8a0afd3..32a0ee1 100644 --- a/src/app/organisms/pw/Windows.jsx +++ b/src/app/organisms/pw/Windows.jsx @@ -4,17 +4,17 @@ import cons from '../../../client/state/cons'; import navigation from '../../../client/state/navigation'; import InviteList from '../invite-list/InviteList'; -import PublicChannels from '../public-channels/PublicChannels'; -import CreateChannel from '../create-channel/CreateChannel'; +import PublicRooms from '../public-rooms/PublicRooms'; +import CreateRoom from '../create-room/CreateRoom'; import InviteUser from '../invite-user/InviteUser'; import Settings from '../settings/Settings'; function Windows() { const [isInviteList, changeInviteList] = useState(false); - const [publicChannels, changePublicChannels] = useState({ + const [publicRooms, changePublicRooms] = useState({ isOpen: false, searchTerm: undefined, }); - const [isCreateChannel, changeCreateChannel] = useState(false); + const [isCreateRoom, changeCreateRoom] = useState(false); const [inviteUser, changeInviteUser] = useState({ isOpen: false, roomId: undefined, term: undefined, }); @@ -23,14 +23,14 @@ function Windows() { function openInviteList() { changeInviteList(true); } - function openPublicChannels(searchTerm) { - changePublicChannels({ + function openPublicRooms(searchTerm) { + changePublicRooms({ isOpen: true, searchTerm, }); } - function openCreateChannel() { - changeCreateChannel(true); + function openCreateRoom() { + changeCreateRoom(true); } function openInviteUser(roomId, searchTerm) { changeInviteUser({ @@ -45,14 +45,14 @@ function Windows() { useEffect(() => { navigation.on(cons.events.navigation.INVITE_LIST_OPENED, openInviteList); - navigation.on(cons.events.navigation.PUBLIC_CHANNELS_OPENED, openPublicChannels); - navigation.on(cons.events.navigation.CREATE_CHANNEL_OPENED, openCreateChannel); + navigation.on(cons.events.navigation.PUBLIC_ROOMS_OPENED, openPublicRooms); + navigation.on(cons.events.navigation.CREATE_ROOM_OPENED, openCreateRoom); navigation.on(cons.events.navigation.INVITE_USER_OPENED, openInviteUser); navigation.on(cons.events.navigation.SETTINGS_OPENED, openSettings); return () => { navigation.removeListener(cons.events.navigation.INVITE_LIST_OPENED, openInviteList); - navigation.removeListener(cons.events.navigation.PUBLIC_CHANNELS_OPENED, openPublicChannels); - navigation.removeListener(cons.events.navigation.CREATE_CHANNEL_OPENED, openCreateChannel); + navigation.removeListener(cons.events.navigation.PUBLIC_ROOMS_OPENED, openPublicRooms); + navigation.removeListener(cons.events.navigation.CREATE_ROOM_OPENED, openCreateRoom); navigation.removeListener(cons.events.navigation.INVITE_USER_OPENED, openInviteUser); navigation.removeListener(cons.events.navigation.SETTINGS_OPENED, openSettings); }; @@ -64,14 +64,14 @@ function Windows() { isOpen={isInviteList} onRequestClose={() => changeInviteList(false)} /> - changePublicChannels({ isOpen: false, searchTerm: undefined })} + changePublicRooms({ isOpen: false, searchTerm: undefined })} /> - changeCreateChannel(false)} + changeCreateRoom(false)} /> { @@ -30,11 +30,11 @@ function Channel() { if (selectedRoomId === null) return ; return ( -
- +
+ { isDrawerVisible && }
); } -export default Channel; +export default Room; diff --git a/src/app/organisms/channel/Channel.scss b/src/app/organisms/room/Room.scss similarity index 60% rename from src/app/organisms/channel/Channel.scss rename to src/app/organisms/room/Room.scss index 1d6b6ee..cea4bad 100644 --- a/src/app/organisms/channel/Channel.scss +++ b/src/app/organisms/room/Room.scss @@ -1,4 +1,4 @@ -.channel-container { +.room-container { display: flex; height: 100%; } \ No newline at end of file diff --git a/src/app/organisms/channel/ChannelView.jsx b/src/app/organisms/room/RoomView.jsx similarity index 83% rename from src/app/organisms/channel/ChannelView.jsx rename to src/app/organisms/room/RoomView.jsx index 07b9bf1..edb427d 100644 --- a/src/app/organisms/channel/ChannelView.jsx +++ b/src/app/organisms/room/RoomView.jsx @@ -1,6 +1,6 @@ import React, { useState, useEffect, useRef } from 'react'; import PropTypes from 'prop-types'; -import './ChannelView.scss'; +import './RoomView.scss'; import EventEmitter from 'events'; @@ -8,11 +8,11 @@ import RoomTimeline from '../../../client/state/RoomTimeline'; import ScrollView from '../../atoms/scroll/ScrollView'; -import ChannelViewHeader from './ChannelViewHeader'; -import ChannelViewContent from './ChannelViewContent'; -import ChannelViewFloating from './ChannelViewFloating'; -import ChannelViewInput from './ChannelViewInput'; -import ChannelViewCmdBar from './ChannelViewCmdBar'; +import RoomViewHeader from './RoomViewHeader'; +import RoomViewContent from './RoomViewContent'; +import RoomViewFloating from './RoomViewFloating'; +import RoomViewInput from './RoomViewInput'; +import RoomViewCmdBar from './RoomViewCmdBar'; import { scrollToBottom, isAtBottom, autoScrollToBottom } from './common'; @@ -22,7 +22,7 @@ let lastScrollTop = 0; let lastScrollHeight = 0; let isReachedBottom = true; let isReachedTop = false; -function ChannelView({ roomId }) { +function RoomView({ roomId }) { const [roomTimeline, updateRoomTimeline] = useState(null); const timelineSVRef = useRef(null); @@ -101,13 +101,13 @@ function ChannelView({ roomId }) { } return ( -
- -
-
+
+ +
+
{roomTimeline !== null && ( - {roomTimeline !== null && ( - {roomTimeline !== null && ( -
- + - ); } -ChannelView.propTypes = { +RoomView.propTypes = { roomId: PropTypes.string.isRequired, }; -export default ChannelView; +export default RoomView; diff --git a/src/app/organisms/channel/ChannelView.scss b/src/app/organisms/room/RoomView.scss similarity index 57% rename from src/app/organisms/channel/ChannelView.scss rename to src/app/organisms/room/RoomView.scss index a50a9ae..dd7e961 100644 --- a/src/app/organisms/channel/ChannelView.scss +++ b/src/app/organisms/room/RoomView.scss @@ -1,24 +1,24 @@ -.channel-view-flexBox { +.room-view-flexBox { display: flex; flex-direction: column; } -.channel-view-flexItem { +.room-view-flexItem { flex: 1; min-height: 0; min-width: 0; } -.channel-view { - @extend .channel-view-flexItem; - @extend .channel-view-flexBox; +.room-view { + @extend .room-view-flexItem; + @extend .room-view-flexBox; &__content-wrapper { - @extend .channel-view-flexItem; - @extend .channel-view-flexBox; + @extend .room-view-flexItem; + @extend .room-view-flexBox; } &__scrollable { - @extend .channel-view-flexItem; + @extend .room-view-flexItem; position: relative; } diff --git a/src/app/organisms/channel/ChannelViewCmdBar.jsx b/src/app/organisms/room/RoomViewCmdBar.jsx similarity index 95% rename from src/app/organisms/channel/ChannelViewCmdBar.jsx rename to src/app/organisms/room/RoomViewCmdBar.jsx index 40d3ff5..7f8f809 100644 --- a/src/app/organisms/channel/ChannelViewCmdBar.jsx +++ b/src/app/organisms/room/RoomViewCmdBar.jsx @@ -1,7 +1,7 @@ /* eslint-disable react/prop-types */ import React, { useState, useEffect } from 'react'; import PropTypes from 'prop-types'; -import './ChannelViewCmdBar.scss'; +import './RoomViewCmdBar.scss'; import parse from 'html-react-parser'; import twemoji from 'twemoji'; @@ -11,8 +11,8 @@ import { toggleMarkdown } from '../../../client/action/settings'; import * as roomActions from '../../../client/action/room'; import { selectRoom, - openCreateChannel, - openPublicChannels, + openCreateRoom, + openPublicRooms, openInviteUser, openReadReceipts, } from '../../../client/action/navigation'; @@ -41,17 +41,17 @@ const commands = [{ description: 'Start direct message with user. Example: /startDM/@johndoe.matrix.org', exe: (roomId, searchTerm) => openInviteUser(undefined, searchTerm), }, { - name: 'createChannel', - description: 'Create new channel', - exe: () => openCreateChannel(), + name: 'createRoom', + description: 'Create new room', + exe: () => openCreateRoom(), }, { name: 'join', isOptions: true, - description: 'Join channel with alias. Example: /join/#cinny:matrix.org', - exe: (roomId, searchTerm) => openPublicChannels(searchTerm), + description: 'Join room with alias. Example: /join/#cinny:matrix.org', + exe: (roomId, searchTerm) => openPublicRooms(searchTerm), }, { name: 'leave', - description: 'Leave current channel', + description: 'Leave current room', exe: (roomId) => roomActions.leave(roomId), }, { name: 'invite', @@ -70,10 +70,10 @@ function CmdHelp() { /command_name Go-to commands {'>*space_name'} - {'>#channel_name'} + {'>#room_name'} {'>@people_name'} - Autofill command - :emoji_name: + Autofill commands + :emoji_name @name )} @@ -174,7 +174,7 @@ function getCmdActivationMessage(prefix) { 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 channel 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.'), @@ -273,7 +273,7 @@ function getCmdSuggestions({ prefix, option, suggestions }, fireCmd) { const cmd = { '/': (cmds) => getGenCmdSuggestions(prefix, cmds), '>*': (spaces) => getRoomsSuggestion(prefix, spaces), - '>#': (channels) => getRoomsSuggestion(prefix, channels), + '>#': (rooms) => getRoomsSuggestion(prefix, rooms), '>@': (peoples) => getRoomsSuggestion(prefix, peoples), ':': (emos) => getEmojiSuggestion(prefix, emos), '@': (members) => getNameSuggestion(prefix, members), @@ -284,7 +284,7 @@ function getCmdSuggestions({ prefix, option, suggestions }, fireCmd) { const asyncSearch = new AsyncSearch(); let cmdPrefix; let cmdOption; -function ChannelViewCmdBar({ roomId, roomTimeline, viewEvent }) { +function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) { const [cmd, setCmd] = useState(null); function displaySuggestions(suggestions) { @@ -466,10 +466,10 @@ function ChannelViewCmdBar({ roomId, roomTimeline, viewEvent }) {
); } -ChannelViewCmdBar.propTypes = { +RoomViewCmdBar.propTypes = { roomId: PropTypes.string.isRequired, roomTimeline: PropTypes.shape({}).isRequired, viewEvent: PropTypes.shape({}).isRequired, }; -export default ChannelViewCmdBar; +export default RoomViewCmdBar; diff --git a/src/app/organisms/channel/ChannelViewCmdBar.scss b/src/app/organisms/room/RoomViewCmdBar.scss similarity index 100% rename from src/app/organisms/channel/ChannelViewCmdBar.scss rename to src/app/organisms/room/RoomViewCmdBar.scss diff --git a/src/app/organisms/channel/ChannelViewContent.jsx b/src/app/organisms/room/RoomViewContent.jsx similarity index 96% rename from src/app/organisms/channel/ChannelViewContent.jsx rename to src/app/organisms/room/RoomViewContent.jsx index 063718b..18b8d34 100644 --- a/src/app/organisms/channel/ChannelViewContent.jsx +++ b/src/app/organisms/room/RoomViewContent.jsx @@ -1,7 +1,7 @@ /* eslint-disable react/prop-types */ import React, { useState, useEffect, useLayoutEffect } from 'react'; import PropTypes from 'prop-types'; -import './ChannelViewContent.scss'; +import './RoomViewContent.scss'; import dateFormat from 'dateformat'; @@ -29,7 +29,7 @@ import { PlaceholderMessage, } from '../../molecules/message/Message'; import * as Media from '../../molecules/media/Media'; -import ChannelIntro from '../../molecules/channel-intro/ChannelIntro'; +import RoomIntro from '../../molecules/room-intro/RoomIntro'; import TimelineChange from '../../molecules/message/TimelineChange'; import ReplyArrowIC from '../../../../public/res/ic/outlined/reply-arrow.svg'; @@ -131,20 +131,20 @@ function genMediaContent(mE) { } } -function genChannelIntro(mEvent, roomTimeline) { +function genRoomIntro(mEvent, roomTimeline) { const mx = initMatrix.matrixClient; const roomTopic = roomTimeline.room.currentState.getStateEvents('m.room.topic')[0]?.getContent().topic; const isDM = initMatrix.roomList.directs.has(roomTimeline.roomId); let avatarSrc = roomTimeline.room.getAvatarUrl(mx.baseUrl, 80, 80, 'crop'); avatarSrc = isDM ? roomTimeline.room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 80, 80, 'crop') : avatarSrc; return ( - ); @@ -188,7 +188,7 @@ function pickEmoji(e, roomId, eventId, roomTimeline) { } let wasAtBottom = true; -function ChannelViewContent({ +function RoomViewContent({ roomId, roomTimeline, timelineScroll, viewEvent, }) { const [isReachedTimelineEnd, setIsReachedTimelineEnd] = useState(false); @@ -517,7 +517,7 @@ function ChannelViewContent({ } function renderMessage(mEvent) { - if (mEvent.getType() === 'm.room.create') return genChannelIntro(mEvent, roomTimeline); + if (mEvent.getType() === 'm.room.create') return genRoomIntro(mEvent, roomTimeline); if ( mEvent.getType() !== 'm.room.message' && mEvent.getType() !== 'm.room.encrypted' @@ -562,20 +562,20 @@ function ChannelViewContent({ } return ( -
+
{ roomTimeline.timeline[0].getType() !== 'm.room.create' && !isReachedTimelineEnd && genPlaceholders() } - { roomTimeline.timeline[0].getType() !== 'm.room.create' && isReachedTimelineEnd && genChannelIntro(undefined, roomTimeline)} + { roomTimeline.timeline[0].getType() !== 'm.room.create' && isReachedTimelineEnd && genRoomIntro(undefined, roomTimeline)} { roomTimeline.timeline.map(renderMessage) }
); } -ChannelViewContent.propTypes = { +RoomViewContent.propTypes = { roomId: PropTypes.string.isRequired, roomTimeline: PropTypes.shape({}).isRequired, timelineScroll: PropTypes.shape({}).isRequired, viewEvent: PropTypes.shape({}).isRequired, }; -export default ChannelViewContent; +export default RoomViewContent; diff --git a/src/app/organisms/channel/ChannelViewContent.scss b/src/app/organisms/room/RoomViewContent.scss similarity index 90% rename from src/app/organisms/channel/ChannelViewContent.scss rename to src/app/organisms/room/RoomViewContent.scss index f270233..cfb328c 100644 --- a/src/app/organisms/channel/ChannelViewContent.scss +++ b/src/app/organisms/room/RoomViewContent.scss @@ -1,4 +1,4 @@ -.channel-view__content { +.room-view__content { min-height: 100%; display: flex; flex-direction: column; diff --git a/src/app/organisms/channel/ChannelViewFloating.jsx b/src/app/organisms/room/RoomViewFloating.jsx similarity index 86% rename from src/app/organisms/channel/ChannelViewFloating.jsx rename to src/app/organisms/room/RoomViewFloating.jsx index e3e65da..56b7a9b 100644 --- a/src/app/organisms/channel/ChannelViewFloating.jsx +++ b/src/app/organisms/room/RoomViewFloating.jsx @@ -1,7 +1,7 @@ /* eslint-disable react/prop-types */ import React, { useState, useEffect } from 'react'; import PropTypes from 'prop-types'; -import './ChannelViewFloating.scss'; +import './RoomViewFloating.scss'; import initMatrix from '../../../client/initMatrix'; import cons from '../../../client/state/cons'; @@ -13,7 +13,7 @@ import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.s import { getUsersActionJsx } from './common'; -function ChannelViewFloating({ +function RoomViewFloating({ roomId, roomTimeline, timelineScroll, viewEvent, }) { const [reachedBottom, setReachedBottom] = useState(true); @@ -53,11 +53,11 @@ function ChannelViewFloating({ return ( <> -
+
{getTypingMessage(typingMembers)}
-
+
{ timelineScroll.enableSmoothScroll(); @@ -71,7 +71,7 @@ function ChannelViewFloating({ ); } -ChannelViewFloating.propTypes = { +RoomViewFloating.propTypes = { roomId: PropTypes.string.isRequired, roomTimeline: PropTypes.shape({}).isRequired, timelineScroll: PropTypes.shape({ @@ -80,4 +80,4 @@ ChannelViewFloating.propTypes = { viewEvent: PropTypes.shape({}).isRequired, }; -export default ChannelViewFloating; +export default RoomViewFloating; diff --git a/src/app/organisms/channel/ChannelViewFloating.scss b/src/app/organisms/room/RoomViewFloating.scss similarity index 98% rename from src/app/organisms/channel/ChannelViewFloating.scss rename to src/app/organisms/room/RoomViewFloating.scss index 3c1593c..501c9f4 100644 --- a/src/app/organisms/channel/ChannelViewFloating.scss +++ b/src/app/organisms/room/RoomViewFloating.scss @@ -1,4 +1,4 @@ -.channel-view { +.room-view { &__typing { display: flex; padding: var(--sp-ultra-tight) var(--sp-normal); diff --git a/src/app/organisms/channel/ChannelViewHeader.jsx b/src/app/organisms/room/RoomViewHeader.jsx similarity index 95% rename from src/app/organisms/channel/ChannelViewHeader.jsx rename to src/app/organisms/room/RoomViewHeader.jsx index f89b634..d9b8aa9 100644 --- a/src/app/organisms/channel/ChannelViewHeader.jsx +++ b/src/app/organisms/room/RoomViewHeader.jsx @@ -17,7 +17,7 @@ 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 ChannelViewHeader({ roomId }) { +function RoomViewHeader({ roomId }) { const mx = initMatrix.matrixClient; const isDM = initMatrix.roomList.directs.has(roomId); let avatarSrc = mx.getRoom(roomId).getAvatarUrl(mx.baseUrl, 36, 36, 'crop'); @@ -55,8 +55,8 @@ function ChannelViewHeader({ roomId }) { ); } -ChannelViewHeader.propTypes = { +RoomViewHeader.propTypes = { roomId: PropTypes.string.isRequired, }; -export default ChannelViewHeader; +export default RoomViewHeader; diff --git a/src/app/organisms/channel/ChannelViewInput.jsx b/src/app/organisms/room/RoomViewInput.jsx similarity index 93% rename from src/app/organisms/channel/ChannelViewInput.jsx rename to src/app/organisms/room/RoomViewInput.jsx index f335bb4..a72f1e3 100644 --- a/src/app/organisms/channel/ChannelViewInput.jsx +++ b/src/app/organisms/room/RoomViewInput.jsx @@ -1,7 +1,7 @@ /* eslint-disable react/prop-types */ import React, { useState, useEffect, useRef } from 'react'; import PropTypes from 'prop-types'; -import './ChannelViewInput.scss'; +import './RoomViewInput.scss'; import TextareaAutosize from 'react-autosize-textarea'; @@ -33,7 +33,7 @@ const CMD_REGEX = /(\/|>[#*@]|:|@)(\S*)$/; let isTyping = false; let isCmdActivated = false; let cmdCursorPos = null; -function ChannelViewInput({ +function RoomViewInput({ roomId, roomTimeline, timelineScroll, viewEvent, }) { const [attachment, setAttachment] = useState(null); @@ -304,14 +304,14 @@ function ChannelViewInput({ function renderInputs() { return ( <> -
+
-
+
{roomTimeline.isEncryptedRoom() && } - + }
-
+
{ const boxInfo = e.target.getBoundingClientRect(); @@ -346,14 +346,14 @@ function ChannelViewInput({ function attachFile() { const fileType = attachment.type.slice(0, attachment.type.indexOf('/')); return ( -
-
+
+
{fileType === 'image' && {attachment.name}} {fileType === 'video' && } {fileType === 'audio' && } {fileType !== 'image' && fileType !== 'video' && fileType !== 'audio' && }
-
+
{attachment.name} {`size: ${bytesToSize(attachment.size)}`}
@@ -363,7 +363,7 @@ function ChannelViewInput({ function attachReply() { return ( -
+
{ roomsInput.cancelReplyTo(roomId); @@ -387,17 +387,17 @@ function ChannelViewInput({ <> { replyTo !== null && attachReply()} { attachment !== null && attachFile() } -
{ e.preventDefault(); }}> + { e.preventDefault(); }}> { roomTimeline.room.isSpaceRoom() - ? Spaces are yet to be implemented + ? Spaces are yet to be implemented : renderInputs() }
); } -ChannelViewInput.propTypes = { +RoomViewInput.propTypes = { roomId: PropTypes.string.isRequired, roomTimeline: PropTypes.shape({}).isRequired, timelineScroll: PropTypes.shape({ @@ -410,4 +410,4 @@ ChannelViewInput.propTypes = { viewEvent: PropTypes.shape({}).isRequired, }; -export default ChannelViewInput; +export default RoomViewInput; diff --git a/src/app/organisms/channel/ChannelViewInput.scss b/src/app/organisms/room/RoomViewInput.scss similarity index 97% rename from src/app/organisms/channel/ChannelViewInput.scss rename to src/app/organisms/room/RoomViewInput.scss index 2bc0121..112a4c4 100644 --- a/src/app/organisms/channel/ChannelViewInput.scss +++ b/src/app/organisms/room/RoomViewInput.scss @@ -1,4 +1,4 @@ -.channel-input { +.room-input { padding: var(--sp-extra-tight) calc(var(--sp-normal) - 2px); display: flex; min-height: 48px; @@ -73,7 +73,7 @@ } } -.channel-attachment { +.room-attachment { --side-spacing: calc(var(--sp-normal) + var(--av-small) + var(--sp-tight)); display: flex; align-items: center; @@ -112,7 +112,7 @@ } } -.channel-reply { +.room-reply { display: flex; align-items: center; background-color: var(--bg-surface-low); diff --git a/src/app/organisms/channel/common.jsx b/src/app/organisms/room/common.jsx similarity index 99% rename from src/app/organisms/channel/common.jsx rename to src/app/organisms/room/common.jsx index 46fbc5d..2d876d7 100644 --- a/src/app/organisms/channel/common.jsx +++ b/src/app/organisms/room/common.jsx @@ -9,7 +9,7 @@ function getTimelineJSXMessages() { return ( <> {user} - {' joined the channel'} + {' joined the room'} ); }, @@ -18,7 +18,7 @@ function getTimelineJSXMessages() { return ( <> {user} - {' left the channel'} + {' left the room'} {reasonMsg} ); diff --git a/src/app/templates/client/Client.jsx b/src/app/templates/client/Client.jsx index 3d8b45d..8f89d43 100644 --- a/src/app/templates/client/Client.jsx +++ b/src/app/templates/client/Client.jsx @@ -4,7 +4,7 @@ import './Client.scss'; import Text from '../../atoms/text/Text'; import Spinner from '../../atoms/spinner/Spinner'; import Navigation from '../../organisms/navigation/Navigation'; -import Channel from '../../organisms/channel/Channel'; +import Room from '../../organisms/room/Room'; import Windows from '../../organisms/pw/Windows'; import Dialogs from '../../organisms/pw/Dialogs'; import EmojiBoardOpener from '../../organisms/emoji-board/EmojiBoardOpener'; @@ -38,8 +38,8 @@ function Client() {
-
- +
+
diff --git a/src/app/templates/client/Client.scss b/src/app/templates/client/Client.scss index f1d901e..0528098 100644 --- a/src/app/templates/client/Client.scss +++ b/src/app/templates/client/Client.scss @@ -6,7 +6,7 @@ .navigation__wrapper { width: var(--navigation-width); } -.channel__wrapper { +.room__wrapper { flex: 1; min-width: 0; background-color: var(--bg-surface); diff --git a/src/client/action/navigation.js b/src/client/action/navigation.js index 78c001f..cf40b4a 100644 --- a/src/client/action/navigation.js +++ b/src/client/action/navigation.js @@ -27,16 +27,16 @@ function openInviteList() { }); } -function openPublicChannels(searchTerm) { +function openPublicRooms(searchTerm) { appDispatcher.dispatch({ - type: cons.actions.navigation.OPEN_PUBLIC_CHANNELS, + type: cons.actions.navigation.OPEN_PUBLIC_ROOMS, searchTerm, }); } -function openCreateChannel() { +function openCreateRoom() { appDispatcher.dispatch({ - type: cons.actions.navigation.OPEN_CREATE_CHANNEL, + type: cons.actions.navigation.OPEN_CREATE_ROOM, }); } @@ -75,8 +75,8 @@ export { selectRoom, togglePeopleDrawer, openInviteList, - openPublicChannels, - openCreateChannel, + openPublicRooms, + openCreateRoom, openInviteUser, openSettings, openEmojiBoard, diff --git a/src/client/state/cons.js b/src/client/state/cons.js index b5de3d6..f5e92b0 100644 --- a/src/client/state/cons.js +++ b/src/client/state/cons.js @@ -12,8 +12,8 @@ const cons = { SELECT_ROOM: 'SELECT_ROOM', TOGGLE_PEOPLE_DRAWER: 'TOGGLE_PEOPLE_DRAWER', OPEN_INVITE_LIST: 'OPEN_INVITE_LIST', - OPEN_PUBLIC_CHANNELS: 'OPEN_PUBLIC_CHANNELS', - OPEN_CREATE_CHANNEL: 'OPEN_CREATE_CHANNEL', + OPEN_PUBLIC_ROOMS: 'OPEN_PUBLIC_ROOMS', + OPEN_CREATE_ROOM: 'OPEN_CREATE_ROOM', OPEN_INVITE_USER: 'OPEN_INVITE_USER', OPEN_SETTINGS: 'OPEN_SETTINGS', OPEN_EMOJIBOARD: 'OPEN_EMOJIBOARD', @@ -37,8 +37,8 @@ const cons = { ROOM_SELECTED: 'ROOM_SELECTED', PEOPLE_DRAWER_TOGGLED: 'PEOPLE_DRAWER_TOGGLED', INVITE_LIST_OPENED: 'INVITE_LIST_OPENED', - PUBLIC_CHANNELS_OPENED: 'PUBLIC_CHANNELS_OPENED', - CREATE_CHANNEL_OPENED: 'CREATE_CHANNEL_OPENED', + PUBLIC_ROOMS_OPENED: 'PUBLIC_ROOMS_OPENED', + CREATE_ROOM_OPENED: 'CREATE_ROOM_OPENED', INVITE_USER_OPENED: 'INVITE_USER_OPENED', SETTINGS_OPENED: 'SETTINGS_OPENED', EMOJIBOARD_OPENED: 'EMOJIBOARD_OPENED', diff --git a/src/client/state/navigation.js b/src/client/state/navigation.js index 1aa6c0c..5c108af 100644 --- a/src/client/state/navigation.js +++ b/src/client/state/navigation.js @@ -37,11 +37,11 @@ class Navigation extends EventEmitter { [cons.actions.navigation.OPEN_INVITE_LIST]: () => { this.emit(cons.events.navigation.INVITE_LIST_OPENED); }, - [cons.actions.navigation.OPEN_PUBLIC_CHANNELS]: () => { - this.emit(cons.events.navigation.PUBLIC_CHANNELS_OPENED, action.searchTerm); + [cons.actions.navigation.OPEN_PUBLIC_ROOMS]: () => { + this.emit(cons.events.navigation.PUBLIC_ROOMS_OPENED, action.searchTerm); }, - [cons.actions.navigation.OPEN_CREATE_CHANNEL]: () => { - this.emit(cons.events.navigation.CREATE_CHANNEL_OPENED); + [cons.actions.navigation.OPEN_CREATE_ROOM]: () => { + this.emit(cons.events.navigation.CREATE_ROOM_OPENED); }, [cons.actions.navigation.OPEN_INVITE_USER]: () => { this.emit(cons.events.navigation.INVITE_USER_OPENED, action.roomId, action.searchTerm);