update actions / settings dropdown to menu

2021-08-08 17:13:47 +00:00 · 2021-08-08 17:13:47 +00:00 · 4e28cb0347
commit 4e28cb0347
parent 369cd25165
4 changed files with 221 additions and 201 deletions
--- a/bigbluebutton-html5/imports/ui/components/actions-bar/actions-dropdown/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/actions-bar/actions-dropdown/component.jsx
@ -8,6 +8,7 @@ import { withModalMounter } from '/imports/ui/components/modal/service';
 import withShortcutHelper from '/imports/ui/components/shortcut-help/service';
 import ExternalVideoModal from '/imports/ui/components/external-video-player/modal/container';
 import RandomUserSelectContainer from '/imports/ui/components/modal/random-user/container';
+import BBBMenu from '/imports/ui/components/menu/component';
 import cx from 'classnames';
 import { styles } from '../styles';
 import { PANELS, ACTIONS } from '../../layout/enums';
@ -137,79 +138,74 @@ class ActionsDropdown extends PureComponent {
      formatMessage,
    } = intl;

-    return _.compact([
-      (amIPresenter && isPollingEnabled
-        ? (
-          <Dropdown.DropdownListItem
-            icon="polling"
-            data-test="polling"
-            label={formatMessage(pollBtnLabel)}
-            description={formatMessage(pollBtnDesc)}
-            key={this.pollId}
-            onClick={() => {
-              if (Session.equals('pollInitiated', true)) {
-                Session.set('resetPollPanel', true);
-              }
-              newLayoutContextDispatch({
-                type: ACTIONS.SET_SIDEBAR_CONTENT_IS_OPEN,
-                value: true,
-              });
-              newLayoutContextDispatch({
-                type: ACTIONS.SET_SIDEBAR_CONTENT_PANEL,
-                value: PANELS.POLL,
-              });
-              Session.set('forcePollOpen', true);
-            }}
-          />
-        )
-        : null),
-      (!amIPresenter
-        ? (
-          <Dropdown.DropdownListItem
-            icon="presentation"
-            label={formatMessage(takePresenter)}
-            description={formatMessage(takePresenterDesc)}
-            key={this.takePresenterId}
-            onClick={() => handleTakePresenter()}
-          />
-        )
-        : null),
-      (amIPresenter
-        ? (
-          <Dropdown.DropdownListItem
-            data-test="uploadPresentation"
-            icon="presentation"
-            label={formatMessage(presentationLabel)}
-            description={formatMessage(presentationDesc)}
-            key={this.presentationItemId}
-            onClick={handlePresentationClick}
-          />
-        )
-        : null),
-      (amIPresenter && allowExternalVideo
-        ? (
-          <Dropdown.DropdownListItem
-            icon="video"
-            label={!isSharingVideo ? intl.formatMessage(intlMessages.startExternalVideoLabel)
-              : intl.formatMessage(intlMessages.stopExternalVideoLabel)}
-            description="External Video"
-            key="external-video"
-            onClick={isSharingVideo ? stopExternalVideoShare : this.handleExternalVideoClick}
-          />
-        )
-        : null),
-      (amIPresenter && isSelectRandomUserEnabled
-        ? (
-          <Dropdown.DropdownListItem
-            icon="user"
-            label={intl.formatMessage(intlMessages.selectRandUserLabel)}
-            description={intl.formatMessage(intlMessages.selectRandUserDesc)}
-            key={this.selectUserRandId}
-            onClick={() => mountModal(<RandomUserSelectContainer isSelectedUser={false} />)}
-          />
-        )
-        : null),
-    ]);
+    const actions = [];
+
+    if (amIPresenter) {
+      actions.push({
+        icon: "presentation",
+        label: formatMessage(presentationLabel),
+        // description: formatMessage(presentationDesc),
+        key: this.presentationItemId,
+        onClick: handlePresentationClick,
+        dividerTop: true,
+      })
+    }
+
+    if (amIPresenter && isPollingEnabled) {
+      actions.push({
+        icon: "polling",
+        label: formatMessage(pollBtnLabel),
+        // description: formatMessage(pollBtnDesc),
+        key: this.pollId,
+        onClick: () => {
+          if (Session.equals('pollInitiated', true)) {
+            Session.set('resetPollPanel', true);
+          }
+          newLayoutContextDispatch({
+            type: ACTIONS.SET_SIDEBAR_CONTENT_IS_OPEN,
+            value: true,
+          });
+          newLayoutContextDispatch({
+            type: ACTIONS.SET_SIDEBAR_CONTENT_PANEL,
+            value: PANELS.POLL,
+          });
+          Session.set('forcePollOpen', true);
+        },
+      })
+    }
+
+    if (!amIPresenter) {
+      actions.push({
+        icon: "presentation",
+        label: formatMessage(takePresenter),
+        // description: formatMessage(takePresenterDesc),
+        key: this.takePresenterId,
+        onClick: () => handleTakePresenter(),
+      });
+    }
+
+    if (amIPresenter && allowExternalVideo) {
+      actions.push({
+        icon: "video",
+        label: !isSharingVideo ? intl.formatMessage(intlMessages.startExternalVideoLabel)
+          : intl.formatMessage(intlMessages.stopExternalVideoLabel),
+        // description: "External Video",
+        key: "external-video",
+        onClick: isSharingVideo ? stopExternalVideoShare : this.handleExternalVideoClick,
+      })
+    }
+
+    if (amIPresenter && isSelectRandomUserEnabled) {
+      actions.push({
+        icon: "user",
+        label: intl.formatMessage(intlMessages.selectRandUserLabel),
+        // description: intl.formatMessage(intlMessages.selectRandUserDesc),
+        key: this.selectUserRandId,
+        onClick: () => mountModal(<RandomUserSelectContainer isSelectedUser={false} />),
+      })
+    }
+
+    return actions;
  }

  makePresentationItems() {
@ -233,21 +229,20 @@ class ActionsDropdown extends PureComponent {
        itemStyles[styles.isCurrent] = p.current;

        return (
-          <Dropdown.DropdownListItem
-            className={cx(itemStyles)}
-            icon="file"
-            iconRight={p.current ? 'check' : null}
-            label={p.name}
-            description="uploaded presentation file"
-            key={`uploaded-presentation-${p.id}`}
-            onClick={() => {
+          {
+            className: cx(itemStyles),
+            icon: "file",
+            iconRight: p.current ? 'check' : null,
+            label: p.name,
+            description: "uploaded presentation file",
+            key: `uploaded-presentation-${p.id}`,
+            onClick: () => {
              setPresentation(p.id, podId);
-            }}
-          />
+            },
+          }
        );
      });

