From f888ec6e81362f645d7aff01279075845229f594 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 23 Aug 2016 14:27:58 +0100 Subject: [PATCH 01/13] notification panel WIP --- src/components/structures/RightPanel.js | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index ca9376e1b4..0f8cdf2cab 100644 --- a/src/components/structures/RightPanel.js +++ b/src/components/structures/RightPanel.js @@ -28,6 +28,7 @@ module.exports = React.createClass({ Phase : { MemberList: 'MemberList', FileList: 'FileList', + NotificationPanel: 'NotificationPanel', MemberInfo: 'MemberInfo', }, @@ -108,12 +109,14 @@ module.exports = React.createClass({ render: function() { var MemberList = sdk.getComponent('rooms.MemberList'); + var NotificationPanel = sdk.getComponent('structures.NotificationPanel'); var TintableSvg = sdk.getComponent("elements.TintableSvg"); var buttonGroup; var panel; var filesHighlight; var membersHighlight; + var notificationsHighlight; if (!this.props.collapsed) { if (this.state.phase == this.Phase.MemberList || this.state.phase === this.Phase.MemberInfo) { membersHighlight =
; @@ -121,6 +124,9 @@ module.exports = React.createClass({ else if (this.state.phase == this.Phase.FileList) { filesHighlight =
; } + else if (this.state.phase == this.Phase.NotificationPanel) { + notificationsHighlight =
; + } } var membersBadge; @@ -144,16 +150,23 @@ module.exports = React.createClass({ { filesHighlight } +
+ + { notificationsHighlight } +
; if (!this.props.collapsed) { - if(this.state.phase == this.Phase.MemberList) { + if (this.state.phase == this.Phase.MemberList) { panel = } - else if(this.state.phase == this.Phase.MemberInfo) { + else if (this.state.phase == this.Phase.MemberInfo) { var MemberInfo = sdk.getComponent('rooms.MemberInfo'); panel = } + else if (this.state.phase == this.Phase.NotificationPanel) { + panel = + } } } From 2fae966884272e4e229bb83e2ac932a28aaccee8 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 23 Aug 2016 14:28:10 +0100 Subject: [PATCH 02/13] notification panel WIP --- src/skins/vector/img/icons-notifications.svg | 28 ++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 src/skins/vector/img/icons-notifications.svg diff --git a/src/skins/vector/img/icons-notifications.svg b/src/skins/vector/img/icons-notifications.svg new file mode 100644 index 0000000000..0a248178fd --- /dev/null +++ b/src/skins/vector/img/icons-notifications.svg @@ -0,0 +1,28 @@ + + + + 5E723325-BD0B-454D-BE25-638AF09A97AC + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file From 9d72a7cb353af3b317cc5316d1154a3eb04a1b34 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 31 Aug 2016 11:57:45 +0100 Subject: [PATCH 03/13] get adding FilePanel --- src/components/structures/RightPanel.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index 66f9d513d7..3040bec2fb 100644 --- a/src/components/structures/RightPanel.js +++ b/src/components/structures/RightPanel.js @@ -28,7 +28,7 @@ module.exports = React.createClass({ Phase : { MemberList: 'MemberList', - FileList: 'FileList', + FilePanel: 'FilePanel', NotificationPanel: 'NotificationPanel', MemberInfo: 'MemberInfo', }, @@ -131,7 +131,7 @@ module.exports = React.createClass({ if (this.state.phase == this.Phase.MemberList || this.state.phase === this.Phase.MemberInfo) { membersHighlight =
; } - else if (this.state.phase == this.Phase.FileList) { + else if (this.state.phase == this.Phase.FilePanel) { filesHighlight =
; } else if (this.state.phase == this.Phase.NotificationPanel) { @@ -178,6 +178,9 @@ module.exports = React.createClass({ else if (this.state.phase == this.Phase.NotificationPanel) { panel = } + else if (this.state.phase == this.Phase.FilePanel) { + panel = + } } if (!panel) { From 24351537d29f66ba85a3ef4941d81f742e18d28d Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 6 Sep 2016 01:19:48 +0100 Subject: [PATCH 04/13] we have nothing to hide --- src/skins/vector/css/hide.css | 6 ------ 1 file changed, 6 deletions(-) delete mode 100644 src/skins/vector/css/hide.css diff --git a/src/skins/vector/css/hide.css b/src/skins/vector/css/hide.css deleted file mode 100644 index f84a35b313..0000000000 --- a/src/skins/vector/css/hide.css +++ /dev/null @@ -1,6 +0,0 @@ -.mx_RoomSettings_encrypt, -.mx_CreateRoom_encrypt, -.mx_RightPanel_filebutton -{ - display: none !important; -} From 1f19ee88c6f542260df41be9774424d2829341e1 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 6 Sep 2016 01:45:12 +0100 Subject: [PATCH 05/13] make FilePanel work, superficially at least --- src/components/structures/RightPanel.js | 29 +++++++++++++++---- .../css/vector-web/structures/RightPanel.css | 8 ++--- src/skins/vector/img/icons-files.svg | 29 +++++++++++++++++++ 3 files changed, 56 insertions(+), 10 deletions(-) create mode 100644 src/skins/vector/img/icons-files.svg diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index 3040bec2fb..f83559c578 100644 --- a/src/components/structures/RightPanel.js +++ b/src/components/structures/RightPanel.js @@ -62,7 +62,7 @@ module.exports = React.createClass({ }, onMemberListButtonClick: function() { - if (this.props.collapsed) { + if (this.props.collapsed || this.state.phase !== this.Phase.MemberList) { this.setState({ phase: this.Phase.MemberList }); dis.dispatch({ action: 'show_right_panel', @@ -75,6 +75,20 @@ module.exports = React.createClass({ } }, + onFileListButtonClick: function() { + if (this.props.collapsed || this.state.phase !== this.Phase.FilePanel) { + this.setState({ phase: this.Phase.FilePanel }); + dis.dispatch({ + action: 'show_right_panel', + }); + } + else { + dis.dispatch({ + action: 'hide_right_panel', + }); + } + }, + onRoomStateMember: function(ev, state, member) { // redraw the badge on the membership list if (this.state.phase == this.Phase.MemberList && member.roomId === this.props.roomId) { @@ -120,6 +134,7 @@ module.exports = React.createClass({ render: function() { var MemberList = sdk.getComponent('rooms.MemberList'); var NotificationPanel = sdk.getComponent('structures.NotificationPanel'); + var FilePanel = sdk.getComponent('structures.FilePanel'); var TintableSvg = sdk.getComponent("elements.TintableSvg"); var buttonGroup; var panel; @@ -144,7 +159,7 @@ module.exports = React.createClass({ var cli = MatrixClientPeg.get(); var room = cli.getRoom(this.props.roomId); if (room) { - membersBadge =
{ room.getJoinedMembers().length }
; + membersBadge = room.getJoinedMembers().length; } } @@ -152,15 +167,17 @@ module.exports = React.createClass({ buttonGroup =
- { membersBadge } +
{ membersBadge ? membersBadge :  }
{ membersHighlight }
-
- +
+
 
+ { filesHighlight }
+
 
{ notificationsHighlight }
@@ -179,7 +196,7 @@ module.exports = React.createClass({ panel = } else if (this.state.phase == this.Phase.FilePanel) { - panel = + panel = } } diff --git a/src/skins/vector/css/vector-web/structures/RightPanel.css b/src/skins/vector/css/vector-web/structures/RightPanel.css index 9567869e7d..211848f54e 100644 --- a/src/skins/vector/css/vector-web/structures/RightPanel.css +++ b/src/skins/vector/css/vector-web/structures/RightPanel.css @@ -46,15 +46,15 @@ limitations under the License. margin-top: 6px; float: left; background-color: #fff; - margin-left: -4px; + margin-left: 0px; } .mx_RightPanel_headerButton { cursor: pointer; display: table-cell; - vertical-align: middle; - padding-left: 15px; - padding-right: 15px; + vertical-align: top; + padding-left: 4px; + padding-right: 5px; text-align: center; position: relative; } diff --git a/src/skins/vector/img/icons-files.svg b/src/skins/vector/img/icons-files.svg new file mode 100644 index 0000000000..97ba4228e3 --- /dev/null +++ b/src/skins/vector/img/icons-files.svg @@ -0,0 +1,29 @@ + + + + 7C98C075-AB4D-45A3-85F9-CCD46F84DA7F + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file From d12498f41899be85f3398b56af04c70f6fdd2b78 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 6 Sep 2016 11:29:50 +0100 Subject: [PATCH 06/13] right cursor for roomsettings colours --- .../vector/css/matrix-react-sdk/views/rooms/RoomSettings.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css index 68f02f7c1a..78a8790b5e 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css @@ -88,12 +88,14 @@ limitations under the License. height: 37px; border: 1px solid #979797; margin-right: 13px; + cursor: pointer; } .mx_RoomSettings .mx_RoomSettings_roomColor_selected { position: absolute; left: 10px; top: 4px; + cursor: default ! important; } .mx_RoomSettings .mx_RoomSettings_roomColorPrimary { From aefef2ba567a3748ac7da9d54b5ed55970a6646e Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 7 Sep 2016 02:16:09 +0100 Subject: [PATCH 07/13] FilePanel css --- .../matrix-react-sdk/structures/FilePanel.css | 60 +++++++++++++++++++ 1 file changed, 60 insertions(+) create mode 100644 src/skins/vector/css/matrix-react-sdk/structures/FilePanel.css diff --git a/src/skins/vector/css/matrix-react-sdk/structures/FilePanel.css b/src/skins/vector/css/matrix-react-sdk/structures/FilePanel.css new file mode 100644 index 0000000000..8ca58498ca --- /dev/null +++ b/src/skins/vector/css/matrix-react-sdk/structures/FilePanel.css @@ -0,0 +1,60 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.mx_FilePanel { + -webkit-box-ordinal-group: 2; + -moz-box-ordinal-group: 2; + -ms-flex-order: 2; + -webkit-order: 2; + order: 2; + + -webkit-flex: 1 1 0; + flex: 1 1 0; + + width: 100%; + + overflow-y: auto; +} + +.mx_FilePanel .mx_RoomView_MessageList h2 { + display: none; +} + +.mx_FilePanel .mx_EventTile_avatar { + display: none; +} + +.mx_FilePanel .mx_EventTile .mx_SenderProfile { + padding: 0px; +} + +.mx_FilePanel .mx_EventTile .mx_MessageTimestamp { + visibility: visible; + position: initial; +} + +.mx_FilePanel .mx_EventTile_line { + margin-right: 0px; + padding-left: 0px; +} + +.mx_FilePanel .mx_EventTile_selected .mx_EventTile_line { + padding-left: 0px; +} + +.mx_FilePanel .mx_EventTile_content { + margin-right: 0px; +} \ No newline at end of file From 7c74b0124bc44d68ec800aa536a8a7b9da2f4171 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 7 Sep 2016 15:43:29 +0100 Subject: [PATCH 08/13] explicit props for RightPanel at last --- src/components/structures/RightPanel.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index f83559c578..29747b981c 100644 --- a/src/components/structures/RightPanel.js +++ b/src/components/structures/RightPanel.js @@ -26,6 +26,12 @@ var rate_limited_func = require('matrix-react-sdk/lib/ratelimitedfunc'); module.exports = React.createClass({ displayName: 'RightPanel', + propTypes: { + userId: React.PropTypes.string, // if showing an orphaned MemberInfo page, this is set + roomId: React.PropTypes.string, // if showing panels for a given room, this is set + collapsed: React.PropTypes.bool, + }, + Phase : { MemberList: 'MemberList', FilePanel: 'FilePanel', From f5ce053f42b4fd2cbb1f2b464fb16e0e064f09e5 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Thu, 8 Sep 2016 03:02:50 +0100 Subject: [PATCH 09/13] hook up the NotifPanel button --- src/components/structures/RightPanel.js | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index 29747b981c..d2b36cf4e1 100644 --- a/src/components/structures/RightPanel.js +++ b/src/components/structures/RightPanel.js @@ -95,6 +95,20 @@ module.exports = React.createClass({ } }, + onNotificationListButtonClick: function() { + if (this.props.collapsed || this.state.phase !== this.Phase.NotificationPanel) { + this.setState({ phase: this.Phase.NotificationPanel }); + dis.dispatch({ + action: 'show_right_panel', + }); + } + else { + dis.dispatch({ + action: 'hide_right_panel', + }); + } + }, + onRoomStateMember: function(ev, state, member) { // redraw the badge on the membership list if (this.state.phase == this.Phase.MemberList && member.roomId === this.props.roomId) { @@ -182,7 +196,7 @@ module.exports = React.createClass({ { filesHighlight }
-
+
 
{ notificationsHighlight } From a8d7d23dd6db35aa3a481587f35c1f1be8b7ace1 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Thu, 8 Sep 2016 03:03:10 +0100 Subject: [PATCH 10/13] implement NotifPanel css --- .../structures/NotificationPanel.css | 60 +++++++++++++++++++ 1 file changed, 60 insertions(+) create mode 100644 src/skins/vector/css/matrix-react-sdk/structures/NotificationPanel.css diff --git a/src/skins/vector/css/matrix-react-sdk/structures/NotificationPanel.css b/src/skins/vector/css/matrix-react-sdk/structures/NotificationPanel.css new file mode 100644 index 0000000000..236e129b01 --- /dev/null +++ b/src/skins/vector/css/matrix-react-sdk/structures/NotificationPanel.css @@ -0,0 +1,60 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.mx_NotificationPanel { + -webkit-box-ordinal-group: 2; + -moz-box-ordinal-group: 2; + -ms-flex-order: 2; + -webkit-order: 2; + order: 2; + + -webkit-flex: 1 1 0; + flex: 1 1 0; + + width: 100%; + + overflow-y: auto; +} + +.mx_NotificationPanel .mx_RoomView_MessageList h2 { + margin-left: 0px; +} + +.mx_NotificationPanel .mx_EventTile_avatar { + display: none; +} + +.mx_NotificationPanel .mx_EventTile .mx_SenderProfile { + padding: 0px; +} + +.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp { + visibility: visible; + position: initial; +} + +.mx_NotificationPanel .mx_EventTile_line { + margin-right: 0px; + padding-left: 0px; +} + +.mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line { + padding-left: 0px; +} + +.mx_NotificationPanel .mx_EventTile_content { + margin-right: 0px; +} \ No newline at end of file From 6182ce48c93e51ba343544a5cfb42c14ae61c5ea Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Thu, 8 Sep 2016 15:27:55 +0100 Subject: [PATCH 11/13] fix (c) --- .../vector/css/matrix-react-sdk/structures/FilePanel.css | 4 ++-- 1 file changed, 2 insertions(+), 2 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 8ca58498ca..d7b2149064 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/FilePanel.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/FilePanel.css @@ -1,5 +1,5 @@ /* -Copyright 2015, 2016 OpenMarket Ltd +Copyright 2016 OpenMarket Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -57,4 +57,4 @@ limitations under the License. .mx_FilePanel .mx_EventTile_content { margin-right: 0px; -} \ No newline at end of file +} From dd39813cc2167835f1eff6dba4fea5ba2842c48b Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Sun, 11 Sep 2016 02:14:52 +0100 Subject: [PATCH 12/13] show context menus on hoverover --- .../vector/css/matrix-react-sdk/views/rooms/RoomTile.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css index 2f1da5b292..ab432a31a9 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css @@ -47,7 +47,7 @@ limitations under the License. vertical-align: middle; } -.mx_RoomTile_avatar_container:hover:before, +.mx_RoomTile:hover .mx_RoomTile_avatar_container:before, .mx_RoomTile_avatar_container.mx_RoomTile_avatar_roomTagMenu:before { display: block; position: absolute; @@ -61,7 +61,7 @@ limitations under the License. z-index: 4; } -.mx_RoomTile_avatar_container:hover:after, +.mx_RoomTile:hover .mx_RoomTile_avatar_container:after, .mx_RoomTile_avatar_container.mx_RoomTile_avatar_roomTagMenu:after { display: block; position: absolute; @@ -75,11 +75,11 @@ limitations under the License. z-index: 2; } -.collapsed .mx_RoomTile_avatar_container:hover:before { +.collapsed .mx_RoomTile:hover .mx_RoomTile_avatar_container:before { display: none; } -.collapsed .mx_RoomTile_avatar_container:hover:after { +.collapsed .mx_RoomTile:hover .mx_RoomTile_avatar_container:after { display: none; } From 3a8c94de5a95db75de758f32f63d2a395a1c3c86 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Sun, 11 Sep 2016 02:15:03 +0100 Subject: [PATCH 13/13] 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 d7b2149064..5e58d33ebb 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 236e129b01..2a42e35f4b 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 0b43a81b09..1134f2f6ff 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 {