github.com/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-02-18 13:29:36 +01:00
Code 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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 61 additions and 40 deletions
Show Stats 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} padding={2}
style={{ zIndex: 1 }} style={{ zIndex: 1 }}
> >
{actionManager.renderAction("loadScene")} {!appState.viewModeEnabled &&
actionManager.renderAction("loadScene")}
{/* // TODO barnabasmolnar/editor-redesign */} {/* // TODO barnabasmolnar/editor-redesign */}
{/* is this fine here? */} {/* is this fine here? */}
{appState.fileHandle && {appState.fileHandle &&
@ -234,7 +235,8 @@ const LayerUI = ({
/> />
)} )}
{actionManager.renderAction("toggleShortcuts", undefined, true)} {actionManager.renderAction("toggleShortcuts", undefined, true)}
{actionManager.renderAction("clearCanvas")} {!appState.viewModeEnabled &&
actionManager.renderAction("clearCanvas")}
<Separator /> <Separator />
<MenuLinks /> <MenuLinks />
<Separator /> <Separator />
@ -249,14 +251,16 @@ const LayerUI = ({
<div style={{ padding: "0 0.625rem" }}> <div style={{ padding: "0 0.625rem" }}>
<LanguageList style={{ width: "100%" }} /> <LanguageList style={{ width: "100%" }} />
</div> </div>
<div> {!appState.viewModeEnabled && (
<div style={{ fontSize: ".75rem", marginBottom: ".5rem" }}> <div>
{t("labels.canvasBackground")} <div style={{ fontSize: ".75rem", marginBottom: ".5rem" }}>
{t("labels.canvasBackground")}
</div>
<div style={{ padding: "0 0.625rem" }}>
{actionManager.renderAction("changeViewBackgroundColor")}
</div>
</div> </div>
<div style={{ padding: "0 0.625rem" }}> )}
{actionManager.renderAction("changeViewBackgroundColor")}
</div>
</div>
</div> </div>
</Island> </Island>
</Section> </Section>
@ -299,12 +303,12 @@ const LayerUI = ({
return ( return (
<FixedSideContainer side="top"> <FixedSideContainer side="top">
{renderWelcomeScreen && !appState.isLoading && ( {renderWelcomeScreen && !appState.isLoading && (
<WelcomeScreen actionManager={actionManager} /> <WelcomeScreen appState={appState} actionManager={actionManager} />
)} )}
<div className="App-menu App-menu_top"> <div className="App-menu App-menu_top">
<Stack.Col <Stack.Col
gap={6} gap={6}
className={clsx({ className={clsx("App-menu_top__left", {
"disable-pointerEvents": appState.zenModeEnabled, "disable-pointerEvents": appState.zenModeEnabled,
})} })}
> >
@ -405,7 +409,9 @@ const LayerUI = ({
/> />
)} )}
{renderTopRightUI?.(device.isMobile, appState)} {renderTopRightUI?.(device.isMobile, appState)}
<LibraryButton appState={appState} setAppState={setAppState} /> {!appState.viewModeEnabled && (
<LibraryButton appState={appState} setAppState={setAppState} />
)}
</div> </div>
</div> </div>
</FixedSideContainer> </FixedSideContainer>

34
src/components/MobileMenu.tsx
View File

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

32
src/components/WelcomeScreen.tsx
View File

@ -5,6 +5,7 @@ import { getShortcutFromShortcutName } from "../actions/shortcuts";
import { COOKIES } from "../constants"; import { COOKIES } from "../constants";
import { collabDialogShownAtom } from "../excalidraw-app/collab/Collab"; import { collabDialogShownAtom } from "../excalidraw-app/collab/Collab";
import { t } from "../i18n"; import { t } from "../i18n";
import { AppState } from "../types";
import { import {
ExcalLogo, ExcalLogo,
HelpIcon, HelpIcon,
@ -60,7 +61,13 @@ const WelcomeScreenItem = ({
); );
}; };
const WelcomeScreen = ({ actionManager }: { actionManager: ActionManager }) => { const WelcomeScreen = ({
appState,
actionManager,
}: {
appState: AppState;
actionManager: ActionManager;
}) => {
const [, setCollabDialogShown] = useAtom(collabDialogShownAtom); const [, setCollabDialogShown] = useAtom(collabDialogShownAtom);
let subheadingJSX; let subheadingJSX;
@ -68,12 +75,13 @@ const WelcomeScreen = ({ actionManager }: { actionManager: ActionManager }) => {
if (isExcalidrawPlusSignedUser) { if (isExcalidrawPlusSignedUser) {
subheadingJSX = t("welcomeScreen.switchToPlusApp") subheadingJSX = t("welcomeScreen.switchToPlusApp")
.split(/(Excalidraw\+)/) .split(/(Excalidraw\+)/)
.map((bit) => { .map((bit, idx) => {
if (bit === "Excalidraw+") { if (bit === "Excalidraw+") {
return ( return (
<a <a
style={{ pointerEvents: "all" }} style={{ pointerEvents: "all" }}
href={`${process.env.REACT_APP_PLUS_APP}?utm_source=excalidraw&utm_medium=app&utm_content=welcomeScreenSignedInUser`} href={`${process.env.REACT_APP_PLUS_APP}?utm_source=excalidraw&utm_medium=app&utm_content=welcomeScreenSignedInUser`}
key={idx}
> >
Excalidraw+ Excalidraw+
</a> </a>
@ -94,15 +102,17 @@ const WelcomeScreen = ({ actionManager }: { actionManager: ActionManager }) => {
{subheadingJSX} {subheadingJSX}
</div> </div>
<div className="WelcomeScreen-items"> <div className="WelcomeScreen-items">
<WelcomeScreenItem {!appState.viewModeEnabled && (
// TODO barnabasmolnar/editor-redesign <WelcomeScreenItem
// do we want the internationalized labels here that are currently // TODO barnabasmolnar/editor-redesign
// in use elsewhere or new ones? // do we want the internationalized labels here that are currently
label={t("buttons.load")} // in use elsewhere or new ones?
onClick={() => actionManager.executeAction(actionLoadScene)} label={t("buttons.load")}
shortcut={getShortcutFromShortcutName("loadScene")} onClick={() => actionManager.executeAction(actionLoadScene)}
icon={LoadIcon} shortcut={getShortcutFromShortcutName("loadScene")}
/> icon={LoadIcon}
/>
)}
<WelcomeScreenItem <WelcomeScreenItem
label={t("labels.liveCollaboration")} label={t("labels.liveCollaboration")}
shortcut={null} shortcut={null}

5
src/hooks/useOutsideClick.ts
View File

@ -21,10 +21,11 @@ export const useOutsideClickHook = (handler: (event: Event) => void) => {
handler(event); handler(event);
}; };
document.addEventListener("mousedown", listener);
document.addEventListener("pointerdown", listener);
document.addEventListener("touchstart", listener); document.addEventListener("touchstart", listener);
return () => { return () => {
document.removeEventListener("mousedown", listener); document.removeEventListener("pointerdown", listener);
document.removeEventListener("touchstart", listener); document.removeEventListener("touchstart", listener);
}; };
}, },