From 2bf177dbccc613373663371cf16008a1fdba2931 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Mon, 12 Sep 2016 13:01:08 +0100 Subject: [PATCH 01/12] Refactored the queryList into seperate AddressSelector component --- .../views/dialogs/ChatInviteDialog.css | 26 ----------- .../views/elements/AddressSelector.css | 45 +++++++++++++++++++ 2 files changed, 45 insertions(+), 26 deletions(-) create mode 100644 src/skins/vector/css/matrix-react-sdk/views/elements/AddressSelector.css diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css b/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css index 8dce58a3cc2..61c96928790 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css +++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css @@ -45,32 +45,6 @@ limitations under the License. overflow: hidden; } -.mx_ChatInviteDialog_queryList { - position: absolute; - background-color: #fff; - width: 485px; - max-height: 116px; - overflow-y: scroll; - border-radius: 3px; - background-color: #fff; - border: solid 1px #76cfa6; - cursor: pointer; -} - -.mx_ChatInviteDialog_queryListElement .mx_AddressTile { - background-color: #fff; - border: solid 1px #fff; -} - -.mx_ChatInviteDialog_queryListElement.mx_ChatInviteDialog_selected { - background-color: #eaf5f0; /* selected colour */ -} - -.mx_ChatInviteDialog_queryListElement.mx_ChatInviteDialog_selected .mx_AddressTile { - background-color: #eaf5f0; /* selected colour */ - border: solid 1px #eaf5f0; /* selected colour */ -} - .mx_ChatInviteDialog_cancel { position: absolute; right: 11px; diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/AddressSelector.css b/src/skins/vector/css/matrix-react-sdk/views/elements/AddressSelector.css new file mode 100644 index 00000000000..62efee7c051 --- /dev/null +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/AddressSelector.css @@ -0,0 +1,45 @@ +/* +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_AddressSelector { + position: absolute; + background-color: #fff; + width: 485px; + max-height: 116px; + overflow-y: scroll; + border-radius: 3px; + background-color: #fff; + border: solid 1px #76cfa6; + cursor: pointer; +} + +.mx_AddressSelector.mx_AddressSelector_empty { + display: none; +} + +.mx_AddressSelector_addressListElement .mx_AddressTile { + background-color: #fff; + border: solid 1px #fff; +} + +.mx_AddressSelector_addressListElement.mx_AddressSelector_selected { + background-color: #eaf5f0; /* selected colour */ +} + +.mx_AddressSelector_addressListElement.mx_AddressSelector_selected .mx_AddressTile { + background-color: #eaf5f0; /* selected colour */ + border: solid 1px #eaf5f0; /* selected colour */ +} From 906be376c99463aa6ac0cf77f4f4f86171f0614d Mon Sep 17 00:00:00 2001 From: wmwragg Date: Mon, 12 Sep 2016 16:51:42 +0100 Subject: [PATCH 02/12] Refactored AddressTile to use string address rather than user object, so it can user email as well mx userId --- .../views/elements/AddressTile.css | 34 +++++++++++++++++++ src/skins/vector/img/icon-email-user.svg | 17 ++++++++++ 2 files changed, 51 insertions(+) create mode 100644 src/skins/vector/img/icon-email-user.svg diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css b/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css index 5e22ccaf8d8..c4d5da879c3 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css @@ -23,6 +23,7 @@ limitations under the License. color: #454545; font-size: 14px; font-weight: normal; + margin-right: 4px; } .mx_AddressTile_network { @@ -41,6 +42,13 @@ limitations under the License. vertical-align: middle; } +.mx_AddressTile_mx { + display: inline-block; + margin: 0; + border: 0; + padding: 0; +} + .mx_AddressTile_name { display: inline-block; padding-right: 4px; @@ -71,6 +79,32 @@ limitations under the License. vertical-align: middle; } +.mx_AddressTile_email { + display: inline-block; + padding-right: 11px; +} + +.mx_AddressTile_email.mx_AddressTile_justified { + width: 380px; /* name + id width */ + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + vertical-align: middle; +} + +.mx_AddressTile_unknown { + display: inline-block; + padding-right: 11px; +} + +.mx_AddressTile_unknown.mx_AddressTile_justified { + width: 380px; /* name + id width */ + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + vertical-align: middle; +} + .mx_AddressTile_dismiss { display: inline-block; padding-right: 11px; diff --git a/src/skins/vector/img/icon-email-user.svg b/src/skins/vector/img/icon-email-user.svg new file mode 100644 index 00000000000..2d41e06f980 --- /dev/null +++ b/src/skins/vector/img/icon-email-user.svg @@ -0,0 +1,17 @@ + + + + 6F488856-F8EF-479C-9747-AB6E0945C7DE + Created with sketchtool. + + + + + + + + + + + + From abda8c77adc08ab2bd54d173b22f269bdd104a35 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Mon, 12 Sep 2016 17:25:38 +0100 Subject: [PATCH 03/12] Added styling for unknown addresses --- .../views/elements/AddressTile.css | 6 ++++++ src/skins/vector/img/avatar-error.svg | 15 +++++++++++++++ 2 files changed, 21 insertions(+) create mode 100644 src/skins/vector/img/avatar-error.svg diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css b/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css index c4d5da879c3..80a5fb7b01d 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css @@ -26,6 +26,12 @@ limitations under the License. margin-right: 4px; } +.mx_AddressTile.mx_AddressTile_error { + background-color: rgba(255, 0, 100, 0.1); + color: #ff0064; + border-color: #ff0064; +} + .mx_AddressTile_network { display: inline-block; position: relative; diff --git a/src/skins/vector/img/avatar-error.svg b/src/skins/vector/img/avatar-error.svg new file mode 100644 index 00000000000..c5e168944c1 --- /dev/null +++ b/src/skins/vector/img/avatar-error.svg @@ -0,0 +1,15 @@ + + + + 5EF602F6-A36C-41EE-BAEC-50801DFD5492 + Created with sketchtool. + + + + + + + + + + From bfd3ef0e440695577ca42d28ef0be0687d1e795a Mon Sep 17 00:00:00 2001 From: wmwragg Date: Mon, 12 Sep 2016 17:31:49 +0100 Subject: [PATCH 04/12] Limit the invite area in height --- .../css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css b/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css index 61c96928790..053ffb0528e 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css +++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css @@ -42,7 +42,9 @@ limitations under the License. padding-right: 4px; padding-top: 1px; padding-bottom: 1px; - overflow: hidden; + max-height: 150px; + overflow-x: hidden; + overflow-y: scroll; } .mx_ChatInviteDialog_cancel { From f59dbe40ec2ec5165497059a5d336fa090bbada0 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Tue, 13 Sep 2016 11:03:27 +0100 Subject: [PATCH 05/12] Added error checking, and UI --- .../css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css b/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css index 053ffb0528e..9fe5af9eee0 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css +++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css @@ -47,6 +47,12 @@ limitations under the License. overflow-y: scroll; } +.mx_ChatInviteDialog_error { + position: absolute; + color: #ff0064; + line-height: 36px; +} + .mx_ChatInviteDialog_cancel { position: absolute; right: 11px; From acdcb21830a55bdcb41cb2f8d70e04643f4fb0e2 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Tue, 13 Sep 2016 13:32:50 +0100 Subject: [PATCH 06/12] Fixed weird margin bug when LHS panel is collapsed --- .../vector/css/vector-web/structures/LeftPanel.css | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/src/skins/vector/css/vector-web/structures/LeftPanel.css b/src/skins/vector/css/vector-web/structures/LeftPanel.css index 5a71ac28c8b..4e3281716ea 100644 --- a/src/skins/vector/css/vector-web/structures/LeftPanel.css +++ b/src/skins/vector/css/vector-web/structures/LeftPanel.css @@ -91,19 +91,13 @@ limitations under the License. .collapsed .mx_BottomLeftMenu_createRoom, .collapsed .mx_BottomLeftMenu_people, .collapsed .mx_BottomLeftMenu_settings { - margin-left: 0px ! important; + margin-right: 0px ! important; padding-top: 3px ! important; padding-bottom: 3px ! important; } -.mx_LeftPanel .mx_BottomLeftMenu_directory { - margin-right: 10px; -} - -.mx_LeftPanel .mx_BottomLeftMenu_createRoom { - margin-right: 10px; -} - +.mx_LeftPanel .mx_BottomLeftMenu_directory, +.mx_LeftPanel .mx_BottomLeftMenu_createRoom, .mx_LeftPanel .mx_BottomLeftMenu_people { margin-right: 10px; } From 768f11fe583cd362146da6fef70bbc26029e17c5 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Tue, 13 Sep 2016 14:27:23 +0100 Subject: [PATCH 07/12] Added new Invite button in the RHS footer --- src/components/structures/RightPanel.js | 14 +++++++++++ .../css/vector-web/structures/RightPanel.css | 23 +++++++++++++++++++ 2 files changed, 37 insertions(+) diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index d2b36cf4e10..b34819137ad 100644 --- a/src/components/structures/RightPanel.js +++ b/src/components/structures/RightPanel.js @@ -109,6 +109,14 @@ module.exports = React.createClass({ } }, + onInviteButtonClick: function() { + // call ChatInviteDialog + dis.dispatch({ + action: 'view_invite', + roomId: this.props.roomId, + }); + }, + onRoomStateMember: function(ev, state, member) { // redraw the badge on the membership list if (this.state.phase == this.Phase.MemberList && member.roomId === this.props.roomId) { @@ -236,6 +244,12 @@ module.exports = React.createClass({ { panel }
+
+
+ +
+
Invite to this room
+
); diff --git a/src/skins/vector/css/vector-web/structures/RightPanel.css b/src/skins/vector/css/vector-web/structures/RightPanel.css index 211848f54e2..10741260e6e 100644 --- a/src/skins/vector/css/vector-web/structures/RightPanel.css +++ b/src/skins/vector/css/vector-web/structures/RightPanel.css @@ -103,3 +103,26 @@ limitations under the License. -webkit-flex: 0 0 60px; flex: 0 0 60px; } + +.mx_RightPanel_footer .mx_RightPanel_invite { + line-height: 35px; + font-size: 14px; + color: #454545; + padding-top: 13px; + padding-left: 5px; +} + +.mx_RightPanel_invite .mx_RightPanel_icon { + display: inline-block; + cursor: pointer; +} + +.mx_RightPanel_invite .mx_RightPanel_icon object { + pointer-events: none; +} + +.mx_RightPanel_invite .mx_RightPanel_message { + display: inline-block; + vertical-align: top; + padding-left: 10px +} From f8c9a28194f89bceccea2f39238e1163620454e4 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Tue, 13 Sep 2016 14:33:19 +0100 Subject: [PATCH 08/12] Updated to correct invite icon --- src/components/structures/RightPanel.js | 2 +- src/skins/vector/img/icon-invite-people.svg | 24 +++++++++++++++++++++ 2 files changed, 25 insertions(+), 1 deletion(-) create mode 100644 src/skins/vector/img/icon-invite-people.svg diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index b34819137ad..2242400f9d6 100644 --- a/src/components/structures/RightPanel.js +++ b/src/components/structures/RightPanel.js @@ -246,7 +246,7 @@ module.exports = React.createClass({
- +
Invite to this room
diff --git a/src/skins/vector/img/icon-invite-people.svg b/src/skins/vector/img/icon-invite-people.svg new file mode 100644 index 00000000000..f13a03ed702 --- /dev/null +++ b/src/skins/vector/img/icon-invite-people.svg @@ -0,0 +1,24 @@ + + + + 9BA71BF4-DC4F-42D2-B2D0-9EAE0F7F8D45 + Created with sketchtool. + + + + + + + + + + + + + + + + + + + From 15ee2578c53777a74da450bf05553ca27e4837da Mon Sep 17 00:00:00 2001 From: wmwragg Date: Tue, 13 Sep 2016 14:36:13 +0100 Subject: [PATCH 09/12] Tweak to font colour --- src/skins/vector/css/vector-web/structures/RightPanel.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/skins/vector/css/vector-web/structures/RightPanel.css b/src/skins/vector/css/vector-web/structures/RightPanel.css index 10741260e6e..0af82aa0ba5 100644 --- a/src/skins/vector/css/vector-web/structures/RightPanel.css +++ b/src/skins/vector/css/vector-web/structures/RightPanel.css @@ -107,7 +107,7 @@ limitations under the License. .mx_RightPanel_footer .mx_RightPanel_invite { line-height: 35px; font-size: 14px; - color: #454545; + color: #4A4A4A; padding-top: 13px; padding-left: 5px; } From bdee2d3b28267bb5a6629006c75e399b43913e32 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Tue, 13 Sep 2016 14:44:54 +0100 Subject: [PATCH 10/12] Shifting icon to center of collapsed section --- src/skins/vector/css/vector-web/structures/RightPanel.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/skins/vector/css/vector-web/structures/RightPanel.css b/src/skins/vector/css/vector-web/structures/RightPanel.css index 0af82aa0ba5..c8274d90896 100644 --- a/src/skins/vector/css/vector-web/structures/RightPanel.css +++ b/src/skins/vector/css/vector-web/structures/RightPanel.css @@ -112,6 +112,10 @@ limitations under the License. padding-left: 5px; } +.collapsed .mx_RightPanel_footer .mx_RightPanel_invite { + padding-left: 10px; +} + .mx_RightPanel_invite .mx_RightPanel_icon { display: inline-block; cursor: pointer; From 3fe8b503e5084ee7c23a8175b976b21013b33cf3 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Tue, 13 Sep 2016 14:57:58 +0100 Subject: [PATCH 11/12] Fixed over collapse on Safari, and now hide the RHS footer Invite when collapsed --- .../vector/css/matrix-react-sdk/structures/MatrixChat.css | 4 ++-- src/skins/vector/css/vector-web/structures/RightPanel.css | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css b/src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css index e93510ffb11..f1cc7d4a1a3 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css @@ -151,6 +151,6 @@ limitations under the License. } .mx_MatrixChat .mx_RightPanel.collapsed { - -webkit-flex: 0 0 72px; - flex: 0 0 72px; + -webkit-flex: 0 0 122px; + flex: 0 0 122px; } diff --git a/src/skins/vector/css/vector-web/structures/RightPanel.css b/src/skins/vector/css/vector-web/structures/RightPanel.css index c8274d90896..0770f7df674 100644 --- a/src/skins/vector/css/vector-web/structures/RightPanel.css +++ b/src/skins/vector/css/vector-web/structures/RightPanel.css @@ -113,7 +113,7 @@ limitations under the License. } .collapsed .mx_RightPanel_footer .mx_RightPanel_invite { - padding-left: 10px; + display: none; } .mx_RightPanel_invite .mx_RightPanel_icon { From 56606c01a042c79202916fd2558c37299699ff4a Mon Sep 17 00:00:00 2001 From: wmwragg Date: Tue, 13 Sep 2016 17:09:01 +0100 Subject: [PATCH 12/12] Added valid but unknown mx user --- .../views/elements/AddressTile.css | 15 +++++ src/skins/vector/img/icon-mx-user.svg | 55 +++++++++++++++++++ 2 files changed, 70 insertions(+) create mode 100644 src/skins/vector/img/icon-mx-user.svg diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css b/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css index 80a5fb7b01d..76c0e6032f1 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css @@ -85,8 +85,23 @@ limitations under the License. vertical-align: middle; } +.mx_AddressTile_unknownMx { + display: inline-block; + font-weight: 600; + padding-right: 11px; +} + +.mx_AddressTile_unknownMxl.mx_AddressTile_justified { + width: 380px; /* name + id width */ + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + vertical-align: middle; +} + .mx_AddressTile_email { display: inline-block; + font-weight: 600; padding-right: 11px; } diff --git a/src/skins/vector/img/icon-mx-user.svg b/src/skins/vector/img/icon-mx-user.svg new file mode 100644 index 00000000000..661803094c4 --- /dev/null +++ b/src/skins/vector/img/icon-mx-user.svg @@ -0,0 +1,55 @@ + + + + 7EB955F8-D226-4EEE-B1DF-E97BA41D1247 + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +