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

Show server identity in message replies and typing indicator.

Browse source 
Revert reply connector temporarily.
This commit is contained in:
Paul 2021-08-08 10:16:48 +01:00
parent ef1eb74486
commit 17f68088d1
4 changed files with 49 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/components/common/messaging/attachments/MessageReply.tsx
View file

@ -1,3 +1,4 @@
import { Reply } from "@styled-icons/boxicons-regular";
import { File } from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { useHistory } from "react-router-dom";
@ -38,6 +39,9 @@ export const ReplyBase = styled.div<{
align-items: center;
color: var(--secondary-foreground);
/* nizune's Discord replies,
does not scale properly with messages,
reverted temporarily
&::before {
content: "";
height: 10px;
@ -48,7 +52,7 @@ export const ReplyBase = styled.div<{
border-top: 2.2px solid var(--tertiary-foreground);
border-inline-start: 2.2px solid var(--tertiary-foreground);
border-start-start-radius: 6px;
}
}*/
* {
overflow: hidden;
@ -153,6 +157,7 @@ export const MessageReply = observer(({ index, channel, id }: Props) => {
if (!message) {
return (
<ReplyBase head={index === 0} fail>
<Reply size={16} />
<span>
<Text id="app.main.channel.misc.failed_load" />
</span>
@ -164,6 +169,7 @@ export const MessageReply = observer(({ index, channel, id }: Props) => {
return (
<ReplyBase head={index === 0}>
<Reply size={16} />
{message.author?.relationship === RelationshipStatus.Blocked ? (
<Text id="app.main.channel.misc.blocked_user" />
) : (
@ -173,7 +179,11 @@ export const MessageReply = observer(({ index, channel, id }: Props) => {
) : (
<>
<div className="user">
<UserShort user={message.author} size={16} />
<UserShort
user={message.author}
size={16}
showServerIdentity
/>
</div>
<div
className="content"

8
src/components/common/messaging/bars/ReplyBar.tsx
View file

@ -114,7 +114,11 @@ export default observer(({ channel, replies, setReplies }: Props) => {
<ReplyBase preview>
<ReplyIcon size={22} />
<div class="username">
<UserShort user={message.author} size={16} />
<UserShort
user={message.author}
size={16}
showServerIdentity
/>
</div>
<div class="message">
{message.attachments && (
@ -130,7 +134,7 @@ export default observer(({ channel, replies, setReplies }: Props) => {
</>
)}
{message.author_id === SYSTEM_USER_ID ? (
<SystemMessage message={message} />
<SystemMessage message={message} hideInfo />
) : (
<Markdown
disallowBigEmoji

43
src/components/common/messaging/bars/TypingIndicator.tsx
View file

@ -5,6 +5,11 @@ import styled from "styled-components";
import { Text } from "preact-i18n";
import { TextReact } from "../../../../lib/i18n";
import UserIcon from "../../user/UserIcon";
import { Username } from "../../user/UserShort";
interface Props {
channel: Channel;
}
@ -31,15 +36,8 @@ const Base = styled.div`
.avatars {
display: flex;
img {
width: 16px;
height: 16px;
object-fit: cover;
border-radius: 50%;
&:not(:first-child) {
margin-left: -4px;
}
:not(:first-child) {
margin-left: -4px;
}
}
@ -69,27 +67,31 @@ export default observer(({ channel }: Props) => {
if (users.length >= 5) {
text = <Text id="app.main.channel.typing.several" />;
} else if (users.length > 1) {
const userlist = [...users].map((x) => x!.username);
const userlist = [...users].map((x) => (
<Username key={x!._id} user={x} showServerIdentity />
));
const user = userlist.pop();
/*for (let i = 0; i < userlist.length - 1; i++) {
userlist.splice(i * 2 + 1, 0, ", ");
}*/
for (let i = 0; i < userlist.length - 1; i++) {
userlist.splice(i * 2 + 1, 0, <span key={`sep_${i}`}>, </span>);
}
text = (
<Text
<TextReact
id="app.main.channel.typing.multiple"
fields={{
user,
userlist: userlist.join(", "),
userlist,
}}
/>
);
} else {
text = (
<Text
<TextReact
id="app.main.channel.typing.single"
fields={{ user: users[0]!.username }}
fields={{
user: <Username user={users[0]} showServerIdentity />,
}}
/>
);
}
@ -99,10 +101,11 @@ export default observer(({ channel }: Props) => {
<div>
<div className="avatars">
{users.map((user) => (
<img
<UserIcon
key={user!._id}
loading="eager"
src={user!.generateAvatarURL({ max_side: 256 })}
target={user}
size={16}
showServerIdentity
/>
))}
</div>

10
src/components/common/user/UserShort.tsx
View file

@ -61,14 +61,20 @@ export const Username = observer(
export default function UserShort({
user,
size,
showServerIdentity,
}: {
user?: User;
size?: number;
showServerIdentity?: boolean;
}) {
return (
<>
<UserIcon size={size ?? 24} target={user} />
<Username user={user} />
<UserIcon
size={size ?? 24}
target={user}
showServerIdentity={showServerIdentity}
/>
<Username user={user} showServerIdentity={showServerIdentity} />
</>
);
}