Mirrors/stash
1
0
Fork 0
mirror of https://github.com/stashapp/stash.git synced 2025-12-17 20:34:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

Place popover to right on edit pages (#3939)

Browse Source
This commit is contained in:
WithoutPants
2023-07-26 09:23:50 +10:00
committed by GitHub
parent 40124ee5a4
commit eb8a69e326
8 changed files with 23 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx
View File

@@ -502,6 +502,7 @@ export const GalleryEditPanel: React.FC<IProps> = ({
)
}
ids={formik.values.tag_ids}
hoverPlacement="right"
/>
</Col>
</Form.Group>

1
ui/v2.5/src/components/Images/ImageDetails/ImageEditPanel.tsx
View File

@@ -279,6 +279,7 @@ export const ImageEditPanel: React.FC<IProps> = ({
)
}
ids={formik.values.tag_ids}
hoverPlacement="right"
/>
</Col>
</Form.Group>

1
ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx
View File

@@ -899,6 +899,7 @@ export const SceneEditPanel: React.FC<IProps> = ({
)
}
ids={formik.values.tag_ids}
hoverPlacement="right"
/>
</Col>
</Form.Group>

2
ui/v2.5/src/components/Scenes/SceneDetails/SceneMarkerForm.tsx
View File

@@ -94,6 +94,7 @@ export const SceneMarkerForm: React.FC<ISceneMarkerForm> = ({
}
ids={fieldProps.field.value ? [fieldProps.field.value] : []}
noSelectionString="Select/create tag..."
hoverPlacement="right"
/>
);
@@ -108,6 +109,7 @@ export const SceneMarkerForm: React.FC<ISceneMarkerForm> = ({
}
ids={fieldProps.field.value}
noSelectionString="Select/create tags..."
hoverPlacement="right"
/>
);

9
ui/v2.5/src/components/Shared/Select.tsx
View File

@@ -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<IFilterProps> = (props) => {
);
};
export const TagSelect: React.FC<IFilterProps & { excludeIds?: string[] }> = (
props
) => {
export const TagSelect: React.FC<
IFilterProps & { excludeIds?: string[]; hoverPlacement?: Placement }
> = (props) => {
const [tagAliases, setTagAliases] = useState<Record<string, string[]>>({});
const [allAliases, setAllAliases] = useState<string[]>([]);
const { data, loading } = useAllTagsForFilter();
@@ -890,7 +891,7 @@ export const TagSelect: React.FC<IFilterProps & { excludeIds?: string[] }> = (
: optionProps.data.value;
return (
<TagPopover id={id}>
<TagPopover id={id} placement={props.hoverPlacement}>
<reactSelectComponents.Option {...thisOptionProps} />
</TagPopover>
);

4
ui/v2.5/src/components/Shared/TagLink.tsx
View File

@@ -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<Pick<SceneDataFragment, "id" | "title" | "files">>;
gallery?: Partial<IGallery>;
className?: string;
hoverPlacement?: Placement;
}
export const TagLink: React.FC<IProps> = (props: IProps) => {
@@ -84,7 +86,7 @@ export const TagLink: React.FC<IProps> = (props: IProps) => {
}
return (
<Badge className={cx("tag-item", props.className)} variant="secondary">
<TagPopover id={id}>
<TagPopover id={id} placement={props.hoverPlacement}>
<Link to={link}>{title}</Link>
</TagPopover>
</Badge>

2
ui/v2.5/src/components/Tags/TagDetails/TagEditPanel.tsx
View File

@@ -241,6 +241,7 @@ export const TagEditPanel: React.FC<ITagEditPanel> = ({
...formik.values.child_ids,
]}
creatable={false}
hoverPlacement="right"
/>
</Col>
</Form.Group>
@@ -269,6 +270,7 @@ export const TagEditPanel: React.FC<ITagEditPanel> = ({
...formik.values.parent_ids,
]}
creatable={false}
hoverPlacement="right"
/>
</Col>
</Form.Group>

10
ui/v2.5/src/components/Tags/TagPopover.tsx
View File

@@ -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<ITagPopoverCardProps> = ({ id }) => {
@@ -33,7 +35,11 @@ export const TagPopoverCard: React.FC<ITagPopoverCardProps> = ({ id }) => {
);
};
export const TagPopover: React.FC<ITagPopoverProps> = ({ id, children }) => {
export const TagPopover: React.FC<ITagPopoverProps> = ({
id,
children,
placement = "top",
}) => {
const { configuration: config } = React.useContext(ConfigurationContext);
const showTagCardOnHover =
@@ -45,7 +51,7 @@ export const TagPopover: React.FC<ITagPopoverProps> = ({ id, children }) => {
return (
<HoverPopover
placement={"top"}
placement={placement}
enterDelay={500}
leaveDelay={100}
content={<TagPopoverCard id={id} />}