From 888e3abc7588a5dad506aab96f16317b20dc6b9a Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Tue, 26 Sep 2017 14:35:38 +0100 Subject: [PATCH] Implement "Add room to group" feature This step needs to be taken before adding a room to a group summary --- src/components/structures/RightPanel.js | 58 +++++++++++++++---- src/i18n/strings/en_EN.json | 3 +- .../views/rooms/_EntityTile.scss | 9 ++- .../views/rooms/_MemberList.scss | 16 +++-- .../vector-web/structures/_RightPanel.scss | 1 + 5 files changed, 67 insertions(+), 20 deletions(-) diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index 0a438881..90b4c5f6 100644 --- a/src/components/structures/RightPanel.js +++ b/src/components/structures/RightPanel.js @@ -25,7 +25,7 @@ import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg'; import Analytics from 'matrix-react-sdk/lib/Analytics'; import rate_limited_func from 'matrix-react-sdk/lib/ratelimitedfunc'; import AccessibleButton from 'matrix-react-sdk/lib/components/views/elements/AccessibleButton'; -import { showGroupInviteDialog } from 'matrix-react-sdk/lib/GroupInvite'; +import { showGroupInviteDialog, showGroupAddRoomDialog } from 'matrix-react-sdk/lib/GroupAddressPicker'; class HeaderButton extends React.Component { constructor() { @@ -87,6 +87,7 @@ module.exports = React.createClass({ Phase: { RoomMemberList: 'RoomMemberList', GroupMemberList: 'GroupMemberList', + GroupRoomList: 'GroupRoomList', FilePanel: 'FilePanel', NotificationPanel: 'NotificationPanel', RoomMemberInfo: 'RoomMemberInfo', @@ -132,6 +133,10 @@ module.exports = React.createClass({ if (this.state.phase === this.Phase.GroupMemberList) { showGroupInviteDialog(this.props.groupId); + } else if (this.state.phase === this.Phase.GroupRoomList) { + showGroupAddRoomDialog(this.props.groupId).then(() => { + this.forceUpdate(); + }); } else { // call AddressPickerDialog dis.dispatch({ @@ -205,10 +210,16 @@ module.exports = React.createClass({ render: function() { const MemberList = sdk.getComponent('rooms.MemberList'); - const GroupMemberList = sdk.getComponent('groups.GroupMemberList'); + const MemberInfo = sdk.getComponent('rooms.MemberInfo'); const NotificationPanel = sdk.getComponent('structures.NotificationPanel'); const FilePanel = sdk.getComponent('structures.FilePanel'); + + const GroupMemberList = sdk.getComponent('groups.GroupMemberList'); + const GroupMemberInfo = sdk.getComponent('groups.GroupMemberInfo'); + const GroupRoomList = sdk.getComponent('groups.GroupRoomList'); + const TintableSvg = sdk.getComponent("elements.TintableSvg"); + let inviteGroup; let membersBadge; @@ -256,6 +267,19 @@ module.exports = React.createClass({ analytics={['Right Panel', 'Notification List Button', 'click']} />, ]; + } else if (this.props.groupId) { + headerButtons = [ + , + , + ]; } if (this.props.roomId || this.props.groupId) { @@ -277,19 +301,11 @@ module.exports = React.createClass({ panel = ; } else if (this.props.groupId && this.state.phase == this.Phase.GroupMemberList) { panel = ; - inviteGroup = ( - -
- -
-
{ _t('Invite to this group') }
- - ); + } else if (this.state.phase === this.Phase.GroupRoomList) { + panel = ; } else if (this.state.phase == this.Phase.RoomMemberInfo) { - const MemberInfo = sdk.getComponent('rooms.MemberInfo'); panel = ; } else if (this.state.phase == this.Phase.GroupMemberInfo) { - const GroupMemberInfo = sdk.getComponent('groups.GroupMemberInfo'); panel = ; } + if (this.props.groupId) { + inviteGroup = this.state.phase === this.Phase.GroupMemberList ? ( + +
+ +
+
{ _t('Invite to this group') }
+ + ) : ( + +
+ +
+
{ _t('Add room to this group') }
+ + ); + } + let classes = "mx_RightPanel mx_fadable"; if (this.props.collapsed) { classes += " collapsed"; diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 63a4c578..34337746 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -220,5 +220,6 @@ "To return to your account in future you need to set a password": "To return to your account in future you need to set a password", "Set Password": "Set Password", "Couldn't load home page": "Couldn't load home page", - "Invite to this group": "Invite to this group" + "Invite to this group": "Invite to this group", + "Add room to this group": "Add room to this group" } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss index 3f360e79..948521ce 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss @@ -14,7 +14,8 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_EntityTile { +.mx_EntityTile, +.mx_GroupRoomTile { display: table-row; position: relative; color: $primary-fg-color; @@ -28,7 +29,8 @@ limitations under the License. width: 26px; } -.mx_EntityTile_avatar { +.mx_EntityTile_avatar, +.mx_GroupRoomTile_avatar { display: table-cell; padding-left: 3px; padding-right: 12px; @@ -48,7 +50,8 @@ limitations under the License. right: 6px; } -.mx_EntityTile_name { +.mx_EntityTile_name, +.mx_GroupRoomTile_name { display: table-cell; vertical-align: middle; overflow: hidden; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss index 45e5c157..84a6a583 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss @@ -14,7 +14,9 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_MemberList { +.mx_MemberList, +.mx_GroupMemberList, +.mx_GroupRoomList { height: 100%; margin-top: 12px; @@ -44,7 +46,9 @@ limitations under the License. flex: 1 1 0px; } -.mx_MemberList_query { +.mx_MemberList_query, +.mx_GroupMemberList_query, +.mx_GroupRoomList_query { font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; border-radius: 3px; border: 1px solid $input-border-color; @@ -57,13 +61,17 @@ limitations under the License. width: 189px; } -.mx_MemberList_query::-moz-placeholder { +.mx_MemberList_query::-moz-placeholder, +.mx_GroupMemberList_query::-moz-placeholder, +.mx_GroupRoomList_query::-moz-placeholder { color: $primary-fg-color; opacity: 0.5; font-size: 14px; } -.mx_MemberList_query::-webkit-input-placeholder { +.mx_MemberList_query::-webkit-input-placeholder, +.mx_GroupMemberList_query::-webkit-input-placeholder, +.mx_GroupRoomList_query::-webkit-input-placeholder { color: $primary-fg-color; opacity: 0.5; font-size: 14px; diff --git a/src/skins/vector/css/vector-web/structures/_RightPanel.scss b/src/skins/vector/css/vector-web/structures/_RightPanel.scss index 056e9bd3..91caed7b 100644 --- a/src/skins/vector/css/vector-web/structures/_RightPanel.scss +++ b/src/skins/vector/css/vector-web/structures/_RightPanel.scss @@ -78,6 +78,7 @@ limitations under the License. .mx_RightPanel .mx_MemberList, .mx_RightPanel .mx_MemberInfo, +.mx_RightPanel .mx_GroupRoomList, .mx_RightPanel_blank { order: 2; flex: 1 1 0;