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

Merge pull request #46 from infi/master

Browse source 
Add system message icons. Closes #10
This commit is contained in:
Paul Makles 2021-08-07 09:08:41 +01:00 committed by GitHub
commit 64cfb1f233
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 39 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/common/messaging/MessageBase.tsx
View file

@ -124,6 +124,10 @@ export default styled.div<BaseMessageProps>`
time {
opacity: 1;
}
.system-message-icon {
display: none;
}
}
`;

35
src/components/common/messaging/SystemMessage.tsx
View file

@ -1,3 +1,15 @@
import {
InfoCircle,
UserPlus,
UserMinus,
ArrowToRight,
ArrowToLeft,
UserX,
ShieldX,
EditAlt,
Edit,
MessageSquareEdit,
} from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { Message } from "revolt.js/dist/maps/Messages";
import { User } from "revolt.js/dist/maps/Users";
@ -40,6 +52,19 @@ interface Props {
hideInfo?: boolean;
}
const iconDictionary = {
user_added: UserPlus,
user_remove: UserMinus,
user_joined: ArrowToRight,
user_left: ArrowToLeft,
user_kicked: UserX,
user_banned: ShieldX,
channel_renamed: EditAlt,
channel_description_changed: Edit,
channel_icon_changed: MessageSquareEdit,
text: InfoCircle,
};
export const SystemMessage = observer(
({ attachContext, message, highlight, hideInfo }: Props) => {
const client = useClient();
@ -89,6 +114,15 @@ export const SystemMessage = observer(
data = { type: "text", content };
}
const SystemMessageIcon = iconDictionary[data.type] ?? InfoCircle;
const SystemIcon = styled(SystemMessageIcon)`
height: 1.33em;
width: 1.33em;
margin-right: 0.5em;
color: var(--tertiary-foreground);
`;
let children;
switch (data.type) {
case "text":
@ -161,6 +195,7 @@ export const SystemMessage = observer(
{!hideInfo && (
<MessageInfo>
<MessageDetail message={message} position="left" />
<SystemIcon className="system-message-icon" />
</MessageInfo>
)}
<SystemContent>{children}</SystemContent>