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

fix(msgbar): improved design, added actions

Browse source
This commit is contained in:
trashtemp 2022-01-14 22:52:19 +01:00
parent ddbef13a12
commit 0c9c712ee0
No known key found for this signature in database
GPG key ID: D1F0DB65081B0FC6
1 changed files with 112 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,9 +1,11 @@
import { DotsHorizontalRounded, LinkAlt } from "@styled-icons/boxicons-regular";
import { import {
DotsHorizontalRounded, Pencil,
Edit,
Reply,
Trash, Trash,
} from "@styled-icons/boxicons-regular"; Share,
InfoSquare,
Notification,
} from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { ChannelPermission } from "revolt.js"; import { ChannelPermission } from "revolt.js";
import { Message as MessageObject } from "revolt.js/dist/maps/Messages"; import { Message as MessageObject } from "revolt.js/dist/maps/Messages";
@ -21,6 +23,7 @@ import {
} from "../../../../context/intermediate/Intermediate"; } from "../../../../context/intermediate/Intermediate";
import { useClient } from "../../../../context/revoltjs/RevoltClient"; import { useClient } from "../../../../context/revoltjs/RevoltClient";
import Tooltip from "../../../common/Tooltip";
import IconButton from "../../../ui/IconButton"; import IconButton from "../../../ui/IconButton";
interface Props { interface Props {
@ -29,7 +32,7 @@ interface Props {
} }
const OverlayBar = styled.div` const OverlayBar = styled.div`
display: inline-flex; display: flex;
position: absolute; position: absolute;
justify-self: end; justify-self: end;
align-self: end; align-self: end;
@ -43,11 +46,15 @@ const OverlayBar = styled.div`
border-radius: 5px; border-radius: 5px;
background: var(--primary-header); background: var(--primary-header);
border: 1px sold var(--background); //border: 1px solid var(--background);
`; `;
const Entry = styled.div` const Entry = styled.div`
padding: 4px; height: 30px;
width: 30px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0; flex-shrink: 0;
cursor: pointer; cursor: pointer;
transition: 0.2s ease background-color; transition: 0.2s ease background-color;
@ -55,6 +62,18 @@ const Entry = styled.div`
&:hover { &:hover {
background: var(--secondary-header); background: var(--secondary-header);
} }
&:active {
svg {
transform: translateY(1px);
}
}
`;
const Divider = styled.div`
margin: 6px 4px;
width: 0.5px;
background: var(--tertiary-background);
`; `;
export const MessageOverlayBar = observer(({ message, queued }: Props) => { export const MessageOverlayBar = observer(({ message, queued }: Props) => {
@ -64,12 +83,16 @@ export const MessageOverlayBar = observer(({ message, queued }: Props) => {
return ( return (
<OverlayBar> <OverlayBar>
<Tooltip content="Reply">
<Entry onClick={() => internalEmit("ReplyBar", "add", message)}> <Entry onClick={() => internalEmit("ReplyBar", "add", message)}>
<IconButton> <IconButton>
<Reply size={24} /> <Share size={18} />
</IconButton> </IconButton>
</Entry> </Entry>
</Tooltip>
{isAuthor && ( {isAuthor && (
<Tooltip content="Edit">
<Entry <Entry
onClick={() => onClick={() =>
internalEmit( internalEmit(
@ -79,14 +102,16 @@ export const MessageOverlayBar = observer(({ message, queued }: Props) => {
) )
}> }>
<IconButton> <IconButton>
<Edit size={24} /> <Pencil size={18} />
</IconButton> </IconButton>
</Entry> </Entry>
</Tooltip>
)} )}
{isAuthor || {isAuthor ||
(message.channel && (message.channel &&
message.channel.permission & message.channel.permission &
ChannelPermission.ManageMessages) ? ( ChannelPermission.ManageMessages) ? (
<Tooltip content="Delete">
<Entry <Entry
onClick={() => onClick={() =>
openScreen({ openScreen({
@ -96,10 +121,12 @@ export const MessageOverlayBar = observer(({ message, queued }: Props) => {
} as unknown as Screen) } as unknown as Screen)
}> }>
<IconButton> <IconButton>
<Trash size={24} /> <Trash size={18} color={"var(--error)"} />
</IconButton> </IconButton>
</Entry> </Entry>
</Tooltip>
) : undefined} ) : undefined}
<Tooltip content="More">
<Entry <Entry
onClick={() => onClick={() =>
openContextMenu("Menu", { openContextMenu("Menu", {
@ -109,9 +136,53 @@ export const MessageOverlayBar = observer(({ message, queued }: Props) => {
}) })
}> }>
<IconButton> <IconButton>
<DotsHorizontalRounded size={24} /> <DotsHorizontalRounded size={18} />
</IconButton> </IconButton>
</Entry> </Entry>
</Tooltip>
<Divider />
<Tooltip content="Mark as Unread">
<Entry
onClick={() =>
openContextMenu("Menu", {
message,
contextualChannel: message.channel_id,
queued,
})
}>
<IconButton>
<Notification size={18} />
</IconButton>
</Entry>
</Tooltip>
<Tooltip content="Copy Link">
<Entry
onClick={() =>
openContextMenu("Menu", {
message,
contextualChannel: message.channel_id,
queued,
})
}>
<IconButton>
<LinkAlt size={18} />
</IconButton>
</Entry>
</Tooltip>
<Tooltip content="Copy ID">
<Entry
onClick={() =>
openContextMenu("Menu", {
message,
contextualChannel: message.channel_id,
queued,
})
}>
<IconButton>
<InfoSquare size={18} />
</IconButton>
</Entry>
</Tooltip>
</OverlayBar> </OverlayBar>
); );
}); });