cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-10 01:03:36 -05:00
Code Issues Projects Releases Packages Wiki Activity

feat(messaging): add message overlay logic

Browse source
This commit is contained in:
Paul Makles 2022-01-15 12:52:50 +00:00
parent 7e4f4cf001
commit 2c8bbe7d1f
2 changed files with 93 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

119
src/components/common/messaging/bars/MessageOverlayBar.tsx
View file

@ -12,8 +12,11 @@ import { Message as MessageObject } from "revolt.js/dist/maps/Messages";
import styled from "styled-components"; import styled from "styled-components";
import { openContextMenu } from "preact-context-menu"; import { openContextMenu } from "preact-context-menu";
import { useEffect, useState } from "preact/hooks";
import { internalEmit } from "../../../../lib/eventEmitter"; import { internalEmit } from "../../../../lib/eventEmitter";
import { shiftKeyPressed } from "../../../../lib/modifiers";
import { getRenderer } from "../../../../lib/renderer/Singleton";
import { QueuedMessage } from "../../../../mobx/stores/MessageQueue"; import { QueuedMessage } from "../../../../mobx/stores/MessageQueue";
@ -89,9 +92,24 @@ const Divider = styled.div`
export const MessageOverlayBar = observer(({ message, queued }: Props) => { export const MessageOverlayBar = observer(({ message, queued }: Props) => {
const client = useClient(); const client = useClient();
const { openScreen } = useIntermediate(); const { openScreen, writeClipboard } = useIntermediate();
const isAuthor = message.author_id === client.user!._id; const isAuthor = message.author_id === client.user!._id;
const [copied, setCopied] = useState<"link" | "id">(null!);
const [extraActions, setExtra] = useState(shiftKeyPressed);
useEffect(() => {
const handler = (ev: KeyboardEvent) => setExtra(ev.shiftKey);
document.addEventListener("keyup", handler);
document.addEventListener("keydown", handler);
return () => {
document.removeEventListener("keyup", handler);
document.removeEventListener("keydown", handler);
};
});
return ( return (
<OverlayBar> <OverlayBar>
<Tooltip content="Reply"> <Tooltip content="Reply">
@ -120,12 +138,14 @@ export const MessageOverlayBar = observer(({ message, queued }: Props) => {
ChannelPermission.ManageMessages) ? ( ChannelPermission.ManageMessages) ? (
<Tooltip content="Delete"> <Tooltip content="Delete">
<Entry <Entry
onClick={() => onClick={(e) =>
openScreen({ e.shiftKey
id: "special_prompt", ? message.delete()
type: "delete_message", : openScreen({
target: message, id: "special_prompt",
} as unknown as Screen) type: "delete_message",
target: message,
} as unknown as Screen)
}> }>
<Trash size={18} color={"var(--error)"} /> <Trash size={18} color={"var(--error)"} />
</Entry> </Entry>
@ -143,43 +163,54 @@ export const MessageOverlayBar = observer(({ message, queued }: Props) => {
<DotsVerticalRounded size={18} /> <DotsVerticalRounded size={18} />
</Entry> </Entry>
</Tooltip> </Tooltip>
<Divider /> {extraActions && (
<Tooltip content="Mark as Unread"> <>
<Entry <Divider />
onClick={() => <Tooltip content="Mark as Unread">
openContextMenu("Menu", { <Entry
message, onClick={() => {
contextualChannel: message.channel_id, const messages = getRenderer(
queued, message.channel!,
}) ).messages;
}> const index = messages.findIndex(
<Notification size={18} /> (x) => x._id === message._id,
</Entry> );
</Tooltip>
<Tooltip content="Copy Link"> let unread_id = message._id;
<Entry if (index > 0) {
onClick={() => unread_id = messages[index - 1]._id;
openContextMenu("Menu", { }
message,
contextualChannel: message.channel_id, internalEmit("NewMessages", "mark", unread_id);
queued, message.channel?.ack(unread_id, true);
}) }}>
}> <Notification size={18} />
<LinkAlt size={18} /> </Entry>
</Entry> </Tooltip>
</Tooltip> <Tooltip
<Tooltip content="Copy ID"> content={copied === "link" ? "Copied!" : "Copy Link"}
<Entry hideOnClick={false}>
onClick={() => <Entry
openContextMenu("Menu", { onClick={() => {
message, setCopied("link");
contextualChannel: message.channel_id, writeClipboard(message.url);
queued, }}>
}) <LinkAlt size={18} />
}> </Entry>
<InfoSquare size={18} /> </Tooltip>
</Entry> <Tooltip
</Tooltip> content={copied === "id" ? "Copied!" : "Copy ID"}
hideOnClick={false}>
<Entry
onClick={() => {
setCopied("id");
writeClipboard(message._id);
}}>
<InfoSquare size={18} />
</Entry>
</Tooltip>
</>
)}
</OverlayBar> </OverlayBar>
); );
}); });

18
src/lib/modifiers.ts Normal file
View file

@ -0,0 +1,18 @@
/**
* Utility file for detecting whether the
* shift key is currently pressed or not.
*/
export let shiftKeyPressed = false;
if (typeof window !== "undefined") {
document.addEventListener("keydown", (ev) => {
if (ev.shiftKey) shiftKeyPressed = true;
else shiftKeyPressed = false;
});
document.addEventListener("keyup", (ev) => {
if (ev.shiftKey) shiftKeyPressed = true;
else shiftKeyPressed = false;
});
}