From 8847b5a7b9c21d0752088b0a4078abbc4989e83e Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 11 Mar 2022 19:32:11 +0000 Subject: [PATCH 1/3] Support MSC3026 busy presence --- res/css/views/avatars/_DecoratedRoomAvatar.scss | 4 ++++ res/themes/legacy-light/css/_legacy-light.scss | 1 + res/themes/light/css/_light.scss | 1 + src/components/views/avatars/DecoratedRoomAvatar.tsx | 7 ++++++- src/components/views/rooms/PresenceLabel.tsx | 5 +++++ src/i18n/strings/en_EN.json | 1 + 6 files changed, 18 insertions(+), 1 deletion(-) diff --git a/res/css/views/avatars/_DecoratedRoomAvatar.scss b/res/css/views/avatars/_DecoratedRoomAvatar.scss index b912302f382..7927f82c2f5 100644 --- a/res/css/views/avatars/_DecoratedRoomAvatar.scss +++ b/res/css/views/avatars/_DecoratedRoomAvatar.scss @@ -65,6 +65,10 @@ limitations under the License. background-color: $presence-away; } + .mx_DecoratedRoomAvatar_icon_busy::before { + background-color: $presence-busy; + } + .mx_NotificationBadge, .mx_RoomTile_badgeContainer { position: absolute; top: 0; diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss index baee895d9f6..7ecf47d64d9 100644 --- a/res/themes/legacy-light/css/_legacy-light.scss +++ b/res/themes/legacy-light/css/_legacy-light.scss @@ -137,6 +137,7 @@ $roomtile-selected-bg-color: #fff; $presence-away: #d9b072; $presence-offline: #e3e8f0; +$presence-busy: #FF5B55; // Legacy theme backports $accent: #0DBD8B; diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 6d7921eb0b1..11777c00758 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -136,6 +136,7 @@ $rte-code-bg-color: rgba(0, 0, 0, 0.04); // ******************** $presence-away: #d9b072; $presence-offline: $quinary-content; +$presence-busy: $alert; // ******************** // Inputs diff --git a/src/components/views/avatars/DecoratedRoomAvatar.tsx b/src/components/views/avatars/DecoratedRoomAvatar.tsx index 0456a2e6340..eb450b40588 100644 --- a/src/components/views/avatars/DecoratedRoomAvatar.tsx +++ b/src/components/views/avatars/DecoratedRoomAvatar.tsx @@ -57,6 +57,7 @@ enum Icon { PresenceOnline = "ONLINE", PresenceAway = "AWAY", PresenceOffline = "OFFLINE", + PresenceBusy = "BUSY", } function tooltipText(variant: Icon) { @@ -69,6 +70,8 @@ function tooltipText(variant: Icon) { return _t("Away"); case Icon.PresenceOffline: return _t("Offline"); + case Icon.PresenceBusy: + return _t("Busy"); } } @@ -141,7 +144,9 @@ export default class DecoratedRoomAvatar extends React.PureComponent { } private getPrettyPresence(presence: string, activeAgo: number, currentlyActive: boolean): string { + // for busy presence, we ignore the 'currentlyActive' flag: they're busy whether + // they're active or not. It can be set while the user is active in which case + // the 'active ago' ends up being 0. + if (presence === "org.matrix.msc3026.busy") return _t("Busy"); + if (!currentlyActive && activeAgo !== undefined && activeAgo > 0) { const duration = this.getDuration(activeAgo); if (presence === "online") return _t("Online for %(duration)s", { duration: duration }); diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 8249025ad2a..df738115252 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1739,6 +1739,7 @@ "%(duration)sm": "%(duration)sm", "%(duration)sh": "%(duration)sh", "%(duration)sd": "%(duration)sd", + "Busy": "Busy", "Online for %(duration)s": "Online for %(duration)s", "Idle for %(duration)s": "Idle for %(duration)s", "Offline for %(duration)s": "Offline for %(duration)s", From e524aa94dea8983c157f4f9468f00baf90e0381b Mon Sep 17 00:00:00 2001 From: David Baker Date: Mon, 14 Mar 2022 10:08:41 +0000 Subject: [PATCH 2/3] Use UnstableValue --- src/components/views/avatars/DecoratedRoomAvatar.tsx | 5 ++++- src/components/views/rooms/PresenceLabel.tsx | 4 +++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/views/avatars/DecoratedRoomAvatar.tsx b/src/components/views/avatars/DecoratedRoomAvatar.tsx index eb450b40588..dffd3cfbb4c 100644 --- a/src/components/views/avatars/DecoratedRoomAvatar.tsx +++ b/src/components/views/avatars/DecoratedRoomAvatar.tsx @@ -21,6 +21,7 @@ import { User, UserEvent } from "matrix-js-sdk/src/models/user"; import { MatrixEvent } from "matrix-js-sdk/src/models/event"; import { EventType } from "matrix-js-sdk/src/@types/event"; import { JoinRule } from "matrix-js-sdk/src/@types/partials"; +import { UnstableValue } from "matrix-js-sdk/src/NamespacedValue"; import RoomAvatar from "./RoomAvatar"; import NotificationBadge from '../rooms/NotificationBadge'; @@ -50,6 +51,8 @@ interface IState { icon: Icon; } +const BUSY_PRESENCE_NAME = new UnstableValue("busy", "org.matrix.msc3026.busy"); + enum Icon { // Note: the names here are used in CSS class names None = "NONE", // ... except this one @@ -144,7 +147,7 @@ export default class DecoratedRoomAvatar extends React.PureComponent { // for busy presence, we ignore the 'currentlyActive' flag: they're busy whether // they're active or not. It can be set while the user is active in which case // the 'active ago' ends up being 0. - if (presence === "org.matrix.msc3026.busy") return _t("Busy"); + if (BUSY_PRESENCE_NAME.matches(presence)) return _t("Busy"); if (!currentlyActive && activeAgo !== undefined && activeAgo > 0) { const duration = this.getDuration(activeAgo); From a61fdb2380244a7f4dba3f9cf9cde2820bb0ca8f Mon Sep 17 00:00:00 2001 From: David Baker Date: Mon, 14 Mar 2022 10:12:11 +0000 Subject: [PATCH 3/3] Add the import --- src/components/views/rooms/PresenceLabel.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/views/rooms/PresenceLabel.tsx b/src/components/views/rooms/PresenceLabel.tsx index 0bbd7f2b37c..0ae3047f01f 100644 --- a/src/components/views/rooms/PresenceLabel.tsx +++ b/src/components/views/rooms/PresenceLabel.tsx @@ -15,6 +15,7 @@ limitations under the License. */ import React from 'react'; +import { UnstableValue } from "matrix-js-sdk/src/NamespacedValue"; import { _t } from '../../../languageHandler'; import { replaceableComponent } from "../../../utils/replaceableComponent";