Add note context menu #105
@ -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) {
|
||||||
|
@ -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} />
|
|
||||||
</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 (
|
||||||
<>
|
<>
|
||||||
|
|||||||
<div className="footer">
|
<div className="footer">
|
||||||
|
Loading…
Reference in New Issue
Block a user
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.