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)}
>
);
}