From 02b08888b52766dbd321cf3c2d2c715bea9f6ec5 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Thu, 22 Jul 2021 16:00:41 +0200
Subject: [PATCH] Use modern layout in file and notification panel

---
 res/css/structures/_FilePanel.scss              | 9 +++++++--
 res/css/structures/_NotificationPanel.scss      | 4 ++--
 src/components/structures/FilePanel.tsx         | 2 ++
 src/components/structures/NotificationPanel.tsx | 2 ++
 4 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/res/css/structures/_FilePanel.scss b/res/css/structures/_FilePanel.scss
index 1a02c0d5ac..c180a8a02d 100644
--- a/res/css/structures/_FilePanel.scss
+++ b/res/css/structures/_FilePanel.scss
@@ -45,9 +45,14 @@ limitations under the License.
 
 /* Overrides for the attachment body tiles */
 
-.mx_FilePanel .mx_EventTile {
+.mx_FilePanel .mx_EventTile:not([data-layout=bubble]) {
     word-break: break-word;
-    margin-top: 32px;
+    margin-top: 10px;
+    padding-top: 0;
+
+    .mx_EventTile_line {
+        padding-left: 0;
+    }
 }
 
 .mx_FilePanel .mx_EventTile .mx_MImageBody {
diff --git a/res/css/structures/_NotificationPanel.scss b/res/css/structures/_NotificationPanel.scss
index e54feca175..d271cd2bcc 100644
--- a/res/css/structures/_NotificationPanel.scss
+++ b/res/css/structures/_NotificationPanel.scss
@@ -84,7 +84,7 @@ limitations under the License.
     display: inline;
 }
 
-.mx_NotificationPanel .mx_EventTile_senderDetails {
+.mx_NotificationPanel .mx_EventTile:not([data-layout=bubble]) .mx_EventTile_senderDetails {
     padding-left: 36px; // align with the room name
     position: relative;
 
@@ -105,7 +105,7 @@ limitations under the License.
     padding-left: 5px;
 }
 
-.mx_NotificationPanel .mx_EventTile_line {
+.mx_NotificationPanel .mx_EventTile:not([data-layout=bubble]) .mx_EventTile_line {
     margin-right: 0px;
     padding-left: 36px; // align with the room name
     padding-top: 0px;
diff --git a/src/components/structures/FilePanel.tsx b/src/components/structures/FilePanel.tsx
index c6d72d04bb..52cf5ae55b 100644
--- a/src/components/structures/FilePanel.tsx
+++ b/src/components/structures/FilePanel.tsx
@@ -36,6 +36,7 @@ import ResizeNotifier from '../../utils/ResizeNotifier';
 import TimelinePanel from "./TimelinePanel";
 import Spinner from "../views/elements/Spinner";
 import { TileShape } from '../views/rooms/EventTile';
+import { Layout } from "../../settings/Layout";
 
 interface IProps {
     roomId: string;
@@ -267,6 +268,7 @@ class FilePanel extends React.Component<IProps, IState> {
                         tileShape={TileShape.FileGrid}
                         resizeNotifier={this.props.resizeNotifier}
                         empty={emptyState}
+                        layout={Layout.Group}
                     />
                 </BaseCard>
             );
diff --git a/src/components/structures/NotificationPanel.tsx b/src/components/structures/NotificationPanel.tsx
index 8abc161bab..f71c017c06 100644
--- a/src/components/structures/NotificationPanel.tsx
+++ b/src/components/structures/NotificationPanel.tsx
@@ -23,6 +23,7 @@ import { replaceableComponent } from "../../utils/replaceableComponent";
 import TimelinePanel from "./TimelinePanel";
 import Spinner from "../views/elements/Spinner";
 import { TileShape } from "../views/rooms/EventTile";
+import { Layout } from "../../settings/Layout";
 
 interface IProps {
     onClose(): void;
@@ -52,6 +53,7 @@ export default class NotificationPanel extends React.PureComponent<IProps> {
                     tileShape={TileShape.Notif}
                     empty={emptyState}
                     alwaysShowTimestamps={true}
+                    layout={Layout.Group}
                 />
             );
         } else {