inventree/InvenTree
2
0
Fork 0
mirror of https://github.com/inventree/InvenTree.git synced 2025-06-16 20:15:44 +00:00
Code Activity

Cleanup imgae hover

Browse Source
This commit is contained in:
Oliver
2024-03-01 05:06:10 +00:00
parent 0cdc7914d8
commit 9c21bda3cd
1 changed files with 24 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/frontend/src/components/details/DetailsImage.tsx
View File

@ -14,7 +14,7 @@ import {
import { Dropzone, FileWithPath, IMAGE_MIME_TYPE } from '@mantine/dropzone'; import { Dropzone, FileWithPath, IMAGE_MIME_TYPE } from '@mantine/dropzone';
import { useDisclosure, useHover } from '@mantine/hooks'; import { useDisclosure, useHover } from '@mantine/hooks';
import { modals } from '@mantine/modals'; import { modals } from '@mantine/modals';
import { useState } from 'react'; import { useMemo, useState } from 'react';
import { api } from '../../App'; import { api } from '../../App';
import { UserRoles } from '../../enums/Roles'; import { UserRoles } from '../../enums/Roles';
@ -340,6 +340,15 @@ export function DetailsImage(props: DetailImageProps) {
const permissions = useUserState(); const permissions = useUserState();
const hasOverlay: boolean = useMemo(() => {
return (
props.imageActions?.selectExisting ||
props.imageActions?.uploadFile ||
props.imageActions?.deleteFile ||
false
);
}, [props.imageActions]);
const expandImage = (event: any) => { const expandImage = (event: any) => {
event?.preventDefault(); event?.preventDefault();
event?.stopPropagation(); event?.stopPropagation();
@ -360,18 +369,20 @@ export function DetailsImage(props: DetailImageProps) {
width={IMAGE_DIMENSION} width={IMAGE_DIMENSION}
onClick={expandImage} onClick={expandImage}
/> />
{permissions.hasChangeRole(props.appRole) && hovered && ( {permissions.hasChangeRole(props.appRole) &&
<Overlay color="black" opacity={0.8} onClick={expandImage}> hasOverlay &&
<ImageActionButtons hovered && (
visible={hovered} <Overlay color="black" opacity={0.8} onClick={expandImage}>
actions={props.imageActions} <ImageActionButtons
apiPath={props.apiPath} visible={hovered}
hasImage={props.src ? true : false} actions={props.imageActions}
pk={props.pk} apiPath={props.apiPath}
setImage={setAndRefresh} hasImage={props.src ? true : false}
/> pk={props.pk}
</Overlay> setImage={setAndRefresh}
)} />
</Overlay>
)}
</> </>
</AspectRatio> </AspectRatio>
</> </>