foss/excalidraw
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Styling fixes, naming.

Browse Source
This commit is contained in:
barnabasmolnar 2023-04-17 17:31:50 +02:00
parent 79cf71cccb
commit 9c3ff73a73
4 changed files with 16 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/dropdownMenu/DropdownMenu.scss
View File

@ -1,10 +1,12 @@
@import "../../css/variables.module"; @import "../../css/variables.module";
.excalidraw { .excalidraw {
[data-radix-popper-content-wrapper] {
z-index: 1 !important;
}
.dropdown-menu { .dropdown-menu {
position: absolute; position: absolute;
top: 100%;
margin-top: 0.25rem;
&--mobile { &--mobile {
bottom: 55px; bottom: 55px;

6
src/components/dropdownMenu/DropdownMenu.tsx
View File

@ -13,7 +13,7 @@ import {
import "./DropdownMenu.scss"; import "./DropdownMenu.scss";
import * as DropdownMenuRadix from "@radix-ui/react-dropdown-menu"; import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
const DropdownMenu = ({ const DropdownMenu = ({
children, children,
@ -25,10 +25,10 @@ const DropdownMenu = ({
const MenuTriggerComp = getMenuTriggerComponent(children); const MenuTriggerComp = getMenuTriggerComponent(children);
const MenuContentComp = getMenuContentComponent(children); const MenuContentComp = getMenuContentComponent(children);
return ( return (
<DropdownMenuRadix.Root open={open}> <DropdownMenuPrimitive.Root open={open}>
{MenuTriggerComp} {MenuTriggerComp}
{open && MenuContentComp} {open && MenuContentComp}
</DropdownMenuRadix.Root> </DropdownMenuPrimitive.Root>
); );
}; };

9
src/components/dropdownMenu/DropdownMenuContent.tsx
View File

@ -7,7 +7,7 @@ import Stack from "../Stack";
import React from "react"; import React from "react";
import { DropdownMenuContentPropsContext } from "./common"; import { DropdownMenuContentPropsContext } from "./common";
import * as DropdownMenuRadix from "@radix-ui/react-dropdown-menu"; import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
const MenuContent = ({ const MenuContent = ({
children, children,
@ -36,11 +36,14 @@ const MenuContent = ({
return ( return (
<DropdownMenuContentPropsContext.Provider value={{ onSelect }}> <DropdownMenuContentPropsContext.Provider value={{ onSelect }}>
<DropdownMenuRadix.Content <DropdownMenuPrimitive.Content
ref={menuRef} ref={menuRef}
className={classNames} className={classNames}
style={style} style={style}
data-testid="dropdown-menu" data-testid="dropdown-menu"
side="bottom"
sideOffset={4}
align="start"
> >
{/* the zIndex ensures this menu has higher stacking order, {/* the zIndex ensures this menu has higher stacking order,
see https://github.com/excalidraw/excalidraw/pull/1445 */} see https://github.com/excalidraw/excalidraw/pull/1445 */}
@ -55,7 +58,7 @@ const MenuContent = ({
{children} {children}
</Island> </Island>
)} )}
</DropdownMenuRadix.Content> </DropdownMenuPrimitive.Content>
</DropdownMenuContentPropsContext.Provider> </DropdownMenuContentPropsContext.Provider>
); );
}; };

6
src/components/dropdownMenu/DropdownMenuTrigger.tsx
View File

@ -1,6 +1,6 @@
import clsx from "clsx"; import clsx from "clsx";
import { useDevice, useExcalidrawAppState } from "../App"; import { useDevice, useExcalidrawAppState } from "../App";
import * as DropdownMenuRadix from "@radix-ui/react-dropdown-menu"; import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
const MenuTrigger = ({ const MenuTrigger = ({
className = "", className = "",
@ -22,7 +22,7 @@ const MenuTrigger = ({
}, },
).trim(); ).trim();
return ( return (
<DropdownMenuRadix.Trigger <DropdownMenuPrimitive.Trigger
data-prevent-outside-click data-prevent-outside-click
className={classNames} className={classNames}
onClick={onToggle} onClick={onToggle}
@ -30,7 +30,7 @@ const MenuTrigger = ({
data-testid="dropdown-menu-button" data-testid="dropdown-menu-button"
> >
{children} {children}
</DropdownMenuRadix.Trigger> </DropdownMenuPrimitive.Trigger>
); );
}; };