bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'sensitive-overlay' into 'develop'

Browse source 
Improvements for sensitive content overlay for too long posts

See merge request soapbox-pub/soapbox!2178
This commit is contained in:
marcin mikołajczak 2023-01-16 20:05:11 +00:00
commit 2527e2e3fb
2 changed files with 56 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/soapbox/components/status-content.tsx
View file

@ -103,7 +103,7 @@ const StatusContent: React.FC<IStatusContent> = ({ status, onClick, collapsable
const maybeSetCollapsed = (): void => { const maybeSetCollapsed = (): void => {
if (!node.current) return; if (!node.current) return;
if (collapsable && onClick && !collapsed && status.spoiler_text.length === 0) { if (collapsable && onClick && !collapsed) {
if (node.current.clientHeight > MAX_HEIGHT) { if (node.current.clientHeight > MAX_HEIGHT) {
setCollapsed(true); setCollapsed(true);
} }

108
app/soapbox/components/statuses/sensitive-content-overlay.tsx
View file

@ -92,7 +92,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
return ( return (
<div <div
className={classNames('absolute z-40', { className={classNames('absolute z-40', {
'cursor-default backdrop-blur-lg rounded-lg w-full h-full border-0 flex justify-center items-center': !visible, 'cursor-default backdrop-blur-lg rounded-lg w-full h-full border-0 flex justify-center': !visible,
'bg-gray-800/75 inset-0': !visible, 'bg-gray-800/75 inset-0': !visible,
'bottom-1 right-1': visible, 'bottom-1 right-1': visible,
})} })}
@ -107,64 +107,66 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
size='sm' size='sm'
/> />
) : ( ) : (
<div className='text-center w-3/4 mx-auto space-y-4' ref={ref}> <div className='flex justify-center items-center max-h-screen'>
<div className='space-y-1'> <div className='text-center w-3/4 mx-auto space-y-4' ref={ref}>
<Text theme='white' weight='semibold'> <div className='space-y-1'>
{intl.formatMessage(isUnderReview ? messages.underReviewTitle : messages.sensitiveTitle)} <Text theme='white' weight='semibold'>
</Text> {intl.formatMessage(isUnderReview ? messages.underReviewTitle : messages.sensitiveTitle)}
</Text>
<Text theme='white' size='sm' weight='medium'> <Text theme='white' size='sm' weight='medium'>
{intl.formatMessage(isUnderReview ? messages.underReviewSubtitle : messages.sensitiveSubtitle)} {intl.formatMessage(isUnderReview ? messages.underReviewSubtitle : messages.sensitiveSubtitle)}
</Text> </Text>
{status.spoiler_text && ( {status.spoiler_text && (
<div className='py-4 italic'> <div className='py-4 italic'>
<Text className='line-clamp-6' theme='white' size='md' weight='medium'> <Text className='line-clamp-6' theme='white' size='md' weight='medium'>
&ldquo;<span dangerouslySetInnerHTML={{ __html: status.spoilerHtml }} />&rdquo; &ldquo;<span dangerouslySetInnerHTML={{ __html: status.spoilerHtml }} />&rdquo;
</Text> </Text>
</div> </div>
)} )}
</div> </div>
<HStack alignItems='center' justifyContent='center' space={2}> <HStack alignItems='center' justifyContent='center' space={2}>
{isUnderReview ? ( {isUnderReview ? (
<> <>
{links.get('support') && ( {links.get('support') && (
<a <a
href={links.get('support')} href={links.get('support')}
target='_blank' target='_blank'
onClick={(event) => event.stopPropagation()} onClick={(event) => event.stopPropagation()}
>
<Button
type='button'
theme='outline'
size='sm'
icon={require('@tabler/icons/headset.svg')}
> >
{intl.formatMessage(messages.contact)} <Button
</Button> type='button'
</a> theme='outline'
)} size='sm'
</> icon={require('@tabler/icons/headset.svg')}
) : null} >
{intl.formatMessage(messages.contact)}
</Button>
</a>
)}
</>
) : null}
<Button <Button
type='button' type='button'
theme='outline' theme='outline'
size='sm' size='sm'
icon={require('@tabler/icons/eye.svg')} icon={require('@tabler/icons/eye.svg')}
onClick={toggleVisibility} onClick={toggleVisibility}
> >
{intl.formatMessage(messages.show)} {intl.formatMessage(messages.show)}
</Button> </Button>
{(isUnderReview && isOwnStatus) ? ( {(isUnderReview && isOwnStatus) ? (
<DropdownMenu <DropdownMenu
items={menu} items={menu}
src={require('@tabler/icons/dots.svg')} src={require('@tabler/icons/dots.svg')}
/> />
) : null} ) : null}
</HStack> </HStack>
</div>
</div> </div>
)} )}
</div> </div>