From 6c1944359ece104736f64f1051d525ba9f45ea28 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 19 Dec 2019 14:29:46 +0000 Subject: [PATCH 1/4] Add RoomTile online indicator to DMs --- res/css/views/rooms/_RoomTile.scss | 9 ++++ src/components/views/rooms/RoomTile.js | 17 ++++--- .../views/rooms/RoomTileOnlineDot.js | 48 +++++++++++++++++++ 3 files changed, 68 insertions(+), 6 deletions(-) create mode 100644 src/components/views/rooms/RoomTileOnlineDot.js diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss index 1814919b61..2b181f366e 100644 --- a/res/css/views/rooms/_RoomTile.scss +++ b/res/css/views/rooms/_RoomTile.scss @@ -1,5 +1,6 @@ /* Copyright 2015, 2016 OpenMarket Ltd +Copyright 2019 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -61,6 +62,14 @@ limitations under the License. min-width: 0; } +.mx_RoomTile_online_dot { + border-radius: 50%; + background-color: $accent-color; + height: 5px; + width: 5px; + display: inline-block; +} + .mx_RoomTile_subtext { display: inline-block; font-size: 11px; diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index 817ada9706..797aa7b87a 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -32,6 +32,7 @@ import ActiveRoomObserver from '../../../ActiveRoomObserver'; import RoomViewStore from '../../../stores/RoomViewStore'; import SettingsStore from "../../../settings/SettingsStore"; import {_t} from "../../../languageHandler"; +import RoomTileOnlineDot from "./RoomTileOnlineDot"; module.exports = createReactClass({ displayName: 'RoomTile', @@ -68,11 +69,6 @@ module.exports = createReactClass({ }); }, - _isDirectMessageRoom: function(roomId) { - const dmRooms = DMRoomMap.shared().getUserIdForRoomId(roomId); - return Boolean(dmRooms); - }, - _shouldShowStatusMessage() { if (!SettingsStore.isFeatureEnabled("feature_custom_status")) { return false; @@ -371,8 +367,11 @@ module.exports = createReactClass({ let ariaLabel = name; + const dmUserId = DMRoomMap.shared().getUserIdForRoomId(this.props.room.roomId); + let dmIndicator; - if (this._isDirectMessageRoom(this.props.room.roomId)) { + let dmOnline; + if (dmUserId) { dmIndicator = dm; + + if (this.props.room.getMember(dmUserId).membership === "join") { + const RoomTileOnlineDot = sdk.getComponent('rooms.RoomTileOnlineDot'); + dmOnline = ; + } } // The following labels are written in such a fashion to increase screen reader efficiency (speed). @@ -428,6 +432,7 @@ module.exports = createReactClass({ { label } { subtextLabel } + { dmOnline } { contextMenuButton } { badge } diff --git a/src/components/views/rooms/RoomTileOnlineDot.js b/src/components/views/rooms/RoomTileOnlineDot.js new file mode 100644 index 0000000000..a882aec613 --- /dev/null +++ b/src/components/views/rooms/RoomTileOnlineDot.js @@ -0,0 +1,48 @@ +/* +Copyright 2019 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React, {useContext, useEffect, useMemo, useState, useCallback} from "react"; +import PropTypes from "prop-types"; + +import {useEventEmitter} from "../../../hooks/useEventEmitter"; +import MatrixClientContext from "../../../contexts/MatrixClientContext"; + +const RoomTileOnlineDot = ({userId}) => { + const cli = useContext(MatrixClientContext); + const user = useMemo(() => cli.getUser(userId), [cli, userId]); + + const [isOnline, setIsOnline] = useState(false); + + // Recheck if the user or client changes + useEffect(() => { + setIsOnline(user && (user.currentlyActive || user.presence === "online")); + }, [cli, user]); + // Recheck also if we receive a User.currentlyActive event + const currentlyActiveHandler = useCallback((ev) => { + const content = ev.getContent(); + setIsOnline(content.currently_active || content.presence === "online"); + }, []); + useEventEmitter(user, "User.currentlyActive", currentlyActiveHandler); + useEventEmitter(user, "User.presence", currentlyActiveHandler); + + return isOnline ? : null; +}; + +RoomTileOnlineDot.propTypes = { + userId: PropTypes.string.isRequired, +}; + +export default RoomTileOnlineDot; From db069b960207f3c8af5b6320a0bc5709b06354cb Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 19 Dec 2019 14:33:46 +0000 Subject: [PATCH 2/4] delint --- src/components/views/rooms/RoomTile.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index 797aa7b87a..cd5af61862 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -32,7 +32,6 @@ import ActiveRoomObserver from '../../../ActiveRoomObserver'; import RoomViewStore from '../../../stores/RoomViewStore'; import SettingsStore from "../../../settings/SettingsStore"; import {_t} from "../../../languageHandler"; -import RoomTileOnlineDot from "./RoomTileOnlineDot"; module.exports = createReactClass({ displayName: 'RoomTile', From 22fe0add3c01215f2525e36f567196b6f3d0e8b2 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 26 Dec 2019 18:10:52 +0000 Subject: [PATCH 3/4] Make UserOnlineDot more generic --- res/css/_components.scss | 1 + res/css/views/rooms/_RoomTile.scss | 8 ------- res/css/views/rooms/_UserOnlineDot.scss | 23 +++++++++++++++++++ src/components/views/rooms/RoomTile.js | 4 ++-- ...{RoomTileOnlineDot.js => UserOnlineDot.js} | 8 +++---- 5 files changed, 30 insertions(+), 14 deletions(-) create mode 100644 res/css/views/rooms/_UserOnlineDot.scss rename src/components/views/rooms/{RoomTileOnlineDot.js => UserOnlineDot.js} (89%) diff --git a/res/css/_components.scss b/res/css/_components.scss index 233c781d7f..03c2663af8 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -174,6 +174,7 @@ @import "./views/rooms/_SendMessageComposer.scss"; @import "./views/rooms/_Stickers.scss"; @import "./views/rooms/_TopUnreadMessagesBar.scss"; +@import "./views/rooms/_UserOnlineDot.scss"; @import "./views/rooms/_WhoIsTypingTile.scss"; @import "./views/settings/_AvatarSetting.scss"; @import "./views/settings/_CrossSigningPanel.scss"; diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss index 2b181f366e..e5c7948216 100644 --- a/res/css/views/rooms/_RoomTile.scss +++ b/res/css/views/rooms/_RoomTile.scss @@ -62,14 +62,6 @@ limitations under the License. min-width: 0; } -.mx_RoomTile_online_dot { - border-radius: 50%; - background-color: $accent-color; - height: 5px; - width: 5px; - display: inline-block; -} - .mx_RoomTile_subtext { display: inline-block; font-size: 11px; diff --git a/res/css/views/rooms/_UserOnlineDot.scss b/res/css/views/rooms/_UserOnlineDot.scss new file mode 100644 index 0000000000..339e5cc48a --- /dev/null +++ b/res/css/views/rooms/_UserOnlineDot.scss @@ -0,0 +1,23 @@ +/* +Copyright 2019 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.mx_UserOnlineDot { + border-radius: 50%; + background-color: $accent-color; + height: 5px; + width: 5px; + display: inline-block; +} diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index cd5af61862..3f45b5b342 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -380,8 +380,8 @@ module.exports = createReactClass({ />; if (this.props.room.getMember(dmUserId).membership === "join") { - const RoomTileOnlineDot = sdk.getComponent('rooms.RoomTileOnlineDot'); - dmOnline = ; + const UserOnlineDot = sdk.getComponent('rooms.UserOnlineDot'); + dmOnline = ; } } diff --git a/src/components/views/rooms/RoomTileOnlineDot.js b/src/components/views/rooms/UserOnlineDot.js similarity index 89% rename from src/components/views/rooms/RoomTileOnlineDot.js rename to src/components/views/rooms/UserOnlineDot.js index a882aec613..426dd1bf64 100644 --- a/src/components/views/rooms/RoomTileOnlineDot.js +++ b/src/components/views/rooms/UserOnlineDot.js @@ -20,7 +20,7 @@ import PropTypes from "prop-types"; import {useEventEmitter} from "../../../hooks/useEventEmitter"; import MatrixClientContext from "../../../contexts/MatrixClientContext"; -const RoomTileOnlineDot = ({userId}) => { +const UserOnlineDot = ({userId}) => { const cli = useContext(MatrixClientContext); const user = useMemo(() => cli.getUser(userId), [cli, userId]); @@ -38,11 +38,11 @@ const RoomTileOnlineDot = ({userId}) => { useEventEmitter(user, "User.currentlyActive", currentlyActiveHandler); useEventEmitter(user, "User.presence", currentlyActiveHandler); - return isOnline ? : null; + return isOnline ? : null; }; -RoomTileOnlineDot.propTypes = { +UserOnlineDot.propTypes = { userId: PropTypes.string.isRequired, }; -export default RoomTileOnlineDot; +export default UserOnlineDot; From e95b67e101399c6d6b5b74e11f396e8489e6799a Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 26 Dec 2019 18:15:08 +0000 Subject: [PATCH 4/4] Only show it if exactly 2 members, until we get Canonical DMs --- src/components/views/rooms/RoomTile.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index 3f45b5b342..ecf2de394b 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -379,7 +379,8 @@ module.exports = createReactClass({ alt="dm" />; - if (this.props.room.getMember(dmUserId).membership === "join") { + const { room } = this.props; + if (room.getMember(dmUserId).membership === "join" && room.getJoinedMemberCount() === 2) { const UserOnlineDot = sdk.getComponent('rooms.UserOnlineDot'); dmOnline = ; }