This commit is contained in:
parent
de6685ade3
commit
dffb33bfda
@ -99,16 +99,6 @@
|
|||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reaction-pill {
|
|
||||||
display: flex;
|
|
||||||
min-width: 1rem;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
user-select: none;
|
|
||||||
font-feature-settings: "tnum";
|
|
||||||
gap: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reaction-pill:not(.reacted):not(:hover) {
|
.reaction-pill:not(.reacted):not(:hover) {
|
||||||
color: var(--font-secondary-color);
|
color: var(--font-secondary-color);
|
||||||
}
|
}
|
||||||
|
22
packages/app/src/Components/Event/Note/AsyncFooterIcon.tsx
Normal file
22
packages/app/src/Components/Event/Note/AsyncFooterIcon.tsx
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
import classNames from "classnames";
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
import { AsyncIcon, AsyncIconProps } from "@/Components/Button/AsyncIcon";
|
||||||
|
import { formatShort } from "@/Utils/Number";
|
||||||
|
|
||||||
|
export const AsyncFooterIcon = (props: AsyncIconProps & { value: number }) => {
|
||||||
|
const mergedProps = {
|
||||||
|
...props,
|
||||||
|
iconSize: 18,
|
||||||
|
className: classNames(
|
||||||
|
"transition duration-200 ease-in-out flex flex-row reaction-pill cursor-pointer gap-2 items-center",
|
||||||
|
props.className,
|
||||||
|
),
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AsyncIcon {...mergedProps}>
|
||||||
|
{props.value > 0 && <div className="reaction-pill-number">{formatShort(props.value)}</div>}
|
||||||
|
</AsyncIcon>
|
||||||
|
);
|
||||||
|
};
|
@ -3,11 +3,11 @@ import { countLeadingZeros, NostrLink, TaggedNostrEvent } from "@snort/system";
|
|||||||
import { useEventReactions, useReactions, useUserProfile } from "@snort/system-react";
|
import { useEventReactions, useReactions, useUserProfile } from "@snort/system-react";
|
||||||
import { Menu, MenuItem } from "@szhsin/react-menu";
|
import { Menu, MenuItem } from "@szhsin/react-menu";
|
||||||
import classNames from "classnames";
|
import classNames from "classnames";
|
||||||
import React, { forwardRef, useEffect, useMemo, useState } from "react";
|
import React, { useEffect, useMemo, useState } from "react";
|
||||||
import { FormattedMessage, useIntl } from "react-intl";
|
import { FormattedMessage, useIntl } from "react-intl";
|
||||||
import { useLongPress } from "use-long-press";
|
import { useLongPress } from "use-long-press";
|
||||||
|
|
||||||
import { AsyncIcon, AsyncIconProps } from "@/Components/Button/AsyncIcon";
|
import { AsyncFooterIcon } from "@/Components/Event/Note/AsyncFooterIcon";
|
||||||
import { ZapsSummary } from "@/Components/Event/ZapsSummary";
|
import { ZapsSummary } from "@/Components/Event/ZapsSummary";
|
||||||
import Icon from "@/Components/Icons/Icon";
|
import Icon from "@/Components/Icons/Icon";
|
||||||
import SendSats from "@/Components/SendSats/SendSats";
|
import SendSats from "@/Components/SendSats/SendSats";
|
||||||
@ -16,7 +16,6 @@ import { useInteractionCache } from "@/Hooks/useInteractionCache";
|
|||||||
import useLogin from "@/Hooks/useLogin";
|
import useLogin from "@/Hooks/useLogin";
|
||||||
import { useNoteCreator } from "@/State/NoteCreator";
|
import { useNoteCreator } from "@/State/NoteCreator";
|
||||||
import { findTag, getDisplayName } from "@/Utils";
|
import { findTag, getDisplayName } from "@/Utils";
|
||||||
import { formatShort } from "@/Utils/Number";
|
|
||||||
import { Zapper, ZapTarget } from "@/Utils/Zapper";
|
import { Zapper, ZapTarget } from "@/Utils/Zapper";
|
||||||
import { ZapPoolController } from "@/Utils/ZapPoolController";
|
import { ZapPoolController } from "@/Utils/ZapPoolController";
|
||||||
import { useWallet } from "@/Wallet";
|
import { useWallet } from "@/Wallet";
|
||||||
@ -181,6 +180,7 @@ export default function NoteFooter(props: NoteFooterProps) {
|
|||||||
if (pow) {
|
if (pow) {
|
||||||
return (
|
return (
|
||||||
<AsyncFooterIcon
|
<AsyncFooterIcon
|
||||||
|
className={"hidden md:flex flex-none min-w-[50px] md:min-w-[80px]"}
|
||||||
title={formatMessage({ defaultMessage: "Proof of Work", id: "grQ+mI" })}
|
title={formatMessage({ defaultMessage: "Proof of Work", id: "grQ+mI" })}
|
||||||
iconName="diamond"
|
iconName="diamond"
|
||||||
value={pow}
|
value={pow}
|
||||||
@ -193,7 +193,7 @@ export default function NoteFooter(props: NoteFooterProps) {
|
|||||||
const targets = getZapTarget();
|
const targets = getZapTarget();
|
||||||
if (targets) {
|
if (targets) {
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-row gap-4 items-center">
|
<div className="flex flex-row flex-none min-w-[50px] md:min-w-[80px] gap-4 items-center">
|
||||||
<AsyncFooterIcon
|
<AsyncFooterIcon
|
||||||
className={didZap ? "reacted text-nostr-orange" : "hover:text-nostr-orange"}
|
className={didZap ? "reacted text-nostr-orange" : "hover:text-nostr-orange"}
|
||||||
{...longPress()}
|
{...longPress()}
|
||||||
@ -215,7 +215,10 @@ export default function NoteFooter(props: NoteFooterProps) {
|
|||||||
<Menu
|
<Menu
|
||||||
menuButton={
|
menuButton={
|
||||||
<AsyncFooterIcon
|
<AsyncFooterIcon
|
||||||
className={hasReposted() ? "reacted text-nostr-blue" : "hover:text-nostr-blue"}
|
className={classNames(
|
||||||
|
"flex-none min-w-[50px] md:min-w-[80px]",
|
||||||
|
hasReposted() ? "reacted text-nostr-blue" : "hover:text-nostr-blue",
|
||||||
|
)}
|
||||||
iconName="repeat"
|
iconName="repeat"
|
||||||
title={formatMessage({ defaultMessage: "Repost", id: "JeoS4y" })}
|
title={formatMessage({ defaultMessage: "Repost", id: "JeoS4y" })}
|
||||||
value={reposts.length}
|
value={reposts.length}
|
||||||
@ -256,7 +259,10 @@ export default function NoteFooter(props: NoteFooterProps) {
|
|||||||
const reacted = hasReacted("+");
|
const reacted = hasReacted("+");
|
||||||
return (
|
return (
|
||||||
<AsyncFooterIcon
|
<AsyncFooterIcon
|
||||||
className={reacted ? "reacted text-nostr-red" : "hover:text-nostr-red"}
|
className={classNames(
|
||||||
|
"flex-none min-w-[50px] md:min-w-[80px]",
|
||||||
|
reacted ? "reacted text-nostr-red" : "hover:text-nostr-red",
|
||||||
|
)}
|
||||||
iconName={reacted ? "heart-solid" : "heart"}
|
iconName={reacted ? "heart-solid" : "heart"}
|
||||||
title={formatMessage({ defaultMessage: "Like", id: "qtWLmt" })}
|
title={formatMessage({ defaultMessage: "Like", id: "qtWLmt" })}
|
||||||
value={positive.length}
|
value={positive.length}
|
||||||
@ -272,7 +278,10 @@ export default function NoteFooter(props: NoteFooterProps) {
|
|||||||
if (readonly) return;
|
if (readonly) return;
|
||||||
return (
|
return (
|
||||||
<AsyncFooterIcon
|
<AsyncFooterIcon
|
||||||
className={note.show ? "reacted text-nostr-purple" : "hover:text-nostr-purple"}
|
className={classNames(
|
||||||
|
"flex-none min-w-[50px] md:min-w-[80px]",
|
||||||
|
note.show ? "reacted text-nostr-purple" : "hover:text-nostr-purple",
|
||||||
|
)}
|
||||||
iconName="reply"
|
iconName="reply"
|
||||||
title={formatMessage({ defaultMessage: "Reply", id: "9HU8vw" })}
|
title={formatMessage({ defaultMessage: "Reply", id: "9HU8vw" })}
|
||||||
value={props.replies ?? 0}
|
value={props.replies ?? 0}
|
||||||
@ -292,7 +301,7 @@ export default function NoteFooter(props: NoteFooterProps) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-row justify-between gap-2 overflow-hidden w-[360px] flex-grow max-w-full h-6">
|
<div className="flex flex-row gap-4 overflow-hidden max-w-full h-6 items-center">
|
||||||
{replyIcon()}
|
{replyIcon()}
|
||||||
{repostIcon()}
|
{repostIcon()}
|
||||||
{reactionIcon()}
|
{reactionIcon()}
|
||||||
@ -302,19 +311,3 @@ export default function NoteFooter(props: NoteFooterProps) {
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const AsyncFooterIcon = forwardRef((props: AsyncIconProps & { value: number }, ref) => {
|
|
||||||
const mergedProps = {
|
|
||||||
...props,
|
|
||||||
iconSize: 18,
|
|
||||||
className: classNames("transition duration-200 ease-in-out reaction-pill cursor-pointer", props.className),
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<AsyncIcon ref={ref} {...mergedProps}>
|
|
||||||
{props.value > 0 && <div className="reaction-pill-number">{formatShort(props.value)}</div>}
|
|
||||||
</AsyncIcon>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
AsyncFooterIcon.displayName = "AsyncFooterIcon";
|
|
||||||
|
Loading…
Reference in New Issue
Block a user