Merge branch 'develop' into luke/groups-are-communities

src/components/structures/GroupView.js

@@ -448,8 +448,18 @@ export default React.createClass({
     _initGroupStore: function(groupId) {
         this._groupStore = GroupStoreCache.getGroupStore(MatrixClientPeg.get(), groupId);
         this._groupStore.on('update', () => {
+            const summary = this._groupStore.getSummary();
+            if (summary.profile) {
+                // Default profile fields should be "" for later sending to the server (which
+                // requires that the fields are strings, not null)
+                ["avatar_url", "long_description", "name", "short_description"].forEach((k) => {
+                    summary.profile[k] = summary.profile[k] || "";
+                });
+            }
             this.setState({
-                summary: this._groupStore.getSummary(),
+                summary,
+                isGroupPublicised: this._groupStore.getGroupPublicity(),
+                isUserPrivileged: this._groupStore.isUserPrivileged(),
                 error: null,
             });
         });
@@ -598,22 +608,15 @@ export default React.createClass({
         });
     },
 
-    _onPubliciseOffClick: function() {
-        this._setPublicity(false);
-    },
-
-    _onPubliciseOnClick: function() {
-        this._setPublicity(true);
-    },
-
     _onAddRoomsClick: function() {
         showGroupAddRoomDialog(this.props.groupId);
     },
 
-    _setPublicity: function(publicity) {
+    _onPublicityToggle: function() {
         this.setState({
             publicityBusy: true,
         });
+        const publicity = !this.state.isGroupPublicised;
         this._groupStore.setGroupPublicity(publicity).then(() => {
             this.setState({
                 publicityBusy: false,
@@ -737,100 +740,113 @@ export default React.createClass({
                     <Spinner />
                 </div>;
             }
-
             return <div className="mx_GroupView_membershipSection mx_GroupView_membershipSection_invited">
-                <div className="mx_GroupView_membershipSection_description">
-                    { _t("%(inviter)s has invited you to join this community", {inviter: group.inviter.userId}) }
-                </div>
-                <div className="mx_GroupView_membership_buttonContainer">
-                    <AccessibleButton className="mx_GroupView_textButton mx_RoomHeader_textButton"
-                        onClick={this._onAcceptInviteClick}
-                    >
-                        { _t("Accept") }
-                    </AccessibleButton>
-                    <AccessibleButton className="mx_GroupView_textButton mx_RoomHeader_textButton"
-                        onClick={this._onRejectInviteClick}
-                    >
-                        { _t("Decline") }
-                    </AccessibleButton>
-                </div>
-            </div>;
-        } else if (group.myMembership === 'join') {
-            let youAreAMemberText = _t("You are a member of this community");
-            if (this.state.summary.user && this.state.summary.user.is_privileged) {
-                youAreAMemberText = _t("You are an administrator of this community");
-            }
-
-            let publicisedButton;
-            if (this.state.publicityBusy) {
-                publicisedButton = <Spinner />;
-            }
-
-            let publicisedSection;
-            if (this.state.summary.user && this.state.summary.user.is_publicised) {
-                if (!this.state.publicityBusy) {
-                    publicisedButton = <AccessibleButton className="mx_GroupView_textButton mx_RoomHeader_textButton"
-                            onClick={this._onPubliciseOffClick}
-                        >
-                            { _t("Unpublish") }
-                        </AccessibleButton>;
-                }
-                publicisedSection = <div className="mx_GroupView_membershipSubSection">
-                    { _t("This community is published on your profile") }
-                    <div className="mx_GroupView_membership_buttonContainer">
-                        { publicisedButton }
-                    </div>
-                </div>;
-            } else {
-                if (!this.state.publicityBusy) {
-                    publicisedButton = <AccessibleButton className="mx_GroupView_textButton mx_RoomHeader_textButton"
-                        onClick={this._onPubliciseOnClick}
-                    >
-                        { _t("Publish") }
-                    </AccessibleButton>;
-                }
-                publicisedSection = <div className="mx_GroupView_membershipSubSection">
-                    { _t("This community is not published on your profile") }
-                    <div className="mx_GroupView_membership_buttonContainer">
-                        { publicisedButton }
-                    </div>
-                </div>;
-            }
-
-            return <div className="mx_GroupView_membershipSection mx_GroupView_membershipSection_joined">
                 <div className="mx_GroupView_membershipSubSection">
                     <div className="mx_GroupView_membershipSection_description">
-                        { youAreAMemberText }
+                        { _t("%(inviter)s has invited you to join this group", {inviter: group.inviter.userId}) }
                     </div>
                     <div className="mx_GroupView_membership_buttonContainer">
                         <AccessibleButton className="mx_GroupView_textButton mx_RoomHeader_textButton"
+                            onClick={this._onAcceptInviteClick}
+                        >
+                            { _t("Accept") }
+                        </AccessibleButton>
+                        <AccessibleButton className="mx_GroupView_textButton mx_RoomHeader_textButton"
+                            onClick={this._onRejectInviteClick}
+                        >
+                            { _t("Decline") }
+                        </AccessibleButton>
+                    </div>
+                </div>
+            </div>;
+        } else if (group.myMembership === 'join' && this.state.editing) {
+            const leaveButtonTooltip = this.state.isUserPrivileged ?
+                _t("You are a member of this group") :
+                _t("You are an administrator of this group");
+            const leaveButtonClasses = classnames({
+                "mx_RoomHeader_textButton": true,
+                "mx_GroupView_textButton": true,
+                "mx_GroupView_leaveButton": true,
+                "mx_RoomHeader_textButton_danger": this.state.isUserPrivileged,
+            });
+            return <div className="mx_GroupView_membershipSection mx_GroupView_membershipSection_joined">
+                <div className="mx_GroupView_membershipSubSection">
+                    { /* Empty div for flex alignment */ }
+                    <div />
+                    <div className="mx_GroupView_membership_buttonContainer">
+                        <AccessibleButton
+                            className={leaveButtonClasses}
                             onClick={this._onLeaveClick}
+                            title={leaveButtonTooltip}
                         >
                             { _t("Leave") }
                         </AccessibleButton>
                     </div>
                 </div>
-                { publicisedSection }
             </div>;
         }
-
         return null;
     },
 
+    _getMemberSettingsSection: function() {
+        return <div className="mx_GroupView_memberSettings">
+            <h3> { _t("Community Member Settings") } </h3>
+            <div className="mx_GroupView_memberSettings_toggle">
+                <input type="checkbox"
+                    onClick={this._onPublicityToggle}
+                    checked={this.state.isGroupPublicised}
+                    tabIndex="3"
+                    id="isGroupPublicised"
+                />
+                <label htmlFor="isGroupPublicised"
+                    onClick={this._onPublicityToggle}
+                >
+                    { _t("Publish this community on your profile") }
+                </label>
+            </div>
+        </div>;
+    },
+
+    _getLongDescriptionNode: function() {
+        const summary = this.state.summary;
+        let description = null;
+        if (summary.profile && summary.profile.long_description) {
+            description = sanitizedHtmlNode(summary.profile.long_description);
+        }
+        return this.state.editing && this.state.isUserPrivileged ?
+            <div className="mx_GroupView_groupDesc">
+                <h3> { _t("Long Description (HTML)") } </h3>
+                <textarea
+                    value={this.state.profileForm.long_description}
+                    onChange={this._onLongDescChange}
+                    tabIndex="4"
+                    key="editLongDesc"
+                />
+            </div> :
+            <div className="mx_GroupView_groupDesc">
+                { description }
+            </div>;
+    },
+
     render: function() {
         const GroupAvatar = sdk.getComponent("avatars.GroupAvatar");
-        const Loader = sdk.getComponent("elements.Spinner");
+        const Spinner = sdk.getComponent("elements.Spinner");
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
 
         if (this.state.summary === null && this.state.error === null || this.state.saving) {
-            return <Loader />;
+            return <Spinner />;
         } else if (this.state.summary) {
             const summary = this.state.summary;
 
             let avatarNode;
             let nameNode;
             let shortDescNode;
-            let bodyNodes = [];
+            const bodyNodes = [
+                this._getMembershipSection(),
+                this.state.editing ? this._getMemberSettingsSection() : null,
+                this._getLongDescriptionNode(),
+                this._getRoomsNode(),
+            ];
             const rightButtons = [];
             const headerClasses = {
                 mx_GroupView_header: true,
@@ -838,7 +854,7 @@ export default React.createClass({
             if (this.state.editing) {
                 let avatarImage;
                 if (this.state.uploadingAvatar) {
-                    avatarImage = <Loader />;
+                    avatarImage = <Spinner />;
                 } else {
                     const GroupAvatar = sdk.getComponent('avatars.GroupAvatar');
                     avatarImage = <GroupAvatar groupId={this.props.groupId}
@@ -887,15 +903,6 @@ export default React.createClass({
                             width="18" height="18" alt={_t("Cancel")} />
                     </AccessibleButton>,
                 );
-                bodyNodes = [
-                    <textarea className="mx_GroupView_editLongDesc"
-                        value={this.state.profileForm.long_description}
-                        onChange={this._onLongDescChange}
-                        tabIndex="3"
-                        key="editLongDesc"
-                    />,
-                    this._getRoomsNode(),
-                ];
             } else {
                 const groupAvatarUrl = summary.profile ? summary.profile.avatar_url : null;
                 avatarNode = <GroupAvatar
@@ -916,25 +923,13 @@ export default React.createClass({
                 if (summary.profile && summary.profile.short_description) {
                     shortDescNode = <span>{ summary.profile.short_description }</span>;
                 }
-
-                let description = null;
-                if (summary.profile && summary.profile.long_description) {
-                    description = sanitizedHtmlNode(summary.profile.long_description);
-                }
-                bodyNodes = [
-                    this._getMembershipSection(),
-                    <div key="groupDesc" className="mx_GroupView_groupDesc">{ description }</div>,
-                    this._getRoomsNode(),
-                ];
-                if (summary.user && summary.user.is_privileged) {
-                    rightButtons.push(
-                        <AccessibleButton className="mx_GroupHeader_button"
-                            onClick={this._onEditClick} title={_t("Edit Community")} key="_editButton"
-                        >
-                            <TintableSvg src="img/icons-settings-room.svg" width="16" height="16" />
-                        </AccessibleButton>,
-                    );
-                }
+                rightButtons.push(
+                    <AccessibleButton className="mx_GroupHeader_button"
+                        onClick={this._onEditClick} title={_t("Community Settings")} key="_editButton"
+                    >
+                        <TintableSvg src="img/icons-settings-room.svg" width="16" height="16" />
+                    </AccessibleButton>,
+                );
                 if (this.props.collapsedRhs) {
                     rightButtons.push(
                         <AccessibleButton className="mx_GroupHeader_button"

src/components/views/dialogs/AddressPickerDialog.js

@@ -489,7 +489,12 @@ module.exports = React.createClass({
             const AddressTile = sdk.getComponent("elements.AddressTile");
             for (let i = 0; i < this.state.userList.length; i++) {
                 query.push(
-                    <AddressTile key={i} address={this.state.userList[i]} canDismiss={true} onDismissed={this.onDismissed(i)} />,
+                    <AddressTile
+                        key={i}
+                        address={this.state.userList[i]}
+                        canDismiss={true}
+                        onDismissed={this.onDismissed(i)}
+                        showAddress={this.props.pickerType === 'user'} />,
                 );
             }
         }
@@ -539,6 +544,7 @@ module.exports = React.createClass({
             addressSelector = (
                 <AddressSelector ref={(ref) => {this.addressSelector = ref;}}
                     addressList={this.state.queryList}
+                    showAddress={this.props.pickerType === 'user'}
                     onSelected={this.onSelected}
                     truncateAt={TRUNCATE_QUERY_LIST}
                 />

src/components/views/elements/AddressSelector.js

@@ -30,6 +30,8 @@ export default React.createClass({
 
         // List of the addresses to display
         addressList: React.PropTypes.arrayOf(UserAddressType).isRequired,
+        // Whether to show the address on the address tiles
+        showAddress: React.PropTypes.bool,
         truncateAt: React.PropTypes.number.isRequired,
         selected: React.PropTypes.number,
 
@@ -142,7 +144,13 @@ export default React.createClass({
                         key={this.props.addressList[i].addressType + "/" + this.props.addressList[i].address}
                         ref={(ref) => { this.addressListElement = ref; }}
                     >
-                        <AddressTile address={this.props.addressList[i]} justified={true} networkName="vector" networkUrl="img/search-icon-vector.svg" />
+                        <AddressTile
+                            address={this.props.addressList[i]}
+                            showAddress={this.props.showAddress}
+                            justified={true}
+                            networkName="vector"
+                            networkUrl="img/search-icon-vector.svg"
+                        />
                     </div>,
                 );
             }

src/components/views/elements/AddressTile.js

@@ -87,7 +87,10 @@ export default React.createClass({
             info = (
                 <div className="mx_AddressTile_mx">
                     <div className={nameClasses}>{ name }</div>
-                    <div className={idClasses}>{ address.address }</div>
+                    { this.props.showAddress ?
+                        <div className={idClasses}>{ address.address }</div> :
+                        <div />
+                    }
                 </div>
             );
         } else if (isMatrixAddress) {

src/components/views/groups/GroupMemberList.js

@@ -161,10 +161,11 @@ export default withMatrixClient(React.createClass({
             { this.makeGroupMemberTiles(this.state.searchQuery, this.state.members) }
         </div> : <div />;
 
-        const invited = this.state.invitedMembers ? <div className="mx_MemberList_invited">
-            <h2>{ _t("Invited") }</h2>
-            { this.makeGroupMemberTiles(this.state.searchQuery, this.state.invitedMembers) }
-        </div> : <div />;
+        const invited = (this.state.invitedMembers && this.state.invitedMembers.length > 0) ?
+            <div className="mx_MemberList_invited">
+                <h2>{ _t("Invited") }</h2>
+                { this.makeGroupMemberTiles(this.state.searchQuery, this.state.invitedMembers) }
+            </div> : <div />;
 
         return (
             <div className="mx_MemberList">