CloudToys/puyopuyotetr.is
1
0
Fork 0
Code

[Glitch] Change labels on thread indicators in web UI

Browse Source 
Partial port of a021dee642 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Eugen Rochko 2024-09-09 17:28:54 +02:00 committed by Claire
parent b240bad61a
commit e2c101ec35
3 changed files with 75 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/javascript/flavours/glitch/components/status_prepend.jsx
View File

@ -150,11 +150,13 @@ export default class StatusPrepend extends PureComponent {
return !type ? null : (
<aside className={type === 'reblogged_by' || type === 'featured' ? 'status__prepend' : 'notification__message'}>
<Icon
className={`status__prepend-icon ${type === 'favourite' ? 'star-icon' : ''}`}
id={iconId}
icon={iconComponent}
/>
<div className='status__prepend__icon'>
<Icon
className={type === 'favourite' ? 'star-icon' : null}
id={iconId}
icon={iconComponent}
/>
</div>
<Message />
{children}
</aside>

50
app/javascript/flavours/glitch/components/status_thread_label.tsx Normal file
View File

@ -0,0 +1,50 @@
import { FormattedMessage } from 'react-intl';
import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
import { Icon } from 'flavours/glitch/components/icon';
import { DisplayedName } from 'flavours/glitch/features/notifications_v2/components/displayed_name';
import { useAppSelector } from 'flavours/glitch/store';
export const StatusThreadLabel: React.FC<{
accountId: string;
inReplyToAccountId: string;
}> = ({ accountId, inReplyToAccountId }) => {
const inReplyToAccount = useAppSelector((state) =>
state.accounts.get(inReplyToAccountId),
);
let label;
if (accountId === inReplyToAccountId) {
label = (
<FormattedMessage
id='status.continued_thread'
defaultMessage='Continued thread'
/>
);
} else if (inReplyToAccount) {
label = (
<FormattedMessage
id='status.replied_to'
defaultMessage='Replied to {name}'
values={{ name: <DisplayedName accountIds={[inReplyToAccountId]} /> }}
/>
);
} else {
label = (
<FormattedMessage
id='status.replied_in_thread'
defaultMessage='Replied in thread'
/>
);
}
return (
<div className='status__prepend'>
<div className='status__prepend__icon'>
<Icon id='reply' icon={ReplyIcon} />
</div>
{label}
</div>
);
};

22
app/javascript/flavours/glitch/styles/components.scss
View File

@ -1776,15 +1776,29 @@ body > [data-popper-placement] {
.status__prepend {
padding: 8px 14px; // glitch: reduced padding
padding-bottom: 0;
display: inline-flex;
gap: 10px;
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
line-height: 22px;
font-weight: 500;
color: $dark-text-color;
.status__display-name strong {
color: $dark-text-color;
&__icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
.icon {
width: 16px;
height: 16px;
}
}
a {
color: inherit;
text-decoration: none;
}
> span {