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

Merge branch 'sensitive-overlay-height' into 'develop'

Browse source 
Fix 'Overly long content warning spills over the banner'

Closes #1173

See merge request soapbox-pub/soapbox!1910
This commit is contained in:
marcin mikołajczak 2022-11-17 15:44:26 +00:00
commit 8ca1cd0345
8 changed files with 52 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
app/soapbox/components/quoted-status.tsx
View file

@ -1,5 +1,5 @@
import classNames from 'clsx';
import React, { MouseEventHandler, useState } from 'react';
import React, { MouseEventHandler, useEffect, useRef, useState } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { useHistory } from 'react-router-dom';
@ -37,7 +37,16 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
const settings = useSettings();
const displayMedia = settings.get('displayMedia');
const overlay = useRef<HTMLDivElement>(null);
const [showMedia, setShowMedia] = useState<boolean>(defaultMediaVisibility(status, displayMedia));
const [minHeight, setMinHeight] = useState(208);
useEffect(() => {
if (overlay.current) {
setMinHeight(overlay.current.getBoundingClientRect().height);
}
}, [overlay.current]);
const handleExpandClick: MouseEventHandler<HTMLDivElement> = (e) => {
if (!status) return;
@ -103,15 +112,16 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
<StatusReplyMentions status={status} hoverable={false} />
<Stack className={classNames('relative z-0', {
'min-h-[220px]': status.hidden,
})}
<Stack
className='relative z-0'
style={{ minHeight: status.hidden ? Math.max(minHeight, 208) + 12 : undefined }}
>
{(status.hidden) && (
<SensitiveContentOverlay
status={status}
visible={showMedia}
onToggleVisibility={handleToggleMediaVisibility}
ref={overlay}
/>
)}

2
app/soapbox/components/status-action-button.tsx
View file

@ -41,7 +41,7 @@ const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButt
const renderIcon = () => {
if (emoji) {
return (
<span className='block w-6 h-6 flex items-center justify-center'>
<span className='flex w-6 h-6 items-center justify-center'>
<Emoji className='w-full h-full p-0.5' emoji={emoji} />
</span>
);

16
app/soapbox/components/status.tsx
View file

@ -79,8 +79,10 @@ const Status: React.FC<IStatus> = (props) => {
const displayMedia = settings.get('displayMedia') as string;
const didShowCard = useRef(false);
const node = useRef<HTMLDivElement>(null);
const overlay = useRef<HTMLDivElement>(null);
const [showMedia, setShowMedia] = useState<boolean>(defaultMediaVisibility(status, displayMedia));
const [minHeight, setMinHeight] = useState(208);
const actualStatus = getActualStatus(status);
@ -95,6 +97,12 @@ const Status: React.FC<IStatus> = (props) => {
setShowMedia(defaultMediaVisibility(status, displayMedia));
}, [status.id]);
useEffect(() => {
if (overlay.current) {
setMinHeight(overlay.current.getBoundingClientRect().height);
}
}, [overlay.current]);
const handleToggleMediaVisibility = (): void => {
setShowMedia(!showMedia);
};
@ -358,17 +366,15 @@ const Status: React.FC<IStatus> = (props) => {
<StatusReplyMentions status={actualStatus} hoverable={hoverable} />
<Stack
className={
classNames('relative z-0', {
'min-h-[220px]': isUnderReview || isSensitive,
})
}
className='relative z-0'
style={{ minHeight: isUnderReview || isSensitive ? Math.max(minHeight, 208) + 12 : undefined }}
>
{(isUnderReview || isSensitive) && (
<SensitiveContentOverlay
status={status}
visible={showMedia}
onToggleVisibility={handleToggleMediaVisibility}
ref={overlay}
/>
)}

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

@ -25,7 +25,7 @@ interface ISensitiveContentOverlay {
visible?: boolean
}
const SensitiveContentOverlay = (props: ISensitiveContentOverlay) => {
const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveContentOverlay>((props, ref) => {
const { onToggleVisibility, status } = props;
const isUnderReview = status.visibility === 'self';
@ -72,7 +72,7 @@ const SensitiveContentOverlay = (props: ISensitiveContentOverlay) => {
size='sm'
/>
) : (
<div className='text-center w-3/4 mx-auto space-y-4'>
<div className='text-center w-3/4 mx-auto space-y-4' ref={ref}>
<div className='space-y-1'>
<Text theme='white' weight='semibold'>
{intl.formatMessage(isUnderReview ? messages.underReviewTitle : messages.sensitiveTitle)}
@ -84,7 +84,7 @@ const SensitiveContentOverlay = (props: ISensitiveContentOverlay) => {
{status.spoiler_text && (
<div className='py-4 italic'>
<Text theme='white' size='md' weight='medium'>
<Text className='line-clamp-6' theme='white' size='md' weight='medium'>
&ldquo;<span dangerouslySetInnerHTML={{ __html: status.spoilerHtml }} />&rdquo;
</Text>
</div>
@ -127,6 +127,6 @@ const SensitiveContentOverlay = (props: ISensitiveContentOverlay) => {
)}
</div>
);
};
});
export default SensitiveContentOverlay;
export default SensitiveContentOverlay;

21
app/soapbox/features/status/components/detailed-status.tsx
View file

@ -1,5 +1,4 @@
import classNames from 'clsx';
import React, { useRef } from 'react';
import React, { useEffect, useRef, useState } from 'react';
import { FormattedDate, FormattedMessage, useIntl } from 'react-intl';
import Icon from 'soapbox/components/icon';
@ -35,7 +34,17 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
showMedia,
}) => {
const intl = useIntl();
const node = useRef<HTMLDivElement>(null);
const overlay = useRef<HTMLDivElement>(null);
const [minHeight, setMinHeight] = useState(208);
useEffect(() => {
if (overlay.current) {
setMinHeight(overlay.current.getBoundingClientRect().height);
}
}, [overlay.current]);
const handleOpenCompareHistoryModal = () => {
onOpenCompareHistoryModal(status);
@ -87,17 +96,15 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
<StatusReplyMentions status={actualStatus} />
<Stack
className={
classNames('relative z-0', {
'min-h-[220px]': isUnderReview || isSensitive,
})
}
className='relative z-0'
style={{ minHeight: isUnderReview || isSensitive ? Math.max(minHeight, 208) + 12 : undefined }}
>
{(isUnderReview || isSensitive) && (
<SensitiveContentOverlay
status={status}
visible={showMedia}
onToggleVisibility={onToggleMediaVisibility}
ref={overlay}
/>
)}

1
package.json
View file

@ -68,6 +68,7 @@
"@sentry/tracing": "^7.11.1",
"@tabler/icons": "^1.111.0",
"@tailwindcss/forms": "^0.5.3",
"@tailwindcss/line-clamp": "^0.4.2",
"@tailwindcss/typography": "^0.5.7",
"@tanstack/react-query": "^4.0.10",
"@testing-library/react": "^12.1.4",

1
tailwind.config.js
View file

@ -85,6 +85,7 @@ module.exports = {
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/line-clamp'),
require('@tailwindcss/typography'),
],
};

5
yarn.lock
View file

@ -2272,6 +2272,11 @@
dependencies:
mini-svg-data-uri "^1.2.3"
"@tailwindcss/line-clamp@^0.4.2":
version "0.4.2"
resolved "https://registry.yarnpkg.com/@tailwindcss/line-clamp/-/line-clamp-0.4.2.tgz#f353c5a8ab2c939c6267ac5b907f012e5ee130f9"
integrity sha512-HFzAQuqYCjyy/SX9sLGB1lroPzmcnWv1FHkIpmypte10hptf4oPUfucryMKovZh2u0uiS9U5Ty3GghWfEJGwVw==
"@tailwindcss/typography@^0.5.7":
version "0.5.7"
resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.5.7.tgz#e0b95bea787ee14c5a34a74fc824e6fe86ea8855"