From e26d3e9b684f6680132a3208d5594adb84269276 Mon Sep 17 00:00:00 2001 From: Timo <16718859+toger5@users.noreply.github.com> Date: Wed, 20 Dec 2023 13:39:57 +0100 Subject: [PATCH] Update element call embedding UI (#12056) Signed-off-by: Timo K --- res/css/views/rooms/_AppsDrawer.pcss | 4 ++++ res/css/views/voip/_CallView.pcss | 4 ---- src/components/views/elements/AppTile.tsx | 2 ++ 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/res/css/views/rooms/_AppsDrawer.pcss b/res/css/views/rooms/_AppsDrawer.pcss index eeb533c0af..99d64739fa 100644 --- a/res/css/views/rooms/_AppsDrawer.pcss +++ b/res/css/views/rooms/_AppsDrawer.pcss @@ -321,6 +321,10 @@ limitations under the License. display: none; } } + + &.mx_AppTileBody--call { + border-radius: 0px; + } } /* appTileBody is embedded to PersistedElement outside of mx_AppTile, diff --git a/res/css/views/voip/_CallView.pcss b/res/css/views/voip/_CallView.pcss index 4e534484d8..44cbbfd0b1 100644 --- a/res/css/views/voip/_CallView.pcss +++ b/res/css/views/voip/_CallView.pcss @@ -20,12 +20,8 @@ limitations under the License. display: flex; flex-direction: column; - margin: var(--container-gap-width); - margin-right: calc(var(--container-gap-width) / 2); background-color: $header-panel-bg-color; - padding: 8px; - border-radius: 8px; .mx_AppTile { width: auto; diff --git a/src/components/views/elements/AppTile.tsx b/src/components/views/elements/AppTile.tsx index 13fa3daac7..642e2bd476 100644 --- a/src/components/views/elements/AppTile.tsx +++ b/src/components/views/elements/AppTile.tsx @@ -608,10 +608,12 @@ export default class AppTile extends React.Component { "microphone; camera; encrypted-media; autoplay; display-capture; clipboard-write; " + "clipboard-read;"; const appTileBodyClass = classNames({ + // We don't want mx_AppTileBody (rounded corners) for call widgets "mx_AppTileBody": true, "mx_AppTileBody--large": !this.props.miniMode, "mx_AppTileBody--mini": this.props.miniMode, "mx_AppTileBody--loading": this.state.loading, + "mx_AppTileBody--call": this.props.app.type === WidgetType.CALL.preferred, }); const appTileBodyStyles: CSSProperties = {}; if (this.props.pointerEvents) {