From dbe8a64ffc471dd394c9f7a46f08fb73569ada83 Mon Sep 17 00:00:00 2001 From: Paul Makles Date: Sat, 16 Jul 2022 12:59:59 +0100 Subject: [PATCH 1/2] fix: pass-through to color / unset if no gradient --- external/lang | 2 +- src/components/common/user/UserShort.tsx | 18 +++++++++++++----- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/external/lang b/external/lang index 58a9fb69..1a854216 160000 --- a/external/lang +++ b/external/lang @@ -1 +1 @@ -Subproject commit 58a9fb697de00f570d445be4d12e3ce4a5e3522e +Subproject commit 1a8542166173445602c0a4a8f821806002fd2fc4 diff --git a/src/components/common/user/UserShort.tsx b/src/components/common/user/UserShort.tsx index b2ca22b2..6f9071de 100644 --- a/src/components/common/user/UserShort.tsx +++ b/src/components/common/user/UserShort.tsx @@ -1,7 +1,7 @@ import { observer } from "mobx-react-lite"; import { useParams } from "react-router-dom"; import { User, API } from "revolt.js"; -import styled from "styled-components/macro"; +import styled, { css } from "styled-components/macro"; import { Ref } from "preact"; import { Text } from "preact-i18n"; @@ -39,10 +39,18 @@ type UsernameProps = Omit< }; const Name = styled.span<{ colour?: string | null }>` - background: ${(props) => props.colour ?? "var(--foreground)"}; - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; + ${(props) => + props.colour && + (props.colour.includes("gradient") + ? css` + background: ${props.colour}; + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + ` + : css` + color: ${props.colour}; + `)} `; export const Username = observer( From 084c90613f034e4f7154a5d43fc3b634d50ca974 Mon Sep 17 00:00:00 2001 From: Paul Makles Date: Sat, 16 Jul 2022 15:17:02 +0100 Subject: [PATCH 2/2] feat: add reactions --- package.json | 2 +- src/components/common/messaging/Message.tsx | 2 + .../messaging/attachments/Reactions.tsx | 71 +++++++++++++++++++ src/components/markdown/plugins/emoji.tsx | 23 +++--- .../markdown/plugins/remarkRegexComponent.ts | 4 +- .../settings/roles/PermissionList.tsx | 3 +- yarn.lock | 10 +-- 7 files changed, 95 insertions(+), 20 deletions(-) create mode 100644 src/components/common/messaging/attachments/Reactions.tsx diff --git a/package.json b/package.json index 16a74c74..cf936e57 100644 --- a/package.json +++ b/package.json @@ -141,7 +141,7 @@ "remark-math": "^5.1.1", "remark-parse": "^10.0.1", "remark-rehype": "^10.1.0", - "revolt.js": "6.0.9", + "revolt.js": "6.0.12", "rimraf": "^3.0.2", "sass": "^1.35.1", "semver": "^7.3.7", diff --git a/src/components/common/messaging/Message.tsx b/src/components/common/messaging/Message.tsx index 76c3afc1..b1fae6a6 100644 --- a/src/components/common/messaging/Message.tsx +++ b/src/components/common/messaging/Message.tsx @@ -25,6 +25,7 @@ import MessageBase, { } from "./MessageBase"; import Attachment from "./attachments/Attachment"; import { MessageReply } from "./attachments/MessageReply"; +import { Reactions } from "./attachments/Reactions"; import { MessageOverlayBar } from "./bars/MessageOverlayBar"; import Embed from "./embed/Embed"; import InviteList from "./embed/EmbedInvite"; @@ -180,6 +181,7 @@ const Message = observer( {message.embeds?.map((embed, index) => ( ))} + {mouseHovering && !replacement && !isTouchscreenDevice && ( diff --git a/src/components/common/messaging/attachments/Reactions.tsx b/src/components/common/messaging/attachments/Reactions.tsx new file mode 100644 index 00000000..b9c7380a --- /dev/null +++ b/src/components/common/messaging/attachments/Reactions.tsx @@ -0,0 +1,71 @@ +import { observer } from "mobx-react-lite"; +import { Message } from "revolt.js"; +import styled, { css } from "styled-components"; + +import { useClient } from "../../../../controllers/client/ClientController"; +import { RenderEmoji } from "../../../markdown/plugins/emoji"; + +interface Props { + message: Message; +} + +const List = styled.div` + gap: 0.4em; + display: flex; + flex-wrap: wrap; + margin-top: 0.2em; +`; + +const Reaction = styled.div<{ active: boolean }>` + padding: 0.4em; + cursor: pointer; + user-select: none; + vertical-align: middle; + color: var(--secondary-foreground); + border-radius: var(--border-radius); + background: var(--secondary-background); + + img { + width: 1.2em; + height: 1.2em; + object-fit: contain; + } + + &:hover { + filter: brightness(0.9); + } + + &:active { + filter: brightness(0.75); + } + + ${(props) => + props.active && + css` + border: 1px solid var(--accent); + `} +`; + +export const Reactions = observer(({ message }: Props) => { + const client = useClient(); + if (message.reactions.size === 0) return null; + + return ( + + {Array.from(message.reactions, ([key, user_ids]) => { + const active = user_ids.has(client.user!._id); + + return ( + + active ? message.unreact(key) : message.react(key) + }> + {user_ids.size} + + ); + })} + + ); +}); diff --git a/src/components/markdown/plugins/emoji.tsx b/src/components/markdown/plugins/emoji.tsx index 15ca52e4..9993189d 100644 --- a/src/components/markdown/plugins/emoji.tsx +++ b/src/components/markdown/plugins/emoji.tsx @@ -25,15 +25,21 @@ const Emoji = styled.img` } `; +const RE_EMOJI = /:([a-zA-Z0-9_+]+):/g; +const RE_ULID = /^[0123456789ABCDEFGHJKMNPQRSTVWXYZ]{26}$/; + export function RenderEmoji({ match }: CustomComponentProps) { const [fail, setFail] = useState(false); - const url = - match in emojiDictionary - ? parseEmoji(emojiDictionary[match as keyof typeof emojiDictionary]) - : `${ - clientController.getAvailableClient().configuration?.features - .autumn.url - }/emojis/${match}`; + const url = RE_ULID.test(match) + ? `${ + clientController.getAvailableClient().configuration?.features + .autumn.url + }/emojis/${match}` + : parseEmoji( + match in emojiDictionary + ? emojiDictionary[match as keyof typeof emojiDictionary] + : match, + ); if (fail) return {`:${match}:`}; @@ -49,9 +55,6 @@ export function RenderEmoji({ match }: CustomComponentProps) { ); } -const RE_EMOJI = /:([a-zA-Z0-9_+]+):/g; -const RE_ULID = /^[0123456789ABCDEFGHJKMNPQRSTVWXYZ]{26}$/; - export const remarkEmoji = createComponent( "emoji", RE_EMOJI, diff --git a/src/components/markdown/plugins/remarkRegexComponent.ts b/src/components/markdown/plugins/remarkRegexComponent.ts index 6693f7b5..47095c7c 100644 --- a/src/components/markdown/plugins/remarkRegexComponent.ts +++ b/src/components/markdown/plugins/remarkRegexComponent.ts @@ -6,9 +6,9 @@ import { visit } from "unist-util-visit"; * Props given to custom components */ export interface CustomComponentProps { - type: string; + type?: string; match: string; - arg1: string; + arg1?: string; } /** diff --git a/src/components/settings/roles/PermissionList.tsx b/src/components/settings/roles/PermissionList.tsx index ce514f9f..79039fb2 100644 --- a/src/components/settings/roles/PermissionList.tsx +++ b/src/components/settings/roles/PermissionList.tsx @@ -1,5 +1,4 @@ -import { API, Channel, Member, Server } from "revolt.js"; -import { Permission } from "revolt.js"; +import { API, Channel, Permission, Server } from "revolt.js"; import { PermissionSelect } from "./PermissionSelect"; diff --git a/yarn.lock b/yarn.lock index dc947708..1b3ac129 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3696,7 +3696,7 @@ __metadata: remark-math: ^5.1.1 remark-parse: ^10.0.1 remark-rehype: ^10.1.0 - revolt.js: 6.0.9 + revolt.js: 6.0.12 rimraf: ^3.0.2 sass: ^1.35.1 semver: ^7.3.7 @@ -7890,9 +7890,9 @@ __metadata: languageName: node linkType: hard -"revolt.js@npm:6.0.9": - version: 6.0.9 - resolution: "revolt.js@npm:6.0.9" +"revolt.js@npm:6.0.12": + version: 6.0.12 + resolution: "revolt.js@npm:6.0.12" dependencies: "@insertish/exponential-backoff": 3.1.0-patch.2 "@insertish/isomorphic-ws": ^4.0.1 @@ -7906,7 +7906,7 @@ __metadata: revolt-api: 0.5.5 ulid: ^2.3.0 ws: ^8.2.2 - checksum: a3ea924a6793f6a4aa5f62e660b249bd76bbe2f0048d9b374a449f064ee6d65df1b8e4e3af1d15267707ea6d35b6a3101349b0bf41fa323cb5c298ab98de8d45 + checksum: 1ff667daf3e7c9b32ee383d56f79db9d5112b1ca87eb406c749fa3ce5f8adb59cd48ec3cb935932a5cc5da0af6f82e2dd7b5b83fa0705e02f66c050bc848401a languageName: node linkType: hard