xfox111/TabsAsideExtension
1
0
Fork 0
mirror of https://github.com/XFox111/TabsAsideExtension.git synced 2026-04-22 07:58:01 +03:00
Code Wiki Activity

fix: collection context menus flickering in Firefox popup view

Browse Source
This commit is contained in:
Eugene Fox
2025-07-13 16:20:17 +03:00
parent 53adbd4f75
commit eeefd1feff
3 changed files with 16 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
entrypoints/sidepanel/components/collections/CollectionHeader.tsx
+4 -3
View File
@@ -12,6 +12,7 @@ import saveTabsToCollection from "@/utils/saveTabsToCollection";
export default function CollectionHeader({ dragHandleRef, dragHandleProps }: CollectionHeaderProps): React.ReactElement export default function CollectionHeader({ dragHandleRef, dragHandleProps }: CollectionHeaderProps): React.ReactElement
{ {
const [contextOpen, setContextOpen] = useState<boolean>(false);
const [listLocation] = useSettings("listLocation"); const [listLocation] = useSettings("listLocation");
const isTab: boolean = listLocation === "tab" || listLocation === "pinned"; const isTab: boolean = listLocation === "tab" || listLocation === "pinned";
const { updateCollection } = useCollections(); const { updateCollection } = useCollections();
@@ -53,7 +54,7 @@ export default function CollectionHeader({ dragHandleRef, dragHandleProps }: Col
mergeClasses( mergeClasses(
cls.toolbar, cls.toolbar,
"CollectionView__toolbar", "CollectionView__toolbar",
alwaysShowToolbars === true && cls.showToolbar (alwaysShowToolbars === true || contextOpen) && cls.showToolbar
) } ) }
> >
{ tabCount < 1 ? { tabCount < 1 ?
@@ -61,10 +62,10 @@ export default function CollectionHeader({ dragHandleRef, dragHandleProps }: Col
{ isTab ? i18n.t("collections.menu.add_all") : i18n.t("collections.menu.add_selected") } { isTab ? i18n.t("collections.menu.add_all") : i18n.t("collections.menu.add_selected") }
</Button> </Button>
: :
<OpenCollectionButton /> <OpenCollectionButton onOpenChange={ (_, e) => setContextOpen(e.open) } />
} }
<CollectionMoreButton onAddSelected={ handleAddSelected } /> <CollectionMoreButton onAddSelected={ handleAddSelected } onOpenChange={ (_, e) => setContextOpen(e.open) } />
</div> </div>
</div> </div>
); );
entrypoints/sidepanel/components/collections/CollectionMoreButton.tsx
+4 -3
View File
@@ -1,14 +1,14 @@
import { useDialog } from "@/contexts/DialogProvider"; import { useDialog } from "@/contexts/DialogProvider";
import { useDangerStyles } from "@/hooks/useDangerStyles"; import { useDangerStyles } from "@/hooks/useDangerStyles";
import useSettings from "@/hooks/useSettings"; import useSettings from "@/hooks/useSettings";
import { Button, Menu, MenuDivider, MenuItem, MenuList, MenuPopover, MenuTrigger, Tooltip } from "@fluentui/react-components"; import { Button, Menu, MenuDivider, MenuItem, MenuList, MenuOpenChangeData, MenuOpenEvent, MenuPopover, MenuTrigger, Tooltip } from "@fluentui/react-components";
import * as ic from "@fluentui/react-icons"; import * as ic from "@fluentui/react-icons";
import CollectionContext, { CollectionContextType } from "../../contexts/CollectionContext"; import CollectionContext, { CollectionContextType } from "../../contexts/CollectionContext";
import { useCollections } from "../../contexts/CollectionsProvider"; import { useCollections } from "../../contexts/CollectionsProvider";
import exportCollectionToBookmarks from "../../utils/exportCollectionToBookmarks"; import exportCollectionToBookmarks from "../../utils/exportCollectionToBookmarks";
import EditDialog from "../EditDialog"; import EditDialog from "../EditDialog";
export default function CollectionMoreButton({ onAddSelected }: CollectionMoreButtonProps): React.ReactElement export default function CollectionMoreButton({ onAddSelected, onOpenChange }: CollectionMoreButtonProps): React.ReactElement
{ {
const [listLocation] = useSettings("listLocation"); const [listLocation] = useSettings("listLocation");
const isTab: boolean = listLocation === "tab" || listLocation === "pinned"; const isTab: boolean = listLocation === "tab" || listLocation === "pinned";
@@ -56,7 +56,7 @@ export default function CollectionMoreButton({ onAddSelected }: CollectionMoreBu
); );
return ( return (
<Menu> <Menu onOpenChange={ onOpenChange }>
<Tooltip relationship="label" content={ i18n.t("common.tooltips.more") }> <Tooltip relationship="label" content={ i18n.t("common.tooltips.more") }>
<MenuTrigger> <MenuTrigger>
<Button appearance="subtle" icon={ <ic.MoreVertical20Regular /> } /> <Button appearance="subtle" icon={ <ic.MoreVertical20Regular /> } />
@@ -94,4 +94,5 @@ export default function CollectionMoreButton({ onAddSelected }: CollectionMoreBu
export type CollectionMoreButtonProps = export type CollectionMoreButtonProps =
{ {
onAddSelected?: () => void; onAddSelected?: () => void;
onOpenChange?: (e: MenuOpenEvent, data: MenuOpenChangeData) => void;
}; };
entrypoints/sidepanel/components/collections/OpenCollectionButton.tsx
+8 -3
View File
@@ -1,13 +1,13 @@
import { useDialog } from "@/contexts/DialogProvider"; import { useDialog } from "@/contexts/DialogProvider";
import useSettings from "@/hooks/useSettings"; import useSettings from "@/hooks/useSettings";
import browserLocaleKey from "@/utils/browserLocaleKey"; import browserLocaleKey from "@/utils/browserLocaleKey";
import { Menu, MenuButtonProps, MenuItem, MenuList, MenuPopover, MenuTrigger, SplitButton } from "@fluentui/react-components"; import { Menu, MenuButtonProps, MenuItem, MenuList, MenuOpenChangeData, MenuOpenEvent, MenuPopover, MenuTrigger, SplitButton } from "@fluentui/react-components";
import * as ic from "@fluentui/react-icons"; import * as ic from "@fluentui/react-icons";
import CollectionContext, { CollectionContextType } from "../../contexts/CollectionContext"; import CollectionContext, { CollectionContextType } from "../../contexts/CollectionContext";
import { useCollections } from "../../contexts/CollectionsProvider"; import { useCollections } from "../../contexts/CollectionsProvider";
import { openCollection } from "../../utils/opener"; import { openCollection } from "../../utils/opener";
export default function OpenCollectionButton(): React.ReactElement export default function OpenCollectionButton({ onOpenChange }: OpenCollectionButtonProps): React.ReactElement
{ {
const [defaultAction] = useSettings("defaultRestoreAction"); const [defaultAction] = useSettings("defaultRestoreAction");
const { removeItem } = useCollections(); const { removeItem } = useCollections();
@@ -54,7 +54,7 @@ export default function OpenCollectionButton(): React.ReactElement
}; };
return ( return (
<Menu> <Menu onOpenChange={ onOpenChange }>
<MenuTrigger disableButtonEnhancement> <MenuTrigger disableButtonEnhancement>
{ (triggerProps: MenuButtonProps) => defaultAction === "restore" ? { (triggerProps: MenuButtonProps) => defaultAction === "restore" ?
<SplitButton <SplitButton
@@ -95,3 +95,8 @@ export default function OpenCollectionButton(): React.ReactElement
</Menu> </Menu>
); );
} }
export type OpenCollectionButtonProps =
{
onOpenChange?: (e: MenuOpenEvent, data: MenuOpenChangeData) => void;
};