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

View file

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

View file

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