feat(InviteMore): Relocate invite prompt for mobile friendliness.

css/_toolbars.scss

@@ -98,6 +98,12 @@
     }
 }
 
+.toolbox-content-wrapper {
+    display: flex;
+    flex-direction: column;
+    margin: 0 auto;
+    max-width: 100%;
+}
 
 .toolbox-content-items {
     background: $newToolbarBackgroundColor;
@@ -295,12 +301,16 @@
 }
 
 /**
- * On small mobile devices make the toolbar full width.
+ * On small mobile devices make the toolbar full width and pad the invite prompt.
  */
 .toolbox-content-mobile {
     @media (max-width: 500px) {
         margin-bottom: 0;
 
+        .toolbox-content-wrapper {
+            width: 100%;
+        }
+
         .toolbox-content-items {
             border-radius: 0;
             display: flex;
@@ -308,5 +318,13 @@
             padding: 6px 0;
             width: 100%;
         }
+
+        .invite-more-container {
+            margin: 0 16px 8px;
+        }
+
+        .invite-more-container.elevated {
+            margin-bottom: 52px;
+        }
     }
 }

css/modals/invite/_invite_more.scss

@@ -1,31 +1,42 @@
 .invite-more {
     &-container {
+        margin-bottom: 8px;
+        transition: margin-bottom 0.3s;
+
+        &.elevated {
+            margin-bottom: 36px;
+        }
+    }
+
+    &-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 16px;
+        background: rgba(0, 0, 0, 0.7);
+        border-radius: 8px;
         color: #fff;
+        font-size: 16px;
+        line-height: 24px;
         font-weight: 600;
-        position: absolute;
-        width: 100%;
-        text-align: center;
-        z-index: $zindex2;
-        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
     }
 
     &-header {
-        font-size: 19px;
+        max-width: 100%;
-        line-height: 28px;
+        margin-bottom: 16px;
-        margin: 24px 0 16px 0;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
     }
 
     &-button {
         display: flex;
-        margin: auto;
+        max-width: 100%;
-        padding: 8px 16px;
+        height: 48px;
-        width: fit-content;
+        box-sizing: border-box;
-        width: -moz-fit-content;
+        padding: 12px 16px;
-        height: 24px;
         background: #0376DA;
         border-radius: 3px;
-        font-size: 14px;
-        line-height: 24px;
         cursor: pointer;
 
         @media (hover: hover) and (pointer: fine) {
@@ -36,8 +47,9 @@
 
         &-text {
             margin-left: 8px;
-            font-size: 15px;
+            text-overflow: ellipsis;
-            line-height: 24px;
+            overflow: hidden;
+            white-space: nowrap;
         }
     }
     &-dialog {

react/features/conference/components/web/InviteMore.js

@@ -14,10 +14,14 @@ declare var interfaceConfig: Object;
 type Props = {
 
     /**
-     * Whether to show the option to invite more people
+     * Whether to show the option to invite more people.
-     * instead of the subject.
      */
-    _visible: boolean,
+    _shouldShow: boolean,
+
+    /**
+     * Whether the toolbox is visible.
+     */
+    _toolboxVisible: boolean,
 
     /**
      * Handler to open the invite dialog.
@@ -38,22 +42,25 @@ type Props = {
  * @returns {React$Element<any>}
  */
 function InviteMore({
-    _visible,
+    _shouldShow,
+    _toolboxVisible,
     onClick,
     t
 }: Props) {
     return (
-        _visible
+        _shouldShow
-            ? <div className = 'invite-more-container'>
+            ? <div className = { `invite-more-container${_toolboxVisible ? '' : ' elevated'}` }>
-                <div className = 'invite-more-header'>
+                <div className = 'invite-more-content'>
-                    {t('addPeople.inviteMoreHeader')}
+                    <div className = 'invite-more-header'>
-                </div>
+                        {t('addPeople.inviteMoreHeader')}
-                <div
+                    </div>
-                    className = 'invite-more-button'
+                    <div
-                    onClick = { onClick }>
+                        className = 'invite-more-button'
-                    <Icon src = { IconInviteMore } />
+                        onClick = { onClick }>
-                    <div className = 'invite-more-button-text'>
+                        <Icon src = { IconInviteMore } />
-                        {t('addPeople.inviteMorePrompt')}
+                        <div className = 'invite-more-button-text'>
+                            {t('addPeople.inviteMorePrompt')}
+                        </div>
                     </div>
                 </div>
             </div> : null
@@ -74,7 +81,8 @@ function mapStateToProps(state) {
     const hide = interfaceConfig.HIDE_INVITE_MORE_HEADER;
 
     return {
-        _visible: isToolboxVisible(state) && isButtonEnabled('invite', state) && isAlone && !hide
+        _shouldShow: isButtonEnabled('invite', state) && isAlone && !hide,
+        _toolboxVisible: isToolboxVisible(state)
     };
 }
 

react/features/conference/components/web/Subject.js

@@ -96,7 +96,7 @@ function _mapStateToProps(state) {
         _showParticipantCount: participantCount > 2 && !hideParticipantsStats,
         _showSubject: !hideConferenceSubject,
         _subject: getConferenceName(state),
-        _visible: isToolboxVisible(state) && participantCount > 1
+        _visible: isToolboxVisible(state)
     };
 }
 

react/features/large-video/components/LargeVideo.web.js

@@ -4,7 +4,7 @@ import React, { Component } from 'react';
 
 import { Watermarks } from '../../base/react';
 import { connect } from '../../base/redux';
-import { InviteMore, Subject } from '../../conference';
+import { Subject } from '../../conference';
 import { fetchCustomBrandingData } from '../../dynamic-branding';
 import { Captions } from '../../subtitles/';
 
@@ -71,7 +71,6 @@ class LargeVideo extends Component<Props> {
                 id = 'largeVideoContainer'
                 style = { style }>
                 <Subject />
-                <InviteMore />
                 <div id = 'sharedVideo'>
                     <div id = 'sharedVideoIFrame' />
                 </div>

react/features/toolbox/components/web/Toolbox.js

@@ -36,6 +36,7 @@ import { OverflowMenuItem } from '../../../base/toolbox/components';
 import { getLocalVideoTrack, toggleScreensharing } from '../../../base/tracks';
 import { isVpaasMeeting } from '../../../billing-counter/functions';
 import { CHAT_SIZE, ChatCounter, toggleChat } from '../../../chat';
+import { InviteMore } from '../../../conference';
 import { EmbedMeetingDialog } from '../../../embed-meeting';
 import { SharedDocumentButton } from '../../../etherpad';
 import { openFeedbackDialog } from '../../../feedback';
@@ -1264,22 +1265,25 @@ class Toolbox extends Component<Props, State> {
 
         return (
             <div className = { containerClassName }>
-                <div className = 'toolbox-content-items'>
+                <div className = 'toolbox-content-wrapper'>
-                    { this._renderAudioButton() }
+                    <InviteMore />
-                    { this._renderVideoButton() }
+                    <div className = 'toolbox-content-items'>
-                    { mainMenuAdditionalButtons }
+                        { this._renderAudioButton() }
-                    { showOverflowMenuButton && <OverflowMenuButton
+                        { this._renderVideoButton() }
-                        isOpen = { _overflowMenuVisible }
+                        { mainMenuAdditionalButtons }
-                        onVisibilityChange = { this._onSetOverflowVisible }>
+                        { showOverflowMenuButton && <OverflowMenuButton
-                        <ul
+                            isOpen = { _overflowMenuVisible }
-                            aria-label = { t(toolbarAccLabel) }
+                            onVisibilityChange = { this._onSetOverflowVisible }>
-                            className = 'overflow-menu'>
+                            <ul
-                            { this._renderOverflowMenuContent(overflowMenuAdditionalButtons) }
+                                aria-label = { t(toolbarAccLabel) }
-                        </ul>
+                                className = 'overflow-menu'>
-                    </OverflowMenuButton>}
+                                { this._renderOverflowMenuContent(overflowMenuAdditionalButtons) }
-                    <HangupButton
+                            </ul>
-                        customClass = 'hangup-button'
+                        </OverflowMenuButton>}
-                        visible = { this._shouldShowButton('hangup') } />
+                        <HangupButton
+                            customClass = 'hangup-button'
+                            visible = { this._shouldShowButton('hangup') } />
+                    </div>
                 </div>
             </div>
         );