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

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