diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/actions-dropdown/component.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/actions-dropdown/component.jsx index 6f93ec201e..7a8d5d9cc3 100755 --- a/bigbluebutton-html5/imports/ui/components/actions-bar/actions-dropdown/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/actions-bar/actions-dropdown/component.jsx @@ -270,7 +270,7 @@ class ActionsDropdown extends PureComponent { }); } - if (isLayoutsEnabled()) { + if (isLayoutsEnabled() && (amIModerator || amIPresenter)) { actions.push({ icon: 'manage_layout', label: intl.formatMessage(intlMessages.layoutModal), diff --git a/bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/component.jsx b/bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/component.jsx index 22529307ff..93be022538 100644 --- a/bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/component.jsx @@ -5,6 +5,7 @@ import EndMeetingConfirmationContainer from '/imports/ui/components/end-meeting- import { makeCall } from '/imports/ui/services/api'; import AboutContainer from '/imports/ui/components/about/container'; import MobileAppModal from '/imports/ui/components/mobile-app-modal/container'; +import LayoutModalContainer from '/imports/ui/components/layout/modal/container'; import SettingsMenuContainer from '/imports/ui/components/settings/container'; import BBBMenu from '/imports/ui/components/common/menu/component'; import ShortcutHelpComponent from '/imports/ui/components/shortcut-help/component'; @@ -68,6 +69,10 @@ const intlMessages = defineMessages({ id: 'app.navBar.settingsDropdown.hotkeysDesc', description: 'Describes hotkeys option', }, + layoutModal: { + id: 'app.actionsBar.actionsDropdown.layoutModal', + description: 'Label for layouts selection button', + }, helpLabel: { id: 'app.navBar.settingsDropdown.helpLabel', description: 'Help options label', @@ -139,6 +144,7 @@ class SettingsDropdown extends PureComponent { isEndMeetingConfirmationModalOpen: false, isMobileAppModalOpen:false, isFullscreen: false, + isLayoutModalOpen: false, }; // Set the logout code to 680 because it's not a real code and can be matched on the other side @@ -151,6 +157,7 @@ class SettingsDropdown extends PureComponent { this.setMobileAppModalIsOpen = this.setMobileAppModalIsOpen.bind(this); this.setAboutModalIsOpen = this.setAboutModalIsOpen.bind(this); this.setShortcutHelpModalIsOpen = this.setShortcutHelpModalIsOpen.bind(this); + this.setLayoutModalIsOpen = this.setLayoutModalIsOpen.bind(this); } componentDidMount() { @@ -229,6 +236,10 @@ class SettingsDropdown extends PureComponent { this.setState({isMobileAppModalOpen: value}) } + setLayoutModalIsOpen(value) { + this.setState({ isLayoutModalOpen: value }); + } + renderMenuItems() { const { intl, amIModerator, isBreakoutRoom, isMeteorConnected, audioCaptionsEnabled, @@ -317,6 +328,15 @@ class SettingsDropdown extends PureComponent { label: intl.formatMessage(intlMessages.hotkeysLabel), description: intl.formatMessage(intlMessages.hotkeysDesc), onClick: () => this.setShortcutHelpModalIsOpen(true), + }, + ); + + this.menuItems.push( + { + key: 'list-item-layout-modal', + icon: 'manage_layout', + label: intl.formatMessage(intlMessages.layoutModal), + onClick: () => this.setLayoutModalIsOpen(true), divider: true, }, ); @@ -374,7 +394,7 @@ class SettingsDropdown extends PureComponent { } = this.props; const { isAboutModalOpen, isShortcutHelpModalOpen, isSettingsMenuModalOpen, - isEndMeetingConfirmationModalOpen, isMobileAppModalOpen, } = this.state; + isEndMeetingConfirmationModalOpen, isMobileAppModalOpen, isLayoutModalOpen } = this.state; const customStyles = { top: '1rem' }; @@ -420,6 +440,7 @@ class SettingsDropdown extends PureComponent { "low", EndMeetingConfirmationContainer)} {this.renderModal(isMobileAppModalOpen, this.setMobileAppModalIsOpen, "low", MobileAppModal)} + {this.renderModal(isLayoutModalOpen, this.setLayoutModalIsOpen, 'low', LayoutModalContainer)} ); }