Switch to WidgetAvatar

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

res/css/_components.scss

@@ -51,6 +51,7 @@
 @import "./views/avatars/_DecoratedRoomAvatar.scss";
 @import "./views/avatars/_MemberStatusMessageAvatar.scss";
 @import "./views/avatars/_PulsedAvatar.scss";
+@import "./views/avatars/_WidgetAvatar.scss";
 @import "./views/context_menus/_IconizedContextMenu.scss";
 @import "./views/context_menus/_MessageContextMenu.scss";
 @import "./views/context_menus/_StatusMessageContextMenu.scss";

res/css/views/avatars/_WidgetAvatar.scss

@@ -0,0 +1,19 @@
+/*
+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_WidgetAvatar {
+    border-radius: 4px;
+}

res/css/views/right_panel/_RoomSummaryCard.scss

@@ -165,10 +165,9 @@ limitations under the License.
                 color: $primary-fg-color;
             }
 
-            img {
+            .mx_BaseAvatar_image {
                 vertical-align: top;
                 margin-right: 12px;
-                border-radius: 4px;
             }
 
             &::before {

res/css/views/rooms/_Stickers.scss

@@ -16,6 +16,10 @@
         border-bottom: none;
     }
 
+    .mx_AppTileMenuBar {
+        padding: 0;
+    }
+
     iframe {
         // Sticker picker depends on the fixed height previously used for all tiles
         height: 273px;

src/components/views/avatars/WidgetAvatar.tsx

@@ -0,0 +1,56 @@
+/*
+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, {ComponentProps, useContext} from 'react';
+import classNames from 'classnames';
+import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";
+
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import {IApp} from "../../../stores/WidgetStore";
+import BaseAvatar, {BaseAvatarType} from "./BaseAvatar";
+
+interface IProps extends Omit<ComponentProps<BaseAvatarType>, "name" | "url" | "urls"> {
+    app: IApp;
+}
+
+const WidgetAvatar: React.FC<IProps> = ({ app, className, width = 20, height = 20, ...props }) => {
+    const cli = useContext(MatrixClientContext);
+
+    let iconUrls = [require("../../../../res/img/element-icons/room/default_app.svg")];
+    // heuristics for some better icons until Widgets support their own icons
+    if (app.type.includes("meeting") || app.type.includes("calendar")) {
+        iconUrls = [require("../../../../res/img/element-icons/room/default_cal.svg")];
+    } else if (app.type.includes("pad") || app.type.includes("doc") || app.type.includes("calc")) {
+        iconUrls = [require("../../../../res/img/element-icons/room/default_doc.svg")];
+    } else if (app.type.includes("clock")) {
+        iconUrls = [require("../../../../res/img/element-icons/room/default_clock.svg")];
+    }
+
+    return (
+        <BaseAvatar
+            {...props}
+            name={app.id}
+            className={classNames("mx_WidgetAvatar", className)}
+            // MSC2765
+            url={app.avatar_url ? getHttpUriForMxc(cli.getHomeserverUrl(), app.avatar_url, 20, 20, "crop") : undefined}
+            urls={iconUrls}
+            width={width}
+            height={height}
+        />
+    )
+};
+
+export default WidgetAvatar;

src/components/views/elements/AppTile.js

@@ -39,6 +39,7 @@ import {StopGapWidget} from "../../../stores/widgets/StopGapWidget";
 import {ElementWidgetActions} from "../../../stores/widgets/ElementWidgetActions";
 import {MatrixCapabilities} from "matrix-widget-api";
 import RoomWidgetContextMenu from "../context_menus/WidgetContextMenu";
+import WidgetAvatar from "../avatars/WidgetAvatar";
 
 export default class AppTile extends React.Component {
     constructor(props) {
@@ -273,6 +274,7 @@ export default class AppTile extends React.Component {
 
         return (
             <span>
+                <WidgetAvatar app={this.props.app} />
                 <b>{ name }</b>
                 <span>{ title ? titleSpacer : '' }{ title }</span>
             </span>

src/components/views/right_panel/RoomSummaryCard.tsx

@@ -17,7 +17,6 @@ limitations under the License.
 import React, {useCallback, useState, useEffect, useContext} from "react";
 import classNames from "classnames";
 import {Room} from "matrix-js-sdk/src/models/room";
-import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";
 
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { useIsEncrypted } from '../../../hooks/useIsEncrypted';
@@ -37,7 +36,7 @@ import WidgetUtils from "../../../utils/WidgetUtils";
 import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
 import SettingsStore from "../../../settings/SettingsStore";
 import TextWithTooltip from "../elements/TextWithTooltip";
-import BaseAvatar from "../avatars/BaseAvatar";
+import WidgetAvatar from "../avatars/WidgetAvatar";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import WidgetStore, {IApp, MAX_PINNED} from "../../../stores/WidgetStore";
 import { E2EStatus } from "../../../utils/ShieldUtils";
@@ -90,26 +89,10 @@ interface IAppRowProps {
 }
 
 const AppRow: React.FC<IAppRowProps> = ({ app }) => {
-    const cli = useContext(MatrixClientContext);
-
     const name = WidgetUtils.getWidgetName(app);
     const dataTitle = WidgetUtils.getWidgetDataTitle(app);
     const subtitle = dataTitle && " - " + dataTitle;
 
-    let iconUrls = [require("../../../../res/img/element-icons/room/default_app.svg")];
-    // heuristics for some better icons until Widgets support their own icons
-    if (app.type.includes("meeting") || app.type.includes("calendar")) {
-        iconUrls = [require("../../../../res/img/element-icons/room/default_cal.svg")];
-    } else if (app.type.includes("pad") || app.type.includes("doc") || app.type.includes("calc")) {
-        iconUrls = [require("../../../../res/img/element-icons/room/default_doc.svg")];
-    } else if (app.type.includes("clock")) {
-        iconUrls = [require("../../../../res/img/element-icons/room/default_clock.svg")];
-    }
-
-    if (app.avatar_url) { // MSC2765
-        iconUrls.unshift(getHttpUriForMxc(cli.getHomeserverUrl(), app.avatar_url, 20, 20, "crop"));
-    }
-
     const onOpenWidgetClick = () => {
         defaultDispatcher.dispatch<SetRightPanelPhasePayload>({
             action: Action.SetRightPanelPhase,
@@ -156,7 +139,7 @@ const AppRow: React.FC<IAppRowProps> = ({ app }) => {
             forceHide={!isPinned}
             disabled={isPinned}
         >
-            <BaseAvatar name={app.id} urls={iconUrls} width={20} height={20} />
+            <WidgetAvatar app={app} />
             <span>{name}</span>
             { subtitle }
         </AccessibleTooltipButton>