Allow bubble layout in Thread View (#7478)

matrix-org · Jan 12, 2022 · f5465b3 · f5465b3
1 parent 038a6bc
commit f5465b3
Show file tree

Hide file tree

Showing 4 changed files with 144 additions and 99 deletions.
diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss
@@ -180,7 +180,7 @@ limitations under the License.
         border-top-left-radius: var(--cornerRadius);
         border-top-right-radius: var(--cornerRadius);
 
-        > a {
+        > a, .mx_MessageTimestamp {
             position: absolute;
             padding: 4px 8px;
             bottom: 0;
@@ -375,7 +375,8 @@ limitations under the License.
         margin-left: 9px;
     }
 
-    .mx_EventTile_line > a {
+    .mx_EventTile_line > a,
+    .mx_EventTile_line .mx_MessageTimestamp {
         // Align timestamps with those of normal bubble tiles
         right: auto;
         top: -11px;

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
@@ -841,24 +841,6 @@ $left-gutter: 64px;
     display: flex;
     flex-direction: column;
 
-    .mx_EventTile_senderDetails {
-        display: flex;
-        align-items: center;
-        gap: calc(6px + $selected-message-border-width);
-
-        a {
-            flex: 1;
-            min-width: none;
-            max-width: 100%;
-            display: flex;
-            align-items: center;
-
-            .mx_SenderProfile {
-                flex: 1;
-            }
-        }
-    }
-
     .mx_ThreadView_List {
         flex: 1;
         overflow: scroll;
@@ -869,7 +851,6 @@ $left-gutter: 64px;
     }
 
     .mx_EventTile {
-        width: 100%;
         display: flex;
         flex-direction: column;
         padding-top: 0;
@@ -880,11 +861,7 @@ $left-gutter: 64px;
         }
 
         .mx_MessageTimestamp {
-            left: auto;
-            right: 2px !important;
-            top: 1px !important;
-            font-size: 1rem;
-            text-align: right;
+            font-size: $font-10px;
         }
 
         .mx_ReactionsRow {
@@ -896,16 +873,63 @@ $left-gutter: 64px;
         }
     }
 
-    .mx_EventTile_content,
-    .mx_RedactedBody,
-    .mx_ReplyChain_wrapper {
+    .mx_EventTile[data-layout=bubble] {
         margin-left: 36px;
-        margin-right: 50px;
+        margin-right: 36px;
+
+        &[data-self=true] {
+            align-items: flex-end;
+
+            .mx_EventTile_line.mx_EventTile_mediaLine {
+                margin: 0 -13px 0 0; // align with normal messages
+                padding: 0 !important;
+
+                .mx_MFileBody ~ .mx_MessageTimestamp {
+                    bottom: calc($font-14px + 4px); // above the Decrypt/Download text line
+                }
+            }
+        }
+    }
+
+    .mx_EventTile[data-layout=group] {
+        width: 100%;
 
         .mx_EventTile_content,
         .mx_RedactedBody,
-        .mx_MImageBody {
-            margin: 0;
+        .mx_ReplyChain_wrapper {
+            margin-left: 36px;
+            margin-right: 50px;
+
+            .mx_EventTile_content,
+            .mx_RedactedBody,
+            .mx_MImageBody {
+                margin: 0;
+            }
+        }
+
+        .mx_MessageTimestamp {
+            left: auto;
+            right: 2px !important;
+            top: 1px !important;
+            text-align: right;
+        }
+
+        .mx_EventTile_senderDetails {
+            display: flex;
+            align-items: center;
+            gap: calc(6px + $selected-message-border-width);
+
+            a {
+                flex: 1;
+                min-width: none;
+                max-width: 100%;
+                display: flex;
+                align-items: center;
+
+                .mx_SenderProfile {
+                    flex: 1;
+                }
+            }
         }
     }
 

diff --git a/src/components/structures/ThreadView.tsx b/src/components/structures/ThreadView.tsx
@@ -18,6 +18,7 @@ import React from 'react';
 import { IEventRelation, MatrixEvent, Room } from 'matrix-js-sdk/src';
 import { Thread, ThreadEvent } from 'matrix-js-sdk/src/models/thread';
 import { RelationType } from 'matrix-js-sdk/src/@types/event';
+import classNames from "classnames";
 
 import BaseCard from "../views/right_panel/BaseCard";
 import { RightPanelPhases } from "../../stores/right-panel/RightPanelStorePhases";
@@ -40,6 +41,7 @@ import UploadBar from './UploadBar';
 import { _t } from '../../languageHandler';
 import ThreadListContextMenu from '../views/context_menus/ThreadListContextMenu';
 import RightPanelStore from '../../stores/right-panel/RightPanelStore';
+import SettingsStore from "../../settings/SettingsStore";
 
 interface IProps {
     room: Room;
@@ -53,6 +55,7 @@ interface IProps {
 }
 interface IState {
     thread?: Thread;
+    layout: Layout;
     editState?: EditorStateTransfer;
     replyToEvent?: MatrixEvent;
 }
@@ -63,10 +66,17 @@ export default class ThreadView extends React.Component<IProps, IState> {
 
     private dispatcherRef: string;
     private timelinePanelRef: React.RefObject<TimelinePanel> = React.createRef();
+    private readonly layoutWatcherRef: string;
 
     constructor(props: IProps) {
         super(props);
-        this.state = {};
+        this.state = {
+            layout: SettingsStore.getValue("layout"),
+        };
+
+        this.layoutWatcherRef = SettingsStore.watchSetting("layout", null, (...[,,, value]) =>
+            this.setState({ layout: value as Layout }),
+        );
     }
 
     public componentDidMount(): void {
@@ -82,6 +92,7 @@ export default class ThreadView extends React.Component<IProps, IState> {
         dis.unregister(this.dispatcherRef);
         const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
         room.removeListener(ThreadEvent.New, this.onNewThread);
+        SettingsStore.unwatchSetting(this.layoutWatcherRef);
     }
 
     public componentDidUpdate(prevProps) {
@@ -192,6 +203,12 @@ export default class ThreadView extends React.Component<IProps, IState> {
             event_id: this.state.thread?.id,
         };
 
+        const messagePanelClassNames = classNames(
+            "mx_RoomView_messagePanel",
+            {
+                "mx_GroupLayout": this.state.layout === Layout.Group,
+            });
+
         return (
             <RoomContext.Provider value={{
                 ...this.context,
@@ -216,11 +233,12 @@ export default class ThreadView extends React.Component<IProps, IState> {
                             timelineSet={this.state?.thread?.timelineSet}
                             showUrlPreview={true}
                             tileShape={TileShape.Thread}
-                            layout={Layout.Group}
+                            // ThreadView doesn't support IRC layout at this time
+                            layout={this.state.layout === Layout.Bubble ? Layout.Bubble : Layout.Group}
                             hideThreadedMessages={false}
                             hidden={false}
                             showReactions={true}
-                            className="mx_RoomView_messagePanel mx_GroupLayout"
+                            className={messagePanelClassNames}
                             permalinkCreator={this.props.permalinkCreator}
                             membersLoaded={true}
                             editState={this.state.editState}