OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #5125 from vector-im/luke/groups-add-rooms 

Implement "Add room to group" feature
pull/5137/head
David Baker 2017-09-26 18:15:54 +01:00 committed by GitHub
parent 94855c0f48 888e3abc75
commit f64f293cdb
5 changed files with 67 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/structures/RightPanel.js
View File

@ -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";

3
src/i18n/strings/en_EN.json
View File

@ -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"
}

9
src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss
View File

@ -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;

16
src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss
View File

@ -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;

1
src/skins/vector/css/vector-web/structures/_RightPanel.scss
View File

@ -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;