Naming, removing unused code.
This commit is contained in:
parent
8f8b6e7144
commit
bf0b2965e6
@ -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>
|
||||||
|
@ -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;
|
||||||
|
@ -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}
|
||||||
|
@ -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}
|
||||||
|
@ -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)}
|
||||||
|
@ -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 });
|
||||||
|
Loading…
x
Reference in New Issue
Block a user