diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss index 16cf06dac56..349654886d8 100644 --- a/res/css/views/right_panel/_TimelineCard.scss +++ b/res/css/views/right_panel/_TimelineCard.scss @@ -1,5 +1,5 @@ /* -Copyright 2021 The Matrix.org Foundation C.I.C. +Copyright 2021 - 2022 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. @@ -35,6 +35,12 @@ limitations under the License. } } + .mx_TimelineCard_timeline { + overflow: hidden; + position: relative; // offset parent for jump to bottom button + flex: 1; + } + .mx_AutoHideScrollbar { padding-right: 10px; width: calc(100% - 10px); @@ -119,8 +125,3 @@ limitations under the License. flex-basis: 48px; // 12 (padding on message list) + 36 (padding on event lines) } } - -.mx_TimelineCard_timeline { - overflow: hidden; - position: relative; // offset parent for jump to bottom button -} diff --git a/res/css/views/rooms/_RoomPreviewBar.scss b/res/css/views/rooms/_RoomPreviewBar.scss index 8e4a9ee5756..7cce08c7896 100644 --- a/res/css/views/rooms/_RoomPreviewBar.scss +++ b/res/css/views/rooms/_RoomPreviewBar.scss @@ -1,5 +1,5 @@ /* -Copyright 2015, 2016 OpenMarket Ltd +Copyright 2015 - 2022 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. @@ -98,6 +98,14 @@ limitations under the License. } } +// With maximised widgets, the panel fits in better when rounded +.mx_MainSplit_maximisedWidget .mx_RoomPreviewBar_panel { + margin: $container-gap-width; + margin-right: calc($container-gap-width / 2); // Shared with right panel + margin-top: 0; // Already covered by apps drawer + border-radius: 8px; +} + .mx_RoomPreviewBar_dialog { margin: auto; box-sizing: content; diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index ffd80e02223..8ea8f2dc34e 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -1983,11 +1983,11 @@ export class RoomView extends React.Component { ); let messageComposer; let searchInfo; - const canSpeak = ( + const showComposer = ( // joined and not showing search results myMembership === 'join' && !this.state.searchResults ); - if (canSpeak) { + if (showComposer) { messageComposer = { const showChatEffects = SettingsStore.getValue('showChatEffects'); - let mainSplitBody; + let mainSplitBody: React.ReactFragment; + let mainSplitContentClassName: string; // Decide what to show in the main split switch (this.state.mainSplitContentType) { case MainSplitContentType.Timeline: + mainSplitContentClassName = "mx_MainSplit_timeline"; mainSplitBody = <> { ; break; case MainSplitContentType.MaximisedWidget: - mainSplitBody = ; + mainSplitContentClassName = "mx_MainSplit_maximisedWidget"; + mainSplitBody = <> + + { previewBar } + ; break; case MainSplitContentType.Video: { const app = getVoiceChannel(this.state.room.roomId); if (!app) break; + mainSplitContentClassName = "mx_MainSplit_video"; mainSplitBody = { />; } } + const mainSplitContentClasses = classNames("mx_RoomView_body", mainSplitContentClassName); + let excludedRightPanelPhaseButtons = [RightPanelPhases.Timeline]; let onAppsClick = this.onAppsClick; let onForgetClick = this.onForgetClick; @@ -2162,6 +2171,7 @@ export class RoomView extends React.Component { onForgetClick = null; onSearchClick = null; } + return (
@@ -2183,7 +2193,7 @@ export class RoomView extends React.Component { excludedRightPanelPhaseButtons={excludedRightPanelPhaseButtons} /> -
+
{ mainSplitBody }
diff --git a/src/components/views/right_panel/TimelineCard.tsx b/src/components/views/right_panel/TimelineCard.tsx index bd7d4361cba..b0c83df43e1 100644 --- a/src/components/views/right_panel/TimelineCard.tsx +++ b/src/components/views/right_panel/TimelineCard.tsx @@ -221,6 +221,9 @@ export default class TimelineCard extends React.Component { const isUploading = ContentMessages.sharedInstance().getCurrentUploads(this.props.composerRelation).length > 0; + const myMembership = this.props.room.getMyMembership(); + const showComposer = myMembership === "join"; + return ( { ) } - + { showComposer && ( + + ) } );