-    presentationItemElements.push(<Dropdown.DropdownListSeparator key={_.uniqueId('list-separator-')} />);
    return presentationItemElements;
  }

@ -275,15 +270,8 @@ class ActionsDropdown extends PureComponent {
    }

    return (
-      <Dropdown
-        {...{
-          sidebarContent,
-          sidebarNavigation,
-        }}
-        className={styles.dropdown}
-        ref={(ref) => { this._dropdown = ref; }}
-      >
-        <Dropdown.DropdownTrigger tabIndex={0} accessKey={OPEN_ACTIONS_AK}>
+      <BBBMenu 
+        trigger={
          <Button
            className={isDropdownOpen ? styles.hideDropdownButton : ''}
            hideLabel
@ -295,13 +283,19 @@ class ActionsDropdown extends PureComponent {
            circle
            onClick={() => null}
          />
-        </Dropdown.DropdownTrigger>
-        <Dropdown.DropdownContent placement="top left">
-          <Dropdown.DropdownList className={styles.scrollableList}>
-            {children}
-          </Dropdown.DropdownList>
-        </Dropdown.DropdownContent>
-      </Dropdown>
+        }
+        actions={children}
+        opts={{
+          id: "default-dropdown-menu",
+          keepMounted: true,
+          transitionDuration: 0,
+          elevation: 3,
+          getContentAnchorEl: null,
+          fullwidth: "true",
+          anchorOrigin: { vertical: 'top', horizontal: 'left' },
+          transformorigin: { vertical: 'top', horizontal: 'left' },
+        }}
+      />
    );
  }
 }
