smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

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
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 61 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/components/LayerUI.tsx
View file

@ -213,7 +213,8 @@ const LayerUI = ({
padding={2}
style={{ zIndex: 1 }}
>
{actionManager.renderAction("loadScene")}
{!appState.viewModeEnabled &&
actionManager.renderAction("loadScene")}
{/* // TODO barnabasmolnar/editor-redesign */}
{/* is this fine here? */}
{appState.fileHandle &&
@ -234,7 +235,8 @@ const LayerUI = ({
/>
)}
{actionManager.renderAction("toggleShortcuts", undefined, true)}
{actionManager.renderAction("clearCanvas")}
{!appState.viewModeEnabled &&
actionManager.renderAction("clearCanvas")}
<Separator />
<MenuLinks />
<Separator />
@ -249,14 +251,16 @@ const LayerUI = ({
<div style={{ padding: "0 0.625rem" }}>
<LanguageList style={{ width: "100%" }} />
</div>
<div>
<div style={{ fontSize: ".75rem", marginBottom: ".5rem" }}>
{t("labels.canvasBackground")}
{!appState.viewModeEnabled && (
<div>
<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>
)}
</div>
</Island>
</Section>
@ -299,12 +303,12 @@ const LayerUI = ({
return (
<FixedSideContainer side="top">
{renderWelcomeScreen && !appState.isLoading && (
<WelcomeScreen actionManager={actionManager} />
<WelcomeScreen appState={appState} actionManager={actionManager} />
)}
<div className="App-menu App-menu_top">
<Stack.Col
gap={6}
className={clsx({
className={clsx("App-menu_top__left", {
"disable-pointerEvents": appState.zenModeEnabled,
})}
>
@ -405,7 +409,9 @@ const LayerUI = ({
/>
)}
{renderTopRightUI?.(device.isMobile, appState)}
<LibraryButton appState={appState} setAppState={setAppState} />
{!appState.viewModeEnabled && (
<LibraryButton appState={appState} setAppState={setAppState} />
)}
</div>
</div>
</FixedSideContainer>