sforkowany z mirror/soapbox
Porównaj commity
2 Commity
develop
...
status-car
Autor | SHA1 | Data |
---|---|---|
Alex Gleason | 38d3f5914b | |
Alex Gleason | b57c906e4e |
|
@ -0,0 +1,29 @@
|
|||
import classNames from 'classnames';
|
||||
import React from 'react';
|
||||
|
||||
import { Card } from './ui';
|
||||
|
||||
interface IStatusCard {
|
||||
className?: string,
|
||||
variant?: 'default' | 'rounded',
|
||||
children: React.ReactNode,
|
||||
}
|
||||
|
||||
/**
|
||||
* Wrapper around a Status with all the cute spacing.
|
||||
* Not to be confused with the API entity called "Card".
|
||||
*/
|
||||
const StatusCard: React.FC<IStatusCard> = ({ variant = 'rounded', className, children }) => {
|
||||
return (
|
||||
<Card
|
||||
variant={variant}
|
||||
className={classNames({
|
||||
'py-6 sm:p-5': variant === 'rounded',
|
||||
}, className)}
|
||||
>
|
||||
{children}
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default StatusCard;
|
|
@ -15,10 +15,11 @@ import { useAppDispatch, useSettings } from 'soapbox/hooks';
|
|||
import { defaultMediaVisibility, textForScreenReader, getActualStatus } from 'soapbox/utils/status';
|
||||
|
||||
import StatusActionBar from './status-action-bar';
|
||||
import StatusCard from './status-card';
|
||||
import StatusMedia from './status-media';
|
||||
import StatusReplyMentions from './status-reply-mentions';
|
||||
import StatusContent from './status_content';
|
||||
import { Card, HStack, Text } from './ui';
|
||||
import { HStack, Text } from './ui';
|
||||
|
||||
import type { Map as ImmutableMap } from 'immutable';
|
||||
import type {
|
||||
|
@ -63,7 +64,6 @@ const Status: React.FC<IStatus> = (props) => {
|
|||
muted,
|
||||
hidden,
|
||||
featured,
|
||||
unread,
|
||||
group,
|
||||
hideActionBar,
|
||||
variant = 'rounded',
|
||||
|
@ -322,16 +322,7 @@ const Status: React.FC<IStatus> = (props) => {
|
|||
</div>
|
||||
)}
|
||||
|
||||
<Card
|
||||
variant={variant}
|
||||
className={classNames('status__wrapper', `status-${actualStatus.visibility}`, {
|
||||
'py-6 sm:p-5': variant === 'rounded',
|
||||
'status-reply': !!status.in_reply_to_id,
|
||||
muted,
|
||||
read: unread === false,
|
||||
})}
|
||||
data-id={status.id}
|
||||
>
|
||||
<StatusCard variant={variant} data-id={status.id}>
|
||||
{reblogElementMobile}
|
||||
|
||||
<div className='mb-4'>
|
||||
|
@ -384,7 +375,7 @@ const Status: React.FC<IStatus> = (props) => {
|
|||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</StatusCard>
|
||||
</div>
|
||||
</HotKeys>
|
||||
);
|
||||
|
|
|
@ -1,9 +1,10 @@
|
|||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import StatusCard from 'soapbox/components/status-card';
|
||||
import { Stack, HStack, Card, Avatar, Text, Icon } from 'soapbox/components/ui';
|
||||
import IconButton from 'soapbox/components/ui/icon-button/icon-button';
|
||||
import StatusCard from 'soapbox/features/status/components/card';
|
||||
import LinkPreview from 'soapbox/features/status/components/card';
|
||||
import { useAppSelector } from 'soapbox/hooks';
|
||||
|
||||
import type { Card as CardEntity } from 'soapbox/types/entities';
|
||||
|
@ -53,7 +54,7 @@ const Ad: React.FC<IAd> = ({ card, impression }) => {
|
|||
|
||||
return (
|
||||
<div className='relative'>
|
||||
<Card className='py-6 sm:p-5' variant='rounded'>
|
||||
<StatusCard>
|
||||
<Stack space={4}>
|
||||
<HStack alignItems='center' space={3}>
|
||||
<Avatar src={instance.thumbnail} size={42} />
|
||||
|
@ -88,9 +89,9 @@ const Ad: React.FC<IAd> = ({ card, impression }) => {
|
|||
</Stack>
|
||||
</HStack>
|
||||
|
||||
<StatusCard card={card} onOpenMedia={() => {}} horizontal />
|
||||
<LinkPreview card={card} onOpenMedia={() => {}} horizontal />
|
||||
</Stack>
|
||||
</Card>
|
||||
</StatusCard>
|
||||
|
||||
{showInfo && (
|
||||
<div ref={infobox} className='absolute top-5 right-5 max-w-[234px]'>
|
||||
|
|
|
@ -163,7 +163,7 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
|
|||
return (
|
||||
<HStack space={3}>
|
||||
{getReposts()}
|
||||
|
||||
|
||||
{features.emojiReacts ? getEmojiReacts() : getFavourites()}
|
||||
</HStack>
|
||||
);
|
||||
|
|
|
@ -42,8 +42,7 @@ const ThreadStatus: React.FC<IThreadStatus> = (props): JSX.Element => {
|
|||
<div className='thread__status'>
|
||||
{renderConnector()}
|
||||
{isLoaded ? (
|
||||
// @ts-ignore FIXME
|
||||
<StatusContainer {...props} />
|
||||
<StatusContainer {...props} variant='default' />
|
||||
) : (
|
||||
<PlaceholderStatus thread />
|
||||
)}
|
||||
|
|
|
@ -1,9 +1,10 @@
|
|||
import classNames from 'classnames';
|
||||
import React from 'react';
|
||||
|
||||
import StatusCard from 'soapbox/components/status-card';
|
||||
import StatusReplyMentions from 'soapbox/components/status-reply-mentions';
|
||||
import StatusContent from 'soapbox/components/status_content';
|
||||
import { Card, HStack } from 'soapbox/components/ui';
|
||||
import { HStack } from 'soapbox/components/ui';
|
||||
import AccountContainer from 'soapbox/containers/account_container';
|
||||
import PlaceholderCard from 'soapbox/features/placeholder/components/placeholder_card';
|
||||
import PlaceholderMediaGallery from 'soapbox/features/placeholder/components/placeholder_media_gallery';
|
||||
|
@ -59,10 +60,7 @@ const PendingStatus: React.FC<IPendingStatus> = ({ idempotencyKey, className, mu
|
|||
return (
|
||||
<div className={classNames('opacity-50', className)}>
|
||||
<div className={classNames('status', { 'status-reply': !!status.in_reply_to_id, muted })} data-id={status.id}>
|
||||
<Card
|
||||
className={classNames('py-6 sm:p-5', `status-${status.visibility}`, { 'status-reply': !!status.in_reply_to_id })}
|
||||
variant={thread ? 'default' : 'rounded'}
|
||||
>
|
||||
<StatusCard variant={thread ? 'default' : 'rounded'}>
|
||||
<div className='mb-4'>
|
||||
<HStack justifyContent='between' alignItems='start'>
|
||||
<AccountContainer
|
||||
|
@ -92,7 +90,7 @@ const PendingStatus: React.FC<IPendingStatus> = ({ idempotencyKey, className, mu
|
|||
|
||||
{/* TODO */}
|
||||
{/* <PlaceholderActionBar /> */}
|
||||
</Card>
|
||||
</StatusCard>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -49,7 +49,7 @@ declare module 'soapbox/react-notification' {
|
|||
title?: string | ReactElement<any>;
|
||||
/** Custom title styles. */
|
||||
titleStyle?: object;
|
||||
|
||||
|
||||
/**
|
||||
* Callback function to run when dismissAfter timer runs out
|
||||
* @param notification Notification currently being dismissed.
|
||||
|
|
Ładowanie…
Reference in New Issue