marcel/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-09-21 16:29:58 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix library and share btns getting hidden in smaller tablet widths

Browse Source
This commit is contained in:
Ryan Di
2025-08-25 23:12:51 +10:00
parent 2cf08d72c6
commit 927f83b57b
4 changed files with 63 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/excalidraw/components/LayerUI.scss
View File

@@ -24,6 +24,10 @@
gap: 0.75rem;
pointer-events: none !important;
&--compact {
gap: 0.5rem;
}
& > * {
pointer-events: var(--ui-pointerEvents);
}

44
packages/excalidraw/components/LayerUI.tsx
View File

@@ -161,6 +161,24 @@ const LayerUI = ({
const device = useDevice();
const tunnels = useInitializeTunnels();
const spacing = device.editor.showCompactSidebar
? {
menuTopGap: 4,
toolbarColGap: 4,
toolbarRowGap: 1,
toolbarInnerRowGap: 1,
islandPadding: 1,
collabMarginLeft: 8,
}
: {
menuTopGap: 6,
toolbarColGap: 4,
toolbarRowGap: 1,
toolbarInnerRowGap: 1,
islandPadding: 1,
collabMarginLeft: 8,
};
const TunnelsJotaiProvider = tunnels.tunnelsJotai.Provider;
const [eyeDropperState, setEyeDropperState] = useAtom(activeEyeDropperAtom);
@@ -281,10 +299,20 @@ const LayerUI = ({
return (
<FixedSideContainer side="top">
<div className="App-menu App-menu_top">
<Stack.Col gap={6} className={clsx("App-menu_top__left")}>
<Stack.Col
gap={spacing.menuTopGap}
className={clsx("App-menu_top__left")}
>
{renderCanvasActions()}
<div
className={clsx("selected-shape-actions-container", {
"selected-shape-actions-container--compact":
device.editor.showCompactSidebar,
})}
>
{shouldRenderSelectedShapeActions &&
renderSelectedShapeActions(device.editor.showCompactSidebar)}
</div>
</Stack.Col>
{!appState.viewModeEnabled &&
appState.openDialog?.name !== "elementLinkSelector" && (
@@ -294,17 +322,19 @@ const LayerUI = ({
{renderWelcomeScreen && (
<tunnels.WelcomeScreenToolbarHintTunnel.Out />
)}
<Stack.Col gap={4} align="start">
<Stack.Col gap={spacing.toolbarColGap} align="start">
<Stack.Row
gap={1}
gap={spacing.toolbarRowGap}
className={clsx("App-toolbar-container", {
"zen-mode": appState.zenModeEnabled,
})}
>
<Island
padding={1}
padding={spacing.islandPadding}
className={clsx("App-toolbar", {
"zen-mode": appState.zenModeEnabled,
"App-toolbar--compact":
device.editor.showCompactSidebar,
})}
>
<HintViewer
@@ -314,7 +344,7 @@ const LayerUI = ({
app={app}
/>
{heading}
<Stack.Row gap={1}>
<Stack.Row gap={spacing.toolbarInnerRowGap}>
<PenModeButton
zenModeEnabled={appState.zenModeEnabled}
checked={appState.penMode}
@@ -348,7 +378,7 @@ const LayerUI = ({
{isCollaborating && (
<Island
style={{
marginLeft: 8,
marginLeft: spacing.collabMarginLeft,
alignSelf: "center",
height: "fit-content",
}}
@@ -376,6 +406,8 @@ const LayerUI = ({
"layer-ui__wrapper__top-right zen-mode-transition",
{
"transition-right": appState.zenModeEnabled,
"layer-ui__wrapper__top-right--compact":
device.editor.showCompactSidebar,
},
)}
>

10
packages/excalidraw/components/Toolbar.scss
View File

@@ -10,6 +10,16 @@
}
}
&--compact {
.ToolIcon__keybinding {
display: none;
}
.App-toolbar__divider {
margin: 0;
}
}
&__divider {
width: 1px;
height: 1.5rem;

10
packages/excalidraw/css/styles.scss
View File

@@ -317,7 +317,7 @@ body.excalidraw-cursor-resize * {
.App-menu_top {
grid-template-columns: 1fr 2fr 1fr;
grid-gap: 2rem;
grid-gap: 1rem;
align-items: flex-start;
cursor: default;
pointer-events: none !important;
@@ -336,6 +336,14 @@ body.excalidraw-cursor-resize * {
justify-self: flex-start;
}
.selected-shape-actions-container {
width: fit-content;
&--compact {
min-width: 48px;
}
}
.App-menu_top > *:last-child {
justify-self: flex-end;
}