Disroot
/
Mangane
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity

[FIX] refacto + privacy indicator on detailed status

This commit is contained in:
unknown 2023-06-26 23:39:19 +02:00
parent 9cf92b9ed4
commit 12a74baa74
2 changed files with 30 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
app/soapbox/components/status.tsx
View File

@ -182,8 +182,18 @@ const Status: React.FC<IStatus> = (props) => {
firstEmoji?.focus();
};
const privacyIcon = React.useMemo(() => {
switch (actualStatus?.visibility) {
default:
case 'public': return require('@tabler/icons/world.svg');
case 'unlisted': return require('@tabler/icons/eye-off.svg');
case 'local': return logo;
case 'private': return require('@tabler/icons/lock.svg');
case 'direct': return require('@tabler/icons/mail.svg');
}
}, [actualStatus?.visibility]);
if (!status) return null;
let rebloggedByText, reblogElement, reblogElementMobile;
if (hidden) {
return (
@ -238,6 +248,8 @@ const Status: React.FC<IStatus> = (props) => {
react: handleHotkeyReact,
};
const statusUrl = `/@${actualStatus.getIn(['account', 'acct'])}/posts/${actualStatus.id}`;
return (
@ -311,21 +323,8 @@ const Status: React.FC<IStatus> = (props) => {
withLinkToProfile={hoverable}
/>
</div>
{
actualStatus.visibility === 'public' && <Icon aria-hidden src={require('@tabler/icons/world.svg')} className='h-5 w-5 shrink-0 text-gray-400 dark:text-gray-600' />
}
{
actualStatus.visibility === 'unlisted' && <Icon aria-hidden src={require('@tabler/icons/eye-off.svg')} className='h-5 w-5 shrink-0 text-gray-400 dark:text-gray-600' />
}
{
actualStatus.visibility === 'local' && <Icon aria-hidden src={logo} className='h-5 w-5 shrink-0 text-gray-400 dark:text-gray-600' />
}
{
actualStatus.visibility === 'private' && <Icon aria-hidden src={require('@tabler/icons/lock.svg')} className='h-5 w-5 shrink-0 text-gray-400 dark:text-gray-600' />
}
{
actualStatus.visibility === 'direct' && <Icon aria-hidden src={require('@tabler/icons/mail.svg')} className='h-5 w-5 shrink-0 text-gray-400 dark:text-gray-600' />
}
<Icon aria-hidden src={privacyIcon} className='h-5 w-5 shrink-0 text-gray-400 dark:text-gray-600' />
</div>

28
app/soapbox/features/status/components/detailed-status.tsx
View File

@ -9,7 +9,7 @@ import StatusContent from 'soapbox/components/status_content';
import { HStack, Stack, Text, Button } from 'soapbox/components/ui';
import AccountContainer from 'soapbox/containers/account_container';
import QuotedStatus from 'soapbox/features/status/containers/quoted_status_container';
import { useAppSelector, useOwnAccount } from 'soapbox/hooks';
import { useAppSelector, useOwnAccount, useLogo } from 'soapbox/hooks';
import { getFeatures } from 'soapbox/utils/features';
import { getActualStatus } from 'soapbox/utils/status';
@ -46,6 +46,7 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
const locale = useAppSelector((state) => getSettings(state).get('locale')) as string;
const localeTranslated = React.useMemo(() => (new Intl.DisplayNames([locale], { type: 'language' })).of(locale), [locale]);
const features = useAppSelector((state) => getFeatures(state.instance));
const logo = useLogo();
const actualStatus = getActualStatus(status);
const { account } = actualStatus;
@ -66,14 +67,22 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
onTranslate(status, locale);
}, [status, locale]);
const privacyIcon = React.useMemo(() => {
switch (actualStatus?.visibility) {
default:
case 'public': return require('@tabler/icons/world.svg');
case 'unlisted': return require('@tabler/icons/eye-off.svg');
case 'local': return logo;
case 'private': return require('@tabler/icons/lock.svg');
case 'direct': return require('@tabler/icons/mail.svg');
}
}, [actualStatus?.visibility]);
if (!actualStatus) return null;
if (!account || typeof account !== 'object') return null;
let statusTypeIcon = null;
let quote;
if (actualStatus.quote) {
@ -88,11 +97,6 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
}
}
if (actualStatus.visibility === 'direct') {
statusTypeIcon = <Icon className='text-gray-700 dark:text-gray-600' src={require('@tabler/icons/mail.svg')} />;
} else if (actualStatus.visibility === 'private') {
statusTypeIcon = <Icon className='text-gray-700 dark:text-gray-600' src={require('@tabler/icons/lock.svg')} />;
}
return (
@ -100,8 +104,7 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
<div ref={node} className='detailed-actualStatus' tabIndex={-1}>
{
canTranslate && (
<div className='mb-3 flex items-center justify-between py-1'>
<Icon className='text-gray-300 dark:text-slate-500' src={require('@tabler/icons/note.svg')} />
<div className='mb-4 flex items-center justify-between gap-1'>
{
!actualStatus.translations.get(locale) ? (
<Button theme='link' size='sm' onClick={handleTranslateStatus}>
@ -115,6 +118,7 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
</Text>
)
}
<Icon aria-hidden src={privacyIcon} className='h-5 w-5 shrink-0 text-gray-400 dark:text-gray-600' />
</div>
)
}
@ -162,14 +166,12 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
onToggleVisibility={onToggleMediaVisibility}
/>
{quote}
{!actualStatus.hidden && quote}
<HStack justifyContent='between' alignItems='center' className='py-2'>
<StatusInteractionBar status={actualStatus} />
<Stack space={1} className='items-end mb-3'>
{statusTypeIcon}
<span>
<a href={actualStatus.url} target='_blank' rel='noopener' className='hover:underline'>
<Text tag='span' theme='muted' size='sm'>