Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-16 05:04:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

Show room preview bar with maximised widgets (#8180)

Browse Source
This commit is contained in:
J. Ryan Stinnett 2022-03-30 12:43:54 +01:00 committed by GitHub
parent 4d14128d94
commit 8058f812c2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 50 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
res/css/views/right_panel/_TimelineCard.scss
View File

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

10
res/css/views/rooms/_RoomPreviewBar.scss
View File

@ -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;

30
src/components/structures/RoomView.tsx
View File

@ -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
room={this.state.room}
userId={this.context.credentials.userId}
resizeNotifier={this.props.resizeNotifier}
showApps={true}
/>;
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>

23
src/components/views/right_panel/TimelineCard.tsx
View File

@ -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,15 +273,17 @@ export default class TimelineCard extends React.Component<IProps, IState> {
<UploadBar room={this.props.room} relation={this.props.composerRelation} />
) }
<MessageComposer
room={this.props.room}
relation={this.props.composerRelation}
resizeNotifier={this.props.resizeNotifier}
replyToEvent={this.state.replyToEvent}
permalinkCreator={this.props.permalinkCreator}
e2eStatus={this.props.e2eStatus}
compact={true}
/>
{ showComposer && (
<MessageComposer
room={this.props.room}
relation={this.props.composerRelation}
resizeNotifier={this.props.resizeNotifier}
replyToEvent={this.state.replyToEvent}
permalinkCreator={this.props.permalinkCreator}
e2eStatus={this.props.e2eStatus}
compact={true}
/>
) }
</BaseCard>
</RoomContext.Provider>
);