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

New look to replies

Browse source
This commit is contained in:
nizune 2021-08-05 11:54:32 +02:00
parent f2cf3559db
commit 123dc6bbfc
2 changed files with 25 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -35,12 +35,24 @@ export const ReplyBase = styled.div<{
display: flex; display: flex;
margin-inline-start: 30px; margin-inline-start: 30px;
margin-inline-end: 12px; margin-inline-end: 12px;
margin-bottom: 4px; /*margin-bottom: 4px;*/
font-size: 0.8em; font-size: 0.8em;
user-select: none; user-select: none;
align-items: center; align-items: center;
color: var(--secondary-foreground); color: var(--secondary-foreground);
&::before {
content: "";
height: 10px;
width: 28px;
margin-inline-end: 2px;
align-self: flex-end;
display: flex;
border-top: 2.2px solid var(--tertiary-foreground);
border-inline-start: 2.2px solid var(--tertiary-foreground);
border-start-start-radius: 6px;
}
* { * {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
@ -54,6 +66,7 @@ export const ReplyBase = styled.div<{
font-weight: 600; font-weight: 600;
overflow: visible; overflow: visible;
align-items: center; align-items: center;
padding: 2px 0;
span { span {
cursor: pointer; cursor: pointer;
@ -71,6 +84,7 @@ export const ReplyBase = styled.div<{
} }
.content { .content {
padding: 2px 0;
gap: 4px; gap: 4px;
display: flex; display: flex;
cursor: pointer; cursor: pointer;
@ -122,6 +136,10 @@ export const ReplyBase = styled.div<{
`} `}
`; `;
const Arrow = styled.div`
`;
export const MessageReply = observer(({ index, channel, id }: Props) => { export const MessageReply = observer(({ index, channel, id }: Props) => {
const view = useRenderState(channel._id); const view = useRenderState(channel._id);
if (view?.type !== "RENDER") return null; if (view?.type !== "RENDER") return null;
@ -142,7 +160,6 @@ export const MessageReply = observer(({ index, channel, id }: Props) => {
if (!message) { if (!message) {
return ( return (
<ReplyBase head={index === 0} fail> <ReplyBase head={index === 0} fail>
<Reply size={16} />
<span> <span>
<Text id="app.main.channel.misc.failed_load" /> <Text id="app.main.channel.misc.failed_load" />
</span> </span>
@ -154,11 +171,8 @@ export const MessageReply = observer(({ index, channel, id }: Props) => {
return ( return (
<ReplyBase head={index === 0}> <ReplyBase head={index === 0}>
<Reply size={16} />
{message.author?.relationship === RelationshipStatus.Blocked ? ( {message.author?.relationship === RelationshipStatus.Blocked ? (
<> <Text id="app.main.channel.misc.blocked_user" />
<Text id="app.main.channel.misc.blocked_user" />
</>
) : ( ) : (
<> <>
{message.author_id === SYSTEM_USER_ID ? ( {message.author_id === SYSTEM_USER_ID ? (
@ -209,4 +223,4 @@ export const MessageReply = observer(({ index, channel, id }: Props) => {
)} )}
</ReplyBase> </ReplyBase>
); );
}); });

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

@ -36,6 +36,10 @@ const Base = styled.div`
> div { > div {
flex-grow: 1; flex-grow: 1;
margin-bottom: 0; margin-bottom: 0;
&::before {
display: none;
}
} }
.toggle { .toggle {