forked from matrix/element-web
Implement "Add room to group" feature
This step needs to be taken before adding a room to a group summary
This commit is contained in:
parent
798558e5cc
commit
888e3abc75
|
@ -25,7 +25,7 @@ import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
|
||||||
import Analytics from 'matrix-react-sdk/lib/Analytics';
|
import Analytics from 'matrix-react-sdk/lib/Analytics';
|
||||||
import rate_limited_func from 'matrix-react-sdk/lib/ratelimitedfunc';
|
import rate_limited_func from 'matrix-react-sdk/lib/ratelimitedfunc';
|
||||||
import AccessibleButton from 'matrix-react-sdk/lib/components/views/elements/AccessibleButton';
|
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 {
|
class HeaderButton extends React.Component {
|
||||||
constructor() {
|
constructor() {
|
||||||
|
@ -87,6 +87,7 @@ module.exports = React.createClass({
|
||||||
Phase: {
|
Phase: {
|
||||||
RoomMemberList: 'RoomMemberList',
|
RoomMemberList: 'RoomMemberList',
|
||||||
GroupMemberList: 'GroupMemberList',
|
GroupMemberList: 'GroupMemberList',
|
||||||
|
GroupRoomList: 'GroupRoomList',
|
||||||
FilePanel: 'FilePanel',
|
FilePanel: 'FilePanel',
|
||||||
NotificationPanel: 'NotificationPanel',
|
NotificationPanel: 'NotificationPanel',
|
||||||
RoomMemberInfo: 'RoomMemberInfo',
|
RoomMemberInfo: 'RoomMemberInfo',
|
||||||
|
@ -132,6 +133,10 @@ module.exports = React.createClass({
|
||||||
|
|
||||||
if (this.state.phase === this.Phase.GroupMemberList) {
|
if (this.state.phase === this.Phase.GroupMemberList) {
|
||||||
showGroupInviteDialog(this.props.groupId);
|
showGroupInviteDialog(this.props.groupId);
|
||||||
|
} else if (this.state.phase === this.Phase.GroupRoomList) {
|
||||||
|
showGroupAddRoomDialog(this.props.groupId).then(() => {
|
||||||
|
this.forceUpdate();
|
||||||
|
});
|
||||||
} else {
|
} else {
|
||||||
// call AddressPickerDialog
|
// call AddressPickerDialog
|
||||||
dis.dispatch({
|
dis.dispatch({
|
||||||
|
@ -205,10 +210,16 @@ module.exports = React.createClass({
|
||||||
|
|
||||||
render: function() {
|
render: function() {
|
||||||
const MemberList = sdk.getComponent('rooms.MemberList');
|
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 NotificationPanel = sdk.getComponent('structures.NotificationPanel');
|
||||||
const FilePanel = sdk.getComponent('structures.FilePanel');
|
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");
|
const TintableSvg = sdk.getComponent("elements.TintableSvg");
|
||||||
|
|
||||||
let inviteGroup;
|
let inviteGroup;
|
||||||
|
|
||||||
let membersBadge;
|
let membersBadge;
|
||||||
|
@ -256,6 +267,19 @@ module.exports = React.createClass({
|
||||||
analytics={['Right Panel', 'Notification List Button', 'click']}
|
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) {
|
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} />;
|
panel = <MemberList roomId={this.props.roomId} key={this.props.roomId} />;
|
||||||
} else if (this.props.groupId && this.state.phase == this.Phase.GroupMemberList) {
|
} else if (this.props.groupId && this.state.phase == this.Phase.GroupMemberList) {
|
||||||
panel = <GroupMemberList groupId={this.props.groupId} key={this.props.groupId} />;
|
panel = <GroupMemberList groupId={this.props.groupId} key={this.props.groupId} />;
|
||||||
inviteGroup = (
|
} else if (this.state.phase === this.Phase.GroupRoomList) {
|
||||||
<AccessibleButton className="mx_RightPanel_invite" onClick={ this.onInviteButtonClick } >
|
panel = <GroupRoomList groupId={this.props.groupId} key={this.props.groupId} />;
|
||||||
<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.RoomMemberInfo) {
|
} 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} />;
|
panel = <MemberInfo member={this.state.member} key={this.props.roomId || this.state.member.userId} />;
|
||||||
} else if (this.state.phase == this.Phase.GroupMemberInfo) {
|
} else if (this.state.phase == this.Phase.GroupMemberInfo) {
|
||||||
const GroupMemberInfo = sdk.getComponent('groups.GroupMemberInfo');
|
|
||||||
panel = <GroupMemberInfo
|
panel = <GroupMemberInfo
|
||||||
groupMember={this.state.member}
|
groupMember={this.state.member}
|
||||||
groupId={this.props.groupId}
|
groupId={this.props.groupId}
|
||||||
|
@ -305,6 +321,24 @@ module.exports = React.createClass({
|
||||||
panel = <div className="mx_RightPanel_blank"></div>;
|
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";
|
let classes = "mx_RightPanel mx_fadable";
|
||||||
if (this.props.collapsed) {
|
if (this.props.collapsed) {
|
||||||
classes += " 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>",
|
"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",
|
"Set Password": "Set Password",
|
||||||
"Couldn't load home page": "Couldn't load home page",
|
"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.
|
limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.mx_EntityTile {
|
.mx_EntityTile,
|
||||||
|
.mx_GroupRoomTile {
|
||||||
display: table-row;
|
display: table-row;
|
||||||
position: relative;
|
position: relative;
|
||||||
color: $primary-fg-color;
|
color: $primary-fg-color;
|
||||||
|
@ -28,7 +29,8 @@ limitations under the License.
|
||||||
width: 26px;
|
width: 26px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_EntityTile_avatar {
|
.mx_EntityTile_avatar,
|
||||||
|
.mx_GroupRoomTile_avatar {
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
padding-left: 3px;
|
padding-left: 3px;
|
||||||
padding-right: 12px;
|
padding-right: 12px;
|
||||||
|
@ -48,7 +50,8 @@ limitations under the License.
|
||||||
right: 6px;
|
right: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_EntityTile_name {
|
.mx_EntityTile_name,
|
||||||
|
.mx_GroupRoomTile_name {
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
|
@ -14,7 +14,9 @@ See the License for the specific language governing permissions and
|
||||||
limitations under the License.
|
limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.mx_MemberList {
|
.mx_MemberList,
|
||||||
|
.mx_GroupMemberList,
|
||||||
|
.mx_GroupRoomList {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
|
@ -44,7 +46,9 @@ limitations under the License.
|
||||||
flex: 1 1 0px;
|
flex: 1 1 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_MemberList_query {
|
.mx_MemberList_query,
|
||||||
|
.mx_GroupMemberList_query,
|
||||||
|
.mx_GroupRoomList_query {
|
||||||
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
|
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
border: 1px solid $input-border-color;
|
border: 1px solid $input-border-color;
|
||||||
|
@ -57,13 +61,17 @@ limitations under the License.
|
||||||
width: 189px;
|
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;
|
color: $primary-fg-color;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
font-size: 14px;
|
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;
|
color: $primary-fg-color;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
|
@ -78,6 +78,7 @@ limitations under the License.
|
||||||
|
|
||||||
.mx_RightPanel .mx_MemberList,
|
.mx_RightPanel .mx_MemberList,
|
||||||
.mx_RightPanel .mx_MemberInfo,
|
.mx_RightPanel .mx_MemberInfo,
|
||||||
|
.mx_RightPanel .mx_GroupRoomList,
|
||||||
.mx_RightPanel_blank {
|
.mx_RightPanel_blank {
|
||||||
order: 2;
|
order: 2;
|
||||||
flex: 1 1 0;
|
flex: 1 1 0;
|
||||||
|
|
Loading…
Reference in New Issue