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

Add note context menu

Browse Source
This commit is contained in:
Kieran
2023-01-20 22:59:26 +00:00
parent 34762d7039
commit e4b317f634
6 changed files with 146 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/Element/NoteFooter.tsx
View File

@ -1,11 +1,12 @@
import { useMemo, useState } from "react";
import { useSelector } from "react-redux";
import { faHeart, faReply, faThumbsDown, faTrash, faBolt, faRepeat } from "@fortawesome/free-solid-svg-icons";
import { faHeart, faReply, faThumbsDown, faTrash, faBolt, faRepeat, faEllipsisVertical, faShareNodes } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Menu, MenuItem } from '@szhsin/react-menu';
import { formatShort } from "Number";
import useEventPublisher from "Feed/EventPublisher";
import { getReactions, normalizeReaction, Reaction } from "Util";
import { getReactions, hexToBech32, normalizeReaction, Reaction } from "Util";
import { NoteCreator } from "Element/NoteCreator";
import LNURLTip from "Element/LNURLTip";
import useProfile from "Feed/ProfileFeed";
@ -79,7 +80,7 @@ export default function NoteFooter(props: NoteFooterProps) {
if (service) {
return (
<>
<div className="reaction-pill" onClick={(e) => setTip(true)}>
<div className="reaction-pill" onClick={() => setTip(true)}>
<div className="reaction-pill-icon">
<FontAwesomeIcon icon={faBolt} />
</div>
@ -111,7 +112,7 @@ export default function NoteFooter(props: NoteFooterProps) {
}
return (
<>
<div className={`reaction-pill ${hasReacted('+') ? 'reacted' : ''} `} onClick={(e) => react("+")}>
<div className={`reaction-pill ${hasReacted('+') ? 'reacted' : ''} `} onClick={() => react("+")}>
<div className="reaction-pill-icon">
<FontAwesomeIcon icon={faHeart} />
</div>
@ -119,19 +120,57 @@ export default function NoteFooter(props: NoteFooterProps) {
{formatShort(groupReactions[Reaction.Positive])}
</div>
</div>
<div className={`reaction-pill ${hasReacted('-') ? 'reacted' : ''}`} onClick={(e) => react("-")}>
<div className="reaction-pill-icon">
<FontAwesomeIcon icon={faThumbsDown} />
</div>
<div className="reaction-pill-number">
{formatShort(groupReactions[Reaction.Negative])}
</div>
</div>
{repostIcon()}
</>
)
}
async function share() {
const url = `${window.location.protocol}//${window.location.host}/e/${hexToBech32("npub", ev.Id)}`;
if ("share" in window.navigator) {
await window.navigator.share({
title: "Snort",
url: url
});
} else {
await navigator.clipboard.writeText(url);
}
}
function menuItems() {
return (
<>
<MenuItem onClick={() => react("-")}>
<div className={`reaction-pill ${hasReacted('-') ? 'reacted' : ''}`}>
<div className="reaction-pill-icon">
<FontAwesomeIcon icon={faThumbsDown} />
</div>
<div className="reaction-pill-number">
{formatShort(groupReactions[Reaction.Negative])}
</div>
</div>
Dislike
</MenuItem>
<MenuItem onClick={() => share()}>
<div className="reaction-pill mr-auto">
<div className="reaction-pill-icon">
<FontAwesomeIcon icon={faShareNodes} />
</div>
</div>
Share
</MenuItem>
{isMine && (
<MenuItem onClick={() => deleteEvent()}>
<div className="reaction-pill trash-icon">
<FontAwesomeIcon icon={faTrash} />
</div>
Delete
</MenuItem>
)}
</>
)
}
return (
<>
<div className="footer">
@ -140,15 +179,16 @@ export default function NoteFooter(props: NoteFooterProps) {
<FontAwesomeIcon icon={faReply} />
</div>
</div>
<Menu menuButton={<div className="reaction-pill">
<div className="reaction-pill-icon">
<FontAwesomeIcon icon={faEllipsisVertical} />
</div>
</div>} menuClassName="ctx-menu">
{menuItems()}
</Menu>
{reactionIcons()}
{tipButton()}
{isMine && (
<div className="reaction-pill trash-icon">
<div className="reaction-pill-icon">
<FontAwesomeIcon icon={faTrash} onClick={(e) => deleteEvent()} />
</div>
</div>
)}
</div>
<NoteCreator
autoFocus={true}