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

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

@ -28,6 +28,7 @@ import { Avatar } from './avatar';
import { AvatarOverlay } from './avatar_overlay';
import { DisplayName } from './display_name';
import { getHashtagBarForStatus } from './hashtag_bar';
import { Permalink } from './permalink';
import StatusActionBar from './status_action_bar';
import StatusContent from './status_content';
import StatusIcons from './status_icons';
@ -270,28 +271,18 @@ class Status extends ImmutablePureComponent {
};
handleClick = e => {
if (e && (e.button !== 0 || e.ctrlKey || e.metaKey)) {
return;
}
if (e) {
e.preventDefault();
}
this.handleHotkeyOpen();
e.preventDefault();
this.handleHotkeyOpen(e);
};
handleAccountClick = (e, proper = true) => {
if (e && (e.button !== 0 || e.ctrlKey || e.metaKey)) {
handleMouseUp = e => {
// Only handle clicks on the empty space above the content
if (e.target !== e.currentTarget) {
return;
}
if (e) {
e.preventDefault();
e.stopPropagation();
}
this._openProfile(proper);
this.handleClick(e);
};
handleExpandedToggle = () => {
@ -358,7 +349,7 @@ class Status extends ImmutablePureComponent {
this.props.onMention(this.props.status.get('account'));
};
handleHotkeyOpen = () => {
handleHotkeyOpen = (e) => {
if (this.props.onClick) {
this.props.onClick();
return;
@ -371,7 +362,13 @@ class Status extends ImmutablePureComponent {
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 = () => {
@ -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 })} />}
{(!muted) && (
/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */
<header onClick={this.handleClick} className='status__info'>
<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'>
<header onMouseUp={this.handleMouseUp} 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'>
<div className='status__avatar'>
{statusAvatar}
</div>
<DisplayName account={status.get('account')} />
</a>
</Permalink>
<StatusIcons
status={status}
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;
}
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);
}

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>>(
({ clientX, clientY, target, button }) => {
({ clientX, clientY, target, button, ctrlKey, metaKey }) => {
const [startX, startY] = clickCoordinatesRef.current ?? [0, 0];
const [deltaX, deltaY] = [
Math.abs(clientX - startX),
@ -64,8 +64,14 @@ export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
element = element.parentNode as HTMLDivElement | null;
}
if (deltaX + deltaY < 5 && button === 0 && account) {
history.push(`/@${account.acct}/${statusId}`);
if (deltaX + deltaY < 5 && account) {
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;