From 7820f9c28a7a2958cf348a69c8abc9eec19d453c Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 12 Oct 2020 13:16:55 +0100 Subject: [PATCH] Switch to WidgetAvatar Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/_components.scss | 1 + res/css/views/avatars/_WidgetAvatar.scss | 19 +++++++ .../views/right_panel/_RoomSummaryCard.scss | 3 +- res/css/views/rooms/_Stickers.scss | 4 ++ src/components/views/avatars/WidgetAvatar.tsx | 56 +++++++++++++++++++ src/components/views/elements/AppTile.js | 2 + .../views/right_panel/RoomSummaryCard.tsx | 21 +------ 7 files changed, 85 insertions(+), 21 deletions(-) create mode 100644 res/css/views/avatars/_WidgetAvatar.scss create mode 100644 src/components/views/avatars/WidgetAvatar.tsx diff --git a/res/css/_components.scss b/res/css/_components.scss index e103bd90ce..72686d2938 100644 --- a/res/css/_components.scss +++ b/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"; diff --git a/res/css/views/avatars/_WidgetAvatar.scss b/res/css/views/avatars/_WidgetAvatar.scss new file mode 100644 index 0000000000..8e5cfb54d8 --- /dev/null +++ b/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; +} diff --git a/res/css/views/right_panel/_RoomSummaryCard.scss b/res/css/views/right_panel/_RoomSummaryCard.scss index ab7807d2a2..29b139613e 100644 --- a/res/css/views/right_panel/_RoomSummaryCard.scss +++ b/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 { diff --git a/res/css/views/rooms/_Stickers.scss b/res/css/views/rooms/_Stickers.scss index d99276b70a..94f42efe83 100644 --- a/res/css/views/rooms/_Stickers.scss +++ b/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; diff --git a/src/components/views/avatars/WidgetAvatar.tsx b/src/components/views/avatars/WidgetAvatar.tsx new file mode 100644 index 0000000000..10cca50c26 --- /dev/null +++ b/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, "name" | "url" | "urls"> { + app: IApp; +} + +const WidgetAvatar: React.FC = ({ 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 ( + + ) +}; + +export default WidgetAvatar; diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.js index e540e11633..d31e9e4e79 100644 --- a/src/components/views/elements/AppTile.js +++ b/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 ( + { name } { title ? titleSpacer : '' }{ title } diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx index b57bd44122..e9c4c22c2c 100644 --- a/src/components/views/right_panel/RoomSummaryCard.tsx +++ b/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 = ({ 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({ action: Action.SetRightPanelPhase, @@ -156,7 +139,7 @@ const AppRow: React.FC = ({ app }) => { forceHide={!isPinned} disabled={isPinned} > - + {name} { subtitle }