From 6c9441fa7bbb8de300f5c06ce64b5d3195b6ef8a Mon Sep 17 00:00:00 2001 From: Robert Pintilii Date: Thu, 6 Oct 2022 13:09:40 +0300 Subject: [PATCH] ref(ui-components) Update ContextMenu and move it to base/ui (#12318) --- css/_drawer.scss | 2 -- react/features/base/components/index.js | 2 -- .../toolbox/components/ToolboxItem.web.js | 2 +- .../components/web}/ContextMenu.tsx | 25 ++++++++--------- .../components/web}/ContextMenuItem.tsx | 24 ++++++++++++---- .../components/web}/ContextMenuItemGroup.tsx | 8 ++++++ .../hooks/useContextMenu.ts} | 28 +++++++++++-------- .../components/ConnectionStatsTable.tsx | 2 +- .../components/web/RoomContextMenu.js | 3 +- .../breakout-rooms/components/web/RoomList.js | 2 +- .../web/RoomParticipantContextMenu.tsx | 10 +++---- .../components/web/FooterContextMenu.tsx | 4 +-- .../components/web/LobbyParticipantItem.tsx | 4 +-- .../components/web/MeetingParticipants.tsx | 3 +- .../toolbox/components/web/Drawer.tsx | 5 ++-- .../toolbox/components/web/Toolbox.tsx | 4 +-- .../components/web/AskToUnmuteButton.js | 2 +- .../components/web/ConnectionStatusButton.js | 2 +- .../web/FakeParticipantContextMenu.tsx | 4 +-- .../components/web/FlipLocalVideoButton.js | 2 +- .../components/web/GrantModeratorButton.js | 2 +- .../components/web/HideSelfViewVideoButton.js | 2 +- .../video-menu/components/web/KickButton.js | 2 +- .../web/LocalVideoMenuTriggerButton.tsx | 4 +-- .../video-menu/components/web/MuteButton.js | 2 +- .../components/web/MuteEveryoneElseButton.js | 2 +- .../web/MuteEveryoneElsesVideoButton.js | 2 +- .../components/web/MuteVideoButton.js | 2 +- .../components/web/ParticipantContextMenu.tsx | 4 +-- .../web/PrivateMessageMenuButton.js | 2 +- .../components/web/RemoteControlButton.js | 2 +- .../web/RemoteVideoMenuTriggerButton.tsx | 1 - .../components/web/SendToRoomButton.js | 2 +- .../components/web/TogglePinToStageButton.js | 2 +- 34 files changed, 95 insertions(+), 74 deletions(-) rename react/features/base/{components/context-menu => ui/components/web}/ContextMenu.tsx (87%) rename react/features/base/{components/context-menu => ui/components/web}/ContextMenuItem.tsx (82%) rename react/features/base/{components/context-menu => ui/components/web}/ContextMenuItemGroup.tsx (87%) rename react/features/base/{components/context-menu/useContextMenu.js => ui/hooks/useContextMenu.ts} (82%) diff --git a/css/_drawer.scss b/css/_drawer.scss index 981826494..00c685aec 100644 --- a/css/_drawer.scss +++ b/css/_drawer.scss @@ -24,8 +24,6 @@ } .drawer-menu { - background: #242528; - border-radius: 16px 16px 0 0; overflow-y: auto; margin-bottom: env(safe-area-inset-bottom, 0); width: 100%; diff --git a/react/features/base/components/index.js b/react/features/base/components/index.js index d862ff40d..1460748d9 100644 --- a/react/features/base/components/index.js +++ b/react/features/base/components/index.js @@ -1,3 +1 @@ -export { default as ContextMenu } from './context-menu/ContextMenu'; -export { default as ContextMenuItemGroup } from './context-menu/ContextMenuItemGroup'; export { default as ListItem } from './participants-pane-list/ListItem'; diff --git a/react/features/base/toolbox/components/ToolboxItem.web.js b/react/features/base/toolbox/components/ToolboxItem.web.js index d27db0d94..b6c3e4fd3 100644 --- a/react/features/base/toolbox/components/ToolboxItem.web.js +++ b/react/features/base/toolbox/components/ToolboxItem.web.js @@ -2,9 +2,9 @@ import React, { Fragment } from 'react'; -import ContextMenuItem from '../../components/context-menu/ContextMenuItem'; import { Icon } from '../../icons'; import { Tooltip } from '../../tooltip'; +import ContextMenuItem from '../../ui/components/web/ContextMenuItem'; import AbstractToolboxItem from './AbstractToolboxItem'; import type { Props as AbstractToolboxItemProps } from './AbstractToolboxItem'; diff --git a/react/features/base/components/context-menu/ContextMenu.tsx b/react/features/base/ui/components/web/ContextMenu.tsx similarity index 87% rename from react/features/base/components/context-menu/ContextMenu.tsx rename to react/features/base/ui/components/web/ContextMenu.tsx index 220a8b1dc..d8fcf92a4 100644 --- a/react/features/base/components/context-menu/ContextMenu.tsx +++ b/react/features/base/ui/components/web/ContextMenu.tsx @@ -5,13 +5,13 @@ import React, { ReactNode, useEffect, useLayoutEffect, useRef, useState } from ' import { useSelector } from 'react-redux'; import { makeStyles } from 'tss-react/mui'; -import { getComputedOuterHeight } from '../../../participants-pane/functions'; +import { getComputedOuterHeight } from '../../../../participants-pane/functions'; // @ts-ignore -import { Drawer, JitsiPortal } from '../../../toolbox/components/web'; +import { Drawer, JitsiPortal } from '../../../../toolbox/components/web'; // @ts-ignore -import { showOverflowDrawer } from '../../../toolbox/functions.web'; -import { withPixelLineHeight } from '../../styles/functions.web'; -import participantsPaneTheme from '../themes/participantsPaneTheme.json'; +import { showOverflowDrawer } from '../../../../toolbox/functions.web'; +import participantsPaneTheme from '../../../components/themes/participantsPaneTheme.json'; +import { withPixelLineHeight } from '../../../styles/functions.web'; type Props = { @@ -86,9 +86,10 @@ const MAX_HEIGHT = 400; const useStyles = makeStyles()((theme: Theme) => { return { contextMenu: { - backgroundColor: theme.palette.ui02, - borderRadius: `${Number(theme.shape.borderRadius) / 2}px`, - boxShadow: '0px 3px 16px rgba(0, 0, 0, 0.6), 0px 0px 4px 1px rgba(0, 0, 0, 0.25)', + backgroundColor: theme.palette.ui01, + border: `1px solid ${theme.palette.ui04}`, + borderRadius: `${Number(theme.shape.borderRadius)}px`, + boxShadow: '0px 4px 25px 4px rgba(20, 20, 20, 0.6)', color: theme.palette.text01, ...withPixelLineHeight(theme.typography.bodyShortRegular), marginTop: `${(participantsPaneTheme.panePadding * 2) + theme.typography.bodyShortRegular.fontSize}px`, @@ -97,7 +98,8 @@ const useStyles = makeStyles()((theme: Theme) => { top: 0, zIndex: 2, maxHeight: `${MAX_HEIGHT}px`, - overflowY: 'auto' + overflowY: 'auto', + padding: `${theme.spacing(2)} 0` }, contextMenuHidden: { @@ -106,6 +108,7 @@ const useStyles = makeStyles()((theme: Theme) => { }, drawer: { + paddingTop: '16px', '& > div': { ...withPixelLineHeight(theme.typography.bodyShortRegularLarge), @@ -113,10 +116,6 @@ const useStyles = makeStyles()((theme: Theme) => { '& svg': { fill: theme.palette.icon01 } - }, - - '& > *:first-child': { - paddingTop: '15px!important' } } }; diff --git a/react/features/base/components/context-menu/ContextMenuItem.tsx b/react/features/base/ui/components/web/ContextMenuItem.tsx similarity index 82% rename from react/features/base/components/context-menu/ContextMenuItem.tsx rename to react/features/base/ui/components/web/ContextMenuItem.tsx index bbce8289b..1fef83761 100644 --- a/react/features/base/components/context-menu/ContextMenuItem.tsx +++ b/react/features/base/ui/components/web/ContextMenuItem.tsx @@ -4,8 +4,9 @@ import { useSelector } from 'react-redux'; import { makeStyles } from 'tss-react/mui'; // @ts-ignore -import { showOverflowDrawer } from '../../../toolbox/functions.web'; -import Icon from '../../icons/components/Icon'; +import { showOverflowDrawer } from '../../../../toolbox/functions.web'; +import Icon from '../../../icons/components/Icon'; +import { withPixelLineHeight } from '../../../styles/functions.web'; export type Props = { @@ -86,7 +87,11 @@ const useStyles = makeStyles()((theme: Theme) => { }, '&:hover': { - backgroundColor: theme.palette.ui04 + backgroundColor: theme.palette.ui02 + }, + + '&:active': { + backgroundColor: theme.palette.ui03 } }, @@ -95,13 +100,22 @@ const useStyles = makeStyles()((theme: Theme) => { }, contextMenuItemDrawer: { - padding: '12px 16px' + padding: '13px 16px' }, contextMenuItemIcon: { '& svg': { fill: theme.palette.icon01 } + }, + + text: { + ...withPixelLineHeight(theme.typography.bodyShortRegular), + color: theme.palette.text01 + }, + + drawerText: { + ...withPixelLineHeight(theme.typography.bodyShortRegularLarge) } }; }); @@ -142,7 +156,7 @@ const ContextMenuItem = ({ className = { styles.contextMenuItemIcon } size = { 20 } src = { icon } />} - {text} + {text} ); }; diff --git a/react/features/base/components/context-menu/ContextMenuItemGroup.tsx b/react/features/base/ui/components/web/ContextMenuItemGroup.tsx similarity index 87% rename from react/features/base/components/context-menu/ContextMenuItemGroup.tsx rename to react/features/base/ui/components/web/ContextMenuItemGroup.tsx index fd9e43ea9..9f251ec54 100644 --- a/react/features/base/components/context-menu/ContextMenuItemGroup.tsx +++ b/react/features/base/ui/components/web/ContextMenuItemGroup.tsx @@ -27,6 +27,14 @@ const useStyles = makeStyles()((theme: Theme) => { '& + &:not(:empty)': { borderTop: `1px solid ${theme.palette.ui04}` + }, + + '&:first-of-type': { + paddingTop: 0 + }, + + '&:last-of-type': { + paddingBottom: 0 } } }; diff --git a/react/features/base/components/context-menu/useContextMenu.js b/react/features/base/ui/hooks/useContextMenu.ts similarity index 82% rename from react/features/base/components/context-menu/useContextMenu.js rename to react/features/base/ui/hooks/useContextMenu.ts index 84d7c14e0..a9acb4c62 100644 --- a/react/features/base/components/context-menu/useContextMenu.js +++ b/react/features/base/ui/hooks/useContextMenu.ts @@ -1,25 +1,29 @@ -// @flow - import { useCallback, useRef, useState } from 'react'; import { findAncestorByClass } from '../../../participants-pane/functions'; -type RaiseContext = {| - /** - * Target elements against which positioning calculations are made. - */ - offsetTarget?: HTMLElement, +type RaiseContext = { /** * The entity for which the menu is context menu is raised. */ - entity?: string | Object, -|}; + entity?: string | Object; + + /** + * Target elements against which positioning calculations are made. + */ + offsetTarget?: HTMLElement | null; +}; const initialState = Object.freeze({}); -const useContextMenu = () => { +const useContextMenu = (): [(force?: boolean | Object) => void, + (entity: string | Object, target: HTMLElement | null) => void, + (entity: string | Object) => (e: MouseEvent) => void, + () => void, + () => void, + RaiseContext] => { const [ raiseContext, setRaiseContext ] = useState < RaiseContext >(initialState); const isMouseOverMenu = useRef(false); @@ -41,7 +45,7 @@ const useContextMenu = () => { }); }, [ raiseContext ]); - const raiseMenu = useCallback((entity: string | Object, target: EventTarget) => { + const raiseMenu = useCallback((entity: string | Object, target: HTMLElement | null) => { setRaiseContext({ entity, offsetTarget: findAncestorByClass(target, 'list-item-container') @@ -55,7 +59,7 @@ const useContextMenu = () => { if (raisedEntity && raisedEntity === entity) { lowerMenu(); } else { - raiseMenu(entity, e.target); + raiseMenu(entity, e.target as HTMLElement); } }, [ raiseContext ]); diff --git a/react/features/connection-stats/components/ConnectionStatsTable.tsx b/react/features/connection-stats/components/ConnectionStatsTable.tsx index e93c4cb43..0ca1a14a8 100644 --- a/react/features/connection-stats/components/ConnectionStatsTable.tsx +++ b/react/features/connection-stats/components/ConnectionStatsTable.tsx @@ -4,9 +4,9 @@ import clsx from 'clsx'; import React, { Component } from 'react'; import { WithTranslation } from 'react-i18next'; -import ContextMenu from '../../base/components/context-menu/ContextMenu'; import { isMobileBrowser } from '../../base/environment/utils'; import { translate } from '../../base/i18n/functions'; +import ContextMenu from '../../base/ui/components/web/ContextMenu'; type DownloadUpload = { download: number; diff --git a/react/features/participants-pane/components/breakout-rooms/components/web/RoomContextMenu.js b/react/features/participants-pane/components/breakout-rooms/components/web/RoomContextMenu.js index 73660485c..2671a2d8c 100644 --- a/react/features/participants-pane/components/breakout-rooms/components/web/RoomContextMenu.js +++ b/react/features/participants-pane/components/breakout-rooms/components/web/RoomContextMenu.js @@ -5,12 +5,13 @@ import { useTranslation } from 'react-i18next'; import { useDispatch, useSelector } from 'react-redux'; import { createBreakoutRoomsEvent, sendAnalytics } from '../../../../../analytics'; -import { ContextMenu, ContextMenuItemGroup } from '../../../../../base/components'; import { IconClose, IconRingGroup } from '../../../../../base/icons'; import { isLocalParticipantModerator } from '../../../../../base/participants'; +import ContextMenu from '../../../../../base/ui/components/web/ContextMenu'; +import ContextMenuItemGroup from '../../../../../base/ui/components/web/ContextMenuItemGroup'; import { closeBreakoutRoom, moveToRoom, removeBreakoutRoom } from '../../../../../breakout-rooms/actions'; import { showOverflowDrawer } from '../../../../../toolbox/functions'; diff --git a/react/features/participants-pane/components/breakout-rooms/components/web/RoomList.js b/react/features/participants-pane/components/breakout-rooms/components/web/RoomList.js index 446c9fd3e..99bf16b1a 100644 --- a/react/features/participants-pane/components/breakout-rooms/components/web/RoomList.js +++ b/react/features/participants-pane/components/breakout-rooms/components/web/RoomList.js @@ -3,9 +3,9 @@ import React, { useCallback } from 'react'; import { useSelector } from 'react-redux'; -import useContextMenu from '../../../../../base/components/context-menu/useContextMenu'; import { isLocalParticipantModerator } from '../../../../../base/participants'; import { equals } from '../../../../../base/redux'; +import useContextMenu from '../../../../../base/ui/hooks/useContextMenu'; import { getBreakoutRooms, getBreakoutRoomsConfig, diff --git a/react/features/participants-pane/components/breakout-rooms/components/web/RoomParticipantContextMenu.tsx b/react/features/participants-pane/components/breakout-rooms/components/web/RoomParticipantContextMenu.tsx index ef706446e..78c24aa2d 100644 --- a/react/features/participants-pane/components/breakout-rooms/components/web/RoomParticipantContextMenu.tsx +++ b/react/features/participants-pane/components/breakout-rooms/components/web/RoomParticipantContextMenu.tsx @@ -7,9 +7,9 @@ import { makeStyles } from 'tss-react/mui'; // @ts-ignore import { Avatar } from '../../../../../base/avatar'; -// @ts-ignore -import { ContextMenu, ContextMenuItemGroup } from '../../../../../base/components'; import { isLocalParticipantModerator } from '../../../../../base/participants/functions'; +import ContextMenu from '../../../../../base/ui/components/web/ContextMenu'; +import ContextMenuItemGroup from '../../../../../base/ui/components/web/ContextMenuItemGroup'; // @ts-ignore import { getBreakoutRooms } from '../../../../../breakout-rooms/functions'; // @ts-ignore @@ -38,17 +38,17 @@ type Props = { /** * Callback for the mouse entering the component. */ - onEnter: Function; + onEnter: () => void; /** * Callback for the mouse leaving the component. */ - onLeave: Function; + onLeave: () => void; /** * Callback for making a selection in the menu. */ - onSelect: Function; + onSelect: (force?: any) => void; }; const useStyles = makeStyles()((theme: Theme) => { diff --git a/react/features/participants-pane/components/web/FooterContextMenu.tsx b/react/features/participants-pane/components/web/FooterContextMenu.tsx index 295f04c82..de2de03a6 100644 --- a/react/features/participants-pane/components/web/FooterContextMenu.tsx +++ b/react/features/participants-pane/components/web/FooterContextMenu.tsx @@ -17,8 +17,6 @@ import { isSupported as isAvModerationSupported // @ts-ignore } from '../../../av-moderation/functions'; -import ContextMenu from '../../../base/components/context-menu/ContextMenu'; -import ContextMenuItemGroup from '../../../base/components/context-menu/ContextMenuItemGroup'; // @ts-ignore import { openDialog } from '../../../base/dialog'; import { @@ -31,6 +29,8 @@ import { getParticipantCount, isEveryoneModerator } from '../../../base/participants/functions'; +import ContextMenu from '../../../base/ui/components/web/ContextMenu'; +import ContextMenuItemGroup from '../../../base/ui/components/web/ContextMenuItemGroup'; // @ts-ignore import { isInBreakoutRoom } from '../../../breakout-rooms/functions'; import { diff --git a/react/features/participants-pane/components/web/LobbyParticipantItem.tsx b/react/features/participants-pane/components/web/LobbyParticipantItem.tsx index 1441c5b80..e69575efd 100644 --- a/react/features/participants-pane/components/web/LobbyParticipantItem.tsx +++ b/react/features/participants-pane/components/web/LobbyParticipantItem.tsx @@ -6,12 +6,12 @@ import { useTranslation } from 'react-i18next'; import { useSelector } from 'react-redux'; import { makeStyles } from 'tss-react/mui'; -import ContextMenu from '../../../base/components/context-menu/ContextMenu'; -import ContextMenuItemGroup from '../../../base/components/context-menu/ContextMenuItemGroup'; import { IconChat, IconCloseCircle, IconHorizontalPoints } from '../../../base/icons/svg'; import { hasRaisedHand } from '../../../base/participants/functions'; import { Participant } from '../../../base/participants/types'; import Button from '../../../base/ui/components/web/Button'; +import ContextMenu from '../../../base/ui/components/web/ContextMenu'; +import ContextMenuItemGroup from '../../../base/ui/components/web/ContextMenuItemGroup'; import { BUTTON_TYPES } from '../../../base/ui/constants'; // @ts-ignore import { showLobbyChatButton } from '../../../lobby/functions'; diff --git a/react/features/participants-pane/components/web/MeetingParticipants.tsx b/react/features/participants-pane/components/web/MeetingParticipants.tsx index ebd949f01..83a86bcd7 100644 --- a/react/features/participants-pane/components/web/MeetingParticipants.tsx +++ b/react/features/participants-pane/components/web/MeetingParticipants.tsx @@ -9,8 +9,6 @@ import { makeStyles } from 'tss-react/mui'; import { IState } from '../../../app/types'; // @ts-ignore import { rejectParticipantAudio } from '../../../av-moderation/actions'; -// @ts-ignore -import useContextMenu from '../../../base/components/context-menu/useContextMenu'; import participantsPaneTheme from '../../../base/components/themes/participantsPaneTheme.json'; // @ts-ignore import { isToolbarButtonEnabled } from '../../../base/config/functions.web'; @@ -19,6 +17,7 @@ import { getParticipantById } from '../../../base/participants/functions'; import { connect } from '../../../base/redux/functions'; import { withPixelLineHeight } from '../../../base/styles/functions.web'; import Input from '../../../base/ui/components/web/Input'; +import useContextMenu from '../../../base/ui/hooks/useContextMenu'; import { normalizeAccents } from '../../../base/util/strings.web'; // @ts-ignore import { getBreakoutRooms, getCurrentRoomId, isInBreakoutRoom } from '../../../breakout-rooms/functions'; diff --git a/react/features/toolbox/components/web/Drawer.tsx b/react/features/toolbox/components/web/Drawer.tsx index a57bdc466..7959da128 100644 --- a/react/features/toolbox/components/web/Drawer.tsx +++ b/react/features/toolbox/components/web/Drawer.tsx @@ -31,8 +31,9 @@ type Props = { const useStyles = makeStyles()((theme: Theme) => { return { drawer: { - backgroundColor: theme.palette.ui02, - maxHeight: `calc(${DRAWER_MAX_HEIGHT})` + backgroundColor: theme.palette.ui01, + maxHeight: `calc(${DRAWER_MAX_HEIGHT})`, + borderRadius: '24px 24px 0 0' } }; }); diff --git a/react/features/toolbox/components/web/Toolbox.tsx b/react/features/toolbox/components/web/Toolbox.tsx index 8c068ab0c..b38b00466 100644 --- a/react/features/toolbox/components/web/Toolbox.tsx +++ b/react/features/toolbox/components/web/Toolbox.tsx @@ -9,8 +9,6 @@ import keyboardShortcut from '../../../../../modules/keyboardshortcut/keyboardsh import { ACTION_SHORTCUT_TRIGGERED, createShortcutEvent, createToolbarEvent } from '../../../analytics/AnalyticsEvents'; import { sendAnalytics } from '../../../analytics/functions'; import { IState } from '../../../app/types'; -import ContextMenu from '../../../base/components/context-menu/ContextMenu'; -import ContextMenuItemGroup from '../../../base/components/context-menu/ContextMenuItemGroup'; // @ts-ignore import { getMultipleVideoSendingSupportFeatureFlag, getToolbarButtons } from '../../../base/config'; // @ts-ignore @@ -30,6 +28,8 @@ import { import { connect } from '../../../base/redux/functions'; // @ts-ignore import { getLocalVideoTrack } from '../../../base/tracks'; +import ContextMenu from '../../../base/ui/components/web/ContextMenu'; +import ContextMenuItemGroup from '../../../base/ui/components/web/ContextMenuItemGroup'; // @ts-ignore import { toggleChat } from '../../../chat'; // @ts-ignore diff --git a/react/features/video-menu/components/web/AskToUnmuteButton.js b/react/features/video-menu/components/web/AskToUnmuteButton.js index b119b628e..04a085e0c 100644 --- a/react/features/video-menu/components/web/AskToUnmuteButton.js +++ b/react/features/video-menu/components/web/AskToUnmuteButton.js @@ -5,8 +5,8 @@ import { useTranslation } from 'react-i18next'; import { useDispatch } from 'react-redux'; import { approveParticipant } from '../../../av-moderation/actions'; -import ContextMenuItem from '../../../base/components/context-menu/ContextMenuItem'; import { IconMicrophoneEmpty } from '../../../base/icons'; +import ContextMenuItem from '../../../base/ui/components/web/ContextMenuItem'; type Props = { diff --git a/react/features/video-menu/components/web/ConnectionStatusButton.js b/react/features/video-menu/components/web/ConnectionStatusButton.js index 7f87fa58b..a73889e44 100644 --- a/react/features/video-menu/components/web/ConnectionStatusButton.js +++ b/react/features/video-menu/components/web/ConnectionStatusButton.js @@ -1,10 +1,10 @@ // @flow import React, { useCallback } from 'react'; -import ContextMenuItem from '../../../base/components/context-menu/ContextMenuItem'; import { translate } from '../../../base/i18n'; import { IconInfo } from '../../../base/icons'; import { connect } from '../../../base/redux'; +import ContextMenuItem from '../../../base/ui/components/web/ContextMenuItem'; import { renderConnectionStatus } from '../../actions.web'; type Props = { diff --git a/react/features/video-menu/components/web/FakeParticipantContextMenu.tsx b/react/features/video-menu/components/web/FakeParticipantContextMenu.tsx index 428f254d9..b2426a590 100644 --- a/react/features/video-menu/components/web/FakeParticipantContextMenu.tsx +++ b/react/features/video-menu/components/web/FakeParticipantContextMenu.tsx @@ -8,10 +8,10 @@ import { useDispatch, useSelector } from 'react-redux'; import TogglePinToStageButton from '../../../../features/video-menu/components/web/TogglePinToStageButton'; // @ts-ignore import { Avatar } from '../../../base/avatar'; -import ContextMenu from '../../../base/components/context-menu/ContextMenu'; -import ContextMenuItemGroup from '../../../base/components/context-menu/ContextMenuItemGroup'; import { IconShareVideo } from '../../../base/icons/svg'; import { Participant } from '../../../base/participants/types'; +import ContextMenu from '../../../base/ui/components/web/ContextMenu'; +import ContextMenuItemGroup from '../../../base/ui/components/web/ContextMenuItemGroup'; // @ts-ignore import { stopSharedVideo } from '../../../shared-video/actions.any'; // @ts-ignore diff --git a/react/features/video-menu/components/web/FlipLocalVideoButton.js b/react/features/video-menu/components/web/FlipLocalVideoButton.js index e357f5d2f..40406ae51 100644 --- a/react/features/video-menu/components/web/FlipLocalVideoButton.js +++ b/react/features/video-menu/components/web/FlipLocalVideoButton.js @@ -2,10 +2,10 @@ import React, { PureComponent } from 'react'; -import ContextMenuItem from '../../../base/components/context-menu/ContextMenuItem'; import { translate } from '../../../base/i18n'; import { connect } from '../../../base/redux'; import { updateSettings } from '../../../base/settings'; +import ContextMenuItem from '../../../base/ui/components/web/ContextMenuItem'; /** * The type of the React {@code Component} props of {@link FlipLocalVideoButton}. diff --git a/react/features/video-menu/components/web/GrantModeratorButton.js b/react/features/video-menu/components/web/GrantModeratorButton.js index 2a02ee35c..3174c34a6 100644 --- a/react/features/video-menu/components/web/GrantModeratorButton.js +++ b/react/features/video-menu/components/web/GrantModeratorButton.js @@ -2,10 +2,10 @@ import React from 'react'; -import ContextMenuItem from '../../../base/components/context-menu/ContextMenuItem'; import { translate } from '../../../base/i18n'; import { IconCrown } from '../../../base/icons'; import { connect } from '../../../base/redux'; +import ContextMenuItem from '../../../base/ui/components/web/ContextMenuItem'; import AbstractGrantModeratorButton, { type Props, _mapStateToProps diff --git a/react/features/video-menu/components/web/HideSelfViewVideoButton.js b/react/features/video-menu/components/web/HideSelfViewVideoButton.js index 407be980d..b579cba06 100644 --- a/react/features/video-menu/components/web/HideSelfViewVideoButton.js +++ b/react/features/video-menu/components/web/HideSelfViewVideoButton.js @@ -2,10 +2,10 @@ import React, { PureComponent } from 'react'; -import ContextMenuItem from '../../../base/components/context-menu/ContextMenuItem'; import { translate } from '../../../base/i18n'; import { connect } from '../../../base/redux'; import { getHideSelfView, updateSettings } from '../../../base/settings'; +import ContextMenuItem from '../../../base/ui/components/web/ContextMenuItem'; /** * The type of the React {@code Component} props of {@link HideSelfViewVideoButton}. diff --git a/react/features/video-menu/components/web/KickButton.js b/react/features/video-menu/components/web/KickButton.js index dbd5c8204..23ea04879 100644 --- a/react/features/video-menu/components/web/KickButton.js +++ b/react/features/video-menu/components/web/KickButton.js @@ -2,10 +2,10 @@ import React from 'react'; -import ContextMenuItem from '../../../base/components/context-menu/ContextMenuItem'; import { translate } from '../../../base/i18n'; import { IconCloseCircle } from '../../../base/icons'; import { connect } from '../../../base/redux'; +import ContextMenuItem from '../../../base/ui/components/web/ContextMenuItem'; import AbstractKickButton, { type Props } from '../AbstractKickButton'; diff --git a/react/features/video-menu/components/web/LocalVideoMenuTriggerButton.tsx b/react/features/video-menu/components/web/LocalVideoMenuTriggerButton.tsx index f991ac318..c52ce112f 100644 --- a/react/features/video-menu/components/web/LocalVideoMenuTriggerButton.tsx +++ b/react/features/video-menu/components/web/LocalVideoMenuTriggerButton.tsx @@ -5,8 +5,6 @@ import { WithTranslation } from 'react-i18next'; import { batch } from 'react-redux'; import { IState } from '../../../app/types'; -import ContextMenu from '../../../base/components/context-menu/ContextMenu'; -import ContextMenuItemGroup from '../../../base/components/context-menu/ContextMenuItemGroup'; import { isMobileBrowser } from '../../../base/environment/utils'; // @ts-ignore import { translate } from '../../../base/i18n'; @@ -22,6 +20,8 @@ import { getHideSelfView } from '../../../base/settings'; // @ts-ignore import { getLocalVideoTrack } from '../../../base/tracks'; import Button from '../../../base/ui/components/web/Button'; +import ContextMenu from '../../../base/ui/components/web/ContextMenu'; +import ContextMenuItemGroup from '../../../base/ui/components/web/ContextMenuItemGroup'; // @ts-ignore import ConnectionIndicatorContent from '../../../connection-indicator/components/web/ConnectionIndicatorContent'; import { THUMBNAIL_TYPE } from '../../../filmstrip/constants'; diff --git a/react/features/video-menu/components/web/MuteButton.js b/react/features/video-menu/components/web/MuteButton.js index 5430d7f48..0c29ff64a 100644 --- a/react/features/video-menu/components/web/MuteButton.js +++ b/react/features/video-menu/components/web/MuteButton.js @@ -2,10 +2,10 @@ import React from 'react'; -import ContextMenuItem from '../../../base/components/context-menu/ContextMenuItem'; import { translate } from '../../../base/i18n'; import { IconMicrophoneEmptySlash } from '../../../base/icons'; import { connect } from '../../../base/redux'; +import ContextMenuItem from '../../../base/ui/components/web/ContextMenuItem'; import AbstractMuteButton, { type Props, _mapStateToProps diff --git a/react/features/video-menu/components/web/MuteEveryoneElseButton.js b/react/features/video-menu/components/web/MuteEveryoneElseButton.js index 4b51545b7..83c988e09 100644 --- a/react/features/video-menu/components/web/MuteEveryoneElseButton.js +++ b/react/features/video-menu/components/web/MuteEveryoneElseButton.js @@ -2,10 +2,10 @@ import React from 'react'; -import ContextMenuItem from '../../../base/components/context-menu/ContextMenuItem'; import { translate } from '../../../base/i18n'; import { IconMuteEveryoneElse } from '../../../base/icons'; import { connect } from '../../../base/redux'; +import ContextMenuItem from '../../../base/ui/components/web/ContextMenuItem'; import AbstractMuteEveryoneElseButton, { type Props } from '../AbstractMuteEveryoneElseButton'; diff --git a/react/features/video-menu/components/web/MuteEveryoneElsesVideoButton.js b/react/features/video-menu/components/web/MuteEveryoneElsesVideoButton.js index 6a264d516..1ec6797be 100644 --- a/react/features/video-menu/components/web/MuteEveryoneElsesVideoButton.js +++ b/react/features/video-menu/components/web/MuteEveryoneElsesVideoButton.js @@ -2,10 +2,10 @@ import React from 'react'; -import ContextMenuItem from '../../../base/components/context-menu/ContextMenuItem'; import { translate } from '../../../base/i18n'; import { IconMuteVideoEveryoneElse } from '../../../base/icons'; import { connect } from '../../../base/redux'; +import ContextMenuItem from '../../../base/ui/components/web/ContextMenuItem'; import AbstractMuteEveryoneElsesVideoButton, { type Props } from '../AbstractMuteEveryoneElsesVideoButton'; diff --git a/react/features/video-menu/components/web/MuteVideoButton.js b/react/features/video-menu/components/web/MuteVideoButton.js index ead634025..11150091d 100644 --- a/react/features/video-menu/components/web/MuteVideoButton.js +++ b/react/features/video-menu/components/web/MuteVideoButton.js @@ -2,10 +2,10 @@ import React from 'react'; -import ContextMenuItem from '../../../base/components/context-menu/ContextMenuItem'; import { translate } from '../../../base/i18n'; import { IconVideoOff } from '../../../base/icons'; import { connect } from '../../../base/redux'; +import ContextMenuItem from '../../../base/ui/components/web/ContextMenuItem'; import AbstractMuteVideoButton, { type Props, _mapStateToProps diff --git a/react/features/video-menu/components/web/ParticipantContextMenu.tsx b/react/features/video-menu/components/web/ParticipantContextMenu.tsx index 9a4c79c1d..9743f9f11 100644 --- a/react/features/video-menu/components/web/ParticipantContextMenu.tsx +++ b/react/features/video-menu/components/web/ParticipantContextMenu.tsx @@ -11,8 +11,6 @@ import { IState } from '../../../app/types'; import { isSupported as isAvModerationSupported } from '../../../av-moderation/functions'; // @ts-ignore import { Avatar } from '../../../base/avatar'; -import ContextMenu from '../../../base/components/context-menu/ContextMenu'; -import ContextMenuItemGroup from '../../../base/components/context-menu/ContextMenuItemGroup'; import { isIosMobileBrowser, isMobileBrowser } from '../../../base/environment/utils'; import { MEDIA_TYPE } from '../../../base/media/constants'; import { PARTICIPANT_ROLE } from '../../../base/participants/constants'; @@ -20,6 +18,8 @@ import { getLocalParticipant } from '../../../base/participants/functions'; import { Participant } from '../../../base/participants/types'; // @ts-ignore import { isParticipantAudioMuted } from '../../../base/tracks'; +import ContextMenu from '../../../base/ui/components/web/ContextMenu'; +import ContextMenuItemGroup from '../../../base/ui/components/web/ContextMenuItemGroup'; // @ts-ignore import { getBreakoutRooms, getCurrentRoomId, isInBreakoutRoom } from '../../../breakout-rooms/functions'; // @ts-ignore diff --git a/react/features/video-menu/components/web/PrivateMessageMenuButton.js b/react/features/video-menu/components/web/PrivateMessageMenuButton.js index cc7c28df0..518ebfef6 100644 --- a/react/features/video-menu/components/web/PrivateMessageMenuButton.js +++ b/react/features/video-menu/components/web/PrivateMessageMenuButton.js @@ -2,10 +2,10 @@ import React, { Component } from 'react'; -import ContextMenuItem from '../../../base/components/context-menu/ContextMenuItem'; import { translate } from '../../../base/i18n'; import { IconMessage } from '../../../base/icons'; import { connect } from '../../../base/redux'; +import ContextMenuItem from '../../../base/ui/components/web/ContextMenuItem'; import { openChat } from '../../../chat/'; import { type Props as AbstractProps, diff --git a/react/features/video-menu/components/web/RemoteControlButton.js b/react/features/video-menu/components/web/RemoteControlButton.js index 31c5e4702..8ea2b09e1 100644 --- a/react/features/video-menu/components/web/RemoteControlButton.js +++ b/react/features/video-menu/components/web/RemoteControlButton.js @@ -6,9 +6,9 @@ import { createRemoteVideoMenuButtonEvent, sendAnalytics } from '../../../analytics'; -import ContextMenuItem from '../../../base/components/context-menu/ContextMenuItem'; import { translate } from '../../../base/i18n'; import { IconRemoteControlStart, IconRemoteControlStop } from '../../../base/icons'; +import ContextMenuItem from '../../../base/ui/components/web/ContextMenuItem'; // TODO: Move these enums into the store after further reactification of the // non-react RemoteVideo component. diff --git a/react/features/video-menu/components/web/RemoteVideoMenuTriggerButton.tsx b/react/features/video-menu/components/web/RemoteVideoMenuTriggerButton.tsx index 344a7510f..331e65041 100644 --- a/react/features/video-menu/components/web/RemoteVideoMenuTriggerButton.tsx +++ b/react/features/video-menu/components/web/RemoteVideoMenuTriggerButton.tsx @@ -129,7 +129,6 @@ const styles = () => { position: 'relative' as const, marginTop: 0, right: 'auto', - padding: '0', marginRight: '4px', marginBottom: '4px' } diff --git a/react/features/video-menu/components/web/SendToRoomButton.js b/react/features/video-menu/components/web/SendToRoomButton.js index a1f100523..d3b9677a8 100644 --- a/react/features/video-menu/components/web/SendToRoomButton.js +++ b/react/features/video-menu/components/web/SendToRoomButton.js @@ -5,8 +5,8 @@ import { useTranslation } from 'react-i18next'; import { useDispatch } from 'react-redux'; import { createBreakoutRoomsEvent, sendAnalytics } from '../../../analytics'; -import ContextMenuItem from '../../../base/components/context-menu/ContextMenuItem'; import { IconRingGroup } from '../../../base/icons'; +import ContextMenuItem from '../../../base/ui/components/web/ContextMenuItem'; import { sendParticipantToRoom } from '../../../breakout-rooms/actions'; type Props = { diff --git a/react/features/video-menu/components/web/TogglePinToStageButton.js b/react/features/video-menu/components/web/TogglePinToStageButton.js index 59381e9cb..dc954dc4d 100644 --- a/react/features/video-menu/components/web/TogglePinToStageButton.js +++ b/react/features/video-menu/components/web/TogglePinToStageButton.js @@ -4,8 +4,8 @@ import React, { useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { useDispatch, useSelector } from 'react-redux'; -import ContextMenuItem from '../../../base/components/context-menu/ContextMenuItem'; import { IconPinParticipant, IconUnpin } from '../../../base/icons'; +import ContextMenuItem from '../../../base/ui/components/web/ContextMenuItem'; import { togglePinStageParticipant } from '../../../filmstrip/actions.web'; import { getPinnedActiveParticipants } from '../../../filmstrip/functions.web';