Naming, removing unused code.

This commit is contained in:
barnabasmolnar 2023-07-21 14:30:18 +02:00
parent 8f8b6e7144
commit bf0b2965e6
6 changed files with 11 additions and 23 deletions

View File

@ -369,16 +369,16 @@ export const ColorPicker = ({
}) => { }) => {
const pickerButton = React.useRef<HTMLButtonElement>(null); const pickerButton = React.useRef<HTMLButtonElement>(null);
const coords = pickerButton.current?.getBoundingClientRect(); const coords = pickerButton.current?.getBoundingClientRect();
const mainmenuContentCoords = document const mainMenuContentCoords = document
.querySelector(".mainmenu-content") .querySelector(".main-menu-content")
?.getBoundingClientRect(); ?.getBoundingClientRect();
const top = const top =
coords && mainmenuContentCoords && coords.top - mainmenuContentCoords.top; coords && mainMenuContentCoords && coords.top - mainMenuContentCoords.top;
const left = const left =
coords && coords &&
mainmenuContentCoords && mainMenuContentCoords &&
coords.right - mainmenuContentCoords.left; coords.right - mainMenuContentCoords.left;
return ( return (
<div> <div>

View File

@ -6,8 +6,7 @@
} }
.dropdown-menu { .dropdown-menu {
// position: absolute; max-width: 16rem;
max-width: 250px;
&__submenu-trigger { &__submenu-trigger {
&[aria-expanded="true"] { &[aria-expanded="true"] {
@ -22,24 +21,13 @@
opacity: 0.5; opacity: 0.5;
} }
.radix-menuitem { .radix-menu-item {
&:focus-visible { &:focus-visible {
outline: none; outline: none;
} }
} }
&--mobile { &--mobile {
max-width: none;
// bottom: 55px;
// top: auto;
// left: 0;
// // TODO barnabasmolnar/mainmenu-radix
// // double check rendering/styling on mobile
// // width: 100%;
// display: flex;
// flex-direction: column;
// row-gap: 0.75rem;
.dropdown-menu-container { .dropdown-menu-container {
padding: 8px 8px; padding: 8px 8px;
box-sizing: border-box; box-sizing: border-box;

View File

@ -23,7 +23,7 @@ const DropdownMenuItem = ({
const handleClick = useHandleDropdownMenuItemClick(rest.onClick, onSelect); const handleClick = useHandleDropdownMenuItemClick(rest.onClick, onSelect);
return ( return (
<DropdownMenuPrimitive.Item className="radix-menuitem"> <DropdownMenuPrimitive.Item className="radix-menu-item">
<button <button
{...rest} {...rest}
onClick={handleClick} onClick={handleClick}

View File

@ -23,7 +23,7 @@ const DropdownMenuSubItem = ({
const handleClick = useHandleDropdownMenuItemClick(rest.onClick, onSelect); const handleClick = useHandleDropdownMenuItemClick(rest.onClick, onSelect);
return ( return (
<DropdownMenuPrimitive.Item className="radix-menuitem"> <DropdownMenuPrimitive.Item className="radix-menu-item">
<button <button
{...rest} {...rest}
onClick={handleClick} onClick={handleClick}

View File

@ -15,7 +15,7 @@ const DropdownMenuSubTrigger = ({
className?: string; className?: string;
} & React.HTMLAttributes<HTMLDivElement>) => { } & React.HTMLAttributes<HTMLDivElement>) => {
return ( return (
<DropdownMenuPrimitive.SubTrigger className="radix-menuitem dropdown-menu__submenu-trigger"> <DropdownMenuPrimitive.SubTrigger className="radix-menu-item dropdown-menu__submenu-trigger">
<div <div
{...rest} {...rest}
className={getDropdownMenuItemClassName(className)} className={getDropdownMenuItemClassName(className)}

View File

@ -65,7 +65,7 @@ const MainMenu = Object.assign(
<DropdownMenu.Content <DropdownMenu.Content
// style={{ zIndex: 11 }} // style={{ zIndex: 11 }}
sideOffset={device.isMobile ? 20 : undefined} sideOffset={device.isMobile ? 20 : undefined}
className="mainmenu-content" className="main-menu-content"
onClickOutside={onClickOutside} onClickOutside={onClickOutside}
onSelect={composeEventHandlers(onSelect, () => { onSelect={composeEventHandlers(onSelect, () => {
setAppState({ openMenu: null }); setAppState({ openMenu: null });