Proof of concept for a flair tab in user settings

src/components/views/groups/GroupPublicityToggle.js

@@ -18,7 +18,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import sdk from '../../../index';
 import GroupStore from '../../../stores/GroupStore';
-import { _t } from '../../../languageHandler.js';
+import ToggleSwitch from "../elements/ToggleSwitch";
 
 export default React.createClass({
     displayName: 'GroupPublicityToggle',
@@ -52,8 +52,7 @@ export default React.createClass({
         if (this._groupStoreToken) this._groupStoreToken.unregister();
     },
 
-    _onPublicityToggle: function(e) {
-        e.stopPropagation();
+    _onPublicityToggle: function() {
         this.setState({
             busy: true,
             // Optimistic early update
@@ -68,21 +67,11 @@ export default React.createClass({
 
     render() {
         const GroupTile = sdk.getComponent('groups.GroupTile');
-        const input = <input type="checkbox"
-            onChange={this._onPublicityToggle}
-            checked={this.state.isGroupPublicised}
-        />;
-        const labelText = !this.state.ready ? _t("Loading...") :
-            (this.state.isGroupPublicised ?
-             _t("Flair will appear if enabled in room settings") :
-             _t("Flair will not appear")
-            );
         return <div className="mx_GroupPublicity_toggle">
             <GroupTile groupId={this.props.groupId} showDescription={false} avatarHeight={40} />
-            <label onClick={this._onPublicityToggle}>
-                { input }
-                { labelText }
-            </label>
+            <ToggleSwitch checked={this.state.isGroupPublicised}
+                          disabled={!this.state.ready || this.state.busy}
+                          onChange={this._onPublicityToggle} />
         </div>;
     },
 });

src/components/views/groups/GroupUserSettings.js

@@ -43,9 +43,9 @@ export default React.createClass({
         });
     },
 
-    _renderGroupPublicity() {
+    render() {
         let text = "";
-        let scrollbox = <div />;
+        let groupPublicityToggles = null;
         const groups = this.state.groups;
 
         if (this.state.error) {
@@ -54,16 +54,10 @@ export default React.createClass({
             text = _t('Loading...');
         } else if (groups.length > 0) {
             const GroupPublicityToggle = sdk.getComponent('groups.GroupPublicityToggle');
-            const GeminiScrollbarWrapper = sdk.getComponent('elements.GeminiScrollbarWrapper');
-            const groupPublicityToggles = groups.map((groupId, index) => {
+            groupPublicityToggles = groups.map((groupId, index) => {
                 return <GroupPublicityToggle key={index} groupId={groupId} />;
             });
             text = _t('Display your community flair in rooms configured to show it.');
-            scrollbox = <div className="mx_GroupUserSettings_groupPublicity_scrollbox">
-                <GeminiScrollbarWrapper>
-                    { groupPublicityToggles }
-                </GeminiScrollbarWrapper>
-            </div>;
         } else {
             text = _t("You're not currently a member of any communities.");
         }
@@ -71,16 +65,10 @@ export default React.createClass({
         return (
             <div>
                 <p className="mx_SettingsTab_subsectionText">{ text }</p>
-                { scrollbox }
+                <div className='mx_SettingsTab_subsectionText'>
+                    { groupPublicityToggles }
+                </div>
             </div>
         );
     },
-
-    render() {
-        const groupPublicity = this._renderGroupPublicity();
-
-        return <div>
-            { groupPublicity }
-        </div>;
-    },
 });