diff --git a/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx b/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx index 7208971f0..c0d037661 100644 --- a/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx +++ b/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx @@ -502,6 +502,7 @@ export const GalleryEditPanel: React.FC = ({ ) } ids={formik.values.tag_ids} + hoverPlacement="right" /> diff --git a/ui/v2.5/src/components/Images/ImageDetails/ImageEditPanel.tsx b/ui/v2.5/src/components/Images/ImageDetails/ImageEditPanel.tsx index 9d7e55e9f..23e1a8996 100644 --- a/ui/v2.5/src/components/Images/ImageDetails/ImageEditPanel.tsx +++ b/ui/v2.5/src/components/Images/ImageDetails/ImageEditPanel.tsx @@ -279,6 +279,7 @@ export const ImageEditPanel: React.FC = ({ ) } ids={formik.values.tag_ids} + hoverPlacement="right" /> diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx index 1517db79e..ea4e3bc1e 100644 --- a/ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx +++ b/ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx @@ -899,6 +899,7 @@ export const SceneEditPanel: React.FC = ({ ) } ids={formik.values.tag_ids} + hoverPlacement="right" /> diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/SceneMarkerForm.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/SceneMarkerForm.tsx index 716f3ae6c..67f04ef36 100644 --- a/ui/v2.5/src/components/Scenes/SceneDetails/SceneMarkerForm.tsx +++ b/ui/v2.5/src/components/Scenes/SceneDetails/SceneMarkerForm.tsx @@ -94,6 +94,7 @@ export const SceneMarkerForm: React.FC = ({ } ids={fieldProps.field.value ? [fieldProps.field.value] : []} noSelectionString="Select/create tag..." + hoverPlacement="right" /> ); @@ -108,6 +109,7 @@ export const SceneMarkerForm: React.FC = ({ } ids={fieldProps.field.value} noSelectionString="Select/create tags..." + hoverPlacement="right" /> ); diff --git a/ui/v2.5/src/components/Shared/Select.tsx b/ui/v2.5/src/components/Shared/Select.tsx index 195c52bd7..4dfe4de8a 100644 --- a/ui/v2.5/src/components/Shared/Select.tsx +++ b/ui/v2.5/src/components/Shared/Select.tsx @@ -31,6 +31,7 @@ import { galleryTitle } from "src/core/galleries"; import { TagPopover } from "../Tags/TagPopover"; import { defaultMaxOptionsShown, IUIConfig } from "src/core/config"; import { useDebouncedSetState } from "src/hooks/debounce"; +import { Placement } from "react-bootstrap/esm/Overlay"; export type SelectObject = { id: string; @@ -832,9 +833,9 @@ export const MovieSelect: React.FC = (props) => { ); }; -export const TagSelect: React.FC = ( - props -) => { +export const TagSelect: React.FC< + IFilterProps & { excludeIds?: string[]; hoverPlacement?: Placement } +> = (props) => { const [tagAliases, setTagAliases] = useState>({}); const [allAliases, setAllAliases] = useState([]); const { data, loading } = useAllTagsForFilter(); @@ -890,7 +891,7 @@ export const TagSelect: React.FC = ( : optionProps.data.value; return ( - + ); diff --git a/ui/v2.5/src/components/Shared/TagLink.tsx b/ui/v2.5/src/components/Shared/TagLink.tsx index b8eca27ae..0049c3101 100644 --- a/ui/v2.5/src/components/Shared/TagLink.tsx +++ b/ui/v2.5/src/components/Shared/TagLink.tsx @@ -15,6 +15,7 @@ import { galleryTitle } from "src/core/galleries"; import * as GQL from "src/core/generated-graphql"; import { TagPopover } from "../Tags/TagPopover"; import { markerTitle } from "src/core/markers"; +import { Placement } from "react-bootstrap/esm/Overlay"; interface IFile { path: string; @@ -40,6 +41,7 @@ interface IProps { scene?: Partial>; gallery?: Partial; className?: string; + hoverPlacement?: Placement; } export const TagLink: React.FC = (props: IProps) => { @@ -84,7 +86,7 @@ export const TagLink: React.FC = (props: IProps) => { } return ( - + {title} diff --git a/ui/v2.5/src/components/Tags/TagDetails/TagEditPanel.tsx b/ui/v2.5/src/components/Tags/TagDetails/TagEditPanel.tsx index 24dbb952f..7a6e4a608 100644 --- a/ui/v2.5/src/components/Tags/TagDetails/TagEditPanel.tsx +++ b/ui/v2.5/src/components/Tags/TagDetails/TagEditPanel.tsx @@ -241,6 +241,7 @@ export const TagEditPanel: React.FC = ({ ...formik.values.child_ids, ]} creatable={false} + hoverPlacement="right" /> @@ -269,6 +270,7 @@ export const TagEditPanel: React.FC = ({ ...formik.values.parent_ids, ]} creatable={false} + hoverPlacement="right" /> diff --git a/ui/v2.5/src/components/Tags/TagPopover.tsx b/ui/v2.5/src/components/Tags/TagPopover.tsx index 38b220486..1edd2ea4f 100644 --- a/ui/v2.5/src/components/Tags/TagPopover.tsx +++ b/ui/v2.5/src/components/Tags/TagPopover.tsx @@ -6,9 +6,11 @@ import { useFindTag } from "../../core/StashService"; import { TagCard } from "./TagCard"; import { ConfigurationContext } from "../../hooks/Config"; import { IUIConfig } from "src/core/config"; +import { Placement } from "react-bootstrap/esm/Overlay"; interface ITagPopoverProps { id?: string; + placement?: Placement; } export const TagPopoverCard: React.FC = ({ id }) => { @@ -33,7 +35,11 @@ export const TagPopoverCard: React.FC = ({ id }) => { ); }; -export const TagPopover: React.FC = ({ id, children }) => { +export const TagPopover: React.FC = ({ + id, + children, + placement = "top", +}) => { const { configuration: config } = React.useContext(ConfigurationContext); const showTagCardOnHover = @@ -45,7 +51,7 @@ export const TagPopover: React.FC = ({ id, children }) => { return ( }