|
|
@ -1,4 +1,3 @@
|
|
|
|
import classNames from 'clsx';
|
|
|
|
|
|
|
|
import { List as ImmutableList } from 'immutable';
|
|
|
|
import { List as ImmutableList } from 'immutable';
|
|
|
|
import React from 'react';
|
|
|
|
import React from 'react';
|
|
|
|
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
|
|
|
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
|
|
@ -16,6 +15,7 @@ import { initReport } from 'soapbox/actions/reports';
|
|
|
|
import { deleteStatus, editStatus, toggleMuteStatus } from 'soapbox/actions/statuses';
|
|
|
|
import { deleteStatus, editStatus, toggleMuteStatus } from 'soapbox/actions/statuses';
|
|
|
|
import EmojiButtonWrapper from 'soapbox/components/emoji-button-wrapper';
|
|
|
|
import EmojiButtonWrapper from 'soapbox/components/emoji-button-wrapper';
|
|
|
|
import StatusActionButton from 'soapbox/components/status-action-button';
|
|
|
|
import StatusActionButton from 'soapbox/components/status-action-button';
|
|
|
|
|
|
|
|
import { HStack } from 'soapbox/components/ui';
|
|
|
|
import DropdownMenuContainer from 'soapbox/containers/dropdown-menu-container';
|
|
|
|
import DropdownMenuContainer from 'soapbox/containers/dropdown-menu-container';
|
|
|
|
import { useAppDispatch, useAppSelector, useFeatures, useOwnAccount, useSettings, useSoapboxConfig } from 'soapbox/hooks';
|
|
|
|
import { useAppDispatch, useAppSelector, useFeatures, useOwnAccount, useSettings, useSoapboxConfig } from 'soapbox/hooks';
|
|
|
|
import { isLocal } from 'soapbox/utils/accounts';
|
|
|
|
import { isLocal } from 'soapbox/utils/accounts';
|
|
|
@ -127,8 +127,6 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
onOpenUnauthorizedModal('REPLY');
|
|
|
|
onOpenUnauthorizedModal('REPLY');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const handleShareClick = () => {
|
|
|
|
const handleShareClick = () => {
|
|
|
@ -146,18 +144,13 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
onOpenUnauthorizedModal('FAVOURITE');
|
|
|
|
onOpenUnauthorizedModal('FAVOURITE');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const handleBookmarkClick: React.EventHandler<React.MouseEvent> = (e) => {
|
|
|
|
const handleBookmarkClick: React.EventHandler<React.MouseEvent> = (e) => {
|
|
|
|
e.stopPropagation();
|
|
|
|
|
|
|
|
dispatch(toggleBookmark(status));
|
|
|
|
dispatch(toggleBookmark(status));
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const handleReblogClick: React.EventHandler<React.MouseEvent> = e => {
|
|
|
|
const handleReblogClick: React.EventHandler<React.MouseEvent> = e => {
|
|
|
|
e.stopPropagation();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (me) {
|
|
|
|
if (me) {
|
|
|
|
const modalReblog = () => dispatch(toggleReblog(status));
|
|
|
|
const modalReblog = () => dispatch(toggleReblog(status));
|
|
|
|
const boostModal = settings.get('boostModal');
|
|
|
|
const boostModal = settings.get('boostModal');
|
|
|
@ -172,8 +165,6 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const handleQuoteClick: React.EventHandler<React.MouseEvent> = (e) => {
|
|
|
|
const handleQuoteClick: React.EventHandler<React.MouseEvent> = (e) => {
|
|
|
|
e.stopPropagation();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (me) {
|
|
|
|
if (me) {
|
|
|
|
dispatch(quoteCompose(status));
|
|
|
|
dispatch(quoteCompose(status));
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
@ -199,12 +190,10 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const handleDeleteClick: React.EventHandler<React.MouseEvent> = (e) => {
|
|
|
|
const handleDeleteClick: React.EventHandler<React.MouseEvent> = (e) => {
|
|
|
|
e.stopPropagation();
|
|
|
|
|
|
|
|
doDeleteStatus();
|
|
|
|
doDeleteStatus();
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const handleRedraftClick: React.EventHandler<React.MouseEvent> = (e) => {
|
|
|
|
const handleRedraftClick: React.EventHandler<React.MouseEvent> = (e) => {
|
|
|
|
e.stopPropagation();
|
|
|
|
|
|
|
|
doDeleteStatus(true);
|
|
|
|
doDeleteStatus(true);
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
@ -213,35 +202,29 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const handlePinClick: React.EventHandler<React.MouseEvent> = (e) => {
|
|
|
|
const handlePinClick: React.EventHandler<React.MouseEvent> = (e) => {
|
|
|
|
e.stopPropagation();
|
|
|
|
|
|
|
|
dispatch(togglePin(status));
|
|
|
|
dispatch(togglePin(status));
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const handleMentionClick: React.EventHandler<React.MouseEvent> = (e) => {
|
|
|
|
const handleMentionClick: React.EventHandler<React.MouseEvent> = (e) => {
|
|
|
|
e.stopPropagation();
|
|
|
|
|
|
|
|
dispatch(mentionCompose(status.account as Account));
|
|
|
|
dispatch(mentionCompose(status.account as Account));
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const handleDirectClick: React.EventHandler<React.MouseEvent> = (e) => {
|
|
|
|
const handleDirectClick: React.EventHandler<React.MouseEvent> = (e) => {
|
|
|
|
e.stopPropagation();
|
|
|
|
|
|
|
|
dispatch(directCompose(status.account as Account));
|
|
|
|
dispatch(directCompose(status.account as Account));
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const handleChatClick: React.EventHandler<React.MouseEvent> = (e) => {
|
|
|
|
const handleChatClick: React.EventHandler<React.MouseEvent> = (e) => {
|
|
|
|
e.stopPropagation();
|
|
|
|
|
|
|
|
const account = status.account as Account;
|
|
|
|
const account = status.account as Account;
|
|
|
|
dispatch(launchChat(account.id, history));
|
|
|
|
dispatch(launchChat(account.id, history));
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const handleMuteClick: React.EventHandler<React.MouseEvent> = (e) => {
|
|
|
|
const handleMuteClick: React.EventHandler<React.MouseEvent> = (e) => {
|
|
|
|
e.stopPropagation();
|
|
|
|
|
|
|
|
dispatch(initMuteModal(status.account as Account));
|
|
|
|
dispatch(initMuteModal(status.account as Account));
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const handleBlockClick: React.EventHandler<React.MouseEvent> = (e) => {
|
|
|
|
const handleBlockClick: React.EventHandler<React.MouseEvent> = (e) => {
|
|
|
|
e.stopPropagation();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const account = status.get('account') as Account;
|
|
|
|
const account = status.get('account') as Account;
|
|
|
|
|
|
|
|
|
|
|
|
dispatch(openModal('CONFIRM', {
|
|
|
|
dispatch(openModal('CONFIRM', {
|
|
|
|
icon: require('@tabler/icons/ban.svg'),
|
|
|
|
icon: require('@tabler/icons/ban.svg'),
|
|
|
|
heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.get('acct') }} />,
|
|
|
|
heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.get('acct') }} />,
|
|
|
@ -257,7 +240,6 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const handleOpen: React.EventHandler<React.MouseEvent> = (e) => {
|
|
|
|
const handleOpen: React.EventHandler<React.MouseEvent> = (e) => {
|
|
|
|
e.stopPropagation();
|
|
|
|
|
|
|
|
history.push(`/@${status.getIn(['account', 'acct'])}/posts/${status.id}`);
|
|
|
|
history.push(`/@${status.getIn(['account', 'acct'])}/posts/${status.id}`);
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
@ -269,12 +251,10 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const handleReport: React.EventHandler<React.MouseEvent> = (e) => {
|
|
|
|
const handleReport: React.EventHandler<React.MouseEvent> = (e) => {
|
|
|
|
e.stopPropagation();
|
|
|
|
|
|
|
|
dispatch(initReport(status.account as Account, status));
|
|
|
|
dispatch(initReport(status.account as Account, status));
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const handleConversationMuteClick: React.EventHandler<React.MouseEvent> = (e) => {
|
|
|
|
const handleConversationMuteClick: React.EventHandler<React.MouseEvent> = (e) => {
|
|
|
|
e.stopPropagation();
|
|
|
|
|
|
|
|
dispatch(toggleMuteStatus(status));
|
|
|
|
dispatch(toggleMuteStatus(status));
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
@ -282,8 +262,6 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
|
|
|
|
const { uri } = status;
|
|
|
|
const { uri } = status;
|
|
|
|
const textarea = document.createElement('textarea');
|
|
|
|
const textarea = document.createElement('textarea');
|
|
|
|
|
|
|
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
textarea.textContent = uri;
|
|
|
|
textarea.textContent = uri;
|
|
|
|
textarea.style.position = 'fixed';
|
|
|
|
textarea.style.position = 'fixed';
|
|
|
|
|
|
|
|
|
|
|
@ -300,18 +278,15 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const onModerate: React.MouseEventHandler = (e) => {
|
|
|
|
const onModerate: React.MouseEventHandler = (e) => {
|
|
|
|
e.stopPropagation();
|
|
|
|
|
|
|
|
const account = status.account as Account;
|
|
|
|
const account = status.account as Account;
|
|
|
|
dispatch(openModal('ACCOUNT_MODERATION', { accountId: account.id }));
|
|
|
|
dispatch(openModal('ACCOUNT_MODERATION', { accountId: account.id }));
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const handleDeleteStatus: React.EventHandler<React.MouseEvent> = (e) => {
|
|
|
|
const handleDeleteStatus: React.EventHandler<React.MouseEvent> = (e) => {
|
|
|
|
e.stopPropagation();
|
|
|
|
|
|
|
|
dispatch(deleteStatusModal(intl, status.id));
|
|
|
|
dispatch(deleteStatusModal(intl, status.id));
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const handleToggleStatusSensitivity: React.EventHandler<React.MouseEvent> = (e) => {
|
|
|
|
const handleToggleStatusSensitivity: React.EventHandler<React.MouseEvent> = (e) => {
|
|
|
|
e.stopPropagation();
|
|
|
|
|
|
|
|
dispatch(toggleStatusSensitivityModal(intl, status.id, status.sensitive));
|
|
|
|
dispatch(toggleStatusSensitivityModal(intl, status.id, status.sensitive));
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
@ -550,12 +525,14 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
|
|
|
|
const canShare = ('share' in navigator) && status.visibility === 'public';
|
|
|
|
const canShare = ('share' in navigator) && status.visibility === 'public';
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<div
|
|
|
|
<HStack data-testid='status-action-bar'>
|
|
|
|
data-testid='status-action-bar'
|
|
|
|
<HStack
|
|
|
|
className={classNames('flex flex-row', {
|
|
|
|
justifyContent={space === 'expand' ? 'between' : undefined}
|
|
|
|
'justify-between': space === 'expand',
|
|
|
|
space={space === 'compact' ? 2 : undefined}
|
|
|
|
'space-x-2': space === 'compact',
|
|
|
|
grow={space === 'expand'}
|
|
|
|
})}
|
|
|
|
onMouseUp={e => e.stopPropagation()}
|
|
|
|
|
|
|
|
onMouseDown={e => e.stopPropagation()}
|
|
|
|
|
|
|
|
onClick={e => e.stopPropagation()}
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<StatusActionButton
|
|
|
|
<StatusActionButton
|
|
|
|
title={replyTitle}
|
|
|
|
title={replyTitle}
|
|
|
@ -617,7 +594,8 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
|
|
|
|
icon={require('@tabler/icons/dots.svg')}
|
|
|
|
icon={require('@tabler/icons/dots.svg')}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</DropdownMenuContainer>
|
|
|
|
</DropdownMenuContainer>
|
|
|
|
</div>
|
|
|
|
</HStack>
|
|
|
|
|
|
|
|
</HStack>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|