Room dialog (#905)

* support ToolIcon className and fix label padding

* factor some ExportDialog classes out to Modal

* initial RoomDialog prototype

* change label for another-session button

* remove unused css

* add color comments

* Move the collaboration button to the main menu, add support for mobile

* remove button for creating another session

* add locks

* Fix alignment issue

* Reorder button

* reuse current scene for collab session

* keep collaboration state on restore

Co-authored-by: Jed Fox <git@twopointzero.us>
This commit is contained in:
David Luzar 2020-03-11 19:42:18 +01:00 committed by GitHub
parent aa9a6b0909
commit b82b0754ac
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 341 additions and 40 deletions

View file

@ -21,6 +21,7 @@ import { ExportType } from "../scene/types";
import { MobileMenu } from "./MobileMenu";
import { ZoomActions, SelectedShapeActions, ShapesSwitcher } from "./Actions";
import { Section } from "./Section";
import { RoomDialog } from "./RoomDialog";
interface LayerUIProps {
actionManager: ActionManager;
@ -30,6 +31,8 @@ interface LayerUIProps {
elements: readonly ExcalidrawElement[];
language: string;
setElements: (elements: readonly ExcalidrawElement[]) => void;
onRoomCreate: () => void;
onRoomDestroy: () => void;
}
export const LayerUI = React.memo(
@ -41,6 +44,8 @@ export const LayerUI = React.memo(
elements,
language,
setElements,
onRoomCreate,
onRoomDestroy,
}: LayerUIProps) => {
const isMobile = useIsMobile();
@ -92,21 +97,28 @@ export const LayerUI = React.memo(
actionManager={actionManager}
exportButton={renderExportDialog()}
setAppState={setAppState}
onRoomCreate={onRoomCreate}
onRoomDestroy={onRoomDestroy}
/>
) : (
<>
<FixedSideContainer side="top">
<HintViewer appState={appState} elements={elements} />
<div className="App-menu App-menu_top">
<Stack.Col gap={4} align="end">
<Stack.Col gap={4}>
<Section className="App-right-menu" heading="canvasActions">
<Island padding={4}>
<Stack.Col gap={4}>
<Stack.Row justifyContent={"space-between"}>
<Stack.Row gap={2.25} justifyContent={"space-between"}>
{actionManager.renderAction("loadScene")}
{actionManager.renderAction("saveScene")}
{renderExportDialog()}
{actionManager.renderAction("clearCanvas")}
<RoomDialog
isCollaborating={appState.isCollaborating}
onRoomCreate={onRoomCreate}
onRoomDestroy={onRoomDestroy}
/>
</Stack.Row>
{actionManager.renderAction("changeViewBackgroundColor")}
</Stack.Col>