monorail
/
mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] Add ability to middle-mouse click posts in web UI 

Port 683db3ab25 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Eugen Rochko 2024-11-20 16:56:35 +01:00 committed by Claire
parent d65f6c2f8a
commit d2fd51691a
3 changed files with 30 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
app/javascript/flavours/glitch/components/status.jsx
View File

@ -28,6 +28,7 @@ import { Avatar } from './avatar';
import { AvatarOverlay } from './avatar_overlay'; import { AvatarOverlay } from './avatar_overlay';
import { DisplayName } from './display_name'; import { DisplayName } from './display_name';
import { getHashtagBarForStatus } from './hashtag_bar'; import { getHashtagBarForStatus } from './hashtag_bar';
import { Permalink } from './permalink';
import StatusActionBar from './status_action_bar'; import StatusActionBar from './status_action_bar';
import StatusContent from './status_content'; import StatusContent from './status_content';
import StatusIcons from './status_icons'; import StatusIcons from './status_icons';
@ -270,28 +271,18 @@ class Status extends ImmutablePureComponent {
}; };
handleClick = e => { handleClick = e => {
if (e && (e.button !== 0 || e.ctrlKey || e.metaKey)) {
return;
}
if (e) {
e.preventDefault(); e.preventDefault();
} this.handleHotkeyOpen(e);
this.handleHotkeyOpen();
}; };
handleAccountClick = (e, proper = true) => { handleMouseUp = e => {
if (e && (e.button !== 0 || e.ctrlKey || e.metaKey)) { // Only handle clicks on the empty space above the content
if (e.target !== e.currentTarget) {
return; return;
} }
if (e) { this.handleClick(e);
e.preventDefault();
e.stopPropagation();
}
this._openProfile(proper);
}; };
handleExpandedToggle = () => { handleExpandedToggle = () => {
@ -358,7 +349,7 @@ class Status extends ImmutablePureComponent {
this.props.onMention(this.props.status.get('account')); this.props.onMention(this.props.status.get('account'));
}; };
handleHotkeyOpen = () => { handleHotkeyOpen = (e) => {
if (this.props.onClick) { if (this.props.onClick) {
this.props.onClick(); this.props.onClick();
return; return;
@ -371,7 +362,13 @@ class Status extends ImmutablePureComponent {
return; return;
} }
history.push(`/@${status.getIn(['account', 'acct'])}/${status.get('id')}`); const path = `/@${status.getIn(['account', 'acct'])}/${status.get('id')}`;
if (e?.button === 0 && !(e?.ctrlKey || e?.metaKey)) {
history.push(path);
} else if (e?.button === 1 || (e?.button === 0 && (e?.ctrlKey || e?.metaKey))) {
window.open(path, '_blank', 'noreferrer noopener');
}
}; };
handleHotkeyOpenProfile = () => { handleHotkeyOpenProfile = () => {
@ -697,15 +694,14 @@ class Status extends ImmutablePureComponent {
{(connectReply || connectUp || connectToRoot) && <div className={classNames('status__line', { 'status__line--full': connectReply, 'status__line--first': !status.get('in_reply_to_id') && !connectToRoot })} />} {(connectReply || connectUp || connectToRoot) && <div className={classNames('status__line', { 'status__line--full': connectReply, 'status__line--first': !status.get('in_reply_to_id') && !connectToRoot })} />}
{(!muted) && ( {(!muted) && (
/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */ <header onMouseUp={this.handleMouseUp} className='status__info'>
<header onClick={this.handleClick} className='status__info'> <Permalink href={status.getIn(['account', 'url'])} to={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])} data-hover-card-account={status.getIn(['account', 'id'])} className='status__display-name'>
<a onClick={this.handleAccountClick} href={status.getIn(['account', 'url'])} title={status.getIn(['account', 'acct'])} data-hover-card-account={status.getIn(['account', 'id'])} className='status__display-name' target='_blank' rel='noopener noreferrer'>
<div className='status__avatar'> <div className='status__avatar'>
{statusAvatar} {statusAvatar}
</div> </div>
<DisplayName account={status.get('account')} /> <DisplayName account={status.get('account')} />
</a> </Permalink>
<StatusIcons <StatusIcons
status={status} status={status}
mediaIcons={contentMediaIcons.concat(extraMediaIcons)} mediaIcons={contentMediaIcons.concat(extraMediaIcons)}

2
app/javascript/flavours/glitch/components/status_content.jsx
View File

@ -319,7 +319,7 @@ class StatusContent extends PureComponent {
element = element.parentNode; element = element.parentNode;
} }
if (deltaX + deltaY < 5 && e.button === 0 && this.props.onClick) { if (deltaX + deltaY < 5 && (e.button === 0 || e.button === 1) && this.props.onClick) {
this.props.onClick(e); this.props.onClick(e);
} }

12
app/javascript/flavours/glitch/features/notifications_v2/components/embedded_status.tsx
View File

@ -43,7 +43,7 @@ export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
); );
const handleMouseUp = useCallback<React.MouseEventHandler<HTMLDivElement>>( const handleMouseUp = useCallback<React.MouseEventHandler<HTMLDivElement>>(
({ clientX, clientY, target, button }) => { ({ clientX, clientY, target, button, ctrlKey, metaKey }) => {
const [startX, startY] = clickCoordinatesRef.current ?? [0, 0]; const [startX, startY] = clickCoordinatesRef.current ?? [0, 0];
const [deltaX, deltaY] = [ const [deltaX, deltaY] = [
Math.abs(clientX - startX), Math.abs(clientX - startX),
@ -64,8 +64,14 @@ export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
element = element.parentNode as HTMLDivElement | null; element = element.parentNode as HTMLDivElement | null;
} }
if (deltaX + deltaY < 5 && button === 0 && account) { if (deltaX + deltaY < 5 && account) {
history.push(`/@${account.acct}/${statusId}`); const path = `/@${account.acct}/${statusId}`;
if (button === 0 && !(ctrlKey || metaKey)) {
history.push(path);
} else if (button === 1 || (button === 0 && (ctrlKey || metaKey))) {
window.open(path, '_blank', 'noreferrer noopener');
}
} }
clickCoordinatesRef.current = null; clickCoordinatesRef.current = null;