IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Shared:ContextMenu:Fixed the increase in the width of the second level menu on hover, when there is a scroll, or when the theme is dark. Added margins for the second menu level.

Browse Source
This commit is contained in:
Vlada Gazizova 2024-08-13 22:06:56 +03:00
parent fe7c290d38
commit f23d1f7e96
1 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/shared/components/context-menu/sub-components/SubMenu.tsx
View File

@ -158,13 +158,19 @@ const SubMenu = (props: {
const widthMaxContent = Math.max(...optionsWidth); const widthMaxContent = Math.max(...optionsWidth);
if (root) subListWidth = subListWidth || widthMaxContent; if (root) subListWidth = subListWidth || widthMaxContent;
else subListWidth = widthMaxContent; else if (!subMenuRef?.current?.style.width)
subListWidth = Math.max(subListWidth, widthMaxContent);
} }
if (subMenuRef.current) { if (subMenuRef.current) {
let subMenuRefTop = null; let subMenuRefTop = null;
if (!isMobile()) subMenuRef.current.style.width = `${subListWidth}px`; if (!isMobile()) {
if (root) subMenuRef.current.style.width = `${subListWidth}px`;
else if (!subMenuRef?.current?.style.width) {
subMenuRef.current.style.width = `${subListWidth}px`;
}
}
if (!isMobile() && !root) { if (!isMobile() && !root) {
const firstList = parentItem?.firstChild as HTMLElement; const firstList = parentItem?.firstChild as HTMLElement;
@ -218,6 +224,8 @@ const SubMenu = (props: {
} else { } else {
subMenuRef.current.style.left = `${itemOuterWidth}px`; subMenuRef.current.style.left = `${itemOuterWidth}px`;
if (!root) subMenuRef.current.style.marginLeft = `4px`;
if (!root && subListWidth > freeSpaceRight) { if (!root && subListWidth > freeSpaceRight) {
// If the menu extends beyond the screen // If the menu extends beyond the screen
const newWidth = freeSpaceRight - 3 * submenuListMargin; const newWidth = freeSpaceRight - 3 * submenuListMargin;
@ -236,6 +244,8 @@ const SubMenu = (props: {
if (notEnoughWidthRight && freeSpaceLeft > freeSpaceRight) { if (notEnoughWidthRight && freeSpaceLeft > freeSpaceRight) {
subMenuRef.current.style.left = `${-1 * subListWidth}px`; subMenuRef.current.style.left = `${-1 * subListWidth}px`;
if (!root) subMenuRef.current.style.marginLeft = `-4px`;
if ( if (
notEnoughWidthRight && notEnoughWidthRight &&
!root && !root &&