mirror of https://github.com/mastodon/mastodon.git
Add click handlers for status previews
parent
f0315bdd08
commit
be36081f54
|
@ -13,6 +13,7 @@ import { cancelReplyCompose } from 'mastodon/actions/compose';
|
||||||
import { Icon } from 'mastodon/components/icon';
|
import { Icon } from 'mastodon/components/icon';
|
||||||
import { IconButton } from 'mastodon/components/icon_button';
|
import { IconButton } from 'mastodon/components/icon_button';
|
||||||
import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
|
import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
|
||||||
|
import { EmbeddedStatusContent } from 'mastodon/features/notifications_v2/components/embedded_status_content';
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
cancel: { id: 'reply_indicator.cancel', defaultMessage: 'Cancel' },
|
cancel: { id: 'reply_indicator.cancel', defaultMessage: 'Cancel' },
|
||||||
|
@ -33,8 +34,6 @@ export const EditIndicator = () => {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
const content = { __html: status.get('contentHtml') };
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='edit-indicator'>
|
<div className='edit-indicator'>
|
||||||
<div className='edit-indicator__header'>
|
<div className='edit-indicator__header'>
|
||||||
|
@ -49,7 +48,12 @@ export const EditIndicator = () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='edit-indicator__content translate' dangerouslySetInnerHTML={content} />
|
<EmbeddedStatusContent
|
||||||
|
className='edit-indicator__content translate'
|
||||||
|
content={status.get('contentHtml')}
|
||||||
|
language={status.get('language')}
|
||||||
|
mentions={status.get('mentions')}
|
||||||
|
/>
|
||||||
|
|
||||||
{(status.get('poll') || status.get('media_attachments').size > 0) && (
|
{(status.get('poll') || status.get('media_attachments').size > 0) && (
|
||||||
<div className='edit-indicator__attachments'>
|
<div className='edit-indicator__attachments'>
|
||||||
|
|
|
@ -9,6 +9,7 @@ import PhotoLibraryIcon from '@/material-icons/400-24px/photo_library.svg?react'
|
||||||
import { Avatar } from 'mastodon/components/avatar';
|
import { Avatar } from 'mastodon/components/avatar';
|
||||||
import { DisplayName } from 'mastodon/components/display_name';
|
import { DisplayName } from 'mastodon/components/display_name';
|
||||||
import { Icon } from 'mastodon/components/icon';
|
import { Icon } from 'mastodon/components/icon';
|
||||||
|
import { EmbeddedStatusContent } from 'mastodon/features/notifications_v2/components/embedded_status_content';
|
||||||
|
|
||||||
export const ReplyIndicator = () => {
|
export const ReplyIndicator = () => {
|
||||||
const inReplyToId = useSelector(state => state.getIn(['compose', 'in_reply_to']));
|
const inReplyToId = useSelector(state => state.getIn(['compose', 'in_reply_to']));
|
||||||
|
@ -19,8 +20,6 @@ export const ReplyIndicator = () => {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
const content = { __html: status.get('contentHtml') };
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='reply-indicator'>
|
<div className='reply-indicator'>
|
||||||
<div className='reply-indicator__line' />
|
<div className='reply-indicator__line' />
|
||||||
|
@ -34,7 +33,12 @@ export const ReplyIndicator = () => {
|
||||||
<DisplayName account={account} />
|
<DisplayName account={account} />
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
<div className='reply-indicator__content translate' dangerouslySetInnerHTML={content} />
|
<EmbeddedStatusContent
|
||||||
|
className='reply-indicator__content translate'
|
||||||
|
content={status.get('contentHtml')}
|
||||||
|
language={status.get('language')}
|
||||||
|
mentions={status.get('mentions')}
|
||||||
|
/>
|
||||||
|
|
||||||
{(status.get('poll') || status.get('media_attachments').size > 0) && (
|
{(status.get('poll') || status.get('media_attachments').size > 0) && (
|
||||||
<div className='reply-indicator__attachments'>
|
<div className='reply-indicator__attachments'>
|
||||||
|
|
|
@ -1,3 +1,5 @@
|
||||||
|
import { useCallback } from 'react';
|
||||||
|
import { useHistory } from 'react-router-dom';
|
||||||
import { FormattedMessage } from 'react-intl';
|
import { FormattedMessage } from 'react-intl';
|
||||||
|
|
||||||
import type { List } from 'immutable';
|
import type { List } from 'immutable';
|
||||||
|
@ -9,17 +11,25 @@ import { DisplayName } from 'mastodon/components/display_name';
|
||||||
import { Icon } from 'mastodon/components/icon';
|
import { Icon } from 'mastodon/components/icon';
|
||||||
import type { Status } from 'mastodon/models/status';
|
import type { Status } from 'mastodon/models/status';
|
||||||
import { useAppSelector } from 'mastodon/store';
|
import { useAppSelector } from 'mastodon/store';
|
||||||
|
import { EmbeddedStatusContent } from './embedded_status_content';
|
||||||
|
|
||||||
export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
|
export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
|
||||||
statusId,
|
statusId,
|
||||||
}) => {
|
}) => {
|
||||||
|
const history = useHistory();
|
||||||
|
|
||||||
const status = useAppSelector(
|
const status = useAppSelector(
|
||||||
(state) => state.statuses.get(statusId) as Status | undefined,
|
(state) => state.statuses.get(statusId) as Status | undefined,
|
||||||
);
|
);
|
||||||
|
|
||||||
const account = useAppSelector((state) =>
|
const account = useAppSelector((state) =>
|
||||||
state.accounts.get(status?.get('account') as string),
|
state.accounts.get(status?.get('account') as string),
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const handleClick = useCallback(() => {
|
||||||
|
history.push(`/@${account.acct}/${statusId}`);
|
||||||
|
}, [statusId, account, history]);
|
||||||
|
|
||||||
if (!status) {
|
if (!status) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
@ -27,12 +37,12 @@ export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
|
||||||
// Assign status attributes to variables with a forced type, as status is not yet properly typed
|
// Assign status attributes to variables with a forced type, as status is not yet properly typed
|
||||||
const contentHtml = status.get('contentHtml') as string;
|
const contentHtml = status.get('contentHtml') as string;
|
||||||
const poll = status.get('poll');
|
const poll = status.get('poll');
|
||||||
|
const language = status.get('language') as string;
|
||||||
|
const mentions = status.get('mentions');
|
||||||
const mediaAttachmentsSize = (
|
const mediaAttachmentsSize = (
|
||||||
status.get('media_attachments') as List<unknown>
|
status.get('media_attachments') as List<unknown>
|
||||||
).size;
|
).size;
|
||||||
|
|
||||||
const content = { __html: contentHtml };
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='notification-group__embedded-status'>
|
<div className='notification-group__embedded-status'>
|
||||||
<div className='notification-group__embedded-status__account'>
|
<div className='notification-group__embedded-status__account'>
|
||||||
|
@ -40,9 +50,12 @@ export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
|
||||||
<DisplayName account={account} />
|
<DisplayName account={account} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<EmbeddedStatusContent
|
||||||
className='notification-group__embedded-status__content reply-indicator__content translate'
|
className='notification-group__embedded-status__content reply-indicator__content translate'
|
||||||
dangerouslySetInnerHTML={content}
|
content={contentHtml}
|
||||||
|
language={language}
|
||||||
|
mentions={mentions}
|
||||||
|
onClick={handleClick}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{(poll || mediaAttachmentsSize > 0) && (
|
{(poll || mediaAttachmentsSize > 0) && (
|
||||||
|
|
|
@ -0,0 +1,144 @@
|
||||||
|
import { useCallback, useRef } from 'react';
|
||||||
|
import { useHistory } from 'react-router-dom';
|
||||||
|
|
||||||
|
const handleMentionClick = (history: unknown, mention: unknown, e: Event) => {
|
||||||
|
if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
|
||||||
|
e.preventDefault();
|
||||||
|
history.push(`/@${mention.get('acct')}`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleHashtagClick = (history: unknown, hashtag: string, e: Event) => {
|
||||||
|
if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
|
||||||
|
e.preventDefault();
|
||||||
|
history.push(`/tags/${hashtag.replace(/^#/, '')}`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const EmbeddedStatusContent: React.FC<{
|
||||||
|
content: string;
|
||||||
|
mentions: unknown;
|
||||||
|
language: string;
|
||||||
|
onClick?: unknown;
|
||||||
|
className?: string;
|
||||||
|
}> = ({ content, mentions, language, onClick, className }) => {
|
||||||
|
const clickCoordinatesRef = useRef();
|
||||||
|
const history = useHistory();
|
||||||
|
|
||||||
|
const handleMouseDown = useCallback(
|
||||||
|
({ clientX, clientY }) => {
|
||||||
|
clickCoordinatesRef.current = [clientX, clientY];
|
||||||
|
},
|
||||||
|
[clickCoordinatesRef],
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleMouseUp = useCallback(
|
||||||
|
({ clientX, clientY, target, button }) => {
|
||||||
|
const [startX, startY] = clickCoordinatesRef.current ?? [0, 0];
|
||||||
|
const [deltaX, deltaY] = [
|
||||||
|
Math.abs(clientX - startX),
|
||||||
|
Math.abs(clientY - startY),
|
||||||
|
];
|
||||||
|
|
||||||
|
let element = target;
|
||||||
|
|
||||||
|
while (element) {
|
||||||
|
if (
|
||||||
|
element.localName === 'button' ||
|
||||||
|
element.localName === 'a' ||
|
||||||
|
element.localName === 'label'
|
||||||
|
) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
element = element.parentNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (deltaX + deltaY < 5 && button === 0 && onClick) {
|
||||||
|
onClick();
|
||||||
|
}
|
||||||
|
|
||||||
|
clickCoordinatesRef.current = null;
|
||||||
|
},
|
||||||
|
[clickCoordinatesRef, onClick],
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleMouseEnter = useCallback(({ currentTarget }) => {
|
||||||
|
const emojis = currentTarget.querySelectorAll('.custom-emoji');
|
||||||
|
|
||||||
|
for (const emoji of emojis) {
|
||||||
|
emoji.src = emoji.getAttribute('data-original');
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleMouseLeave = useCallback(({ currentTarget }) => {
|
||||||
|
const emojis = currentTarget.querySelectorAll('.custom-emoji');
|
||||||
|
|
||||||
|
for (const emoji of emojis) {
|
||||||
|
emoji.src = emoji.getAttribute('data-static');
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleContentRef = useCallback(
|
||||||
|
(node) => {
|
||||||
|
if (!node) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const links = node.querySelectorAll('a');
|
||||||
|
|
||||||
|
for (const link of links) {
|
||||||
|
if (link.classList.contains('status-link')) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
link.classList.add('status-link');
|
||||||
|
|
||||||
|
const mention = mentions.find((item) => link.href === item.get('url'));
|
||||||
|
|
||||||
|
if (mention) {
|
||||||
|
link.addEventListener(
|
||||||
|
'click',
|
||||||
|
handleMentionClick.bind(null, history, mention),
|
||||||
|
false,
|
||||||
|
);
|
||||||
|
link.setAttribute('title', `@${mention.get('acct')}`);
|
||||||
|
link.setAttribute('href', `/@${mention.get('acct')}`);
|
||||||
|
} else if (
|
||||||
|
link.textContent[0] === '#' ||
|
||||||
|
(link.previousSibling &&
|
||||||
|
link.previousSibling.textContent &&
|
||||||
|
link.previousSibling.textContent[
|
||||||
|
link.previousSibling.textContent.length - 1
|
||||||
|
] === '#')
|
||||||
|
) {
|
||||||
|
link.addEventListener(
|
||||||
|
'click',
|
||||||
|
handleHashtagClick.bind(null, history, link.text),
|
||||||
|
false,
|
||||||
|
);
|
||||||
|
link.setAttribute('href', `/tags/${link.text.replace(/^#/, '')}`);
|
||||||
|
} else {
|
||||||
|
link.setAttribute('title', link.href);
|
||||||
|
link.classList.add('unhandled-link');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[mentions, history],
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
role='button'
|
||||||
|
tabIndex='0'
|
||||||
|
className={className}
|
||||||
|
ref={handleContentRef}
|
||||||
|
lang={language}
|
||||||
|
dangerouslySetInnerHTML={{ __html: content }}
|
||||||
|
onMouseDown={handleMouseDown}
|
||||||
|
onMouseUp={handleMouseUp}
|
||||||
|
onMouseEnter={handleMouseEnter}
|
||||||
|
onMouseLeave={handleMouseLeave}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
|
@ -671,9 +671,13 @@
|
||||||
"report.unfollow_explanation": "You are following this account. To not see their posts in your home feed anymore, unfollow them.",
|
"report.unfollow_explanation": "You are following this account. To not see their posts in your home feed anymore, unfollow them.",
|
||||||
"report_notification.attached_statuses": "{count, plural, one {{count} post} other {{count} posts}} attached",
|
"report_notification.attached_statuses": "{count, plural, one {{count} post} other {{count} posts}} attached",
|
||||||
"report_notification.categories.legal": "Legal",
|
"report_notification.categories.legal": "Legal",
|
||||||
|
"report_notification.categories.legal_sentence": "illegal content",
|
||||||
"report_notification.categories.other": "Other",
|
"report_notification.categories.other": "Other",
|
||||||
|
"report_notification.categories.other_sentence": "other",
|
||||||
"report_notification.categories.spam": "Spam",
|
"report_notification.categories.spam": "Spam",
|
||||||
|
"report_notification.categories.spam_sentence": "spam",
|
||||||
"report_notification.categories.violation": "Rule violation",
|
"report_notification.categories.violation": "Rule violation",
|
||||||
|
"report_notification.categories.violation_sentence": "rule violation",
|
||||||
"report_notification.open": "Open report",
|
"report_notification.open": "Open report",
|
||||||
"search.no_recent_searches": "No recent searches",
|
"search.no_recent_searches": "No recent searches",
|
||||||
"search.placeholder": "Search",
|
"search.placeholder": "Search",
|
||||||
|
|
|
@ -10355,8 +10355,8 @@ noscript {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__follow &__icon,
|
&--follow &__icon,
|
||||||
&__follow-request &__icon {
|
&--follow-request &__icon {
|
||||||
color: $highlight-text-color;
|
color: $highlight-text-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -10447,9 +10447,15 @@ noscript {
|
||||||
}
|
}
|
||||||
|
|
||||||
&__content {
|
&__content {
|
||||||
|
display: -webkit-box;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
color: $dark-text-color;
|
color: $dark-text-color;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-line-clamp: 4;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
max-height: 4 * 22px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
p,
|
p,
|
||||||
a {
|
a {
|
||||||
|
|
Loading…
Reference in New Issue