From f888ec6e81362f645d7aff01279075845229f594 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 23 Aug 2016 14:27:58 +0100 Subject: [PATCH 01/22] 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/22] 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/22] 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/22] 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/22] 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/22] 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/22] 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/22] 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/22] 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/22] 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/22] 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/22] 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/22] 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 { From 64dedef2c729ea30566e0bb098f5e1186d3c5987 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Sun, 11 Sep 2016 21:55:57 +0100 Subject: [PATCH 14/22] fix wordwrap on new panels --- .../vector/css/matrix-react-sdk/structures/FilePanel.css | 4 ++-- .../css/matrix-react-sdk/structures/NotificationPanel.css | 2 ++ .../css/matrix-react-sdk/views/rooms/LinkPreviewWidget.css | 2 +- 3 files changed, 5 insertions(+), 3 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 5e58d33ebb..2d2fe31c85 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/FilePanel.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/FilePanel.css @@ -60,7 +60,7 @@ limitations under the License. .mx_FilePanel .mx_EventTile .mx_MImageBody_downloadLink { flex: 1 1 auto; color: #747474; - word-break: break-all; + word-wrap: break-word; } .mx_FilePanel .mx_EventTile .mx_MImageBody_size { @@ -88,7 +88,7 @@ limitations under the License. font-size: 11px; opacity: 1.0; color: #acacac; - word-break: break-all; + word-wrap: break-word; } .mx_FilePanel .mx_EventTile .mx_MessageTimestamp { 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 2a42e35f4b..36d62a8177 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/NotificationPanel.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/NotificationPanel.css @@ -44,6 +44,7 @@ limitations under the License. .mx_NotificationPanel .mx_EventTile_roomName { font-weight: bold; font-size: 14px; + word-wrap: break-word; } .mx_NotificationPanel .mx_EventTile_roomName a { @@ -62,6 +63,7 @@ limitations under the License. font-size: 12px; display: inline; padding-left: 0px; + word-wrap: break-word; } .mx_NotificationPanel .mx_EventTile_senderDetails { diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/LinkPreviewWidget.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/LinkPreviewWidget.css index ed470c0039..2e2d9f8046 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/LinkPreviewWidget.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/LinkPreviewWidget.css @@ -50,7 +50,7 @@ limitations under the License. .mx_LinkPreviewWidget_description { margin-top: 8px; white-space: normal; - word-break: break-word; + word-wrap: break-word; } .mx_LinkPreviewWidget_cancel { From dd4617a7c61fd14c1f39b15bdf21732daaf4596e Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Sun, 11 Sep 2016 23:01:28 +0100 Subject: [PATCH 15/22] bring back small avatars for info msgs otherwise the design breaks --- .../vector/css/matrix-react-sdk/views/rooms/EventTile.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css index 432bdc2851..38f65a1036 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css @@ -36,7 +36,7 @@ limitations under the License. .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar { top: 8px; - left: 44px; + left: 65px; } .mx_EventTile_continuation { @@ -87,6 +87,10 @@ limitations under the License. line-height: 22px; } +.mx_EventTile_info .mx_EventTile_line { + padding-left: 83px; +} + /* HACK to override line-height which is already marked important elsewhere */ .mx_EventTile_bigEmoji.mx_EventTile_bigEmoji { font-size: 48px ! important; From 5775552bab546e9300e59fb1aac8991aab737841 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 12 Sep 2016 01:38:03 +0100 Subject: [PATCH 16/22] css for e2e look & feel --- .../views/rooms/EventTile.css | 49 ++++++++++++++++--- .../views/rooms/MessageComposer.css | 5 ++ 2 files changed, 46 insertions(+), 8 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css index 38f65a1036..ae503511b3 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css @@ -43,14 +43,6 @@ limitations under the License. padding-top: 0px ! important; } -.mx_EventTile_verified { - background-color: #eaf5f0; -} - -.mx_EventTile_unverified { - background-color: #ffa0a0; -} - .mx_EventTile .mx_SenderProfile { color: #454545; opacity: 0.5; @@ -126,6 +118,10 @@ limitations under the License. color: #fff; } +.mx_EventTile_encrypting { + color: #abddbc ! important; +} + .mx_EventTile_sending { color: #ddd; } @@ -231,6 +227,43 @@ limitations under the License. overflow-y: hidden; } +/* End to end encryption stuff */ + +.mx_EventTile_e2eIcon { + display: block; + position: absolute; + top: 9px; + left: 46px; + z-index: 2; +} + +.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line, +.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line { + padding-left: 60px; +} + +.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line { + border-left: #76cfa5 5px solid; +} +.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line { + border-left: #e8bf37 5px solid; +} + +.mx_EventTile:hover.mx_EventTile_verified .mx_MessageTimestamp, +.mx_EventTile:hover.mx_EventTile_unverified .mx_MessageTimestamp { + left: 3px; +} + +.mx_EventTile_verified .mx_EventTile_e2eIcon { + display: none; +} + +.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_e2eIcon, +.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_e2eIcon { + display: block; + left: 41px; +} + /* Various markdown overrides */ .mx_EventTile_content .markdown-body { diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css index 45bc39cf3b..6c7ac4dcb4 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css @@ -46,6 +46,11 @@ limitations under the License. width: 100%; } +.mx_MessageComposer_e2eIcon { + position: absolute; + left: 46px; +} + .mx_MessageComposer_noperm_error { width: 100%; height: 60px; From 695930efa566280fa623ef8fd77a19a4c7404508 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 12 Sep 2016 16:50:53 +0100 Subject: [PATCH 17/22] e2e icons --- src/skins/vector/img/e2e-blocked.svg | 12 ++++++++++++ src/skins/vector/img/e2e-unencrypted.svg | 23 +++++++++++++++++++++++ src/skins/vector/img/e2e-verified.svg | 12 ++++++++++++ src/skins/vector/img/e2e-warning.svg | 12 ++++++++++++ 4 files changed, 59 insertions(+) create mode 100644 src/skins/vector/img/e2e-blocked.svg create mode 100644 src/skins/vector/img/e2e-unencrypted.svg create mode 100644 src/skins/vector/img/e2e-verified.svg create mode 100644 src/skins/vector/img/e2e-warning.svg diff --git a/src/skins/vector/img/e2e-blocked.svg b/src/skins/vector/img/e2e-blocked.svg new file mode 100644 index 0000000000..0ab2c6efbe --- /dev/null +++ b/src/skins/vector/img/e2e-blocked.svg @@ -0,0 +1,12 @@ + + + + 2805649B-D39D-43EA-A357-659EF9B97BA4 + Created with sketchtool. + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/e2e-unencrypted.svg b/src/skins/vector/img/e2e-unencrypted.svg new file mode 100644 index 0000000000..1467223638 --- /dev/null +++ b/src/skins/vector/img/e2e-unencrypted.svg @@ -0,0 +1,23 @@ + + + + 16F5F38E-A6A3-472A-BC13-13F0F12876CF + Created with sketchtool. + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/e2e-verified.svg b/src/skins/vector/img/e2e-verified.svg new file mode 100644 index 0000000000..b65f50b2b6 --- /dev/null +++ b/src/skins/vector/img/e2e-verified.svg @@ -0,0 +1,12 @@ + + + + 48BF5D32-306C-4B20-88EB-24B1F743CAC9 + Created with sketchtool. + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/e2e-warning.svg b/src/skins/vector/img/e2e-warning.svg new file mode 100644 index 0000000000..8a55f199ba --- /dev/null +++ b/src/skins/vector/img/e2e-warning.svg @@ -0,0 +1,12 @@ + + + + CCDDE6F6-B552-48FD-AD54-6939841CA2DD + Created with sketchtool. + + + + + + + \ No newline at end of file From 20eb28f0522e8b4fe6a9e0144e7327e611b4fcb1 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 12 Sep 2016 17:38:27 +0100 Subject: [PATCH 18/22] fix e2e icon placement --- .../vector/css/matrix-react-sdk/views/rooms/MessageComposer.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css index 6c7ac4dcb4..a7ed3e7f3b 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css @@ -19,6 +19,7 @@ limitations under the License. vertical-align: middle; margin: auto; border-top: 1px solid #e5e5e5; + position: relative; } .mx_MessageComposer_autocomplete_wrapper { From 0bdc026b05730f33388327a39b245cb0002b60cd Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 12 Sep 2016 18:50:32 +0100 Subject: [PATCH 19/22] E2E CSS --- src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css | 1 + .../vector/css/matrix-react-sdk/views/rooms/MessageComposer.css | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css index ae503511b3..d243f672f3 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css @@ -235,6 +235,7 @@ limitations under the License. top: 9px; left: 46px; z-index: 2; + cursor: pointer; } .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line, diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css index a7ed3e7f3b..6c76dc00d7 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css @@ -49,7 +49,7 @@ limitations under the License. .mx_MessageComposer_e2eIcon { position: absolute; - left: 46px; + left: 44px; } .mx_MessageComposer_noperm_error { From c6fa1e2e21c4fc007560900d6ed34da773c3c2d2 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 12 Sep 2016 20:02:22 +0100 Subject: [PATCH 20/22] show e2e icon by default --- src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css index d243f672f3..fd3f486b7d 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css @@ -255,9 +255,11 @@ limitations under the License. left: 3px; } +/* .mx_EventTile_verified .mx_EventTile_e2eIcon { display: none; } +*/ .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_e2eIcon, .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_e2eIcon { From f119a5795208c2fd260d48b6a317bca61ebc267c Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 12 Sep 2016 23:42:43 +0100 Subject: [PATCH 21/22] dedicated dialog box for E2E messages --- .../views/dialogs/EncryptedEventDialog.css | 39 +++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 src/skins/vector/css/matrix-react-sdk/views/dialogs/EncryptedEventDialog.css diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/EncryptedEventDialog.css b/src/skins/vector/css/matrix-react-sdk/views/dialogs/EncryptedEventDialog.css new file mode 100644 index 0000000000..5e72d7f8bf --- /dev/null +++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/EncryptedEventDialog.css @@ -0,0 +1,39 @@ +/* +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. +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_EncryptedEventDialog .mx_MemberDeviceInfo { + float: right; + padding: 0px; + margin-right: 42px; +} + +.mx_EncryptedEventDialog .mx_MemberDeviceInfo_textButton { + border: 0px; + height: 36px; + border-radius: 40px; + border: solid 1px #76cfa6; + font-weight: 600; + font-size: 14px; + font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; + margin-left: 0px; + margin-right: 8px; + padding-left: 1.5em; + padding-right: 1.5em; + outline: none; + cursor: pointer; + color: #76cfa6; + background-color: #fff; +} \ No newline at end of file From 562c3b0e0405e576647adcb9d34e4f295f2dcf5a Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 13 Sep 2016 10:32:40 +0100 Subject: [PATCH 22/22] fix notif icon --- src/skins/vector/img/icons-notifications.svg | 19 +++++-------------- 1 file changed, 5 insertions(+), 14 deletions(-) diff --git a/src/skins/vector/img/icons-notifications.svg b/src/skins/vector/img/icons-notifications.svg index 0a248178fd..66a49d6c0c 100644 --- a/src/skins/vector/img/icons-notifications.svg +++ b/src/skins/vector/img/icons-notifications.svg @@ -3,24 +3,15 @@ 5E723325-BD0B-454D-BE25-638AF09A97AC Created with sketchtool. - - - - - - - - - - + - - - - + + + +