Add option to hide multiplayer menu (#576)

* add multiplayer menu, view to menu

* update icon

* Add option to hide showMultiplayerMenu
This commit is contained in:
Steve Ruiz 2022-02-13 16:06:39 +00:00 committed by GitHub
parent 8ab16f1362
commit ee71a37b40
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 21 additions and 9 deletions

View file

@ -39,6 +39,10 @@ export interface TldrawProps extends TDCallbacks {
*/ */
showMenu?: boolean showMenu?: boolean
/**
* (optional) Whether to show the multiplayer menu.
*/
showMultiplayerMenu?: boolean
/** /**
* (optional) Whether to show the pages UI. * (optional) Whether to show the pages UI.
*/ */
@ -94,6 +98,7 @@ export function Tldraw({
currentPageId, currentPageId,
autofocus = true, autofocus = true,
showMenu = true, showMenu = true,
showMultiplayerMenu = true,
showPages = true, showPages = true,
showTools = true, showTools = true,
showZoom = true, showZoom = true,
@ -259,6 +264,7 @@ export function Tldraw({
autofocus={autofocus} autofocus={autofocus}
showPages={showPages} showPages={showPages}
showMenu={showMenu} showMenu={showMenu}
showMultiplayerMenu={showMultiplayerMenu}
showStyles={showStyles} showStyles={showStyles}
showZoom={showZoom} showZoom={showZoom}
showTools={showTools} showTools={showTools}
@ -275,6 +281,7 @@ interface InnerTldrawProps {
autofocus: boolean autofocus: boolean
showPages: boolean showPages: boolean
showMenu: boolean showMenu: boolean
showMultiplayerMenu: boolean
showZoom: boolean showZoom: boolean
showStyles: boolean showStyles: boolean
showUI: boolean showUI: boolean
@ -288,6 +295,7 @@ const InnerTldraw = React.memo(function InnerTldraw({
autofocus, autofocus,
showPages, showPages,
showMenu, showMenu,
showMultiplayerMenu,
showZoom, showZoom,
showStyles, showStyles,
showTools, showTools,
@ -450,6 +458,7 @@ const InnerTldraw = React.memo(function InnerTldraw({
readOnly={readOnly} readOnly={readOnly}
showPages={showPages} showPages={showPages}
showMenu={showMenu} showMenu={showMenu}
showMultiplayerMenu={showMultiplayerMenu}
showStyles={showStyles} showStyles={showStyles}
showZoom={showZoom} showZoom={showZoom}
showSponsorLink={showSponsorLink} showSponsorLink={showSponsorLink}

View file

@ -60,16 +60,18 @@ export const MultiplayerMenu = React.memo(function MultiplayerMenu() {
return ( return (
<DropdownMenu.Root dir="ltr"> <DropdownMenu.Root dir="ltr">
<DMTriggerIcon>{room ? <MultiplayerIcon /> : <CursorArrowIcon />}</DMTriggerIcon> <DMTriggerIcon id="TD-MultiplayerMenuIcon">
<DMContent variant="menu" align="start"> {room ? <MultiplayerIcon /> : <CursorArrowIcon />}
<DMItem onClick={handleCopySelect} disabled={!room}> </DMTriggerIcon>
<DMContent variant="menu" align="start" id="TD-MultiplayerMenu">
<DMItem id="TD-Multiplayer-CopyInviteLink" onClick={handleCopySelect} disabled={!room}>
Copy Invite Link<SmallIcon>{copied ? <CheckIcon /> : <ClipboardIcon />}</SmallIcon> Copy Invite Link<SmallIcon>{copied ? <CheckIcon /> : <ClipboardIcon />}</SmallIcon>
</DMItem> </DMItem>
<DMDivider /> <DMDivider id="TD-Multiplayer-CopyInviteLinkDivider" />
<DMItem onClick={handleCreateMultiplayerRoom}> <DMItem id="TD-Multiplayer-CreateMultiplayerRoom" onClick={handleCreateMultiplayerRoom}>
<a href="https://tldraw.com/r">Create a Multiplayer Project</a> <a href="https://tldraw.com/r">Create a Multiplayer Project</a>
</DMItem> </DMItem>
{/* <DMItem onClick={handleCopyToMultiplayerRoom}>Copy to Multiplayer Room</DMItem> */} {/* <DMItem id="TD-Multiplayer-CopyToMultiplayerRoom" onClick={handleCopyToMultiplayerRoom}>Copy to Multiplayer Room</DMItem> */}
</DMContent> </DMContent>
</DropdownMenu.Root> </DropdownMenu.Root>
) )

View file

@ -6,10 +6,9 @@ import { ZoomMenu } from './ZoomMenu'
import { StyleMenu } from './StyleMenu' import { StyleMenu } from './StyleMenu'
import { Panel } from '~components/Primitives/Panel' import { Panel } from '~components/Primitives/Panel'
import { ToolButton } from '~components/Primitives/ToolButton' import { ToolButton } from '~components/Primitives/ToolButton'
import { MultiplayerIcon, RedoIcon, UndoIcon } from '~components/Primitives/icons' import { RedoIcon, UndoIcon } from '~components/Primitives/icons'
import { breakpoints } from '~components/breakpoints' import { breakpoints } from '~components/breakpoints'
import { useTldrawApp } from '~hooks' import { useTldrawApp } from '~hooks'
import { CursorArrowIcon } from '@radix-ui/react-icons'
import { MultiplayerMenu } from './MultiplayerMenu' import { MultiplayerMenu } from './MultiplayerMenu'
interface TopPanelProps { interface TopPanelProps {
@ -18,6 +17,7 @@ interface TopPanelProps {
showMenu: boolean showMenu: boolean
showStyles: boolean showStyles: boolean
showZoom: boolean showZoom: boolean
showMultiplayerMenu: boolean
showSponsorLink: boolean showSponsorLink: boolean
} }
@ -28,6 +28,7 @@ export function TopPanel({
showStyles, showStyles,
showZoom, showZoom,
showSponsorLink, showSponsorLink,
showMultiplayerMenu,
}: TopPanelProps) { }: TopPanelProps) {
const app = useTldrawApp() const app = useTldrawApp()
@ -36,7 +37,7 @@ export function TopPanel({
{(showMenu || showPages) && ( {(showMenu || showPages) && (
<Panel side="left" id="TD-MenuPanel"> <Panel side="left" id="TD-MenuPanel">
{showMenu && <Menu showSponsorLink={showSponsorLink} readOnly={readOnly} />} {showMenu && <Menu showSponsorLink={showSponsorLink} readOnly={readOnly} />}
{showMenu && <MultiplayerMenu />} {showMultiplayerMenu && <MultiplayerMenu />}
{showPages && <PageMenu />} {showPages && <PageMenu />}
</Panel> </Panel>
)} )}