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 11:41:49 +01:00 committed by GitHub
parent 93c72cbb32
commit d3857fbb35
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 68 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
src/components/MobileMenu.tsx
View File

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