Cleanup, fix sensitive content overlay

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2024-10-28 16:23:51 +01:00
parent bcf3df869f
commit ec4c1a29e2
5 changed files with 20 additions and 12 deletions

View file

@ -24,7 +24,7 @@
</body> </body>
<script> <script>
window.BIG_BUFFET_CONFIG = { window.BIG_BUFFET_CONFIG = {
baseUrl: 'https://pleroma.woodynet.net/', baseUrl: 'https://pl.fediverse.pl/',
mountPoint: 'bigbuffet', mountPoint: 'bigbuffet',
styles: ['default', 'generated'], styles: ['default', 'generated'],
icons: {}, icons: {},

View file

@ -9,13 +9,14 @@ import VerificationBadge from 'bigbuffet/components/verification-badge';
import bigBuffetConfig from 'bigbuffet/config'; import bigBuffetConfig from 'bigbuffet/config';
import Emojify from 'bigbuffet/features/emoji'; import Emojify from 'bigbuffet/features/emoji';
import ActionButton from 'bigbuffet/features/ui/components/action-button'; import ActionButton from 'bigbuffet/features/ui/components/action-button';
import { useModalsStore } from 'bigbuffet/stores/modals';
import { getAcct } from 'bigbuffet/utils/accounts'; import { getAcct } from 'bigbuffet/utils/accounts';
import type { NormalizedAccount as AccountEntity } from 'pl-hooks'; import type { NormalizedAccount as AccountEntity } from 'pl-hooks';
interface IProfilePopper { interface IProfilePopper {
condition: boolean; condition: boolean;
wrapper: (children: any) => React.ReactElement<any, any>; wrapper: (children: React.ReactNode) => React.ReactElement<any, any>;
children: React.ReactNode; children: React.ReactNode;
} }
@ -36,7 +37,7 @@ export interface IAccount {
timestamp?: string; timestamp?: string;
timestampUrl?: string; timestampUrl?: string;
withLinkToProfile?: boolean; withLinkToProfile?: boolean;
showEdit?: boolean; showEdit?: string | false;
} }
const Account = ({ const Account = ({
@ -53,6 +54,8 @@ const Account = ({
const overflowRef = React.useRef<HTMLDivElement>(null); const overflowRef = React.useRef<HTMLDivElement>(null);
const actionRef = React.useRef<HTMLDivElement>(null); const actionRef = React.useRef<HTMLDivElement>(null);
const { openModal } = useModalsStore();
const username = account ? getAcct(account, bigBuffetConfig.displayFqn) : null; const username = account ? getAcct(account, bigBuffetConfig.displayFqn) : null;
const renderAction = () => { const renderAction = () => {
@ -92,6 +95,8 @@ const Account = ({
</div> </div>
); );
const openCompareHistoryModal = () => showEdit && openModal('COMPARE_HISTORY', { statusId: showEdit });
return ( return (
<div data-testid='account' className='account-card__container' ref={overflowRef}> <div data-testid='account' className='account-card__container' ref={overflowRef}>
<div className='account-card'> <div className='account-card'>
@ -176,7 +181,13 @@ const Account = ({
<> <>
<span>&middot;</span> <span>&middot;</span>
<Icon className='account-card__account__name__edit-icon' icon='edit' /> <div
onClick={openCompareHistoryModal}
role='button'
tabIndex={0}
>
<Icon className='account-card__account__name__edit-icon' icon='edit' />
</div>
</> </>
) : null} ) : null}
</div> </div>

View file

@ -122,7 +122,7 @@ const ScrollableList = React.forwardRef<Virtualizer<any, any>, IScrollableList &
if (autoloadMore || !hasMore || !onLoadMore) { if (autoloadMore || !hasMore || !onLoadMore) {
return null; return null;
} else { } else {
const button = <LoadMore className='mt-4' visible={!isLoading} onClick={onLoadMore} />; const button = <LoadMore visible={!isLoading} onClick={onLoadMore} />;
return button; return button;
} }

View file

@ -265,7 +265,7 @@ const Status: React.FC<IStatus> = (props) => {
timestampUrl={actualStatus.url} timestampUrl={actualStatus.url}
action={accountAction} action={accountAction}
hideActions={!accountAction} hideActions={!accountAction}
showEdit={!!actualStatus.edited_at} showEdit={actualStatus.edited_at ? actualStatus.id : false}
showAccountHoverCard={hoverable} showAccountHoverCard={hoverable}
withLinkToProfile={hoverable} withLinkToProfile={hoverable}
/> />
@ -279,7 +279,7 @@ const Status: React.FC<IStatus> = (props) => {
style={{ minHeight: actualStatus.sensitive ? Math.max(minHeight, 208) + 12 : undefined }} style={{ minHeight: actualStatus.sensitive ? Math.max(minHeight, 208) + 12 : undefined }}
> >
{actualStatus.sensitive && ( {actualStatus.sensitive && (
<SensitiveContentOverlay status={status} ref={overlay} /> <SensitiveContentOverlay status={actualStatus} ref={overlay} />
)} )}
{actualStatus.event ? <EventPreview status={actualStatus} /> : ( {actualStatus.event ? <EventPreview status={actualStatus} /> : (

View file

@ -80,11 +80,8 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
className='detailed-status__body' className='detailed-status__body'
style={{ minHeight: actualStatus.sensitive ? Math.max(minHeight, 208) + 12 : undefined }} style={{ minHeight: actualStatus.sensitive ? Math.max(minHeight, 208) + 12 : undefined }}
> >
{(actualStatus.sensitive) && ( {actualStatus.sensitive && (
<SensitiveContentOverlay <SensitiveContentOverlay status={actualStatus} ref={overlay} />
status={status}
ref={overlay}
/>
)} )}
<div className='detailed-status__content'> <div className='detailed-status__content'>