Kieran/snort
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Footer button titles

Browse Source
This commit is contained in:
Kieran 2023-08-18 19:11:05 +01:00
parent a5be4da2e8
commit 2720854b72
No known key found for this signature in database
GPG Key ID: DE71CEB3925BE941
1 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
packages/app/src/Element/NoteFooter.tsx
View File

@ -189,6 +189,7 @@ export default function NoteFooter(props: NoteFooterProps) {
<AsyncFooterIcon <AsyncFooterIcon
className={didZap ? "reacted" : ""} className={didZap ? "reacted" : ""}
{...longPress()} {...longPress()}
title={formatMessage({ defaultMessage: "Zap" })}
iconName={wallet?.isReady() ? "zapFast" : "zap"} iconName={wallet?.isReady() ? "zapFast" : "zap"}
value={zapTotal} value={zapTotal}
onClick={e => fastZap(e)} onClick={e => fastZap(e)}
@ -203,13 +204,14 @@ export default function NoteFooter(props: NoteFooterProps) {
<AsyncFooterIcon <AsyncFooterIcon
className={hasReposted() ? "reacted" : ""} className={hasReposted() ? "reacted" : ""}
iconName="repeat" iconName="repeat"
title={formatMessage({ defaultMessage: "Repost" })}
value={reposts.length} value={reposts.length}
onClick={() => repost()} onClick={() => repost()}
/> />
); );
} }
function reactionIcons() { function reactionIcon() {
if (!prefs.enableReactions) { if (!prefs.enableReactions) {
return null; return null;
} }
@ -218,12 +220,25 @@ export default function NoteFooter(props: NoteFooterProps) {
<AsyncFooterIcon <AsyncFooterIcon
className={reacted ? "reacted" : ""} className={reacted ? "reacted" : ""}
iconName={reacted ? "heart-solid" : "heart"} iconName={reacted ? "heart-solid" : "heart"}
title={formatMessage({ defaultMessage: "Like" })}
value={positive.length} value={positive.length}
onClick={() => react(prefs.reactionEmoji)} onClick={() => react(prefs.reactionEmoji)}
/> />
); );
} }
function replyIcon() {
return (
<AsyncFooterIcon
className={showNoteCreatorModal ? "reacted" : ""}
iconName="reply"
title={formatMessage({ defaultMessage: "Reply" })}
value={0}
onClick={async () => handleReplyButtonClick()}
/>
);
}
const handleReplyButtonClick = () => { const handleReplyButtonClick = () => {
if (replyTo?.id !== ev.id) { if (replyTo?.id !== ev.id) {
dispatch(reset()); dispatch(reset());
@ -238,13 +253,9 @@ export default function NoteFooter(props: NoteFooterProps) {
<div className="footer"> <div className="footer">
<div className="footer-reactions"> <div className="footer-reactions">
{tipButton()} {tipButton()}
{reactionIcons()} {reactionIcon()}
{repostIcon()} {repostIcon()}
<AsyncFooterIcon {replyIcon()}
className={showNoteCreatorModal ? "reacted" : ""}
iconName="reply"
onClick={async () => handleReplyButtonClick()}
/>
{powIcon()} {powIcon()}
</div> </div>
{willRenderNoteCreator && <NoteCreator />} {willRenderNoteCreator && <NoteCreator />}
@ -265,7 +276,7 @@ export default function NoteFooter(props: NoteFooterProps) {
interface AsyncFooterIconProps extends HTMLProps<HTMLDivElement> { interface AsyncFooterIconProps extends HTMLProps<HTMLDivElement> {
iconName: string; iconName: string;
value?: number; value: number;
loading?: boolean; loading?: boolean;
onClick?: (e: React.MouseEvent<HTMLDivElement>) => Promise<void>; onClick?: (e: React.MouseEvent<HTMLDivElement>) => Promise<void>;
} }
@ -291,7 +302,7 @@ function AsyncFooterIcon(props: AsyncFooterIconProps) {
className={`reaction-pill${props.className ? ` ${props.className}` : ""}`} className={`reaction-pill${props.className ? ` ${props.className}` : ""}`}
onClick={e => handleClick(e)}> onClick={e => handleClick(e)}>
{loading ? <Spinner /> : <Icon name={props.iconName} size={18} />} {loading ? <Spinner /> : <Icon name={props.iconName} size={18} />}
{props.value && <div className="reaction-pill-number">{formatShort(props.value)}</div>} {props.value > 0 && <div className="reaction-pill-number">{formatShort(props.value)}</div>}
</div> </div>
); );
} }