diff --git a/packages/common/src/constants.ts b/packages/common/src/constants.ts index c948e441bb59..e070ff9c0ed5 100644 --- a/packages/common/src/constants.ts +++ b/packages/common/src/constants.ts @@ -330,6 +330,7 @@ export const DEFAULT_UI_OPTIONS: AppProps["UIOptions"] = { tools: { image: true, }, + uiMode: "minimal", }; export const MAX_DECIMALS_FOR_SVG_EXPORT = 2; diff --git a/packages/excalidraw/components/Actions.scss b/packages/excalidraw/components/Actions.scss index 7e6aaa668670..2926dd1194cb 100644 --- a/packages/excalidraw/components/Actions.scss +++ b/packages/excalidraw/components/Actions.scss @@ -212,6 +212,11 @@ margin-inline-start: 0.6em !important; } +.panning-mode-trigger.dropdown-menu-button--mobile { + width: var(--lg-button-size) !important; + height: var(--lg-button-size) !important; +} + .lock-buttons { display: flex; diff --git a/packages/excalidraw/components/LayerUI.tsx b/packages/excalidraw/components/LayerUI.tsx index 4cd9c7dbbf9f..65698d9d3513 100644 --- a/packages/excalidraw/components/LayerUI.tsx +++ b/packages/excalidraw/components/LayerUI.tsx @@ -163,6 +163,7 @@ const LayerUI = ({ const editorInterface = useEditorInterface(); const stylesPanelMode = useStylesPanelMode(); const isCompactStylesPanel = stylesPanelMode === "compact"; + const isMinimalUI = UIOptions.uiMode === "minimal"; const tunnels = useInitializeTunnels(); const spacing = isCompactStylesPanel @@ -471,8 +472,8 @@ const LayerUI = ({ {/* render component fallbacks. Can be rendered anywhere as they'll be tunneled away. We only render tunneled components that actually have defaults when host do not render anything. */} - - {UIOptions.showSidebarTrigger !== false && ( + {!isMinimalUI && } + {!isMinimalUI && UIOptions.showSidebarTrigger !== false && ( )} {editorInterface.formFactor !== "phone" && ( @@ -610,15 +612,18 @@ const LayerUI = ({ : {} } > - {renderWelcomeScreen && } - {renderFixedSideContainer()} + {!isMinimalUI && renderWelcomeScreen && ( + + )} + {!isMinimalUI && renderFixedSideContainer()}
- {appState.scrolledOutside && ( + {!isMinimalUI && appState.scrolledOutside && (
); }; diff --git a/packages/excalidraw/index.tsx b/packages/excalidraw/index.tsx index f8004b4c2f9f..c5ff573ccfd5 100644 --- a/packages/excalidraw/index.tsx +++ b/packages/excalidraw/index.tsx @@ -64,6 +64,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => { // compares the same values const UIOptions: AppProps["UIOptions"] = { ...props.UIOptions, + uiMode: props.UIOptions?.uiMode ?? DEFAULT_UI_OPTIONS.uiMode, canvasActions: { ...DEFAULT_UI_OPTIONS.canvasActions, ...canvasActions, diff --git a/packages/excalidraw/tests/__snapshots__/excalidraw.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/excalidraw.test.tsx.snap index ef0fb47e640e..ecf9a73307f0 100644 --- a/packages/excalidraw/tests/__snapshots__/excalidraw.test.tsx.snap +++ b/packages/excalidraw/tests/__snapshots__/excalidraw.test.tsx.snap @@ -2,7 +2,7 @@ exports[` > > should render main menu with host menu items if passed from host 1`] = `