Show room preview bar with maximised widgets (#8180)

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
-}

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;

src/components/structures/RoomView.tsx

@@ -1983,11 +1983,11 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         );
 
         let messageComposer; let searchInfo;
-        const canSpeak = (
+        const showComposer = (
             // joined and not showing search results
             myMembership === 'join' && !this.state.searchResults
         );
-        if (canSpeak) {
+        if (showComposer) {
             messageComposer =
                 <MessageComposer
                     room={this.state.room}
@@ -2103,10 +2103,12 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
 
         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 = <>
                     <Measured
                         sensor={this.roomViewBody.current}
@@ -2126,16 +2128,21 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                 </>;
                 break;
             case MainSplitContentType.MaximisedWidget:
-                mainSplitBody = <AppsDrawer
+                mainSplitContentClassName = "mx_MainSplit_maximisedWidget";
+                mainSplitBody = <>
+                    <AppsDrawer
                         room={this.state.room}
                         userId={this.context.credentials.userId}
                         resizeNotifier={this.props.resizeNotifier}
                         showApps={true}
-                />;
+                    />
+                    { previewBar }
+                </>;
                 break;
             case MainSplitContentType.Video: {
                 const app = getVoiceChannel(this.state.room.roomId);
                 if (!app) break;
+                mainSplitContentClassName = "mx_MainSplit_video";
                 mainSplitBody = <AppTile
                     app={app}
                     room={this.state.room}
@@ -2147,6 +2154,8 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                 />;
             }
         }
+        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<IRoomProps, IRoomState> {
             onForgetClick = null;
             onSearchClick = null;
         }
+
         return (
             <RoomContext.Provider value={this.state}>
                 <main className={mainClasses} ref={this.roomView} onKeyDown={this.onReactKeyDown}>
@@ -2183,7 +2193,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                             excludedRightPanelPhaseButtons={excludedRightPanelPhaseButtons}
                         />
                         <MainSplit panel={rightPanel} resizeNotifier={this.props.resizeNotifier}>
-                            <div className="mx_RoomView_body" ref={this.roomViewBody} data-layout={this.state.layout}>
+                            <div className={mainSplitContentClasses} ref={this.roomViewBody} data-layout={this.state.layout}>
                                 { mainSplitBody }
                             </div>
                         </MainSplit>

src/components/views/right_panel/TimelineCard.tsx

@@ -221,6 +221,9 @@ export default class TimelineCard extends React.Component<IProps, IState> {
 
         const isUploading = ContentMessages.sharedInstance().getCurrentUploads(this.props.composerRelation).length > 0;
 
+        const myMembership = this.props.room.getMyMembership();
+        const showComposer = myMembership === "join";
+
         return (
             <RoomContext.Provider value={{
                 ...this.context,
@@ -270,6 +273,7 @@ export default class TimelineCard extends React.Component<IProps, IState> {
                         <UploadBar room={this.props.room} relation={this.props.composerRelation} />
                     ) }
 
+                    { showComposer && (
                         <MessageComposer
                             room={this.props.room}
                             relation={this.props.composerRelation}
@@ -279,6 +283,7 @@ export default class TimelineCard extends React.Component<IProps, IState> {
                             e2eStatus={this.props.e2eStatus}
                             compact={true}
                         />
+                    ) }
                 </BaseCard>
             </RoomContext.Provider>
         );