ref(contact-list): remove invite functionality (#2017)

* ref(contact-list): remove invite functionality

Removing becuase there is already a toolbar button dedicated
to opening the invite dialog. Now the contact list focuses
on showing current participants.

* squash: remove unused strings and styling

* squash: add plural to panel title

css/_contact_list.scss

@@ -1,18 +1,6 @@
 #contacts_container {
     cursor: default;
 
-    /**
-     * Override generic side toolbar styles to compensate for AtlasKit Button
-     * being used instead of custom button styling.
-     */
-    .sideToolbarBlock {
-        .contact-list-panel-invite-button {
-            font-size: $modalButtonFontSize;
-            justify-content: center;
-            margin: 9px 0;
-        }
-    }
-
     #contacts {
         font-size: 12px;
         bottom: 0px;

css/components/_form-control.scss

@@ -23,19 +23,6 @@
         color: $inputControlEmColor;
     }
 
-    &__hint {
-        margin-top: 0;
-        font-size: $hintFontSize;
-
-        span {
-            vertical-align: middle;
-        }
-
-        &_error {
-            color: $errorColor;
-        }
-    }
-
     &__container {
         position: relative;
         width: 100%;

lang/main.json

@@ -1,8 +1,6 @@
 {
-    "contactlist": "__pcount__ Members",
-    "addParticipants": "Share the link",
-    "roomLocked": "Callers must enter a password",
-    "roomUnlocked": "Anyone with the link can join",
+    "contactlist": "__count__ Member",
+    "contactlist_plural": "__count__ Members",
     "passwordSetRemotely": "set by another member",
     "connectionsettings": "Connection Settings",
     "poweredby": "powered by",

react/features/contact-list/components/ContactListPanel.web.js

@@ -1,19 +1,16 @@
-import Button from '@atlaskit/button';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
 import { translate } from '../../base/i18n';
 import { getAvatarURL, getParticipants } from '../../base/participants';
-import { openInviteDialog } from '../../invite';
 
 import ContactListItem from './ContactListItem';
 
 declare var interfaceConfig: Object;
 
 /**
- * React component for showing a list of current conference participants, the
- * current conference lock state, and a button to open the invite dialog.
+ * React component for showing a list of current conference participants.
  *
  * @extends Component
  */
@@ -24,20 +21,15 @@ class ContactListPanel extends Component {
      * @static
      */
     static propTypes = {
-        /**
-         * Whether or not the conference is currently locked with a password.
-         */
-        _locked: PropTypes.bool,
-
         /**
          * The participants to show in the contact list.
          */
         _participants: PropTypes.array,
 
         /**
-         * Invoked to open an invite dialog.
+         * Whether or not participant avatars should be displayed.
          */
-        dispatch: PropTypes.func,
+        _showAvatars: PropTypes.bool,
 
         /**
          * Invoked to obtain translated strings.
@@ -45,46 +37,18 @@ class ContactListPanel extends Component {
         t: PropTypes.func
     };
 
-    /**
-     * Initializes a new {@code ContactListPanel} instance.
-     *
-     * @param {Object} props - The read-only properties with which the new
-     * instance is to be initialized.
-     */
-    constructor(props) {
-        super(props);
-
-        // Bind event handler so it is only bound once for every instance.
-        this._onOpenInviteDialog = this._onOpenInviteDialog.bind(this);
-    }
-
     /**
      * Implements React's {@link Component#render()}.
      *
      * @inheritdoc
      */
     render() {
-        const { _locked, _participants, t } = this.props;
+        const { _participants, t } = this.props;
 
         return (
             <div className = 'contact-list-panel'>
                 <div className = 'title'>
-                    { t('contactlist', { pcount: _participants.length }) }
-                </div>
-                <div className = 'sideToolbarBlock first'>
-                    <Button
-                        appearance = 'primary'
-                        className = 'contact-list-panel-invite-button'
-                        id = 'addParticipantsBtn'
-                        onClick = { this._onOpenInviteDialog }
-                        type = 'button'>
-                        { t('addParticipants') }
-                    </Button>
-                    <div>
-                        { _locked
-                            ? this._renderLockedMessage()
-                            : this._renderUnlockedMessage() }
-                    </div>
+                    { t('contactlist', { count: _participants.length }) }
                 </div>
                 <ul id = 'contacts'>
                     { this._renderContacts() }
@@ -93,16 +57,6 @@ class ContactListPanel extends Component {
         );
     }
 
-    /**
-     * Dispatches an action to open an invite dialog.
-     *
-     * @private
-     * @returns {void}
-     */
-    _onOpenInviteDialog() {
-        this.props.dispatch(openInviteDialog());
-    }
-
     /**
      * Renders React Elements for displaying information about each participant
      * in the contact list.
@@ -116,7 +70,7 @@ class ContactListPanel extends Component {
 
             return (
                 <ContactListItem
-                    avatarURI = { interfaceConfig.SHOW_CONTACTLIST_AVATARS
+                    avatarURI = { this.props._showAvatars
                         ? getAvatarURL(participant) : null }
                     id = { id }
                     key = { id }
@@ -124,41 +78,6 @@ class ContactListPanel extends Component {
             );
         });
     }
-
-    /**
-     * Renders a React Element for informing the conference is currently locked.
-     *
-     * @private
-     * @returns {ReactElement}
-     */
-    _renderLockedMessage() {
-        return (
-            <p
-                className = 'form-control__hint form-control_full-width'
-                id = 'contactListroomLocked'>
-                <span className = 'icon-security-locked' />
-                <span>{ this.props.t('roomLocked') }</span>
-            </p>
-        );
-    }
-
-    /**
-     * Renders a React Element for informing the conference is currently not
-     * locked.
-     *
-     * @private
-     * @returns {ReactElement}
-     */
-    _renderUnlockedMessage() {
-        return (
-            <p
-                className = 'form-control__hint form-control_full-width'
-                id = 'contactListroomUnlocked'>
-                <span className = 'icon-security' />
-                <span>{ this.props.t('roomUnlocked') }</span>
-            </p>
-        );
-    }
 }
 
 /**
@@ -174,8 +93,8 @@ class ContactListPanel extends Component {
  */
 function _mapStateToProps(state) {
     return {
-        _locked: state['features/base/conference'].locked,
-        _participants: getParticipants(state)
+        _participants: getParticipants(state),
+        _showAvatars: interfaceConfig.SHOW_CONTACTLIST_AVATARS
     };
 }