foss/excalidraw
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update MobileMenu.tsx

Browse Source
This commit is contained in:
zsviczian 2022-03-11 13:34:42 +01:00 committed by GitHub
parent cec3cf8334
commit 73f0d854bf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 63 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

143
src/components/MobileMenu.tsx
View File

@ -1,10 +1,9 @@
import clsx from "clsx";
import React from "react"; import React from "react";
import { AppState } from "../types"; import { AppState } from "../types";
import { ActionManager } from "../actions/manager"; import { ActionManager } from "../actions/manager";
import { t } from "../i18n"; import { t } from "../i18n";
import Stack from "./Stack"; import Stack from "./Stack";
import { isTextElement, showSelectedShapeActions } from "../element"; import { showSelectedShapeActions } from "../element";
import { NonDeletedExcalidrawElement } from "../element/types"; import { NonDeletedExcalidrawElement } from "../element/types";
import { FixedSideContainer } from "./FixedSideContainer"; import { FixedSideContainer } from "./FixedSideContainer";
import { Island } from "./Island"; import { Island } from "./Island";
@ -172,86 +171,70 @@ export const MobileMenu = ({
<> <>
{!viewModeEnabled && renderToolbar()} {!viewModeEnabled && renderToolbar()}
<div <div
className={clsx("layer-ui__wrapper", { className="App-bottom-bar"
"disable-pointerEvents": style={{
appState.draggingElement || marginBottom: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
appState.resizingElement || marginLeft: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
(appState.editingElement && marginRight: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
!isTextElement(appState.editingElement)), }}
})}
> >
<div <Island padding={0}>
className="App-bottom-bar" {appState.openMenu === "canvas" ? (
style={{ <Section className="App-mobile-menu" heading="canvasActions">
marginBottom: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2, <div className="panelColumn">
marginLeft: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2, <Stack.Col gap={4}>
marginRight: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2, {renderCanvasActions()}
}} {renderCustomFooter?.(true, appState)}
> {appState.collaborators.size > 0 && (
<Island padding={0}> <fieldset>
{appState.openMenu === "canvas" ? ( <legend>{t("labels.collaborators")}</legend>
<Section className="App-mobile-menu" heading="canvasActions"> <UserList mobile>
<div className="panelColumn"> {Array.from(appState.collaborators)
<Stack.Col gap={4}> // Collaborator is either not initialized or is actually the current user.
{renderCanvasActions()} .filter(
{renderCustomFooter?.(true, appState)} ([_, client]) => Object.keys(client).length !== 0,
{appState.collaborators.size > 0 && ( )
<fieldset> .map(([clientId, client]) => (
<legend>{t("labels.collaborators")}</legend> <React.Fragment key={clientId}>
<UserList mobile> {actionManager.renderAction("goToCollaborator", {
{Array.from(appState.collaborators) id: clientId,
// Collaborator is either not initialized or is actually the current user. })}
.filter( </React.Fragment>
([_, client]) => Object.keys(client).length !== 0, ))}
) </UserList>
.map(([clientId, client]) => ( </fieldset>
<React.Fragment key={clientId}> )}
{actionManager.renderAction( </Stack.Col>
"goToCollaborator", </div>
{ </Section>
id: clientId, ) : appState.openMenu === "shape" &&
}, !viewModeEnabled &&
)} showSelectedShapeActions(appState, elements) ? (
</React.Fragment> <Section className="App-mobile-menu" heading="selectedShapeActions">
))} <SelectedShapeActions
</UserList> appState={appState}
</fieldset> elements={elements}
)} renderAction={actionManager.renderAction}
</Stack.Col> elementType={appState.elementType}
</div> />
</Section> </Section>
) : appState.openMenu === "shape" && ) : null}
!viewModeEnabled && <footer className="App-toolbar">
showSelectedShapeActions(appState, elements) ? ( {renderAppToolbar()}
<Section {appState.scrolledOutside && !appState.openMenu && (
className="App-mobile-menu" <button
heading="selectedShapeActions" className="scroll-back-to-content"
onClick={() => {
setAppState({
...calculateScrollCenter(elements, appState, canvas),
});
}}
> >
<SelectedShapeActions {t("buttons.scrollBackToContent")}
appState={appState} </button>
elements={elements} )}
renderAction={actionManager.renderAction} </footer>
elementType={appState.elementType} </Island>
/>
</Section>
) : null}
<footer className="App-toolbar">
{renderAppToolbar()}
{appState.scrolledOutside && !appState.openMenu && (
<button
className="scroll-back-to-content"
onClick={() => {
setAppState({
...calculateScrollCenter(elements, appState, canvas),
});
}}
>
{t("buttons.scrollBackToContent")}
</button>
)}
</footer>
</Island>
</div>
</div> </div>
</> </>
); );