marcel/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-09-07 09:36:58 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: hide canvas-modifying UI in view mode (#5815)

Browse Source 
* fix: hide canvas-modifying UI in view mode

* add class for better targeting

* fix missing `key`

* fix: useOutsideClick not working in view mode
This commit is contained in:
David Luzar
2022-11-01 22:25:12 +01:00
committed by GitHub
parent 7f91cdc0c9
commit 8c298336fc
4 changed files with 61 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/MobileMenu.tsx
View File

@@ -75,7 +75,7 @@ export const MobileMenu = ({
return (
<FixedSideContainer side="top" className="App-top-bar">
{renderWelcomeScreen && !appState.isLoading && (
<WelcomeScreen actionManager={actionManager} />
<WelcomeScreen appState={appState} actionManager={actionManager} />
)}
<Section heading="shapes">
{(heading: React.ReactNode) => (
@@ -127,11 +127,13 @@ export const MobileMenu = ({
title={t("toolBar.lock")}
isMobile
/>
<LibraryButton
appState={appState}
setAppState={setAppState}
isMobile
/>
{!appState.viewModeEnabled && (
<LibraryButton
appState={appState}
setAppState={setAppState}
isMobile
/>
)}
</div>
</Stack.Row>
</Stack.Col>
@@ -187,7 +189,7 @@ export const MobileMenu = ({
}
return (
<>
{actionManager.renderAction("loadScene")}
{!appState.viewModeEnabled && actionManager.renderAction("loadScene")}
{renderJSONExportDialog()}
{renderImageExportDialog()}
<MenuItem
@@ -204,18 +206,20 @@ export const MobileMenu = ({
/>
)}
{actionManager.renderAction("toggleShortcuts", undefined, true)}
{actionManager.renderAction("clearCanvas")}
{!appState.viewModeEnabled && actionManager.renderAction("clearCanvas")}
<Separator />
<MenuLinks />
<Separator />
<div style={{ marginBottom: ".5rem" }}>
<div style={{ fontSize: ".75rem", marginBottom: ".5rem" }}>
{t("labels.canvasBackground")}
{!appState.viewModeEnabled && (
<div style={{ marginBottom: ".5rem" }}>
<div style={{ fontSize: ".75rem", marginBottom: ".5rem" }}>
{t("labels.canvasBackground")}
</div>
<div style={{ padding: "0 0.625rem" }}>
{actionManager.renderAction("changeViewBackgroundColor")}
</div>
</div>
<div style={{ padding: "0 0.625rem" }}>
{actionManager.renderAction("changeViewBackgroundColor")}
</div>
</div>
)}
{actionManager.renderAction("toggleTheme")}
</>
);