Kieran/snort
5
14
Fork 14
Code Issues 37 Pull Requests 1 Packages Projects Releases 24 Wiki Activity

Add note context menu #105

Merged
v0l merged 2 commits from note-ctx-menu into main 2023-01-21 12:14:09 +00:00
Conversation 1 Commits 2 Files Changed 6 +28 -17
2 changed files with 28 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit b2f1818994 - Show all commits

11
src/Element/Note.css
View File

@ -32,6 +32,16 @@
color: var(--font-secondary-color); color: var(--font-secondary-color);
border: 1px solid var(--font-secondary-color); border: 1px solid var(--font-secondary-color);
border-radius: 16px; border-radius: 16px;
min-width: 0;
}
.note>.footer .ctx-menu li {
display: grid;
grid-template-columns: 2rem auto;
}
.ctx-menu .red {
color: var(--error);
} }
.note>.header img:hover, .note>.header .name>.reply:hover, .note .body:hover { .note>.header img:hover, .note>.header .name>.reply:hover, .note .body:hover {
@ -40,6 +50,7 @@
.note>.note-creator { .note>.note-creator {
margin-top: 12px; margin-top: 12px;
margin-left: 56px;
} }
@media (min-width: 720px) { @media (min-width: 720px) {

34
src/Element/NoteFooter.tsx
View File

@ -1,6 +1,6 @@
import { useMemo, useState } from "react"; import { useMemo, useState } from "react";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import { faHeart, faReply, faThumbsDown, faTrash, faBolt, faRepeat, faEllipsisVertical, faShareNodes } from "@fortawesome/free-solid-svg-icons"; import { faHeart, faReply, faThumbsDown, faTrash, faBolt, faRepeat, faEllipsisVertical, faShareNodes, faCopy } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Menu, MenuItem } from '@szhsin/react-menu'; import { Menu, MenuItem } from '@szhsin/react-menu';
@ -126,7 +126,7 @@ export default function NoteFooter(props: NoteFooterProps) {
} }
async function share() { async function share() {
const url = `${window.location.protocol}//${window.location.host}/e/${hexToBech32("npub", ev.Id)}`; const url = `${window.location.protocol}//${window.location.host}/e/${hexToBech32("note", ev.Id)}`;
if ("share" in window.navigator) { if ("share" in window.navigator) {
await window.navigator.share({ await window.navigator.share({
title: "Snort", title: "Snort",
@ -137,40 +137,40 @@ export default function NoteFooter(props: NoteFooterProps) {
} }
} }
async function copyId() {
await navigator.clipboard.writeText(hexToBech32("note", ev.Id));
}
function menuItems() { function menuItems() {
return ( return (
<> <>
<MenuItem onClick={() => react("-")}> <MenuItem onClick={() => react("-")}>
<div className={`reaction-pill ${hasReacted('-') ? 'reacted' : ''}`}> <div>
<div className="reaction-pill-icon"> <FontAwesomeIcon icon={faThumbsDown} className={hasReacted('-') ? 'reacted' : ''} />
<FontAwesomeIcon icon={faThumbsDown} /> &nbsp;
</div> {formatShort(groupReactions[Reaction.Negative])}
<div className="reaction-pill-number">
{formatShort(groupReactions[Reaction.Negative])}
</div>
</div> </div>
Dislike Dislike
</MenuItem> </MenuItem>
<MenuItem onClick={() => share()}> <MenuItem onClick={() => share()}>
<div className="reaction-pill mr-auto"> <FontAwesomeIcon icon={faShareNodes} />
<div className="reaction-pill-icon">
<FontAwesomeIcon icon={faShareNodes} />
</div>
</div>
Share Share
</MenuItem> </MenuItem>
<MenuItem onClick={() => copyId()}>
<FontAwesomeIcon icon={faCopy} />
Copy ID
</MenuItem>
{isMine && ( {isMine && (
<MenuItem onClick={() => deleteEvent()}> <MenuItem onClick={() => deleteEvent()}>
<div className="reaction-pill trash-icon"> <FontAwesomeIcon icon={faTrash} className="red" />
<FontAwesomeIcon icon={faTrash} />
</div>
Delete Delete
</MenuItem> </MenuItem>
)} )}
</> </>
) )
} }
return ( return (
<> <>
verbiricha commented 2023-01-21 08:06:38 +00:00 (Migrated from github.com)
Review
Copy Link

When we add note mention we could add another option here for copying the raw note id so you can paste it in a note for mentioning it.

When we add note mention we could add another option here for copying the raw note id so you can paste it in a note for mentioning it.
<div className="footer"> <div className="footer">