sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix bg color picker rendered behind shape menu (#1445)

Browse Source 
* fix bg color picker rendered behind shape menu

* add comment
This commit is contained in:
David Luzar 2020-04-16 21:31:20 +02:00 committed by GitHub
parent c35d76cb4c
commit 8cfc64a3ab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Island.css
View File

@ -5,4 +5,5 @@
box-shadow: var(--shadow-island); box-shadow: var(--shadow-island);
border-radius: var(--border-radius-m); border-radius: var(--border-radius-m);
padding: calc(var(--padding) * var(--space-factor)); padding: calc(var(--padding) * var(--space-factor));
position: relative;
} }

5
src/components/Island.tsx
View File

@ -6,13 +6,14 @@ type IslandProps = {
children: React.ReactNode; children: React.ReactNode;
padding?: number; padding?: number;
className?: string; className?: string;
style?: object;
}; };
export const Island = React.forwardRef<HTMLDivElement, IslandProps>( export const Island = React.forwardRef<HTMLDivElement, IslandProps>(
({ children, padding, className }, ref) => ( ({ children, padding, className, style }, ref) => (
<div <div
className={`${className ?? ""} Island`} className={`${className ?? ""} Island`}
style={{ "--padding": padding } as React.CSSProperties} style={{ "--padding": padding, ...style } as React.CSSProperties}
ref={ref} ref={ref}
> >
{children} {children}

4
src/components/LayerUI.tsx
View File

@ -125,7 +125,9 @@ export const LayerUI = React.memo(
<div className="App-menu App-menu_top"> <div className="App-menu App-menu_top">
<Stack.Col gap={4}> <Stack.Col gap={4}>
<Section heading="canvasActions"> <Section heading="canvasActions">
<Island padding={4}> {/* the zIndex ensures this menu has higher stacking order,
see https://github.com/excalidraw/excalidraw/pull/1445 */}
<Island padding={4} style={{ zIndex: 1 }}>
<Stack.Col gap={4}> <Stack.Col gap={4}>
<Stack.Row gap={1} justifyContent={"space-between"}> <Stack.Row gap={1} justifyContent={"space-between"}>
{actionManager.renderAction("loadScene")} {actionManager.renderAction("loadScene")}