--- a/bigbluebutton-html5/imports/ui/components/menu/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/menu/component.jsx
@ -43,6 +43,8 @@ class BBBMenu extends React.Component {
  };

  setAnchorEl(el) {
+    console.log(el)
+    debugger
    this.setState({ anchorEl: el });
  };

@ -51,22 +53,24 @@ class BBBMenu extends React.Component {

    return actions?.map(a => {
      const { label, onClick, key } = a;
-      const itemClasses = [styles.menuitem];
+      const itemClasses = [styles.menuitem, a?.className];

      if (key?.toLowerCase()?.includes(selectedEmoji?.toLowerCase())) itemClasses.push(styles.emojiSelected);

-      return [<MenuItem 
-        key={label}
-        className={itemClasses.join(' ')}
-        disableRipple={true}
-        disableGutters={true}
-        style={{ paddingLeft: '4px',paddingRight: '4px',paddingTop: '8px', paddingBottom: '8px', marginLeft: '4px', marginRight: '4px' }}
-        onClick={() => { 
-          onClick();
-          const close = !key.includes('setstatus') && !key.includes('back');
-          // prevent menu close for sub menu actions
-          if (close) this.handleClose();
-        }}>
+      return [
+        a.dividerTop && <Divider />,  
+        <MenuItem 
+          key={label}
+          className={itemClasses.join(' ')}
+          disableRipple={true}
+          disableGutters={true}
+          style={{ paddingLeft: '4px',paddingRight: '4px',paddingTop: '8px', paddingBottom: '8px', marginLeft: '4px', marginRight: '4px' }}
+          onClick={() => { 
+            onClick();
+            const close = !key.includes('setstatus') && !key.includes('back');
+            // prevent menu close for sub menu actions
+            if (close) this.handleClose();
+          }}>
          <div style={{ display: 'flex', flexFlow: 'row', width: '100%'}}>
            {a.icon ? <Icon iconName={a.icon} key="icon" /> : null}
            <div className={styles.option}>{label}</div>
@ -74,7 +78,7 @@ class BBBMenu extends React.Component {
          </div>
        </MenuItem>,
        a.divider && <Divider />  
-    ];
+      ];
    });
  }
  
@ -123,7 +127,7 @@ BBBMenu.defaultProps = {
    getContentAnchorEl: null,
    fullwidth: "true",
    anchorOrigin: { vertical: 'top', horizontal: 'right' },
-    transformorigin: { vertical: 'top', horizontal: 'top' },
+    transformorigin: { vertical: 'top', horizontal: 'right' },
  },
  onCloseCallback: () => {},
  wide: false,
@ -143,6 +147,7 @@ BBBMenu.propTypes = {
    icon: PropTypes.string,
    iconRight: PropTypes.string,
    divider: PropTypes.bool,
+    dividerTop: PropTypes.bool,
  })).isRequired,

  onCloseCallback: PropTypes.func,
--- a/bigbluebutton-html5/imports/ui/components/menu/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/menu/styles.scss
@ -7,6 +7,9 @@
  line-height: 1;
  margin-right: 1.65rem;
  margin-left: .5rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 }

 .closeBtn {
@ -49,6 +52,7 @@
    border-radius: var(--border-radius);
    border: 0;
    z-index: 9999;
+    max-width: 16rem;
  } 
 }

