튜토리얼 수정
parent
2b975a09eb
commit
6675b5301f
|
|
@ -7304,7 +7304,7 @@
|
||||||
top: 16px;
|
top: 16px;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
z-index: 100;
|
z-index: 10100;
|
||||||
background: rgba(0, 34, 36, 0.3);
|
background: rgba(0, 34, 36, 0.3);
|
||||||
border: 1px solid rgba(229, 241, 242, 0.2);
|
border: 1px solid rgba(229, 241, 242, 0.2);
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,7 @@ interface Rect {
|
||||||
left: number;
|
left: number;
|
||||||
width: number;
|
width: number;
|
||||||
height: number;
|
height: number;
|
||||||
|
bottom: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface TooltipPos {
|
interface TooltipPos {
|
||||||
|
|
@ -29,7 +30,7 @@ function getTargetRect(selector: string): Rect | null {
|
||||||
const el = document.querySelector(selector);
|
const el = document.querySelector(selector);
|
||||||
if (!el) return null;
|
if (!el) return null;
|
||||||
const r = el.getBoundingClientRect();
|
const r = el.getBoundingClientRect();
|
||||||
return { top: r.top, left: r.left, width: r.width, height: r.height };
|
return { top: r.top, left: r.left, width: r.width, height: r.height, bottom: r.bottom };
|
||||||
}
|
}
|
||||||
|
|
||||||
function getSpotlightRect(
|
function getSpotlightRect(
|
||||||
|
|
@ -48,6 +49,7 @@ function getSpotlightRect(
|
||||||
|
|
||||||
return {
|
return {
|
||||||
top,
|
top,
|
||||||
|
bottom,
|
||||||
left,
|
left,
|
||||||
width: Math.max(0, right - left),
|
width: Math.max(0, right - left),
|
||||||
height: Math.max(0, bottom - top),
|
height: Math.max(0, bottom - top),
|
||||||
|
|
@ -175,6 +177,12 @@ const TutorialOverlay: React.FC<TutorialOverlayProps> = ({
|
||||||
|
|
||||||
if (!hint) return null;
|
if (!hint) return null;
|
||||||
|
|
||||||
|
const isTargetVisible = targetRect
|
||||||
|
? targetRect.top + 60 < window.innerHeight && targetRect.bottom > 60
|
||||||
|
: true;
|
||||||
|
|
||||||
|
if (!isTargetVisible) return null;
|
||||||
|
|
||||||
const spotlightPadding = hint.spotlightPadding ?? PADDING;
|
const spotlightPadding = hint.spotlightPadding ?? PADDING;
|
||||||
const spotlightRect = (targetRect && !hint.noSpotlight) ? getSpotlightRect(targetRect, spotlightPadding, hint.spotlightPaddingOverride) : null;
|
const spotlightRect = (targetRect && !hint.noSpotlight) ? getSpotlightRect(targetRect, spotlightPadding, hint.spotlightPaddingOverride) : null;
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue