BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

move manage layouts to three-dots menu

Browse Source
This commit is contained in:
Ramón Souza 2023-11-06 15:37:52 -03:00
parent 8db78c7200
commit 37870bb1d2
2 changed files with 23 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
bigbluebutton-html5/imports/ui/components/actions-bar/actions-dropdown/component.jsx
View File

@ -270,7 +270,7 @@ class ActionsDropdown extends PureComponent {
});
}
if (isLayoutsEnabled()) {
if (isLayoutsEnabled() && (amIModerator || amIPresenter)) {
actions.push({
icon: 'manage_layout',
label: intl.formatMessage(intlMessages.layoutModal),

23
bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/component.jsx
View File

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