diff --git a/src/common/layout/LayoutBadgeImageView.tsx b/src/common/layout/LayoutBadgeImageView.tsx index 75a6533..7162627 100644 --- a/src/common/layout/LayoutBadgeImageView.tsx +++ b/src/common/layout/LayoutBadgeImageView.tsx @@ -1,5 +1,6 @@ import { BadgeImageReadyEvent, GetEventDispatcher, GetSessionDataManager, NitroSprite, TextureUtils } from '@nitrots/nitro-renderer'; -import { CSSProperties, FC, useEffect, useMemo, useState } from 'react'; +import { CSSProperties, FC, useEffect, useMemo, useRef, useState } from 'react'; +import { createPortal } from 'react-dom'; import { GetConfigurationValue, LocalizeBadgeDescription, LocalizeBadgeName, LocalizeText } from '../../api'; import { Base, BaseProps } from '../Base'; @@ -17,6 +18,26 @@ export const LayoutBadgeImageView: FC = props => { const { badgeCode = null, isGroup = false, showInfo = false, customTitle = null, isGrayscale = false, scale = 1, classNames = [], style = {}, children = null, ...rest } = props; const [ imageElement, setImageElement ] = useState(null); + const [ tooltipPosition, setTooltipPosition ] = useState<{ top: number; left: number } | null>(null); + const badgeRef = useRef(null); + + const tooltipsEnabled = showInfo && GetConfigurationValue('badge.descriptions.enabled', true); + + const showTooltip = () => + { + if(!tooltipsEnabled || !badgeRef.current) return; + + const rect = badgeRef.current.getBoundingClientRect(); + const tooltipWidth = 210; + const gap = 10; + let left = rect.left - tooltipWidth - gap; + + if(left < gap) left = rect.right + gap; + + setTooltipPosition({ top: rect.top, left }); + }; + + const hideTooltip = () => setTooltipPosition(null); const getClassNames = useMemo(() => { @@ -116,12 +137,22 @@ export const LayoutBadgeImageView: FC = props => }, [ badgeCode, isGroup ]); return ( - - { (showInfo && GetConfigurationValue('badge.descriptions.enabled', true)) && - + + { tooltipsEnabled && tooltipPosition && createPortal( +
{ isGroup ? customTitle : LocalizeBadgeName(badgeCode) }
{ isGroup ? LocalizeText('group.badgepopup.body') : LocalizeBadgeDescription(badgeCode) }
- } +
, + document.body + ) } { children } ); diff --git a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx index 2e0797b..518bf7a 100644 --- a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx +++ b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx @@ -133,13 +133,7 @@ export const InfoStandWidgetUserView: FC = props = SendMessageComposer(new UserRelationshipsComposer(avatarInfo.webID)); return () => { - setIsEditingMotto(false); - setMotto(null); setRelationships(null); - setBackgroundId(null); - setStandId(null); - setOverlayId(null); - setCardBackgroundId(null); }; }, [avatarInfo]);