From 3a8c94de5a95db75de758f32f63d2a395a1c3c86 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sun, 11 Sep 2016 02:15:03 +0100
Subject: [PATCH] CSS for notif & file panel

---
 .../matrix-react-sdk/structures/FilePanel.css | 64 ++++++++++++++++++-
 .../structures/NotificationPanel.css          | 52 +++++++++++++--
 .../views/messages/MImageBody.css             |  1 -
 3 files changed, 108 insertions(+), 9 deletions(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/structures/FilePanel.css b/src/skins/vector/css/matrix-react-sdk/structures/FilePanel.css
index d7b21490..5e58d33e 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/FilePanel.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/FilePanel.css
@@ -29,32 +29,90 @@ limitations under the License.
     overflow-y: auto;
 }
 
+.mx_FilePanel .mx_RoomView_messageListWrapper {
+    margin-right: 20px;
+}
+
 .mx_FilePanel .mx_RoomView_MessageList h2 {
     display: none;
 }
 
+/* FIXME: rather than having EventTile's default CSS be for MessagePanel,
+   we should make EventTile a base CSS class and customise it specifically
+   for usage in {Message,File,Notification}Panel. */
+
 .mx_FilePanel .mx_EventTile_avatar {
     display: none;
 }
 
+/* Overrides for the attachment body tiles */
+
+.mx_FilePanel .mx_EventTile .mx_MImageBody {
+    margin-right: 0px;
+}
+
+.mx_FilePanel .mx_EventTile .mx_MImageBody_download {
+    display: flex;
+    font-size: 14px;
+    color: #acacac;
+}
+
+.mx_FilePanel .mx_EventTile .mx_MImageBody_downloadLink {
+    flex: 1 1 auto;
+    color: #747474;
+    word-break: break-all;
+}
+
+.mx_FilePanel .mx_EventTile .mx_MImageBody_size {
+    flex: 1 0 0;
+    font-size: 11px;
+    text-align: right;
+    white-space: nowrap;
+}
+
+/* Overides for the sender details line */
+
+.mx_FilePanel .mx_EventTile_senderDetails {
+    display: flex;
+    margin-top: -2px;
+}
+
+.mx_FilePanel .mx_EventTile_senderDetailsLink {
+    text-decoration: none;
+}
+
 .mx_FilePanel .mx_EventTile .mx_SenderProfile {
+    flex: 1 1 auto;
+    line-height: initial;
     padding: 0px;
+    font-size: 11px;
+    opacity: 1.0;
+    color: #acacac;
+    word-break: break-all;
 }
 
 .mx_FilePanel .mx_EventTile .mx_MessageTimestamp {
+    flex: 1 0 0;
+    text-align: right;
     visibility: visible;
     position: initial;
+    font-size: 11px;
+    opacity: 1.0;
+    color: #acacac;
 }
 
+/* Overrides for the wrappers around the body tile */
+
 .mx_FilePanel .mx_EventTile_line {
     margin-right: 0px;
     padding-left: 0px;
 }
 
+.mx_FilePanel .mx_EventTile:hover .mx_EventTile_line {
+    background-color: #fff;
+}
+
 .mx_FilePanel .mx_EventTile_selected .mx_EventTile_line {
     padding-left: 0px;
 }
 
-.mx_FilePanel .mx_EventTile_content {
-    margin-right: 0px;
-}
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/NotificationPanel.css b/src/skins/vector/css/matrix-react-sdk/structures/NotificationPanel.css
index 236e129b..2a42e35f 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/NotificationPanel.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/NotificationPanel.css
@@ -29,26 +29,68 @@ limitations under the License.
     overflow-y: auto;
 }
 
+.mx_NotificationPanel .mx_RoomView_messageListWrapper {
+    margin-right: 20px;
+}
+
 .mx_NotificationPanel .mx_RoomView_MessageList h2 {
     margin-left: 0px;
 }
 
-.mx_NotificationPanel .mx_EventTile_avatar {
-    display: none;
+/* FIXME: rather than having EventTile's default CSS be for MessagePanel,
+   we should make EventTile a base CSS class and customise it specifically
+   for usage in {Message,File,Notification}Panel. */
+
+.mx_NotificationPanel .mx_EventTile_roomName {
+    font-weight: bold;
+    font-size: 14px;
 }
 
-.mx_NotificationPanel .mx_EventTile .mx_SenderProfile {
-    padding: 0px;
+.mx_NotificationPanel .mx_EventTile_roomName a {
+    color: #4a4a4a;
+}
+
+.mx_NotificationPanel .mx_EventTile_avatar {
+    top: 8px;
+    left: 0px;
+}
+
+.mx_NotificationPanel .mx_EventTile .mx_SenderProfile, 
+.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
+    color: #000;
+    opacity: 0.3;
+    font-size: 12px;
+    display: inline;
+    padding-left: 0px;
+}
+
+.mx_NotificationPanel .mx_EventTile_senderDetails {
+    padding-left: 32px;
+    padding-top: 8px;
+    position: relative;
+}
+
+.mx_NotificationPanel .mx_EventTile_roomName a,
+.mx_NotificationPanel .mx_EventTile_senderDetails a {
+    text-decoration: none ! important;
 }
 
 .mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
     visibility: visible;
     position: initial;
+    display: inline;
 }
 
 .mx_NotificationPanel .mx_EventTile_line {
     margin-right: 0px;
-    padding-left: 0px;
+    padding-left: 32px;
+    padding-top: 0px;
+    padding-bottom: 0px;
+    padding-right: 0px;
+}
+
+.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line {
+    background-color: #fff;
 }
 
 .mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line {
diff --git a/src/skins/vector/css/matrix-react-sdk/views/messages/MImageBody.css b/src/skins/vector/css/matrix-react-sdk/views/messages/MImageBody.css
index 0b43a81b..1134f2f6 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/messages/MImageBody.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/messages/MImageBody.css
@@ -30,7 +30,6 @@ limitations under the License.
 
 .mx_MImageBody_download {
     color: #76cfa6;
-    cursor: pointer;
 }
 
 .mx_MImageBody_download a {