forked from matrix/element-web
Merge pull request #5125 from vector-im/luke/groups-add-rooms
Implement "Add room to group" feature
This commit is contained in:
commit
f64f293cdb
|
@ -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 = [
|
||||
<HeaderButton key="_groupMembersButton" title={_t('Members')} iconSrc="img/icons-people.svg"
|
||||
isHighlighted={this.state.phase === this.Phase.GroupMemberList}
|
||||
clickPhase={this.Phase.GroupMemberList}
|
||||
analytics={['Right Panel', 'Group Member List Button', 'click']}
|
||||
/>,
|
||||
<HeaderButton key="_roomsButton" title={_t('Rooms')} iconSrc="img/icons-files.svg"
|
||||
isHighlighted={this.state.phase === this.Phase.GroupRoomList}
|
||||
clickPhase={this.Phase.GroupRoomList}
|
||||
analytics={['Right Panel', 'Group Room List Button', 'click']}
|
||||
/>,
|
||||
];
|
||||
}
|
||||
|
||||
if (this.props.roomId || this.props.groupId) {
|
||||
|
@ -277,19 +301,11 @@ module.exports = React.createClass({
|
|||
panel = <MemberList roomId={this.props.roomId} key={this.props.roomId} />;
|
||||
} else if (this.props.groupId && this.state.phase == this.Phase.GroupMemberList) {
|
||||
panel = <GroupMemberList groupId={this.props.groupId} key={this.props.groupId} />;
|
||||
inviteGroup = (
|
||||
<AccessibleButton className="mx_RightPanel_invite" onClick={ this.onInviteButtonClick } >
|
||||
<div className="mx_RightPanel_icon" >
|
||||
<TintableSvg src="img/icon-invite-people.svg" width="35" height="35" />
|
||||
</div>
|
||||
<div className="mx_RightPanel_message">{ _t('Invite to this group') }</div>
|
||||
</AccessibleButton>
|
||||
);
|
||||
} else if (this.state.phase === this.Phase.GroupRoomList) {
|
||||
panel = <GroupRoomList groupId={this.props.groupId} key={this.props.groupId} />;
|
||||
} else if (this.state.phase == this.Phase.RoomMemberInfo) {
|
||||
const MemberInfo = sdk.getComponent('rooms.MemberInfo');
|
||||
panel = <MemberInfo member={this.state.member} key={this.props.roomId || this.state.member.userId} />;
|
||||
} else if (this.state.phase == this.Phase.GroupMemberInfo) {
|
||||
const GroupMemberInfo = sdk.getComponent('groups.GroupMemberInfo');
|
||||
panel = <GroupMemberInfo
|
||||
groupMember={this.state.member}
|
||||
groupId={this.props.groupId}
|
||||
|
@ -305,6 +321,24 @@ module.exports = React.createClass({
|
|||
panel = <div className="mx_RightPanel_blank"></div>;
|
||||
}
|
||||
|
||||
if (this.props.groupId) {
|
||||
inviteGroup = this.state.phase === this.Phase.GroupMemberList ? (
|
||||
<AccessibleButton className="mx_RightPanel_invite" onClick={ this.onInviteButtonClick } >
|
||||
<div className="mx_RightPanel_icon" >
|
||||
<TintableSvg src="img/icon-invite-people.svg" width="35" height="35" />
|
||||
</div>
|
||||
<div className="mx_RightPanel_message">{ _t('Invite to this group') }</div>
|
||||
</AccessibleButton>
|
||||
) : (
|
||||
<AccessibleButton className="mx_RightPanel_invite" onClick={ this.onInviteButtonClick } >
|
||||
<div className="mx_RightPanel_icon" >
|
||||
<TintableSvg src="img/icons-files.svg" width="35" height="35" />
|
||||
</div>
|
||||
<div className="mx_RightPanel_message">{ _t('Add room to this group') }</div>
|
||||
</AccessibleButton>
|
||||
);
|
||||
}
|
||||
|
||||
let classes = "mx_RightPanel mx_fadable";
|
||||
if (this.props.collapsed) {
|
||||
classes += " collapsed";
|
||||
|
|
|
@ -220,5 +220,6 @@
|
|||
"To return to your account in future you need to <u>set a password</u>": "To return to your account in future you need to <u>set a password</u>",
|
||||
"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"
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue