Kieran/zap.stream
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: show zap dialog on hover

Browse Source
This commit is contained in:
Alejandro Gomez
2023-07-03 22:56:20 +02:00
parent a8fe4df1fe
commit 2f38d0bffb
1 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/element/live-chat.tsx
View File

@ -16,7 +16,7 @@ import {
type ChangeEvent, type ChangeEvent,
type RefObject, type RefObject,
} from "react"; } from "react";
import { useOnClickOutside, useMediaQuery } from "usehooks-ts"; import { useHover, useOnClickOutside, useMediaQuery } from "usehooks-ts";
import data from "@emoji-mart/data"; import data from "@emoji-mart/data";
import Picker from "@emoji-mart/react"; import Picker from "@emoji-mart/react";
@ -227,6 +227,7 @@ function ChatMessage({
const ref = useRef(null); const ref = useRef(null);
const emojiRef = useRef(null); const emojiRef = useRef(null);
const isTablet = useMediaQuery("(max-width: 1020px)"); const isTablet = useMediaQuery("(max-width: 1020px)");
const isHovering = useHover(ref);
const [showZapDialog, setShowZapDialog] = useState(false); const [showZapDialog, setShowZapDialog] = useState(false);
const [showEmojiPicker, setShowEmojiPicker] = useState(false); const [showEmojiPicker, setShowEmojiPicker] = useState(false);
const profile = useUserProfile(System, ev.pubkey); const profile = useUserProfile(System, ev.pubkey);
@ -316,14 +317,15 @@ function ChatMessage({
style={ style={
isTablet isTablet
? { ? {
display: showZapDialog ? "flex" : "none", display: showZapDialog || isHovering ? "flex" : "none",
} }
: { : {
position: "fixed", position: "fixed",
top: topOffset - 12, top: topOffset - 12,
left: leftOffset - 32, left: leftOffset - 32,
opacity: showZapDialog ? 1 : 0, opacity: showZapDialog || isHovering ? 1 : 0,
pointerEvents: showZapDialog ? "auto" : "none", pointerEvents:
showZapDialog || isHovering ? "auto" : "none",
} }
} }
> >