diff --git a/src/frontend/app-common/app-menu.tsx b/src/frontend/app-common/app-menu.tsx index b417ff82..c634db1f 100644 --- a/src/frontend/app-common/app-menu.tsx +++ b/src/frontend/app-common/app-menu.tsx @@ -1,5 +1,7 @@ -import { ReactNode } from "react"; -import { FloatingPosition, Menu } from "@mantine/core"; +import { PropsWithChildren, ReactNode } from "react"; +import { FloatingPosition, Menu, ActionIcon } from "@mantine/core"; +import { IconDots } from "@tabler/icons-react"; +import { IconSize } from "../common/style-constants"; interface AppContextMenuProps { menuItems: ReactNode; @@ -56,3 +58,22 @@ export function AppContextMenu(props: AppContextMenuProps): ReactNode { ); } + +/** + * An explicit button which opens a menu with the given items. Used alongside + * the right-click context menu so the menu is reachable without a right-click. + */ +export function MenuButton(props: PropsWithChildren): ReactNode { + return ( + + e.stopPropagation()} + > + + + + ); +} diff --git a/src/frontend/cards/card-components.tsx b/src/frontend/cards/card-components.tsx index 75a0fdd4..5eeb07ac 100644 --- a/src/frontend/cards/card-components.tsx +++ b/src/frontend/cards/card-components.tsx @@ -1,6 +1,5 @@ -import { ActionIcon, Badge, Group, Menu, Table, Text } from "@mantine/core"; +import { Badge, Group, Menu, Table, Text } from "@mantine/core"; import { - IconDots, IconExternalLink, IconEyeOff, IconLink, @@ -11,7 +10,7 @@ import { import { IconSize } from "../common/style-constants"; import { copyUrlToClipboard, makeUrl, openUrlInNewTab } from "../common/url"; import { PropsWithChildren, ReactNode, useCallback } from "react"; -import { AppContextMenu } from "../app-common/app-menu"; +import { AppContextMenu, MenuButton } from "../app-common/app-menu"; import { SearchHit } from "../search/search"; import { SearchHitTitle } from "../search/search-results"; import { CardThumbnail } from "../insert/thumbnail"; @@ -31,13 +30,14 @@ import { useReloadThumbnailMutation } from "./card-hooks"; interface OpenDocumentItemsProps { path: DocumentPath; + configuration?: Configuration; } /** * Menu items which can be used to open or copy a link to a document. */ export function OpenDocumentItems(props: OpenDocumentItemsProps) { - const url = makeUrl(props.path); + const url = makeUrl(props.path, props.configuration); return ( <> - e.stopPropagation()} - > - - - - ); -} - /** * Wraps one or more admin-only menu items into an Admin submenu. */ diff --git a/src/frontend/cards/insertable-card.tsx b/src/frontend/cards/insertable-card.tsx index f28c227c..b83f5517 100644 --- a/src/frontend/cards/insertable-card.tsx +++ b/src/frontend/cards/insertable-card.tsx @@ -15,6 +15,7 @@ import { InsertableOut, LibraryOut } from "../../shared/api-models"; +import { Configuration } from "../../shared/configuration-models"; import { ElementType } from "../../shared/types"; import { SearchHit } from "../search/search"; import { @@ -112,26 +113,35 @@ export function InsertableCard(props: InsertableCardProps): ReactNode { interface InsertableMenuItemsProps { favorite: Favorite | undefined; insertable: InsertableOut; + inInsertMenu?: boolean; + configuration?: Configuration; } export function InsertableMenuItems( props: InsertableMenuItemsProps ): ReactNode { - const { favorite, insertable } = props; + const { favorite, insertable, inInsertMenu, configuration } = props; return ( <> - - + {!inInsertMenu && ( + <> + + + + )} - + diff --git a/src/frontend/common/url.tsx b/src/frontend/common/url.tsx index d93e6834..c931eca0 100644 --- a/src/frontend/common/url.tsx +++ b/src/frontend/common/url.tsx @@ -11,6 +11,10 @@ import { notifications } from "@mantine/notifications"; import { IconLink } from "@tabler/icons-react"; import { IconSize } from "./style-constants"; +export function makeUrl( + path: DocumentPath, + configuration?: Record +): string; export function makeUrl(path: DocumentPath): string; export function makeUrl(path: InstancePath): string; export function makeUrl(path: ElementPath): string; diff --git a/src/frontend/insert/insert-menu.tsx b/src/frontend/insert/insert-menu.tsx index 8b10bbc3..58254ab3 100644 --- a/src/frontend/insert/insert-menu.tsx +++ b/src/frontend/insert/insert-menu.tsx @@ -16,6 +16,8 @@ import { NotificationAction, renderNotification } from "../common/notifications"; +import { MenuButton } from "../app-common/app-menu"; +import { InsertableMenuItems } from "../cards/insertable-card"; import { ConfigurationWrapper } from "./configurations"; import { useInsertMutation } from "./insert-hooks"; import { Configuration } from "../../shared/configuration-models"; @@ -94,6 +96,14 @@ function InsertMenuContent(props: InsertMenuContentProps): ReactNode { {parameters} + + +