@ -61,9 +65,12 @@
 .menuitem {
  transition: none !important;
  font-size: 90% !important;
-
+  
  &:focus,
  &:hover {
+    i { 
+      color: #FFF;
+    }
    color: #FFF;
    background-color: var(--color-primary) !important;
  }
--- a/bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/component.jsx
@ -8,7 +8,7 @@ import { makeCall } from '/imports/ui/services/api';
 import AboutContainer from '/imports/ui/components/about/container';
 import SettingsMenuContainer from '/imports/ui/components/settings/container';
 import Button from '/imports/ui/components/button/component';
-import Dropdown from '/imports/ui/components/dropdown/component';
+import BBBMenu from "/imports/ui/components/menu/component";
 import ShortcutHelpComponent from '/imports/ui/components/shortcut-help/component';
 import withShortcutHelper from '/imports/ui/components/shortcut-help/service';
 import FullscreenService from '../../fullscreen-button/service';
@ -152,7 +152,7 @@ class SettingsDropdown extends PureComponent {
    }
  }

-  getFullscreenItem() {
+  getFullscreenItem(menuItems) {
    const {
      intl,
      noIOSFullscreen,
@ -173,13 +173,15 @@ class SettingsDropdown extends PureComponent {
    }

    return (
-      <Dropdown.DropdownListItem
-        key="list-item-fullscreen"
-        icon={fullscreenIcon}
-        label={fullscreenLabel}
-        description={fullscreenDesc}
-        onClick={handleToggleFullscreen}
-      />
+      menuItems.push(
+        {
+          key: "list-item-fullscreen",
+          icon: fullscreenIcon,
+          label: fullscreenLabel,
+          // description: fullscreenDesc,
+          onClick: handleToggleFullscreen           
+        }
+      )      
    );
  }

@ -192,6 +194,7 @@ class SettingsDropdown extends PureComponent {
  }

  renderMenuItems() {
+    
    const {
      intl, mountModal, amIModerator, isBreakoutRoom, isMeteorConnected,
    } = this.props;
@ -204,69 +207,87 @@ class SettingsDropdown extends PureComponent {
      allowLogout: allowLogoutSetting,
    } = Meteor.settings.public.app;

-    const logoutOption = (
-      <Dropdown.DropdownListItem
-        key="list-item-logout"
-        data-test="logout"
-        icon="logout"
-        label={intl.formatMessage(intlMessages.leaveSessionLabel)}
-        description={intl.formatMessage(intlMessages.leaveSessionDesc)}
-        onClick={() => this.leaveSession()}
-      />
+    this.menuItems = [];
+
+    this.getFullscreenItem(this.menuItems),
+
+    this.menuItems.push(
+      {
+        key: "list-item-settings",
+        icon: "settings",
+        dataTest: "settings",
+        label: intl.formatMessage(intlMessages.settingsLabel),
+        // description: intl.formatMessage(intlMessages.settingsDesc),
+        onClick: () => mountModal(<SettingsMenuContainer />)
+      },
+      {
+        key: "list-item-about",
+        icon: "about",
+        label: intl.formatMessage(intlMessages.aboutLabel),
+        // description: intl.formatMessage(intlMessages.aboutDesc),
+        onClick: () => mountModal(<AboutContainer />)        
+      }
    );

-    const shouldRenderLogoutOption = (isMeteorConnected && allowLogoutSetting)
-      ? logoutOption
-      : null;
+    if (!helpButton) {
+      return null;
+    } else {
+      this.menuItems.push(
+        {
+          key: "list-item-help",
+          icon: "help",
+          iconRight: "popout_window",
+          label: intl.formatMessage(intlMessages.helpLabel),
+          // description: intl.formatMessage(intlMessages.helpDesc),
+          onClick: () => window.open(`${helpLink}`)
+        }
+      );
+    }
+    
+    this.menuItems.push(
+      {
+        key: "list-item-shortcuts",
+        icon: "shortcuts",
+        label: intl.formatMessage(intlMessages.hotkeysLabel),
+        // description: intl.formatMessage(intlMessages.hotkeysDesc),
+        onClick: () => mountModal(<ShortcutHelpComponent />),       
+        divider: true
+      }
+    );
+
+    if (allowedToEndMeeting && isMeteorConnected) {
+      this.menuItems.push(
+        {
+          key: "list-item-end-meeting",
+          icon: "application",
+          label: intl.formatMessage(intlMessages.endMeetingLabel),
+          // description: intl.formatMessage(intlMessages.endMeetingDesc),
+          onClick: () => mountModal(<EndMeetingConfirmationContainer />)             
+        }
+      )
+    } else {
+      return null;
+    }  
+
+    const logoutOption = (
+      this.menuItems.push(
+        {
+          key: "list-item-logout",
+          dataTest: "logout",
+          icon: "logout",
+          label: intl.formatMessage(intlMessages.leaveSessionLabel),
+          // description: intl.formatMessage(intlMessages.leaveSessionDesc),
+          onClick: () => this.leaveSession()
+        }
+      )
+    );
+
+    const shouldRenderLogoutOption = (isMeteorConnected && allowLogoutSetting) ? logoutOption : null;    
+    
+    shouldRenderLogoutOption;
+
+    return this.menuItems;

-    return _.compact([
-      this.getFullscreenItem(),
-      (<Dropdown.DropdownListItem
-        key="list-item-settings"
-        icon="settings"
-        data-test="settings"
-        label={intl.formatMessage(intlMessages.settingsLabel)}
-        description={intl.formatMessage(intlMessages.settingsDesc)}
-        onClick={() => mountModal(<SettingsMenuContainer />)}
-      />),
-      (<Dropdown.DropdownListItem
-        key="list-item-about"
-        icon="about"
-        label={intl.formatMessage(intlMessages.aboutLabel)}
-        description={intl.formatMessage(intlMessages.aboutDesc)}
-        onClick={() => mountModal(<AboutContainer />)}
-      />),
-      !helpButton ? null
-        : (
-          <Dropdown.DropdownListItem
-            key="list-item-help"
-            icon="help"
-            iconRight="popout_window"
-            label={intl.formatMessage(intlMessages.helpLabel)}
-            description={intl.formatMessage(intlMessages.helpDesc)}
-            onClick={() => window.open(`${helpLink}`)}
-          />
-        ),
-      (<Dropdown.DropdownListItem
-        key="list-item-shortcuts"
-        icon="shortcuts"
-        label={intl.formatMessage(intlMessages.hotkeysLabel)}
-        description={intl.formatMessage(intlMessages.hotkeysDesc)}
-        onClick={() => mountModal(<ShortcutHelpComponent />)}
-      />),
-      (isMeteorConnected ? <Dropdown.DropdownListSeparator key={_.uniqueId('list-separator-')} /> : null),
-      allowedToEndMeeting && isMeteorConnected
-        ? (<Dropdown.DropdownListItem
-          key="list-item-end-meeting"
-          icon="application"
-          label={intl.formatMessage(intlMessages.endMeetingLabel)}
-          description={intl.formatMessage(intlMessages.endMeetingDesc)}
-          onClick={() => mountModal(<EndMeetingConfirmationContainer />)}
-        />
-        )
-        : null,
-      shouldRenderLogoutOption,
-    ]);
  }

  render() {
@ -279,14 +300,9 @@ class SettingsDropdown extends PureComponent {
    const { isSettingOpen } = this.state;

    return (
-      <Dropdown
-        className={styles.dropdown}
-        autoFocus
-        keepOpen={isSettingOpen}
-        onShow={this.onActionsShow}
-        onHide={this.onActionsHide}
-      >
-        <Dropdown.DropdownTrigger tabIndex={0} accessKey={OPEN_OPTIONS_AK}>
+   
+      <BBBMenu
+        trigger={
          <Button
            label={intl.formatMessage(intlMessages.optionsLabel)}
            icon="more"
@ -298,14 +314,12 @@ class SettingsDropdown extends PureComponent {
            // FIXME: Without onClick react proptypes keep warning
            // even after the DropdownTrigger inject an onClick handler
            onClick={() => null}
-          />
-        </Dropdown.DropdownTrigger>
-        <Dropdown.DropdownContent placement="bottom right">
-          <Dropdown.DropdownList>
-            {this.renderMenuItems()}
-          </Dropdown.DropdownList>
-        </Dropdown.DropdownContent>
-      </Dropdown>
+          />          
+        }
+        
+        actions={this.renderMenuItems()}
+      />
+
    );
  }
 }