Make cutout in the decorated room avatar transparent rather than fixed

res/css/_components.scss

@@ -184,7 +184,6 @@
 @import "./views/rooms/_RoomRecoveryReminder.scss";
 @import "./views/rooms/_RoomSublist.scss";
 @import "./views/rooms/_RoomTile.scss";
-@import "./views/rooms/_RoomTileIcon.scss";
 @import "./views/rooms/_RoomUpgradeWarningBar.scss";
 @import "./views/rooms/_SearchBar.scss";
 @import "./views/rooms/_SendMessageComposer.scss";

res/css/views/avatars/_DecoratedRoomAvatar.scss

@@ -18,10 +18,52 @@ limitations under the License.
 .mx_DecoratedRoomAvatar, .mx_TemporaryTile {
     position: relative;
 
-    .mx_RoomTileIcon {
+    &.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar {
+        mask-image: url('$(res)/img/element-icons/roomlist/decorated-avatar-mask.svg');
+        mask-position: center;
+        mask-size: contain;
+        mask-repeat: no-repeat;
+    }
+
+    .mx_DecoratedRoomAvatar_icon {
         position: absolute;
-        bottom: 0;
+        bottom: -2px;
-        right: 0;
+        right: -2px;
+        margin: 4px;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+    }
+
+    .mx_DecoratedRoomAvatar_icon::before {
+        content: '';
+        width: 8px;
+        height: 8px;
+        position: absolute;
+        border-radius: 8px;
+    }
+
+    .mx_DecoratedRoomAvatar_icon_globe {
+        background-color: #fff;
+    }
+    .mx_DecoratedRoomAvatar_icon_globe::before {
+        mask-position: center;
+        mask-size: contain;
+        mask-repeat: no-repeat;
+        background: $secondary-fg-color;
+        mask-image: url('$(res)/img/globe.svg');
+    }
+
+    .mx_DecoratedRoomAvatar_icon_offline::before {
+        background-color: $presence-offline;
+    }
+
+    .mx_DecoratedRoomAvatar_icon_online::before {
+        background-color: $presence-online;
+    }
+
+    .mx_DecoratedRoomAvatar_icon_away::before {
+        background-color: $presence-away;
     }
 
     .mx_NotificationBadge, .mx_RoomTile_badgeContainer {

res/css/views/rooms/_RoomTileIcon.scss

@@ -1,69 +0,0 @@
-/*
-Copyright 2020 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_RoomTileIcon {
-    width: 12px;
-    height: 12px;
-    border-radius: 12px;
-    background-color: $roomlist-bg-color; // to match the room list itself
-}
-
-.mx_RoomTileIcon_globe::before {
-    content: '';
-    width: 8px;
-    height: 8px;
-    top: 2px;
-    left: 2px;
-    position: absolute;
-    mask-position: center;
-    mask-size: contain;
-    mask-repeat: no-repeat;
-    background: $secondary-fg-color;
-    mask-image: url('$(res)/img/globe.svg');
-}
-
-.mx_RoomTileIcon_offline::before {
-    content: '';
-    width: 8px;
-    height: 8px;
-    top: 2px;
-    left: 2px;
-    position: absolute;
-    border-radius: 8px;
-    background-color: $presence-offline;
-}
-
-.mx_RoomTileIcon_online::before {
-    content: '';
-    width: 8px;
-    height: 8px;
-    top: 2px;
-    left: 2px;
-    position: absolute;
-    border-radius: 8px;
-    background-color: $presence-online;
-}
-
-.mx_RoomTileIcon_away::before {
-    content: '';
-    width: 8px;
-    height: 8px;
-    top: 2px;
-    left: 2px;
-    position: absolute;
-    border-radius: 8px;
-    background-color: $presence-away;
-}

res/img/element-icons/roomlist/decorated-avatar-mask.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.7161 22.2903C31.5425 20.3595 32 18.2332 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32C18.2332 32 20.3595 31.5425 22.2903 30.7161C20.8956 29.6174 20 27.9133 20 26C20 22.6863 22.6863 20 26 20C27.9133 20 29.6174 20.8956 30.7161 22.2903Z" fill="black"/>
+</svg>

src/components/views/avatars/DecoratedRoomAvatar.tsx

@@ -14,15 +14,22 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React from "react";
+import classNames from "classnames";
 import { Room } from "matrix-js-sdk/src/models/room";
+import { User } from "matrix-js-sdk/src/models/user";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 
 import { TagID } from '../../../stores/room-list/models';
 import RoomAvatar from "./RoomAvatar";
-import RoomTileIcon from "../rooms/RoomTileIcon";
 import NotificationBadge from '../rooms/NotificationBadge';
 import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
 import { NotificationState } from "../../../stores/notifications/NotificationState";
+import {isPresenceEnabled} from "../../../utils/presence";
+import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import {_t} from "../../../languageHandler";
+import TextWithTooltip from "../elements/TextWithTooltip";
+import DMRoomMap from "../../../utils/DMRoomMap";
 
 interface IProps {
     room: Room;
@@ -36,18 +43,134 @@ interface IProps {
 
 interface IState {
     notificationState?: NotificationState;
+    icon: Icon;
+}
+
+enum Icon {
+    // Note: the names here are used in CSS class names
+    None = "NONE", // ... except this one
+    Globe = "GLOBE",
+    PresenceOnline = "ONLINE",
+    PresenceAway = "AWAY",
+    PresenceOffline = "OFFLINE",
+}
+
+function tooltipText(variant: Icon) {
+    switch (variant) {
+        case Icon.Globe:
+            return _t("This room is public");
+        case Icon.PresenceOnline:
+            return _t("Online");
+        case Icon.PresenceAway:
+            return _t("Away");
+        case Icon.PresenceOffline:
+            return _t("Offline");
+    }
 }
 
 export default class DecoratedRoomAvatar extends React.PureComponent<IProps, IState> {
+    private _dmUser: User;
+    private isUnmounted = false;
+    private isWatchingTimeline = false;
 
     constructor(props: IProps) {
         super(props);
 
         this.state = {
             notificationState: RoomNotificationStateStore.instance.getRoomState(this.props.room),
+            icon: this.calculateIcon(),
         };
     }
 
+    public componentWillUnmount() {
+        this.isUnmounted = true;
+        if (this.isWatchingTimeline) this.props.room.off('Room.timeline', this.onRoomTimeline);
+        this.dmUser = null; // clear listeners, if any
+    }
+
+    private get isPublicRoom(): boolean {
+        const joinRules = this.props.room.currentState.getStateEvents("m.room.join_rules", "");
+        const joinRule = joinRules && joinRules.getContent().join_rule;
+        return joinRule === 'public';
+    }
+
+    private get dmUser(): User {
+        return this._dmUser;
+    }
+
+    private set dmUser(val: User) {
+        const oldUser = this._dmUser;
+        this._dmUser = val;
+        if (oldUser && oldUser !== this._dmUser) {
+            oldUser.off('User.currentlyActive', this.onPresenceUpdate);
+            oldUser.off('User.presence', this.onPresenceUpdate);
+        }
+        if (this._dmUser && oldUser !== this._dmUser) {
+            this._dmUser.on('User.currentlyActive', this.onPresenceUpdate);
+            this._dmUser.on('User.presence', this.onPresenceUpdate);
+        }
+    }
+
+    private onRoomTimeline = (ev: MatrixEvent, room: Room) => {
+        if (this.isUnmounted) return;
+
+        // apparently these can happen?
+        if (!room) return;
+        if (this.props.room.roomId !== room.roomId) return;
+
+        if (ev.getType() === 'm.room.join_rules' || ev.getType() === 'm.room.member') {
+            this.setState({icon: this.calculateIcon()});
+        }
+    };
+
+    private onPresenceUpdate = () => {
+        if (this.isUnmounted) return;
+
+        let newIcon = this.getPresenceIcon();
+        if (newIcon !== this.state.icon) this.setState({icon: newIcon});
+    };
+
+    private getPresenceIcon(): Icon {
+        if (!this.dmUser) return Icon.None;
+
+        let icon = Icon.None;
+
+        const isOnline = this.dmUser.currentlyActive || this.dmUser.presence === 'online';
+        if (isOnline) {
+            icon = Icon.PresenceOnline;
+        } else if (this.dmUser.presence === 'offline') {
+            icon = Icon.PresenceOffline;
+        } else if (this.dmUser.presence === 'unavailable') {
+            icon = Icon.PresenceAway;
+        }
+
+        return icon;
+    }
+
+    private calculateIcon(): Icon {
+        let icon = Icon.None;
+
+        // We look at the DMRoomMap and not the tag here so that we don't exclude DMs in Favourites
+        const otherUserId = DMRoomMap.shared().getUserIdForRoomId(this.props.room.roomId);
+        if (otherUserId && this.props.room.getJoinedMemberCount() === 2) {
+            // Track presence, if available
+            if (isPresenceEnabled()) {
+                if (otherUserId) {
+                    this.dmUser = MatrixClientPeg.get().getUser(otherUserId);
+                    icon = this.getPresenceIcon();
+                }
+            }
+        } else {
+            // Track publicity
+            icon = this.isPublicRoom ? Icon.Globe : Icon.None;
+            if (!this.isWatchingTimeline) {
+                this.props.room.on('Room.timeline', this.onRoomTimeline);
+                this.isWatchingTimeline = true;
+            }
+        }
+        return icon;
+    }
+
     public render(): React.ReactNode {
         let badge: React.ReactNode;
         if (this.props.displayBadge) {
@@ -58,7 +181,19 @@ export default class DecoratedRoomAvatar extends React.PureComponent<IProps, ISt
             />;
         }
 
-        return <div className="mx_DecoratedRoomAvatar">
+        let icon;
+        if (this.state.icon !== Icon.None) {
+            icon = <TextWithTooltip
+                tooltip={tooltipText(this.state.icon)}
+                class={`mx_DecoratedRoomAvatar_icon mx_DecoratedRoomAvatar_icon_${this.state.icon.toLowerCase()}`}
+            />;
+        }
+
+        const classes = classNames("mx_DecoratedRoomAvatar", {
+            mx_DecoratedRoomAvatar_cutout: icon,
+        });
+
+        return <div className={classes}>
             <RoomAvatar
                 room={this.props.room}
                 width={this.props.avatarSize}
@@ -66,7 +201,7 @@ export default class DecoratedRoomAvatar extends React.PureComponent<IProps, ISt
                 oobData={this.props.oobData}
                 viewAvatarOnClick={this.props.viewAvatarOnClick}
             />
-            <RoomTileIcon room={this.props.room} />
+            {icon}
             {badge}
         </div>;
     }

src/components/views/rooms/RoomTileIcon.tsx

@@ -1,168 +0,0 @@
-/*
-Copyright 2020 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 from "react";
-import { Room } from "matrix-js-sdk/src/models/room";
-import { DefaultTagID, TagID } from "../../../stores/room-list/models";
-import { User } from "matrix-js-sdk/src/models/user";
-import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-import DMRoomMap from "../../../utils/DMRoomMap";
-import { MatrixClientPeg } from "../../../MatrixClientPeg";
-import { isPresenceEnabled } from "../../../utils/presence";
-import { _t } from "../../../languageHandler";
-import TextWithTooltip from "../elements/TextWithTooltip";
-
-enum Icon {
-    // Note: the names here are used in CSS class names
-    None = "NONE", // ... except this one
-    Globe = "GLOBE",
-    PresenceOnline = "ONLINE",
-    PresenceAway = "AWAY",
-    PresenceOffline = "OFFLINE",
-}
-
-function tooltipText(variant: Icon) {
-    switch (variant) {
-        case Icon.Globe:
-            return _t("This room is public");
-        case Icon.PresenceOnline:
-            return _t("Online");
-        case Icon.PresenceAway:
-            return _t("Away");
-        case Icon.PresenceOffline:
-            return _t("Offline");
-    }
-}
-
-interface IProps {
-    room: Room;
-}
-
-interface IState {
-    icon: Icon;
-}
-
-export default class RoomTileIcon extends React.Component<IProps, IState> {
-    private _dmUser: User;
-    private isUnmounted = false;
-    private isWatchingTimeline = false;
-
-    constructor(props: IProps) {
-        super(props);
-
-        this.state = {
-            icon: this.calculateIcon(),
-        };
-    }
-
-    private get isPublicRoom(): boolean {
-        const joinRules = this.props.room.currentState.getStateEvents("m.room.join_rules", "");
-        const joinRule = joinRules && joinRules.getContent().join_rule;
-        return joinRule === 'public';
-    }
-
-    private get dmUser(): User {
-        return this._dmUser;
-    }
-
-    private set dmUser(val: User) {
-        const oldUser = this._dmUser;
-        this._dmUser = val;
-        if (oldUser && oldUser !== this._dmUser) {
-            oldUser.off('User.currentlyActive', this.onPresenceUpdate);
-            oldUser.off('User.presence', this.onPresenceUpdate);
-        }
-        if (this._dmUser && oldUser !== this._dmUser) {
-            this._dmUser.on('User.currentlyActive', this.onPresenceUpdate);
-            this._dmUser.on('User.presence', this.onPresenceUpdate);
-        }
-    }
-
-    public componentWillUnmount() {
-        this.isUnmounted = true;
-        if (this.isWatchingTimeline) this.props.room.off('Room.timeline', this.onRoomTimeline);
-        this.dmUser = null; // clear listeners, if any
-    }
-
-    private onRoomTimeline = (ev: MatrixEvent, room: Room) => {
-        if (this.isUnmounted) return;
-
-        // apparently these can happen?
-        if (!room) return;
-        if (this.props.room.roomId !== room.roomId) return;
-
-        if (ev.getType() === 'm.room.join_rules' || ev.getType() === 'm.room.member') {
-            this.setState({icon: this.calculateIcon()});
-        }
-    };
-
-    private onPresenceUpdate = () => {
-        if (this.isUnmounted) return;
-
-        let newIcon = this.getPresenceIcon();
-        if (newIcon !== this.state.icon) this.setState({icon: newIcon});
-    };
-
-    private getPresenceIcon(): Icon {
-        if (!this.dmUser) return Icon.None;
-
-        let icon = Icon.None;
-
-        const isOnline = this.dmUser.currentlyActive || this.dmUser.presence === 'online';
-        if (isOnline) {
-            icon = Icon.PresenceOnline;
-        } else if (this.dmUser.presence === 'offline') {
-            icon = Icon.PresenceOffline;
-        } else if (this.dmUser.presence === 'unavailable') {
-            icon = Icon.PresenceAway;
-        }
-
-        return icon;
-    }
-
-    private calculateIcon(): Icon {
-        let icon = Icon.None;
-
-        // We look at the DMRoomMap and not the tag here so that we don't exclude DMs in Favourites
-        const otherUserId = DMRoomMap.shared().getUserIdForRoomId(this.props.room.roomId);
-        if (otherUserId && this.props.room.getJoinedMemberCount() === 2) {
-            // Track presence, if available
-            if (isPresenceEnabled()) {
-                if (otherUserId) {
-                    this.dmUser = MatrixClientPeg.get().getUser(otherUserId);
-                    icon = this.getPresenceIcon();
-                }
-            }
-        } else {
-            // Track publicity
-            icon = this.isPublicRoom ? Icon.Globe : Icon.None;
-            if (!this.isWatchingTimeline) {
-                this.props.room.on('Room.timeline', this.onRoomTimeline);
-                this.isWatchingTimeline = true;
-            }
-        }
-        return icon;
-    }
-
-    public render(): React.ReactElement {
-        if (this.state.icon === Icon.None) return null;
-
-        return <TextWithTooltip
-            tooltip={tooltipText(this.state.icon)}
-            class={`mx_RoomTileIcon mx_RoomTileIcon_${this.state.icon.toLowerCase()}`}
-        />;
-    }
-}