mirror of
https://github.com/mastodon/mastodon.git
synced 2025-07-14 16:28:16 +00:00
Compare commits
3 Commits
51f581e03e
...
3939352e92
| Author | SHA1 | Date | |
|---|---|---|---|
|
3939352e92 | ||
|
|
e89317d4c1 | ||
|
|
863c470a2b |
61
app/javascript/hooks/useLinks.ts
Normal file
61
app/javascript/hooks/useLinks.ts
Normal file
|
|
@ -0,0 +1,61 @@
|
||||||
|
import { useCallback } from 'react';
|
||||||
|
|
||||||
|
import { useHistory } from 'react-router-dom';
|
||||||
|
|
||||||
|
import { openURL } from 'mastodon/actions/search';
|
||||||
|
import { useAppDispatch } from 'mastodon/store';
|
||||||
|
|
||||||
|
const isMentionClick = (element: HTMLAnchorElement) =>
|
||||||
|
element.classList.contains('mention');
|
||||||
|
|
||||||
|
const isHashtagClick = (element: HTMLAnchorElement) =>
|
||||||
|
element.textContent?.[0] === '#' ||
|
||||||
|
element.previousSibling?.textContent?.endsWith('#');
|
||||||
|
|
||||||
|
export const useLinks = () => {
|
||||||
|
const history = useHistory();
|
||||||
|
const dispatch = useAppDispatch();
|
||||||
|
|
||||||
|
const handleHashtagClick = useCallback(
|
||||||
|
(element: HTMLAnchorElement) => {
|
||||||
|
const { textContent } = element;
|
||||||
|
|
||||||
|
if (!textContent) return;
|
||||||
|
|
||||||
|
history.push(`/tags/${textContent.replace(/^#/, '')}`);
|
||||||
|
},
|
||||||
|
[history],
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleMentionClick = useCallback(
|
||||||
|
(element: HTMLAnchorElement) => {
|
||||||
|
dispatch(
|
||||||
|
openURL(element.href, history, () => {
|
||||||
|
window.location.href = element.href;
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
[dispatch, history],
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleClick = useCallback(
|
||||||
|
(e: React.MouseEvent) => {
|
||||||
|
const target = (e.target as HTMLElement).closest('a');
|
||||||
|
|
||||||
|
if (!target || e.button !== 0 || e.ctrlKey || e.metaKey) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isMentionClick(target)) {
|
||||||
|
e.preventDefault();
|
||||||
|
handleMentionClick(target);
|
||||||
|
} else if (isHashtagClick(target)) {
|
||||||
|
e.preventDefault();
|
||||||
|
handleHashtagClick(target);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[handleMentionClick, handleHashtagClick],
|
||||||
|
);
|
||||||
|
|
||||||
|
return handleClick;
|
||||||
|
};
|
||||||
29
app/javascript/hooks/useTimeout.ts
Normal file
29
app/javascript/hooks/useTimeout.ts
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
import { useRef, useCallback, useEffect } from 'react';
|
||||||
|
|
||||||
|
export const useTimeout = () => {
|
||||||
|
const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
|
||||||
|
|
||||||
|
const set = useCallback((callback: () => void, delay: number) => {
|
||||||
|
if (timeoutRef.current) {
|
||||||
|
clearTimeout(timeoutRef.current);
|
||||||
|
}
|
||||||
|
|
||||||
|
timeoutRef.current = setTimeout(callback, delay);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const cancel = useCallback(() => {
|
||||||
|
if (timeoutRef.current) {
|
||||||
|
clearTimeout(timeoutRef.current);
|
||||||
|
timeoutRef.current = undefined;
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(
|
||||||
|
() => () => {
|
||||||
|
cancel();
|
||||||
|
},
|
||||||
|
[cancel],
|
||||||
|
);
|
||||||
|
|
||||||
|
return [set, cancel] as const;
|
||||||
|
};
|
||||||
|
|
@ -1,62 +0,0 @@
|
||||||
import api from '../api';
|
|
||||||
|
|
||||||
import { fetchRelationships } from './accounts';
|
|
||||||
import { importFetchedAccounts } from './importer';
|
|
||||||
|
|
||||||
export const DIRECTORY_FETCH_REQUEST = 'DIRECTORY_FETCH_REQUEST';
|
|
||||||
export const DIRECTORY_FETCH_SUCCESS = 'DIRECTORY_FETCH_SUCCESS';
|
|
||||||
export const DIRECTORY_FETCH_FAIL = 'DIRECTORY_FETCH_FAIL';
|
|
||||||
|
|
||||||
export const DIRECTORY_EXPAND_REQUEST = 'DIRECTORY_EXPAND_REQUEST';
|
|
||||||
export const DIRECTORY_EXPAND_SUCCESS = 'DIRECTORY_EXPAND_SUCCESS';
|
|
||||||
export const DIRECTORY_EXPAND_FAIL = 'DIRECTORY_EXPAND_FAIL';
|
|
||||||
|
|
||||||
export const fetchDirectory = params => (dispatch) => {
|
|
||||||
dispatch(fetchDirectoryRequest());
|
|
||||||
|
|
||||||
api().get('/api/v1/directory', { params: { ...params, limit: 20 } }).then(({ data }) => {
|
|
||||||
dispatch(importFetchedAccounts(data));
|
|
||||||
dispatch(fetchDirectorySuccess(data));
|
|
||||||
dispatch(fetchRelationships(data.map(x => x.id)));
|
|
||||||
}).catch(error => dispatch(fetchDirectoryFail(error)));
|
|
||||||
};
|
|
||||||
|
|
||||||
export const fetchDirectoryRequest = () => ({
|
|
||||||
type: DIRECTORY_FETCH_REQUEST,
|
|
||||||
});
|
|
||||||
|
|
||||||
export const fetchDirectorySuccess = accounts => ({
|
|
||||||
type: DIRECTORY_FETCH_SUCCESS,
|
|
||||||
accounts,
|
|
||||||
});
|
|
||||||
|
|
||||||
export const fetchDirectoryFail = error => ({
|
|
||||||
type: DIRECTORY_FETCH_FAIL,
|
|
||||||
error,
|
|
||||||
});
|
|
||||||
|
|
||||||
export const expandDirectory = params => (dispatch, getState) => {
|
|
||||||
dispatch(expandDirectoryRequest());
|
|
||||||
|
|
||||||
const loadedItems = getState().getIn(['user_lists', 'directory', 'items']).size;
|
|
||||||
|
|
||||||
api().get('/api/v1/directory', { params: { ...params, offset: loadedItems, limit: 20 } }).then(({ data }) => {
|
|
||||||
dispatch(importFetchedAccounts(data));
|
|
||||||
dispatch(expandDirectorySuccess(data));
|
|
||||||
dispatch(fetchRelationships(data.map(x => x.id)));
|
|
||||||
}).catch(error => dispatch(expandDirectoryFail(error)));
|
|
||||||
};
|
|
||||||
|
|
||||||
export const expandDirectoryRequest = () => ({
|
|
||||||
type: DIRECTORY_EXPAND_REQUEST,
|
|
||||||
});
|
|
||||||
|
|
||||||
export const expandDirectorySuccess = accounts => ({
|
|
||||||
type: DIRECTORY_EXPAND_SUCCESS,
|
|
||||||
accounts,
|
|
||||||
});
|
|
||||||
|
|
||||||
export const expandDirectoryFail = error => ({
|
|
||||||
type: DIRECTORY_EXPAND_FAIL,
|
|
||||||
error,
|
|
||||||
});
|
|
||||||
37
app/javascript/mastodon/actions/directory.ts
Normal file
37
app/javascript/mastodon/actions/directory.ts
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
import type { List as ImmutableList } from 'immutable';
|
||||||
|
|
||||||
|
import { apiGetDirectory } from 'mastodon/api/directory';
|
||||||
|
import { createDataLoadingThunk } from 'mastodon/store/typed_functions';
|
||||||
|
|
||||||
|
import { fetchRelationships } from './accounts';
|
||||||
|
import { importFetchedAccounts } from './importer';
|
||||||
|
|
||||||
|
export const fetchDirectory = createDataLoadingThunk(
|
||||||
|
'directory/fetch',
|
||||||
|
async (params: Parameters<typeof apiGetDirectory>[0]) =>
|
||||||
|
apiGetDirectory(params),
|
||||||
|
(data, { dispatch }) => {
|
||||||
|
dispatch(importFetchedAccounts(data));
|
||||||
|
dispatch(fetchRelationships(data.map((x) => x.id)));
|
||||||
|
|
||||||
|
return { accounts: data };
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
export const expandDirectory = createDataLoadingThunk(
|
||||||
|
'directory/expand',
|
||||||
|
async (params: Parameters<typeof apiGetDirectory>[0], { getState }) => {
|
||||||
|
const loadedItems = getState().user_lists.getIn([
|
||||||
|
'directory',
|
||||||
|
'items',
|
||||||
|
]) as ImmutableList<unknown>;
|
||||||
|
|
||||||
|
return apiGetDirectory({ ...params, offset: loadedItems.size }, 20);
|
||||||
|
},
|
||||||
|
(data, { dispatch }) => {
|
||||||
|
dispatch(importFetchedAccounts(data));
|
||||||
|
dispatch(fetchRelationships(data.map((x) => x.id)));
|
||||||
|
|
||||||
|
return { accounts: data };
|
||||||
|
},
|
||||||
|
);
|
||||||
15
app/javascript/mastodon/api/directory.ts
Normal file
15
app/javascript/mastodon/api/directory.ts
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
import { apiRequestGet } from 'mastodon/api';
|
||||||
|
import type { ApiAccountJSON } from 'mastodon/api_types/accounts';
|
||||||
|
|
||||||
|
export const apiGetDirectory = (
|
||||||
|
params: {
|
||||||
|
order: string;
|
||||||
|
local: boolean;
|
||||||
|
offset?: number;
|
||||||
|
},
|
||||||
|
limit = 20,
|
||||||
|
) =>
|
||||||
|
apiRequestGet<ApiAccountJSON[]>('v1/directory', {
|
||||||
|
...params,
|
||||||
|
limit,
|
||||||
|
});
|
||||||
20
app/javascript/mastodon/components/account_bio.tsx
Normal file
20
app/javascript/mastodon/components/account_bio.tsx
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
import { useLinks } from 'mastodon/../hooks/useLinks';
|
||||||
|
|
||||||
|
export const AccountBio: React.FC<{
|
||||||
|
note: string;
|
||||||
|
className: string;
|
||||||
|
}> = ({ note, className }) => {
|
||||||
|
const handleClick = useLinks();
|
||||||
|
|
||||||
|
if (note.length === 0 || note === '<p></p>') {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`${className} translate`}
|
||||||
|
dangerouslySetInnerHTML={{ __html: note }}
|
||||||
|
onClickCapture={handleClick}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
42
app/javascript/mastodon/components/account_fields.tsx
Normal file
42
app/javascript/mastodon/components/account_fields.tsx
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
import classNames from 'classnames';
|
||||||
|
|
||||||
|
import CheckIcon from '@/material-icons/400-24px/check.svg?react';
|
||||||
|
import { useLinks } from 'mastodon/../hooks/useLinks';
|
||||||
|
import { Icon } from 'mastodon/components/icon';
|
||||||
|
import type { Account } from 'mastodon/models/account';
|
||||||
|
|
||||||
|
export const AccountFields: React.FC<{
|
||||||
|
fields: Account['fields'];
|
||||||
|
limit: number;
|
||||||
|
}> = ({ fields, limit = -1 }) => {
|
||||||
|
const handleClick = useLinks();
|
||||||
|
|
||||||
|
if (fields.size === 0) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='account-fields' onClickCapture={handleClick}>
|
||||||
|
{fields.take(limit).map((pair, i) => (
|
||||||
|
<dl
|
||||||
|
key={i}
|
||||||
|
className={classNames({ verified: pair.get('verified_at') })}
|
||||||
|
>
|
||||||
|
<dt
|
||||||
|
dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }}
|
||||||
|
className='translate'
|
||||||
|
/>
|
||||||
|
|
||||||
|
<dd className='translate' title={pair.get('value_plain') ?? ''}>
|
||||||
|
{pair.get('verified_at') && (
|
||||||
|
<Icon id='check' icon={CheckIcon} className='verified__mark' />
|
||||||
|
)}
|
||||||
|
<span
|
||||||
|
dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }}
|
||||||
|
/>
|
||||||
|
</dd>
|
||||||
|
</dl>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -1,233 +0,0 @@
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import { PureComponent, useCallback } from 'react';
|
|
||||||
|
|
||||||
import { FormattedMessage, injectIntl, defineMessages, useIntl } from 'react-intl';
|
|
||||||
|
|
||||||
import classNames from 'classnames';
|
|
||||||
import { withRouter } from 'react-router-dom';
|
|
||||||
|
|
||||||
import AddIcon from '@/material-icons/400-24px/add.svg?react';
|
|
||||||
import ArrowBackIcon from '@/material-icons/400-24px/arrow_back.svg?react';
|
|
||||||
import ChevronLeftIcon from '@/material-icons/400-24px/chevron_left.svg?react';
|
|
||||||
import ChevronRightIcon from '@/material-icons/400-24px/chevron_right.svg?react';
|
|
||||||
import CloseIcon from '@/material-icons/400-24px/close.svg?react';
|
|
||||||
import SettingsIcon from '@/material-icons/400-24px/settings.svg?react';
|
|
||||||
import { Icon } from 'mastodon/components/icon';
|
|
||||||
import { ButtonInTabsBar } from 'mastodon/features/ui/util/columns_context';
|
|
||||||
import { identityContextPropShape, withIdentity } from 'mastodon/identity_context';
|
|
||||||
import { WithRouterPropTypes } from 'mastodon/utils/react_router';
|
|
||||||
|
|
||||||
|
|
||||||
import { useAppHistory } from './router';
|
|
||||||
|
|
||||||
const messages = defineMessages({
|
|
||||||
show: { id: 'column_header.show_settings', defaultMessage: 'Show settings' },
|
|
||||||
hide: { id: 'column_header.hide_settings', defaultMessage: 'Hide settings' },
|
|
||||||
moveLeft: { id: 'column_header.moveLeft_settings', defaultMessage: 'Move column to the left' },
|
|
||||||
moveRight: { id: 'column_header.moveRight_settings', defaultMessage: 'Move column to the right' },
|
|
||||||
back: { id: 'column_back_button.label', defaultMessage: 'Back' },
|
|
||||||
});
|
|
||||||
|
|
||||||
const BackButton = ({ onlyIcon }) => {
|
|
||||||
const history = useAppHistory();
|
|
||||||
const intl = useIntl();
|
|
||||||
|
|
||||||
const handleBackClick = useCallback(() => {
|
|
||||||
if (history.location?.state?.fromMastodon) {
|
|
||||||
history.goBack();
|
|
||||||
} else {
|
|
||||||
history.push('/');
|
|
||||||
}
|
|
||||||
}, [history]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<button onClick={handleBackClick} className={classNames('column-header__back-button', { 'compact': onlyIcon })} aria-label={intl.formatMessage(messages.back)}>
|
|
||||||
<Icon id='chevron-left' icon={ArrowBackIcon} className='column-back-button__icon' />
|
|
||||||
{!onlyIcon && <FormattedMessage id='column_back_button.label' defaultMessage='Back' />}
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
BackButton.propTypes = {
|
|
||||||
onlyIcon: PropTypes.bool,
|
|
||||||
};
|
|
||||||
|
|
||||||
class ColumnHeader extends PureComponent {
|
|
||||||
static propTypes = {
|
|
||||||
identity: identityContextPropShape,
|
|
||||||
intl: PropTypes.object.isRequired,
|
|
||||||
title: PropTypes.node,
|
|
||||||
icon: PropTypes.string,
|
|
||||||
iconComponent: PropTypes.func,
|
|
||||||
active: PropTypes.bool,
|
|
||||||
multiColumn: PropTypes.bool,
|
|
||||||
extraButton: PropTypes.node,
|
|
||||||
showBackButton: PropTypes.bool,
|
|
||||||
children: PropTypes.node,
|
|
||||||
pinned: PropTypes.bool,
|
|
||||||
placeholder: PropTypes.bool,
|
|
||||||
onPin: PropTypes.func,
|
|
||||||
onMove: PropTypes.func,
|
|
||||||
onClick: PropTypes.func,
|
|
||||||
appendContent: PropTypes.node,
|
|
||||||
collapseIssues: PropTypes.bool,
|
|
||||||
...WithRouterPropTypes,
|
|
||||||
};
|
|
||||||
|
|
||||||
state = {
|
|
||||||
collapsed: true,
|
|
||||||
animating: false,
|
|
||||||
};
|
|
||||||
|
|
||||||
handleToggleClick = (e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
this.setState({ collapsed: !this.state.collapsed, animating: true });
|
|
||||||
};
|
|
||||||
|
|
||||||
handleTitleClick = () => {
|
|
||||||
this.props.onClick?.();
|
|
||||||
};
|
|
||||||
|
|
||||||
handleMoveLeft = () => {
|
|
||||||
this.props.onMove(-1);
|
|
||||||
};
|
|
||||||
|
|
||||||
handleMoveRight = () => {
|
|
||||||
this.props.onMove(1);
|
|
||||||
};
|
|
||||||
|
|
||||||
handleTransitionEnd = () => {
|
|
||||||
this.setState({ animating: false });
|
|
||||||
};
|
|
||||||
|
|
||||||
handlePin = () => {
|
|
||||||
if (!this.props.pinned) {
|
|
||||||
this.props.history.replace('/');
|
|
||||||
}
|
|
||||||
|
|
||||||
this.props.onPin();
|
|
||||||
};
|
|
||||||
|
|
||||||
render () {
|
|
||||||
const { title, icon, iconComponent, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, placeholder, appendContent, collapseIssues, history } = this.props;
|
|
||||||
const { collapsed, animating } = this.state;
|
|
||||||
|
|
||||||
const wrapperClassName = classNames('column-header__wrapper', {
|
|
||||||
'active': active,
|
|
||||||
});
|
|
||||||
|
|
||||||
const buttonClassName = classNames('column-header', {
|
|
||||||
'active': active,
|
|
||||||
});
|
|
||||||
|
|
||||||
const collapsibleClassName = classNames('column-header__collapsible', {
|
|
||||||
'collapsed': collapsed,
|
|
||||||
'animating': animating,
|
|
||||||
});
|
|
||||||
|
|
||||||
const collapsibleButtonClassName = classNames('column-header__button', {
|
|
||||||
'active': !collapsed,
|
|
||||||
});
|
|
||||||
|
|
||||||
let extraContent, pinButton, moveButtons, backButton, collapseButton;
|
|
||||||
|
|
||||||
if (children) {
|
|
||||||
extraContent = (
|
|
||||||
<div key='extra-content' className='column-header__collapsible__extra'>
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (multiColumn && pinned) {
|
|
||||||
pinButton = <button className='text-btn column-header__setting-btn' onClick={this.handlePin}><Icon id='times' icon={CloseIcon} /> <FormattedMessage id='column_header.unpin' defaultMessage='Unpin' /></button>;
|
|
||||||
|
|
||||||
moveButtons = (
|
|
||||||
<div className='column-header__setting-arrows'>
|
|
||||||
<button title={formatMessage(messages.moveLeft)} aria-label={formatMessage(messages.moveLeft)} className='icon-button column-header__setting-btn' onClick={this.handleMoveLeft}><Icon id='chevron-left' icon={ChevronLeftIcon} /></button>
|
|
||||||
<button title={formatMessage(messages.moveRight)} aria-label={formatMessage(messages.moveRight)} className='icon-button column-header__setting-btn' onClick={this.handleMoveRight}><Icon id='chevron-right' icon={ChevronRightIcon} /></button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
} else if (multiColumn && this.props.onPin) {
|
|
||||||
pinButton = <button className='text-btn column-header__setting-btn' onClick={this.handlePin}><Icon id='plus' icon={AddIcon} /> <FormattedMessage id='column_header.pin' defaultMessage='Pin' /></button>;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (history && !pinned && ((multiColumn && history.location?.state?.fromMastodon) || showBackButton)) {
|
|
||||||
backButton = <BackButton onlyIcon={!!title} />;
|
|
||||||
}
|
|
||||||
|
|
||||||
const collapsedContent = [
|
|
||||||
extraContent,
|
|
||||||
];
|
|
||||||
|
|
||||||
if (multiColumn) {
|
|
||||||
collapsedContent.push(
|
|
||||||
<div key='buttons' className='column-header__advanced-buttons'>
|
|
||||||
{pinButton}
|
|
||||||
{moveButtons}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.props.identity.signedIn && (children || (multiColumn && this.props.onPin))) {
|
|
||||||
collapseButton = (
|
|
||||||
<button
|
|
||||||
className={collapsibleButtonClassName}
|
|
||||||
title={formatMessage(collapsed ? messages.show : messages.hide)}
|
|
||||||
aria-label={formatMessage(collapsed ? messages.show : messages.hide)}
|
|
||||||
onClick={this.handleToggleClick}
|
|
||||||
>
|
|
||||||
<i className='icon-with-badge'>
|
|
||||||
<Icon id='sliders' icon={SettingsIcon} />
|
|
||||||
{collapseIssues && <i className='icon-with-badge__issue-badge' />}
|
|
||||||
</i>
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const hasTitle = (icon || iconComponent) && title;
|
|
||||||
|
|
||||||
const component = (
|
|
||||||
<div className={wrapperClassName}>
|
|
||||||
<h1 className={buttonClassName}>
|
|
||||||
{hasTitle && (
|
|
||||||
<>
|
|
||||||
{backButton}
|
|
||||||
|
|
||||||
<button onClick={this.handleTitleClick} className='column-header__title'>
|
|
||||||
{!backButton && <Icon id={icon} icon={iconComponent} className='column-header__icon' />}
|
|
||||||
{title}
|
|
||||||
</button>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{!hasTitle && backButton}
|
|
||||||
|
|
||||||
<div className='column-header__buttons'>
|
|
||||||
{extraButton}
|
|
||||||
{collapseButton}
|
|
||||||
</div>
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<div className={collapsibleClassName} tabIndex={collapsed ? -1 : null} onTransitionEnd={this.handleTransitionEnd}>
|
|
||||||
<div className='column-header__collapsible-inner'>
|
|
||||||
{(!collapsed || animating) && collapsedContent}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{appendContent}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
if (placeholder) {
|
|
||||||
return component;
|
|
||||||
} else {
|
|
||||||
return (<ButtonInTabsBar>
|
|
||||||
{component}
|
|
||||||
</ButtonInTabsBar>);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
export default injectIntl(withIdentity(withRouter(ColumnHeader)));
|
|
||||||
301
app/javascript/mastodon/components/column_header.tsx
Normal file
301
app/javascript/mastodon/components/column_header.tsx
Normal file
|
|
@ -0,0 +1,301 @@
|
||||||
|
import { useCallback, useState } from 'react';
|
||||||
|
|
||||||
|
import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
|
||||||
|
|
||||||
|
import classNames from 'classnames';
|
||||||
|
|
||||||
|
import AddIcon from '@/material-icons/400-24px/add.svg?react';
|
||||||
|
import ArrowBackIcon from '@/material-icons/400-24px/arrow_back.svg?react';
|
||||||
|
import ChevronLeftIcon from '@/material-icons/400-24px/chevron_left.svg?react';
|
||||||
|
import ChevronRightIcon from '@/material-icons/400-24px/chevron_right.svg?react';
|
||||||
|
import CloseIcon from '@/material-icons/400-24px/close.svg?react';
|
||||||
|
import SettingsIcon from '@/material-icons/400-24px/settings.svg?react';
|
||||||
|
import type { IconProp } from 'mastodon/components/icon';
|
||||||
|
import { Icon } from 'mastodon/components/icon';
|
||||||
|
import { ButtonInTabsBar } from 'mastodon/features/ui/util/columns_context';
|
||||||
|
import { useIdentity } from 'mastodon/identity_context';
|
||||||
|
|
||||||
|
import { useAppHistory } from './router';
|
||||||
|
|
||||||
|
const messages = defineMessages({
|
||||||
|
show: { id: 'column_header.show_settings', defaultMessage: 'Show settings' },
|
||||||
|
hide: { id: 'column_header.hide_settings', defaultMessage: 'Hide settings' },
|
||||||
|
moveLeft: {
|
||||||
|
id: 'column_header.moveLeft_settings',
|
||||||
|
defaultMessage: 'Move column to the left',
|
||||||
|
},
|
||||||
|
moveRight: {
|
||||||
|
id: 'column_header.moveRight_settings',
|
||||||
|
defaultMessage: 'Move column to the right',
|
||||||
|
},
|
||||||
|
back: { id: 'column_back_button.label', defaultMessage: 'Back' },
|
||||||
|
});
|
||||||
|
|
||||||
|
const BackButton: React.FC<{
|
||||||
|
onlyIcon: boolean;
|
||||||
|
}> = ({ onlyIcon }) => {
|
||||||
|
const history = useAppHistory();
|
||||||
|
const intl = useIntl();
|
||||||
|
|
||||||
|
const handleBackClick = useCallback(() => {
|
||||||
|
if (history.location.state?.fromMastodon) {
|
||||||
|
history.goBack();
|
||||||
|
} else {
|
||||||
|
history.push('/');
|
||||||
|
}
|
||||||
|
}, [history]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
onClick={handleBackClick}
|
||||||
|
className={classNames('column-header__back-button', {
|
||||||
|
compact: onlyIcon,
|
||||||
|
})}
|
||||||
|
aria-label={intl.formatMessage(messages.back)}
|
||||||
|
>
|
||||||
|
<Icon
|
||||||
|
id='chevron-left'
|
||||||
|
icon={ArrowBackIcon}
|
||||||
|
className='column-back-button__icon'
|
||||||
|
/>
|
||||||
|
{!onlyIcon && (
|
||||||
|
<FormattedMessage id='column_back_button.label' defaultMessage='Back' />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export interface Props {
|
||||||
|
title?: string;
|
||||||
|
icon?: string;
|
||||||
|
iconComponent?: IconProp;
|
||||||
|
active?: boolean;
|
||||||
|
children?: React.ReactNode;
|
||||||
|
pinned?: boolean;
|
||||||
|
multiColumn?: boolean;
|
||||||
|
extraButton?: React.ReactNode;
|
||||||
|
showBackButton?: boolean;
|
||||||
|
placeholder?: boolean;
|
||||||
|
appendContent?: React.ReactNode;
|
||||||
|
collapseIssues?: boolean;
|
||||||
|
onClick?: () => void;
|
||||||
|
onMove?: (arg0: number) => void;
|
||||||
|
onPin?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ColumnHeader: React.FC<Props> = ({
|
||||||
|
title,
|
||||||
|
icon,
|
||||||
|
iconComponent,
|
||||||
|
active,
|
||||||
|
children,
|
||||||
|
pinned,
|
||||||
|
multiColumn,
|
||||||
|
extraButton,
|
||||||
|
showBackButton,
|
||||||
|
placeholder,
|
||||||
|
appendContent,
|
||||||
|
collapseIssues,
|
||||||
|
onClick,
|
||||||
|
onMove,
|
||||||
|
onPin,
|
||||||
|
}) => {
|
||||||
|
const intl = useIntl();
|
||||||
|
const { signedIn } = useIdentity();
|
||||||
|
const history = useAppHistory();
|
||||||
|
const [collapsed, setCollapsed] = useState(true);
|
||||||
|
const [animating, setAnimating] = useState(false);
|
||||||
|
|
||||||
|
const handleToggleClick = useCallback(
|
||||||
|
(e: React.MouseEvent) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
setCollapsed((value) => !value);
|
||||||
|
setAnimating(true);
|
||||||
|
},
|
||||||
|
[setCollapsed, setAnimating],
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleTitleClick = useCallback(() => {
|
||||||
|
onClick?.();
|
||||||
|
}, [onClick]);
|
||||||
|
|
||||||
|
const handleMoveLeft = useCallback(() => {
|
||||||
|
onMove?.(-1);
|
||||||
|
}, [onMove]);
|
||||||
|
|
||||||
|
const handleMoveRight = useCallback(() => {
|
||||||
|
onMove?.(1);
|
||||||
|
}, [onMove]);
|
||||||
|
|
||||||
|
const handleTransitionEnd = useCallback(() => {
|
||||||
|
setAnimating(false);
|
||||||
|
}, [setAnimating]);
|
||||||
|
|
||||||
|
const handlePin = useCallback(() => {
|
||||||
|
if (!pinned) {
|
||||||
|
history.replace('/');
|
||||||
|
}
|
||||||
|
|
||||||
|
onPin?.();
|
||||||
|
}, [history, pinned, onPin]);
|
||||||
|
|
||||||
|
const wrapperClassName = classNames('column-header__wrapper', {
|
||||||
|
active,
|
||||||
|
});
|
||||||
|
|
||||||
|
const buttonClassName = classNames('column-header', {
|
||||||
|
active,
|
||||||
|
});
|
||||||
|
|
||||||
|
const collapsibleClassName = classNames('column-header__collapsible', {
|
||||||
|
collapsed,
|
||||||
|
animating,
|
||||||
|
});
|
||||||
|
|
||||||
|
const collapsibleButtonClassName = classNames('column-header__button', {
|
||||||
|
active: !collapsed,
|
||||||
|
});
|
||||||
|
|
||||||
|
let extraContent, pinButton, moveButtons, backButton, collapseButton;
|
||||||
|
|
||||||
|
if (children) {
|
||||||
|
extraContent = (
|
||||||
|
<div key='extra-content' className='column-header__collapsible__extra'>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (multiColumn && pinned) {
|
||||||
|
pinButton = (
|
||||||
|
<button
|
||||||
|
className='text-btn column-header__setting-btn'
|
||||||
|
onClick={handlePin}
|
||||||
|
>
|
||||||
|
<Icon id='times' icon={CloseIcon} />{' '}
|
||||||
|
<FormattedMessage id='column_header.unpin' defaultMessage='Unpin' />
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
|
||||||
|
moveButtons = (
|
||||||
|
<div className='column-header__setting-arrows'>
|
||||||
|
<button
|
||||||
|
title={intl.formatMessage(messages.moveLeft)}
|
||||||
|
aria-label={intl.formatMessage(messages.moveLeft)}
|
||||||
|
className='icon-button column-header__setting-btn'
|
||||||
|
onClick={handleMoveLeft}
|
||||||
|
>
|
||||||
|
<Icon id='chevron-left' icon={ChevronLeftIcon} />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
title={intl.formatMessage(messages.moveRight)}
|
||||||
|
aria-label={intl.formatMessage(messages.moveRight)}
|
||||||
|
className='icon-button column-header__setting-btn'
|
||||||
|
onClick={handleMoveRight}
|
||||||
|
>
|
||||||
|
<Icon id='chevron-right' icon={ChevronRightIcon} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
} else if (multiColumn && onPin) {
|
||||||
|
pinButton = (
|
||||||
|
<button
|
||||||
|
className='text-btn column-header__setting-btn'
|
||||||
|
onClick={handlePin}
|
||||||
|
>
|
||||||
|
<Icon id='plus' icon={AddIcon} />{' '}
|
||||||
|
<FormattedMessage id='column_header.pin' defaultMessage='Pin' />
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
!pinned &&
|
||||||
|
((multiColumn && history.location.state?.fromMastodon) || showBackButton)
|
||||||
|
) {
|
||||||
|
backButton = <BackButton onlyIcon={!!title} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
const collapsedContent = [extraContent];
|
||||||
|
|
||||||
|
if (multiColumn) {
|
||||||
|
collapsedContent.push(
|
||||||
|
<div key='buttons' className='column-header__advanced-buttons'>
|
||||||
|
{pinButton}
|
||||||
|
{moveButtons}
|
||||||
|
</div>,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (signedIn && (children || (multiColumn && onPin))) {
|
||||||
|
collapseButton = (
|
||||||
|
<button
|
||||||
|
className={collapsibleButtonClassName}
|
||||||
|
title={intl.formatMessage(collapsed ? messages.show : messages.hide)}
|
||||||
|
aria-label={intl.formatMessage(
|
||||||
|
collapsed ? messages.show : messages.hide,
|
||||||
|
)}
|
||||||
|
onClick={handleToggleClick}
|
||||||
|
>
|
||||||
|
<i className='icon-with-badge'>
|
||||||
|
<Icon id='sliders' icon={SettingsIcon} />
|
||||||
|
{collapseIssues && <i className='icon-with-badge__issue-badge' />}
|
||||||
|
</i>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const hasIcon = icon && iconComponent;
|
||||||
|
const hasTitle = hasIcon && title;
|
||||||
|
|
||||||
|
const component = (
|
||||||
|
<div className={wrapperClassName}>
|
||||||
|
<h1 className={buttonClassName}>
|
||||||
|
{hasTitle && (
|
||||||
|
<>
|
||||||
|
{backButton}
|
||||||
|
|
||||||
|
<button onClick={handleTitleClick} className='column-header__title'>
|
||||||
|
{!backButton && (
|
||||||
|
<Icon
|
||||||
|
id={icon}
|
||||||
|
icon={iconComponent}
|
||||||
|
className='column-header__icon'
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{title}
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!hasTitle && backButton}
|
||||||
|
|
||||||
|
<div className='column-header__buttons'>
|
||||||
|
{extraButton}
|
||||||
|
{collapseButton}
|
||||||
|
</div>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className={collapsibleClassName}
|
||||||
|
tabIndex={collapsed ? -1 : undefined}
|
||||||
|
onTransitionEnd={handleTransitionEnd}
|
||||||
|
>
|
||||||
|
<div className='column-header__collapsible-inner'>
|
||||||
|
{(!collapsed || animating) && collapsedContent}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{appendContent}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
if (placeholder) {
|
||||||
|
return component;
|
||||||
|
} else {
|
||||||
|
return <ButtonInTabsBar>{component}</ButtonInTabsBar>;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// eslint-disable-next-line import/no-default-export
|
||||||
|
export default ColumnHeader;
|
||||||
93
app/javascript/mastodon/components/follow_button.tsx
Normal file
93
app/javascript/mastodon/components/follow_button.tsx
Normal file
|
|
@ -0,0 +1,93 @@
|
||||||
|
import { useCallback, useEffect } from 'react';
|
||||||
|
|
||||||
|
import { useIntl, defineMessages } from 'react-intl';
|
||||||
|
|
||||||
|
import {
|
||||||
|
fetchRelationships,
|
||||||
|
followAccount,
|
||||||
|
unfollowAccount,
|
||||||
|
} from 'mastodon/actions/accounts';
|
||||||
|
import { Button } from 'mastodon/components/button';
|
||||||
|
import { LoadingIndicator } from 'mastodon/components/loading_indicator';
|
||||||
|
import { me } from 'mastodon/initial_state';
|
||||||
|
import { useAppDispatch, useAppSelector } from 'mastodon/store';
|
||||||
|
|
||||||
|
const messages = defineMessages({
|
||||||
|
unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
|
||||||
|
follow: { id: 'account.follow', defaultMessage: 'Follow' },
|
||||||
|
followBack: { id: 'account.follow_back', defaultMessage: 'Follow back' },
|
||||||
|
mutual: { id: 'account.mutual', defaultMessage: 'Mutual' },
|
||||||
|
cancel_follow_request: {
|
||||||
|
id: 'account.cancel_follow_request',
|
||||||
|
defaultMessage: 'Withdraw follow request',
|
||||||
|
},
|
||||||
|
edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
|
||||||
|
});
|
||||||
|
|
||||||
|
export const FollowButton: React.FC<{
|
||||||
|
accountId: string;
|
||||||
|
}> = ({ accountId }) => {
|
||||||
|
const intl = useIntl();
|
||||||
|
const dispatch = useAppDispatch();
|
||||||
|
const relationship = useAppSelector((state) =>
|
||||||
|
state.relationships.get(accountId),
|
||||||
|
);
|
||||||
|
const following = relationship?.following || relationship?.requested;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
dispatch(fetchRelationships([accountId]));
|
||||||
|
}, [dispatch, accountId]);
|
||||||
|
|
||||||
|
const handleClick = useCallback(() => {
|
||||||
|
if (!relationship) return;
|
||||||
|
if (accountId === me) {
|
||||||
|
return;
|
||||||
|
} else if (relationship.following || relationship.requested) {
|
||||||
|
dispatch(unfollowAccount(accountId));
|
||||||
|
} else {
|
||||||
|
dispatch(followAccount(accountId));
|
||||||
|
}
|
||||||
|
}, [dispatch, accountId, relationship]);
|
||||||
|
|
||||||
|
let label;
|
||||||
|
|
||||||
|
if (accountId === me) {
|
||||||
|
label = intl.formatMessage(messages.edit_profile);
|
||||||
|
} else if (!relationship) {
|
||||||
|
label = <LoadingIndicator />;
|
||||||
|
} else if (relationship.requested) {
|
||||||
|
label = intl.formatMessage(messages.cancel_follow_request);
|
||||||
|
} else if (relationship.following && relationship.followed_by) {
|
||||||
|
label = intl.formatMessage(messages.mutual);
|
||||||
|
} else if (!relationship.following && relationship.followed_by) {
|
||||||
|
label = intl.formatMessage(messages.followBack);
|
||||||
|
} else if (relationship.following) {
|
||||||
|
label = intl.formatMessage(messages.unfollow);
|
||||||
|
} else {
|
||||||
|
label = intl.formatMessage(messages.follow);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (accountId === me) {
|
||||||
|
return (
|
||||||
|
<a
|
||||||
|
href='/settings/profile'
|
||||||
|
target='_blank'
|
||||||
|
rel='noreferrer noopener'
|
||||||
|
className='button button-secondary'
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
onClick={handleClick}
|
||||||
|
disabled={relationship?.blocked_by || relationship?.blocking}
|
||||||
|
secondary={following}
|
||||||
|
className={following ? 'button--destructive' : undefined}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
};
|
||||||
74
app/javascript/mastodon/components/hover_card_account.tsx
Normal file
74
app/javascript/mastodon/components/hover_card_account.tsx
Normal file
|
|
@ -0,0 +1,74 @@
|
||||||
|
import { useEffect, forwardRef } from 'react';
|
||||||
|
|
||||||
|
import classNames from 'classnames';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
import { fetchAccount } from 'mastodon/actions/accounts';
|
||||||
|
import { AccountBio } from 'mastodon/components/account_bio';
|
||||||
|
import { AccountFields } from 'mastodon/components/account_fields';
|
||||||
|
import { Avatar } from 'mastodon/components/avatar';
|
||||||
|
import { FollowersCounter } from 'mastodon/components/counters';
|
||||||
|
import { DisplayName } from 'mastodon/components/display_name';
|
||||||
|
import { FollowButton } from 'mastodon/components/follow_button';
|
||||||
|
import { LoadingIndicator } from 'mastodon/components/loading_indicator';
|
||||||
|
import { ShortNumber } from 'mastodon/components/short_number';
|
||||||
|
import { domain } from 'mastodon/initial_state';
|
||||||
|
import { useAppSelector, useAppDispatch } from 'mastodon/store';
|
||||||
|
|
||||||
|
export const HoverCardAccount = forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
{ accountId: string }
|
||||||
|
>(({ accountId }, ref) => {
|
||||||
|
const dispatch = useAppDispatch();
|
||||||
|
|
||||||
|
const account = useAppSelector((state) =>
|
||||||
|
accountId ? state.accounts.get(accountId) : undefined,
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (accountId && !account) {
|
||||||
|
dispatch(fetchAccount(accountId));
|
||||||
|
}
|
||||||
|
}, [dispatch, accountId, account]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
id='hover-card'
|
||||||
|
role='tooltip'
|
||||||
|
className={classNames('hover-card dropdown-animation', {
|
||||||
|
'hover-card--loading': !account,
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
{account ? (
|
||||||
|
<>
|
||||||
|
<Link to={`/@${account.acct}`} className='hover-card__name'>
|
||||||
|
<Avatar account={account} size={46} />
|
||||||
|
<DisplayName account={account} localDomain={domain} />
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<div className='hover-card__text-row'>
|
||||||
|
<AccountBio
|
||||||
|
note={account.note_emojified}
|
||||||
|
className='hover-card__bio'
|
||||||
|
/>
|
||||||
|
<AccountFields fields={account.fields} limit={2} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='hover-card__number'>
|
||||||
|
<ShortNumber
|
||||||
|
value={account.followers_count}
|
||||||
|
renderer={FollowersCounter}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<FollowButton accountId={accountId} />
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<LoadingIndicator />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
HoverCardAccount.displayName = 'HoverCardAccount';
|
||||||
117
app/javascript/mastodon/components/hover_card_controller.tsx
Normal file
117
app/javascript/mastodon/components/hover_card_controller.tsx
Normal file
|
|
@ -0,0 +1,117 @@
|
||||||
|
import { useEffect, useRef, useState, useCallback } from 'react';
|
||||||
|
|
||||||
|
import { useLocation } from 'react-router-dom';
|
||||||
|
|
||||||
|
import Overlay from 'react-overlays/Overlay';
|
||||||
|
import type {
|
||||||
|
OffsetValue,
|
||||||
|
UsePopperOptions,
|
||||||
|
} from 'react-overlays/esm/usePopper';
|
||||||
|
|
||||||
|
import { useTimeout } from 'mastodon/../hooks/useTimeout';
|
||||||
|
import { HoverCardAccount } from 'mastodon/components/hover_card_account';
|
||||||
|
|
||||||
|
const offset = [-12, 4] as OffsetValue;
|
||||||
|
const enterDelay = 650;
|
||||||
|
const leaveDelay = 250;
|
||||||
|
const popperConfig = { strategy: 'fixed' } as UsePopperOptions;
|
||||||
|
|
||||||
|
const isHoverCardAnchor = (element: HTMLElement) =>
|
||||||
|
element.matches('[data-hover-card-account]');
|
||||||
|
|
||||||
|
export const HoverCardController: React.FC = () => {
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const [accountId, setAccountId] = useState<string | undefined>();
|
||||||
|
const [anchor, setAnchor] = useState<HTMLElement | null>(null);
|
||||||
|
const cardRef = useRef<HTMLDivElement>(null);
|
||||||
|
const [setLeaveTimeout, cancelLeaveTimeout] = useTimeout();
|
||||||
|
const [setEnterTimeout, cancelEnterTimeout] = useTimeout();
|
||||||
|
const location = useLocation();
|
||||||
|
|
||||||
|
const handleAnchorMouseEnter = useCallback(
|
||||||
|
(e: MouseEvent) => {
|
||||||
|
const { target } = e;
|
||||||
|
|
||||||
|
if (target instanceof HTMLElement && isHoverCardAnchor(target)) {
|
||||||
|
cancelLeaveTimeout();
|
||||||
|
|
||||||
|
setEnterTimeout(() => {
|
||||||
|
target.setAttribute('aria-describedby', 'hover-card');
|
||||||
|
setAnchor(target);
|
||||||
|
setOpen(true);
|
||||||
|
setAccountId(
|
||||||
|
target.getAttribute('data-hover-card-account') ?? undefined,
|
||||||
|
);
|
||||||
|
}, enterDelay);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (target === cardRef.current?.parentNode) {
|
||||||
|
cancelLeaveTimeout();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[cancelLeaveTimeout, setEnterTimeout, setOpen, setAccountId, setAnchor],
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleAnchorMouseLeave = useCallback(
|
||||||
|
(e: MouseEvent) => {
|
||||||
|
if (e.target === anchor || e.target === cardRef.current?.parentNode) {
|
||||||
|
cancelEnterTimeout();
|
||||||
|
|
||||||
|
setLeaveTimeout(() => {
|
||||||
|
anchor?.removeAttribute('aria-describedby');
|
||||||
|
setOpen(false);
|
||||||
|
setAnchor(null);
|
||||||
|
}, leaveDelay);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[cancelEnterTimeout, setLeaveTimeout, setOpen, setAnchor, anchor],
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleClose = useCallback(() => {
|
||||||
|
cancelEnterTimeout();
|
||||||
|
cancelLeaveTimeout();
|
||||||
|
setOpen(false);
|
||||||
|
setAnchor(null);
|
||||||
|
}, [cancelEnterTimeout, cancelLeaveTimeout, setOpen, setAnchor]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
handleClose();
|
||||||
|
}, [handleClose, location]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
document.body.addEventListener('mouseenter', handleAnchorMouseEnter, {
|
||||||
|
passive: true,
|
||||||
|
capture: true,
|
||||||
|
});
|
||||||
|
document.body.addEventListener('mouseleave', handleAnchorMouseLeave, {
|
||||||
|
passive: true,
|
||||||
|
capture: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
document.body.removeEventListener('mouseenter', handleAnchorMouseEnter);
|
||||||
|
document.body.removeEventListener('mouseleave', handleAnchorMouseLeave);
|
||||||
|
};
|
||||||
|
}, [handleAnchorMouseEnter, handleAnchorMouseLeave]);
|
||||||
|
|
||||||
|
if (!accountId) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Overlay
|
||||||
|
rootClose
|
||||||
|
onHide={handleClose}
|
||||||
|
show={open}
|
||||||
|
target={anchor}
|
||||||
|
placement='bottom-start'
|
||||||
|
flip
|
||||||
|
offset={offset}
|
||||||
|
popperConfig={popperConfig}
|
||||||
|
>
|
||||||
|
{({ props }) => (
|
||||||
|
<div {...props} className='hover-card-controller'>
|
||||||
|
<HoverCardAccount accountId={accountId} ref={cardRef} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Overlay>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -425,7 +425,7 @@ class Status extends ImmutablePureComponent {
|
||||||
prepend = (
|
prepend = (
|
||||||
<div className='status__prepend'>
|
<div className='status__prepend'>
|
||||||
<div className='status__prepend-icon-wrapper'><Icon id='retweet' icon={RepeatIcon} className='status__prepend-icon' /></div>
|
<div className='status__prepend-icon-wrapper'><Icon id='retweet' icon={RepeatIcon} className='status__prepend-icon' /></div>
|
||||||
<FormattedMessage id='status.reblogged_by' defaultMessage='{name} boosted' values={{ name: <a onClick={this.handlePrependAccountClick} data-id={status.getIn(['account', 'id'])} href={`/@${status.getIn(['account', 'acct'])}`} className='status__display-name muted'><bdi><strong dangerouslySetInnerHTML={display_name_html} /></bdi></a> }} />
|
<FormattedMessage id='status.reblogged_by' defaultMessage='{name} boosted' values={{ name: <a onClick={this.handlePrependAccountClick} data-id={status.getIn(['account', 'id'])} data-hover-card-account={status.getIn(['account', 'id'])} href={`/@${status.getIn(['account', 'acct'])}`} className='status__display-name muted'><bdi><strong dangerouslySetInnerHTML={display_name_html} /></bdi></a> }} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
@ -446,7 +446,7 @@ class Status extends ImmutablePureComponent {
|
||||||
prepend = (
|
prepend = (
|
||||||
<div className='status__prepend'>
|
<div className='status__prepend'>
|
||||||
<div className='status__prepend-icon-wrapper'><Icon id='reply' icon={ReplyIcon} className='status__prepend-icon' /></div>
|
<div className='status__prepend-icon-wrapper'><Icon id='reply' icon={ReplyIcon} className='status__prepend-icon' /></div>
|
||||||
<FormattedMessage id='status.replied_to' defaultMessage='Replied to {name}' values={{ name: <a onClick={this.handlePrependAccountClick} data-id={status.getIn(['account', 'id'])} href={`/@${status.getIn(['account', 'acct'])}`} className='status__display-name muted'><bdi><strong dangerouslySetInnerHTML={display_name_html} /></bdi></a> }} />
|
<FormattedMessage id='status.replied_to' defaultMessage='Replied to {name}' values={{ name: <a onClick={this.handlePrependAccountClick} data-id={status.getIn(['account', 'id'])} data-hover-card-account={status.getIn(['account', 'id'])} href={`/@${status.getIn(['account', 'acct'])}`} className='status__display-name muted'><bdi><strong dangerouslySetInnerHTML={display_name_html} /></bdi></a> }} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
@ -562,7 +562,7 @@ class Status extends ImmutablePureComponent {
|
||||||
<RelativeTimestamp timestamp={status.get('created_at')} />{status.get('edited_at') && <abbr title={intl.formatMessage(messages.edited, { date: intl.formatDate(status.get('edited_at'), { year: 'numeric', month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit' }) })}> *</abbr>}
|
<RelativeTimestamp timestamp={status.get('created_at')} />{status.get('edited_at') && <abbr title={intl.formatMessage(messages.edited, { date: intl.formatDate(status.get('edited_at'), { year: 'numeric', month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit' }) })}> *</abbr>}
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a onClick={this.handleAccountClick} href={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])} className='status__display-name' target='_blank' rel='noopener noreferrer'>
|
<a onClick={this.handleAccountClick} href={`/@${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>
|
||||||
|
|
|
||||||
|
|
@ -116,8 +116,9 @@ class StatusContent extends PureComponent {
|
||||||
|
|
||||||
if (mention) {
|
if (mention) {
|
||||||
link.addEventListener('click', this.onMentionClick.bind(this, mention), false);
|
link.addEventListener('click', this.onMentionClick.bind(this, mention), false);
|
||||||
link.setAttribute('title', `@${mention.get('acct')}`);
|
link.removeAttribute('title');
|
||||||
link.setAttribute('href', `/@${mention.get('acct')}`);
|
link.setAttribute('href', `/@${mention.get('acct')}`);
|
||||||
|
link.setAttribute('data-hover-card-account', mention.get('id'));
|
||||||
} else if (link.textContent[0] === '#' || (link.previousSibling && link.previousSibling.textContent && link.previousSibling.textContent[link.previousSibling.textContent.length - 1] === '#')) {
|
} else if (link.textContent[0] === '#' || (link.previousSibling && link.previousSibling.textContent && link.previousSibling.textContent[link.previousSibling.textContent.length - 1] === '#')) {
|
||||||
link.addEventListener('click', this.onHashtagClick.bind(this, link.text), false);
|
link.addEventListener('click', this.onHashtagClick.bind(this, link.text), false);
|
||||||
link.setAttribute('href', `/tags/${link.text.replace(/^#/, '')}`);
|
link.setAttribute('href', `/tags/${link.text.replace(/^#/, '')}`);
|
||||||
|
|
|
||||||
|
|
@ -1,234 +0,0 @@
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
|
|
||||||
import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
|
|
||||||
|
|
||||||
import classNames from 'classnames';
|
|
||||||
import { Link } from 'react-router-dom';
|
|
||||||
|
|
||||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
|
||||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
|
||||||
import { connect } from 'react-redux';
|
|
||||||
|
|
||||||
import {
|
|
||||||
followAccount,
|
|
||||||
unfollowAccount,
|
|
||||||
unblockAccount,
|
|
||||||
unmuteAccount,
|
|
||||||
} from 'mastodon/actions/accounts';
|
|
||||||
import { openModal } from 'mastodon/actions/modal';
|
|
||||||
import { Avatar } from 'mastodon/components/avatar';
|
|
||||||
import { Button } from 'mastodon/components/button';
|
|
||||||
import { DisplayName } from 'mastodon/components/display_name';
|
|
||||||
import { ShortNumber } from 'mastodon/components/short_number';
|
|
||||||
import { autoPlayGif, me } from 'mastodon/initial_state';
|
|
||||||
import { makeGetAccount } from 'mastodon/selectors';
|
|
||||||
|
|
||||||
const messages = defineMessages({
|
|
||||||
unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
|
|
||||||
follow: { id: 'account.follow', defaultMessage: 'Follow' },
|
|
||||||
cancel_follow_request: { id: 'account.cancel_follow_request', defaultMessage: 'Withdraw follow request' },
|
|
||||||
cancelFollowRequestConfirm: { id: 'confirmations.cancel_follow_request.confirm', defaultMessage: 'Withdraw request' },
|
|
||||||
requested: { id: 'account.requested', defaultMessage: 'Awaiting approval. Click to cancel follow request' },
|
|
||||||
unblock: { id: 'account.unblock_short', defaultMessage: 'Unblock' },
|
|
||||||
unmute: { id: 'account.unmute_short', defaultMessage: 'Unmute' },
|
|
||||||
unfollowConfirm: { id: 'confirmations.unfollow.confirm', defaultMessage: 'Unfollow' },
|
|
||||||
edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
|
|
||||||
});
|
|
||||||
|
|
||||||
const makeMapStateToProps = () => {
|
|
||||||
const getAccount = makeGetAccount();
|
|
||||||
|
|
||||||
const mapStateToProps = (state, { id }) => ({
|
|
||||||
account: getAccount(state, id),
|
|
||||||
});
|
|
||||||
|
|
||||||
return mapStateToProps;
|
|
||||||
};
|
|
||||||
|
|
||||||
const mapDispatchToProps = (dispatch, { intl }) => ({
|
|
||||||
onFollow(account) {
|
|
||||||
if (account.getIn(['relationship', 'following'])) {
|
|
||||||
dispatch(
|
|
||||||
openModal({
|
|
||||||
modalType: 'CONFIRM',
|
|
||||||
modalProps: {
|
|
||||||
message: (
|
|
||||||
<FormattedMessage
|
|
||||||
id='confirmations.unfollow.message'
|
|
||||||
defaultMessage='Are you sure you want to unfollow {name}?'
|
|
||||||
values={{ name: <strong>@{account.get('acct')}</strong> }}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
confirm: intl.formatMessage(messages.unfollowConfirm),
|
|
||||||
onConfirm: () => dispatch(unfollowAccount(account.get('id'))),
|
|
||||||
} }),
|
|
||||||
);
|
|
||||||
} else if (account.getIn(['relationship', 'requested'])) {
|
|
||||||
dispatch(openModal({
|
|
||||||
modalType: 'CONFIRM',
|
|
||||||
modalProps: {
|
|
||||||
message: <FormattedMessage id='confirmations.cancel_follow_request.message' defaultMessage='Are you sure you want to withdraw your request to follow {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
|
|
||||||
confirm: intl.formatMessage(messages.cancelFollowRequestConfirm),
|
|
||||||
onConfirm: () => dispatch(unfollowAccount(account.get('id'))),
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
} else {
|
|
||||||
dispatch(followAccount(account.get('id')));
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
onBlock(account) {
|
|
||||||
if (account.getIn(['relationship', 'blocking'])) {
|
|
||||||
dispatch(unblockAccount(account.get('id')));
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
onMute(account) {
|
|
||||||
if (account.getIn(['relationship', 'muting'])) {
|
|
||||||
dispatch(unmuteAccount(account.get('id')));
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
class AccountCard extends ImmutablePureComponent {
|
|
||||||
|
|
||||||
static propTypes = {
|
|
||||||
account: ImmutablePropTypes.record.isRequired,
|
|
||||||
intl: PropTypes.object.isRequired,
|
|
||||||
onFollow: PropTypes.func.isRequired,
|
|
||||||
onBlock: PropTypes.func.isRequired,
|
|
||||||
onMute: PropTypes.func.isRequired,
|
|
||||||
};
|
|
||||||
|
|
||||||
handleMouseEnter = ({ currentTarget }) => {
|
|
||||||
if (autoPlayGif) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const emojis = currentTarget.querySelectorAll('.custom-emoji');
|
|
||||||
|
|
||||||
for (var i = 0; i < emojis.length; i++) {
|
|
||||||
let emoji = emojis[i];
|
|
||||||
emoji.src = emoji.getAttribute('data-original');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
handleMouseLeave = ({ currentTarget }) => {
|
|
||||||
if (autoPlayGif) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const emojis = currentTarget.querySelectorAll('.custom-emoji');
|
|
||||||
|
|
||||||
for (var i = 0; i < emojis.length; i++) {
|
|
||||||
let emoji = emojis[i];
|
|
||||||
emoji.src = emoji.getAttribute('data-static');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
handleFollow = () => {
|
|
||||||
this.props.onFollow(this.props.account);
|
|
||||||
};
|
|
||||||
|
|
||||||
handleBlock = () => {
|
|
||||||
this.props.onBlock(this.props.account);
|
|
||||||
};
|
|
||||||
|
|
||||||
handleMute = () => {
|
|
||||||
this.props.onMute(this.props.account);
|
|
||||||
};
|
|
||||||
|
|
||||||
handleEditProfile = () => {
|
|
||||||
window.open('/settings/profile', '_blank');
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { account, intl } = this.props;
|
|
||||||
|
|
||||||
let actionBtn;
|
|
||||||
|
|
||||||
if (me !== account.get('id')) {
|
|
||||||
if (!account.get('relationship')) { // Wait until the relationship is loaded
|
|
||||||
actionBtn = '';
|
|
||||||
} else if (account.getIn(['relationship', 'requested'])) {
|
|
||||||
actionBtn = <Button text={intl.formatMessage(messages.cancel_follow_request)} title={intl.formatMessage(messages.requested)} onClick={this.handleFollow} />;
|
|
||||||
} else if (account.getIn(['relationship', 'muting'])) {
|
|
||||||
actionBtn = <Button text={intl.formatMessage(messages.unmute)} onClick={this.handleMute} />;
|
|
||||||
} else if (!account.getIn(['relationship', 'blocking'])) {
|
|
||||||
actionBtn = <Button disabled={account.getIn(['relationship', 'blocked_by'])} className={classNames({ 'button--destructive': account.getIn(['relationship', 'following']) })} text={intl.formatMessage(account.getIn(['relationship', 'following']) ? messages.unfollow : messages.follow)} onClick={this.handleFollow} />;
|
|
||||||
} else if (account.getIn(['relationship', 'blocking'])) {
|
|
||||||
actionBtn = <Button text={intl.formatMessage(messages.unblock)} onClick={this.handleBlock} />;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
actionBtn = <Button text={intl.formatMessage(messages.edit_profile)} onClick={this.handleEditProfile} />;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className='account-card'>
|
|
||||||
<Link to={`/@${account.get('acct')}`} className='account-card__permalink'>
|
|
||||||
<div className='account-card__header'>
|
|
||||||
<img
|
|
||||||
src={
|
|
||||||
autoPlayGif ? account.get('header') : account.get('header_static')
|
|
||||||
}
|
|
||||||
alt=''
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='account-card__title'>
|
|
||||||
<div className='account-card__title__avatar'><Avatar account={account} size={56} /></div>
|
|
||||||
<DisplayName account={account} />
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
{account.get('note').length > 0 && (
|
|
||||||
<div
|
|
||||||
className='account-card__bio translate'
|
|
||||||
onMouseEnter={this.handleMouseEnter}
|
|
||||||
onMouseLeave={this.handleMouseLeave}
|
|
||||||
dangerouslySetInnerHTML={{ __html: account.get('note_emojified') }}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className='account-card__actions'>
|
|
||||||
<div className='account-card__counters'>
|
|
||||||
<div className='account-card__counters__item'>
|
|
||||||
<ShortNumber value={account.get('statuses_count')} />
|
|
||||||
<small>
|
|
||||||
<FormattedMessage id='account.posts' defaultMessage='Posts' />
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='account-card__counters__item'>
|
|
||||||
<ShortNumber value={account.get('followers_count')} />{' '}
|
|
||||||
<small>
|
|
||||||
<FormattedMessage
|
|
||||||
id='account.followers'
|
|
||||||
defaultMessage='Followers'
|
|
||||||
/>
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='account-card__counters__item'>
|
|
||||||
<ShortNumber value={account.get('following_count')} />{' '}
|
|
||||||
<small>
|
|
||||||
<FormattedMessage
|
|
||||||
id='account.following'
|
|
||||||
defaultMessage='Following'
|
|
||||||
/>
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='account-card__actions__button'>
|
|
||||||
{actionBtn}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(AccountCard));
|
|
||||||
|
|
@ -0,0 +1,269 @@
|
||||||
|
import type { MouseEventHandler } from 'react';
|
||||||
|
import { useCallback } from 'react';
|
||||||
|
|
||||||
|
import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
|
||||||
|
|
||||||
|
import classNames from 'classnames';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
import {
|
||||||
|
followAccount,
|
||||||
|
unfollowAccount,
|
||||||
|
unblockAccount,
|
||||||
|
unmuteAccount,
|
||||||
|
} from 'mastodon/actions/accounts';
|
||||||
|
import { openModal } from 'mastodon/actions/modal';
|
||||||
|
import { Avatar } from 'mastodon/components/avatar';
|
||||||
|
import { Button } from 'mastodon/components/button';
|
||||||
|
import { DisplayName } from 'mastodon/components/display_name';
|
||||||
|
import { ShortNumber } from 'mastodon/components/short_number';
|
||||||
|
import { autoPlayGif, me } from 'mastodon/initial_state';
|
||||||
|
import type { Account } from 'mastodon/models/account';
|
||||||
|
import { makeGetAccount } from 'mastodon/selectors';
|
||||||
|
import { useAppDispatch, useAppSelector } from 'mastodon/store';
|
||||||
|
|
||||||
|
const messages = defineMessages({
|
||||||
|
unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
|
||||||
|
follow: { id: 'account.follow', defaultMessage: 'Follow' },
|
||||||
|
cancel_follow_request: {
|
||||||
|
id: 'account.cancel_follow_request',
|
||||||
|
defaultMessage: 'Withdraw follow request',
|
||||||
|
},
|
||||||
|
cancelFollowRequestConfirm: {
|
||||||
|
id: 'confirmations.cancel_follow_request.confirm',
|
||||||
|
defaultMessage: 'Withdraw request',
|
||||||
|
},
|
||||||
|
requested: {
|
||||||
|
id: 'account.requested',
|
||||||
|
defaultMessage: 'Awaiting approval. Click to cancel follow request',
|
||||||
|
},
|
||||||
|
unblock: { id: 'account.unblock_short', defaultMessage: 'Unblock' },
|
||||||
|
unmute: { id: 'account.unmute_short', defaultMessage: 'Unmute' },
|
||||||
|
unfollowConfirm: {
|
||||||
|
id: 'confirmations.unfollow.confirm',
|
||||||
|
defaultMessage: 'Unfollow',
|
||||||
|
},
|
||||||
|
edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
|
||||||
|
});
|
||||||
|
|
||||||
|
const getAccount = makeGetAccount();
|
||||||
|
|
||||||
|
export const AccountCard: React.FC<{ accountId: string }> = ({ accountId }) => {
|
||||||
|
const intl = useIntl();
|
||||||
|
const account = useAppSelector((s) => getAccount(s, accountId));
|
||||||
|
const dispatch = useAppDispatch();
|
||||||
|
|
||||||
|
const handleMouseEnter = useCallback<MouseEventHandler>(
|
||||||
|
({ currentTarget }) => {
|
||||||
|
if (autoPlayGif) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const emojis =
|
||||||
|
currentTarget.querySelectorAll<HTMLImageElement>('.custom-emoji');
|
||||||
|
|
||||||
|
emojis.forEach((emoji) => {
|
||||||
|
const original = emoji.getAttribute('data-original');
|
||||||
|
if (original) emoji.src = original;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
[],
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleMouseLeave = useCallback<MouseEventHandler>(
|
||||||
|
({ currentTarget }) => {
|
||||||
|
if (autoPlayGif) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const emojis =
|
||||||
|
currentTarget.querySelectorAll<HTMLImageElement>('.custom-emoji');
|
||||||
|
|
||||||
|
emojis.forEach((emoji) => {
|
||||||
|
const staticUrl = emoji.getAttribute('data-static');
|
||||||
|
if (staticUrl) emoji.src = staticUrl;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
[],
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleFollow = useCallback(() => {
|
||||||
|
if (!account) return;
|
||||||
|
|
||||||
|
if (account.getIn(['relationship', 'following'])) {
|
||||||
|
dispatch(
|
||||||
|
openModal({
|
||||||
|
modalType: 'CONFIRM',
|
||||||
|
modalProps: {
|
||||||
|
message: (
|
||||||
|
<FormattedMessage
|
||||||
|
id='confirmations.unfollow.message'
|
||||||
|
defaultMessage='Are you sure you want to unfollow {name}?'
|
||||||
|
values={{ name: <strong>@{account.get('acct')}</strong> }}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
confirm: intl.formatMessage(messages.unfollowConfirm),
|
||||||
|
onConfirm: () => {
|
||||||
|
dispatch(unfollowAccount(account.get('id')));
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
} else if (account.getIn(['relationship', 'requested'])) {
|
||||||
|
dispatch(
|
||||||
|
openModal({
|
||||||
|
modalType: 'CONFIRM',
|
||||||
|
modalProps: {
|
||||||
|
message: (
|
||||||
|
<FormattedMessage
|
||||||
|
id='confirmations.cancel_follow_request.message'
|
||||||
|
defaultMessage='Are you sure you want to withdraw your request to follow {name}?'
|
||||||
|
values={{ name: <strong>@{account.get('acct')}</strong> }}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
confirm: intl.formatMessage(messages.cancelFollowRequestConfirm),
|
||||||
|
onConfirm: () => {
|
||||||
|
dispatch(unfollowAccount(account.get('id')));
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
dispatch(followAccount(account.get('id')));
|
||||||
|
}
|
||||||
|
}, [account, dispatch, intl]);
|
||||||
|
|
||||||
|
const handleBlock = useCallback(() => {
|
||||||
|
if (account?.relationship?.blocking) {
|
||||||
|
dispatch(unblockAccount(account.get('id')));
|
||||||
|
}
|
||||||
|
}, [account, dispatch]);
|
||||||
|
|
||||||
|
const handleMute = useCallback(() => {
|
||||||
|
if (account?.relationship?.muting) {
|
||||||
|
dispatch(unmuteAccount(account.get('id')));
|
||||||
|
}
|
||||||
|
}, [account, dispatch]);
|
||||||
|
|
||||||
|
const handleEditProfile = useCallback(() => {
|
||||||
|
window.open('/settings/profile', '_blank');
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
if (!account) return null;
|
||||||
|
|
||||||
|
let actionBtn;
|
||||||
|
|
||||||
|
if (me !== account.get('id')) {
|
||||||
|
if (!account.get('relationship')) {
|
||||||
|
// Wait until the relationship is loaded
|
||||||
|
actionBtn = '';
|
||||||
|
} else if (account.getIn(['relationship', 'requested'])) {
|
||||||
|
actionBtn = (
|
||||||
|
<Button
|
||||||
|
text={intl.formatMessage(messages.cancel_follow_request)}
|
||||||
|
title={intl.formatMessage(messages.requested)}
|
||||||
|
onClick={handleFollow}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
} else if (account.getIn(['relationship', 'muting'])) {
|
||||||
|
actionBtn = (
|
||||||
|
<Button
|
||||||
|
text={intl.formatMessage(messages.unmute)}
|
||||||
|
onClick={handleMute}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
} else if (!account.getIn(['relationship', 'blocking'])) {
|
||||||
|
actionBtn = (
|
||||||
|
<Button
|
||||||
|
disabled={account.relationship?.blocked_by}
|
||||||
|
className={classNames({
|
||||||
|
'button--destructive': account.getIn(['relationship', 'following']),
|
||||||
|
})}
|
||||||
|
text={intl.formatMessage(
|
||||||
|
account.getIn(['relationship', 'following'])
|
||||||
|
? messages.unfollow
|
||||||
|
: messages.follow,
|
||||||
|
)}
|
||||||
|
onClick={handleFollow}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
} else if (account.getIn(['relationship', 'blocking'])) {
|
||||||
|
actionBtn = (
|
||||||
|
<Button
|
||||||
|
text={intl.formatMessage(messages.unblock)}
|
||||||
|
onClick={handleBlock}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
actionBtn = (
|
||||||
|
<Button
|
||||||
|
text={intl.formatMessage(messages.edit_profile)}
|
||||||
|
onClick={handleEditProfile}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='account-card'>
|
||||||
|
<Link to={`/@${account.get('acct')}`} className='account-card__permalink'>
|
||||||
|
<div className='account-card__header'>
|
||||||
|
<img
|
||||||
|
src={
|
||||||
|
autoPlayGif ? account.get('header') : account.get('header_static')
|
||||||
|
}
|
||||||
|
alt=''
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='account-card__title'>
|
||||||
|
<div className='account-card__title__avatar'>
|
||||||
|
<Avatar account={account as Account} size={56} />
|
||||||
|
</div>
|
||||||
|
<DisplayName account={account as Account} />
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
{account.get('note').length > 0 && (
|
||||||
|
<div
|
||||||
|
className='account-card__bio translate'
|
||||||
|
onMouseEnter={handleMouseEnter}
|
||||||
|
onMouseLeave={handleMouseLeave}
|
||||||
|
dangerouslySetInnerHTML={{ __html: account.get('note_emojified') }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className='account-card__actions'>
|
||||||
|
<div className='account-card__counters'>
|
||||||
|
<div className='account-card__counters__item'>
|
||||||
|
<ShortNumber value={account.get('statuses_count')} />
|
||||||
|
<small>
|
||||||
|
<FormattedMessage id='account.posts' defaultMessage='Posts' />
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='account-card__counters__item'>
|
||||||
|
<ShortNumber value={account.get('followers_count')} />{' '}
|
||||||
|
<small>
|
||||||
|
<FormattedMessage
|
||||||
|
id='account.followers'
|
||||||
|
defaultMessage='Followers'
|
||||||
|
/>
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='account-card__counters__item'>
|
||||||
|
<ShortNumber value={account.get('following_count')} />{' '}
|
||||||
|
<small>
|
||||||
|
<FormattedMessage
|
||||||
|
id='account.following'
|
||||||
|
defaultMessage='Following'
|
||||||
|
/>
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='account-card__actions__button'>{actionBtn}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -1,181 +0,0 @@
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import { PureComponent } from 'react';
|
|
||||||
|
|
||||||
import { defineMessages, injectIntl } from 'react-intl';
|
|
||||||
|
|
||||||
import { Helmet } from 'react-helmet';
|
|
||||||
|
|
||||||
import { List as ImmutableList } from 'immutable';
|
|
||||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
|
||||||
import { connect } from 'react-redux';
|
|
||||||
|
|
||||||
import PeopleIcon from '@/material-icons/400-24px/group.svg?react';
|
|
||||||
import { addColumn, removeColumn, moveColumn, changeColumnParams } from 'mastodon/actions/columns';
|
|
||||||
import { fetchDirectory, expandDirectory } from 'mastodon/actions/directory';
|
|
||||||
import Column from 'mastodon/components/column';
|
|
||||||
import ColumnHeader from 'mastodon/components/column_header';
|
|
||||||
import { LoadMore } from 'mastodon/components/load_more';
|
|
||||||
import { LoadingIndicator } from 'mastodon/components/loading_indicator';
|
|
||||||
import { RadioButton } from 'mastodon/components/radio_button';
|
|
||||||
import ScrollContainer from 'mastodon/containers/scroll_container';
|
|
||||||
|
|
||||||
import AccountCard from './components/account_card';
|
|
||||||
|
|
||||||
const messages = defineMessages({
|
|
||||||
title: { id: 'column.directory', defaultMessage: 'Browse profiles' },
|
|
||||||
recentlyActive: { id: 'directory.recently_active', defaultMessage: 'Recently active' },
|
|
||||||
newArrivals: { id: 'directory.new_arrivals', defaultMessage: 'New arrivals' },
|
|
||||||
local: { id: 'directory.local', defaultMessage: 'From {domain} only' },
|
|
||||||
federated: { id: 'directory.federated', defaultMessage: 'From known fediverse' },
|
|
||||||
});
|
|
||||||
|
|
||||||
const mapStateToProps = state => ({
|
|
||||||
accountIds: state.getIn(['user_lists', 'directory', 'items'], ImmutableList()),
|
|
||||||
isLoading: state.getIn(['user_lists', 'directory', 'isLoading'], true),
|
|
||||||
domain: state.getIn(['meta', 'domain']),
|
|
||||||
});
|
|
||||||
|
|
||||||
class Directory extends PureComponent {
|
|
||||||
|
|
||||||
static propTypes = {
|
|
||||||
isLoading: PropTypes.bool,
|
|
||||||
accountIds: ImmutablePropTypes.list.isRequired,
|
|
||||||
dispatch: PropTypes.func.isRequired,
|
|
||||||
columnId: PropTypes.string,
|
|
||||||
intl: PropTypes.object.isRequired,
|
|
||||||
multiColumn: PropTypes.bool,
|
|
||||||
domain: PropTypes.string.isRequired,
|
|
||||||
params: PropTypes.shape({
|
|
||||||
order: PropTypes.string,
|
|
||||||
local: PropTypes.bool,
|
|
||||||
}),
|
|
||||||
};
|
|
||||||
|
|
||||||
state = {
|
|
||||||
order: null,
|
|
||||||
local: null,
|
|
||||||
};
|
|
||||||
|
|
||||||
handlePin = () => {
|
|
||||||
const { columnId, dispatch } = this.props;
|
|
||||||
|
|
||||||
if (columnId) {
|
|
||||||
dispatch(removeColumn(columnId));
|
|
||||||
} else {
|
|
||||||
dispatch(addColumn('DIRECTORY', this.getParams(this.props, this.state)));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
getParams = (props, state) => ({
|
|
||||||
order: state.order === null ? (props.params.order || 'active') : state.order,
|
|
||||||
local: state.local === null ? (props.params.local || false) : state.local,
|
|
||||||
});
|
|
||||||
|
|
||||||
handleMove = dir => {
|
|
||||||
const { columnId, dispatch } = this.props;
|
|
||||||
dispatch(moveColumn(columnId, dir));
|
|
||||||
};
|
|
||||||
|
|
||||||
handleHeaderClick = () => {
|
|
||||||
this.column.scrollTop();
|
|
||||||
};
|
|
||||||
|
|
||||||
componentDidMount () {
|
|
||||||
const { dispatch } = this.props;
|
|
||||||
dispatch(fetchDirectory(this.getParams(this.props, this.state)));
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidUpdate (prevProps, prevState) {
|
|
||||||
const { dispatch } = this.props;
|
|
||||||
const paramsOld = this.getParams(prevProps, prevState);
|
|
||||||
const paramsNew = this.getParams(this.props, this.state);
|
|
||||||
|
|
||||||
if (paramsOld.order !== paramsNew.order || paramsOld.local !== paramsNew.local) {
|
|
||||||
dispatch(fetchDirectory(paramsNew));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setRef = c => {
|
|
||||||
this.column = c;
|
|
||||||
};
|
|
||||||
|
|
||||||
handleChangeOrder = e => {
|
|
||||||
const { dispatch, columnId } = this.props;
|
|
||||||
|
|
||||||
if (columnId) {
|
|
||||||
dispatch(changeColumnParams(columnId, ['order'], e.target.value));
|
|
||||||
} else {
|
|
||||||
this.setState({ order: e.target.value });
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
handleChangeLocal = e => {
|
|
||||||
const { dispatch, columnId } = this.props;
|
|
||||||
|
|
||||||
if (columnId) {
|
|
||||||
dispatch(changeColumnParams(columnId, ['local'], e.target.value === '1'));
|
|
||||||
} else {
|
|
||||||
this.setState({ local: e.target.value === '1' });
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
handleLoadMore = () => {
|
|
||||||
const { dispatch } = this.props;
|
|
||||||
dispatch(expandDirectory(this.getParams(this.props, this.state)));
|
|
||||||
};
|
|
||||||
|
|
||||||
render () {
|
|
||||||
const { isLoading, accountIds, intl, columnId, multiColumn, domain } = this.props;
|
|
||||||
const { order, local } = this.getParams(this.props, this.state);
|
|
||||||
const pinned = !!columnId;
|
|
||||||
|
|
||||||
const scrollableArea = (
|
|
||||||
<div className='scrollable'>
|
|
||||||
<div className='filter-form'>
|
|
||||||
<div className='filter-form__column' role='group'>
|
|
||||||
<RadioButton name='order' value='active' label={intl.formatMessage(messages.recentlyActive)} checked={order === 'active'} onChange={this.handleChangeOrder} />
|
|
||||||
<RadioButton name='order' value='new' label={intl.formatMessage(messages.newArrivals)} checked={order === 'new'} onChange={this.handleChangeOrder} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='filter-form__column' role='group'>
|
|
||||||
<RadioButton name='local' value='1' label={intl.formatMessage(messages.local, { domain })} checked={local} onChange={this.handleChangeLocal} />
|
|
||||||
<RadioButton name='local' value='0' label={intl.formatMessage(messages.federated)} checked={!local} onChange={this.handleChangeLocal} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='directory__list'>
|
|
||||||
{isLoading ? <LoadingIndicator /> : accountIds.map(accountId => (
|
|
||||||
<AccountCard id={accountId} key={accountId} />
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<LoadMore onClick={this.handleLoadMore} visible={!isLoading} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Column bindToDocument={!multiColumn} ref={this.setRef} label={intl.formatMessage(messages.title)}>
|
|
||||||
<ColumnHeader
|
|
||||||
icon='address-book-o'
|
|
||||||
iconComponent={PeopleIcon}
|
|
||||||
title={intl.formatMessage(messages.title)}
|
|
||||||
onPin={this.handlePin}
|
|
||||||
onMove={this.handleMove}
|
|
||||||
onClick={this.handleHeaderClick}
|
|
||||||
pinned={pinned}
|
|
||||||
multiColumn={multiColumn}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{multiColumn && !pinned ? <ScrollContainer scrollKey='directory'>{scrollableArea}</ScrollContainer> : scrollableArea}
|
|
||||||
|
|
||||||
<Helmet>
|
|
||||||
<title>{intl.formatMessage(messages.title)}</title>
|
|
||||||
<meta name='robots' content='noindex' />
|
|
||||||
</Helmet>
|
|
||||||
</Column>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
export default connect(mapStateToProps)(injectIntl(Directory));
|
|
||||||
216
app/javascript/mastodon/features/directory/index.tsx
Normal file
216
app/javascript/mastodon/features/directory/index.tsx
Normal file
|
|
@ -0,0 +1,216 @@
|
||||||
|
import type { ChangeEventHandler } from 'react';
|
||||||
|
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||||
|
|
||||||
|
import { defineMessages, useIntl } from 'react-intl';
|
||||||
|
|
||||||
|
import { Helmet } from 'react-helmet';
|
||||||
|
|
||||||
|
import { List as ImmutableList } from 'immutable';
|
||||||
|
|
||||||
|
import PeopleIcon from '@/material-icons/400-24px/group.svg?react';
|
||||||
|
import {
|
||||||
|
addColumn,
|
||||||
|
removeColumn,
|
||||||
|
moveColumn,
|
||||||
|
changeColumnParams,
|
||||||
|
} from 'mastodon/actions/columns';
|
||||||
|
import { fetchDirectory, expandDirectory } from 'mastodon/actions/directory';
|
||||||
|
import Column from 'mastodon/components/column';
|
||||||
|
import { ColumnHeader } from 'mastodon/components/column_header';
|
||||||
|
import { LoadMore } from 'mastodon/components/load_more';
|
||||||
|
import { LoadingIndicator } from 'mastodon/components/loading_indicator';
|
||||||
|
import { RadioButton } from 'mastodon/components/radio_button';
|
||||||
|
import ScrollContainer from 'mastodon/containers/scroll_container';
|
||||||
|
import { useAppDispatch, useAppSelector } from 'mastodon/store';
|
||||||
|
|
||||||
|
import { AccountCard } from './components/account_card';
|
||||||
|
|
||||||
|
const messages = defineMessages({
|
||||||
|
title: { id: 'column.directory', defaultMessage: 'Browse profiles' },
|
||||||
|
recentlyActive: {
|
||||||
|
id: 'directory.recently_active',
|
||||||
|
defaultMessage: 'Recently active',
|
||||||
|
},
|
||||||
|
newArrivals: { id: 'directory.new_arrivals', defaultMessage: 'New arrivals' },
|
||||||
|
local: { id: 'directory.local', defaultMessage: 'From {domain} only' },
|
||||||
|
federated: {
|
||||||
|
id: 'directory.federated',
|
||||||
|
defaultMessage: 'From known fediverse',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export const Directory: React.FC<{
|
||||||
|
columnId?: string;
|
||||||
|
multiColumn?: boolean;
|
||||||
|
params?: { order: string; local?: boolean };
|
||||||
|
}> = ({ columnId, multiColumn, params }) => {
|
||||||
|
const intl = useIntl();
|
||||||
|
const dispatch = useAppDispatch();
|
||||||
|
|
||||||
|
const [state, setState] = useState<{
|
||||||
|
order: string | null;
|
||||||
|
local: boolean | null;
|
||||||
|
}>({
|
||||||
|
order: null,
|
||||||
|
local: null,
|
||||||
|
});
|
||||||
|
|
||||||
|
const column = useRef<Column>(null);
|
||||||
|
|
||||||
|
const order = state.order ?? params?.order ?? 'active';
|
||||||
|
const local = state.local ?? params?.local ?? false;
|
||||||
|
|
||||||
|
const handlePin = useCallback(() => {
|
||||||
|
if (columnId) {
|
||||||
|
dispatch(removeColumn(columnId));
|
||||||
|
} else {
|
||||||
|
dispatch(addColumn('DIRECTORY', { order, local }));
|
||||||
|
}
|
||||||
|
}, [dispatch, columnId, order, local]);
|
||||||
|
|
||||||
|
const domain = useAppSelector((s) => s.meta.get('domain') as string);
|
||||||
|
const accountIds = useAppSelector(
|
||||||
|
(state) =>
|
||||||
|
state.user_lists.getIn(
|
||||||
|
['directory', 'items'],
|
||||||
|
ImmutableList(),
|
||||||
|
) as ImmutableList<string>,
|
||||||
|
);
|
||||||
|
const isLoading = useAppSelector(
|
||||||
|
(state) =>
|
||||||
|
state.user_lists.getIn(['directory', 'isLoading'], true) as boolean,
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
void dispatch(fetchDirectory({ order, local }));
|
||||||
|
}, [dispatch, order, local]);
|
||||||
|
|
||||||
|
const handleMove = useCallback(
|
||||||
|
(dir: number) => {
|
||||||
|
dispatch(moveColumn(columnId, dir));
|
||||||
|
},
|
||||||
|
[dispatch, columnId],
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleHeaderClick = useCallback(() => {
|
||||||
|
column.current?.scrollTop();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleChangeOrder = useCallback<ChangeEventHandler<HTMLInputElement>>(
|
||||||
|
(e) => {
|
||||||
|
if (columnId) {
|
||||||
|
dispatch(changeColumnParams(columnId, ['order'], e.target.value));
|
||||||
|
} else {
|
||||||
|
setState((s) => ({ order: e.target.value, local: s.local }));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[dispatch, columnId],
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleChangeLocal = useCallback<ChangeEventHandler<HTMLInputElement>>(
|
||||||
|
(e) => {
|
||||||
|
if (columnId) {
|
||||||
|
dispatch(
|
||||||
|
changeColumnParams(columnId, ['local'], e.target.value === '1'),
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
setState((s) => ({ local: e.target.value === '1', order: s.order }));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[dispatch, columnId],
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleLoadMore = useCallback(() => {
|
||||||
|
void dispatch(expandDirectory({ order, local }));
|
||||||
|
}, [dispatch, order, local]);
|
||||||
|
|
||||||
|
const pinned = !!columnId;
|
||||||
|
|
||||||
|
const scrollableArea = (
|
||||||
|
<div className='scrollable'>
|
||||||
|
<div className='filter-form'>
|
||||||
|
<div className='filter-form__column' role='group'>
|
||||||
|
<RadioButton
|
||||||
|
name='order'
|
||||||
|
value='active'
|
||||||
|
label={intl.formatMessage(messages.recentlyActive)}
|
||||||
|
checked={order === 'active'}
|
||||||
|
onChange={handleChangeOrder}
|
||||||
|
/>
|
||||||
|
<RadioButton
|
||||||
|
name='order'
|
||||||
|
value='new'
|
||||||
|
label={intl.formatMessage(messages.newArrivals)}
|
||||||
|
checked={order === 'new'}
|
||||||
|
onChange={handleChangeOrder}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='filter-form__column' role='group'>
|
||||||
|
<RadioButton
|
||||||
|
name='local'
|
||||||
|
value='1'
|
||||||
|
label={intl.formatMessage(messages.local, { domain })}
|
||||||
|
checked={local}
|
||||||
|
onChange={handleChangeLocal}
|
||||||
|
/>
|
||||||
|
<RadioButton
|
||||||
|
name='local'
|
||||||
|
value='0'
|
||||||
|
label={intl.formatMessage(messages.federated)}
|
||||||
|
checked={!local}
|
||||||
|
onChange={handleChangeLocal}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='directory__list'>
|
||||||
|
{isLoading ? (
|
||||||
|
<LoadingIndicator />
|
||||||
|
) : (
|
||||||
|
accountIds.map((accountId) => (
|
||||||
|
<AccountCard accountId={accountId} key={accountId} />
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<LoadMore onClick={handleLoadMore} visible={!isLoading} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Column
|
||||||
|
bindToDocument={!multiColumn}
|
||||||
|
ref={column}
|
||||||
|
label={intl.formatMessage(messages.title)}
|
||||||
|
>
|
||||||
|
<ColumnHeader
|
||||||
|
icon='address-book-o'
|
||||||
|
iconComponent={PeopleIcon}
|
||||||
|
title={intl.formatMessage(messages.title)}
|
||||||
|
onPin={handlePin}
|
||||||
|
onMove={handleMove}
|
||||||
|
onClick={handleHeaderClick}
|
||||||
|
pinned={pinned}
|
||||||
|
multiColumn={multiColumn}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{multiColumn && !pinned ? (
|
||||||
|
// @ts-expect-error ScrollContainer is not properly typed yet
|
||||||
|
<ScrollContainer scrollKey='directory'>
|
||||||
|
{scrollableArea}
|
||||||
|
</ScrollContainer>
|
||||||
|
) : (
|
||||||
|
scrollableArea
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Helmet>
|
||||||
|
<title>{intl.formatMessage(messages.title)}</title>
|
||||||
|
<meta name='robots' content='noindex' />
|
||||||
|
</Helmet>
|
||||||
|
</Column>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// eslint-disable-next-line import/no-default-export -- Needed because this is called as an async components
|
||||||
|
export default Directory;
|
||||||
|
|
@ -9,7 +9,7 @@ export const AuthorLink = ({ accountId }) => {
|
||||||
const account = useAppSelector(state => state.getIn(['accounts', accountId]));
|
const account = useAppSelector(state => state.getIn(['accounts', accountId]));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Link to={`/@${account.get('acct')}`} className='story__details__shared__author-link'>
|
<Link to={`/@${account.get('acct')}`} className='story__details__shared__author-link' data-hover-card-account={accountId}>
|
||||||
<Avatar account={account} size={16} />
|
<Avatar account={account} size={16} />
|
||||||
<bdi dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }} />
|
<bdi dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }} />
|
||||||
</Link>
|
</Link>
|
||||||
|
|
|
||||||
|
|
@ -8,34 +8,21 @@ import { Link } from 'react-router-dom';
|
||||||
import { useDispatch, useSelector } from 'react-redux';
|
import { useDispatch, useSelector } from 'react-redux';
|
||||||
|
|
||||||
import CloseIcon from '@/material-icons/400-24px/close.svg?react';
|
import CloseIcon from '@/material-icons/400-24px/close.svg?react';
|
||||||
import { followAccount, unfollowAccount } from 'mastodon/actions/accounts';
|
|
||||||
import { dismissSuggestion } from 'mastodon/actions/suggestions';
|
import { dismissSuggestion } from 'mastodon/actions/suggestions';
|
||||||
import { Avatar } from 'mastodon/components/avatar';
|
import { Avatar } from 'mastodon/components/avatar';
|
||||||
import { Button } from 'mastodon/components/button';
|
|
||||||
import { DisplayName } from 'mastodon/components/display_name';
|
import { DisplayName } from 'mastodon/components/display_name';
|
||||||
|
import { FollowButton } from 'mastodon/components/follow_button';
|
||||||
import { IconButton } from 'mastodon/components/icon_button';
|
import { IconButton } from 'mastodon/components/icon_button';
|
||||||
import { domain } from 'mastodon/initial_state';
|
import { domain } from 'mastodon/initial_state';
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
follow: { id: 'account.follow', defaultMessage: 'Follow' },
|
|
||||||
unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
|
|
||||||
dismiss: { id: 'follow_suggestions.dismiss', defaultMessage: "Don't show again" },
|
dismiss: { id: 'follow_suggestions.dismiss', defaultMessage: "Don't show again" },
|
||||||
});
|
});
|
||||||
|
|
||||||
export const Card = ({ id, source }) => {
|
export const Card = ({ id, source }) => {
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
const account = useSelector(state => state.getIn(['accounts', id]));
|
const account = useSelector(state => state.getIn(['accounts', id]));
|
||||||
const relationship = useSelector(state => state.getIn(['relationships', id]));
|
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
const following = relationship?.get('following') ?? relationship?.get('requested');
|
|
||||||
|
|
||||||
const handleFollow = useCallback(() => {
|
|
||||||
if (following) {
|
|
||||||
dispatch(unfollowAccount(id));
|
|
||||||
} else {
|
|
||||||
dispatch(followAccount(id));
|
|
||||||
}
|
|
||||||
}, [id, following, dispatch]);
|
|
||||||
|
|
||||||
const handleDismiss = useCallback(() => {
|
const handleDismiss = useCallback(() => {
|
||||||
dispatch(dismissSuggestion(id));
|
dispatch(dismissSuggestion(id));
|
||||||
|
|
@ -74,7 +61,7 @@ export const Card = ({ id, source }) => {
|
||||||
<div className='explore__suggestions__card__body__main__name-button'>
|
<div className='explore__suggestions__card__body__main__name-button'>
|
||||||
<Link className='explore__suggestions__card__body__main__name-button__name' to={`/@${account.get('acct')}`}><DisplayName account={account} /></Link>
|
<Link className='explore__suggestions__card__body__main__name-button__name' to={`/@${account.get('acct')}`}><DisplayName account={account} /></Link>
|
||||||
<IconButton iconComponent={CloseIcon} onClick={handleDismiss} title={intl.formatMessage(messages.dismiss)} />
|
<IconButton iconComponent={CloseIcon} onClick={handleDismiss} title={intl.formatMessage(messages.dismiss)} />
|
||||||
<Button text={intl.formatMessage(following ? messages.unfollow : messages.follow)} secondary={following} onClick={handleFollow} />
|
<FollowButton accountId={account.get('id')} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -12,12 +12,11 @@ import ChevronLeftIcon from '@/material-icons/400-24px/chevron_left.svg?react';
|
||||||
import ChevronRightIcon from '@/material-icons/400-24px/chevron_right.svg?react';
|
import ChevronRightIcon from '@/material-icons/400-24px/chevron_right.svg?react';
|
||||||
import CloseIcon from '@/material-icons/400-24px/close.svg?react';
|
import CloseIcon from '@/material-icons/400-24px/close.svg?react';
|
||||||
import InfoIcon from '@/material-icons/400-24px/info.svg?react';
|
import InfoIcon from '@/material-icons/400-24px/info.svg?react';
|
||||||
import { followAccount, unfollowAccount } from 'mastodon/actions/accounts';
|
|
||||||
import { changeSetting } from 'mastodon/actions/settings';
|
import { changeSetting } from 'mastodon/actions/settings';
|
||||||
import { fetchSuggestions, dismissSuggestion } from 'mastodon/actions/suggestions';
|
import { fetchSuggestions, dismissSuggestion } from 'mastodon/actions/suggestions';
|
||||||
import { Avatar } from 'mastodon/components/avatar';
|
import { Avatar } from 'mastodon/components/avatar';
|
||||||
import { Button } from 'mastodon/components/button';
|
|
||||||
import { DisplayName } from 'mastodon/components/display_name';
|
import { DisplayName } from 'mastodon/components/display_name';
|
||||||
|
import { FollowButton } from 'mastodon/components/follow_button';
|
||||||
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 { VerifiedBadge } from 'mastodon/components/verified_badge';
|
import { VerifiedBadge } from 'mastodon/components/verified_badge';
|
||||||
|
|
@ -79,18 +78,8 @@ Source.propTypes = {
|
||||||
const Card = ({ id, sources }) => {
|
const Card = ({ id, sources }) => {
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
const account = useSelector(state => state.getIn(['accounts', id]));
|
const account = useSelector(state => state.getIn(['accounts', id]));
|
||||||
const relationship = useSelector(state => state.getIn(['relationships', id]));
|
|
||||||
const firstVerifiedField = account.get('fields').find(item => !!item.get('verified_at'));
|
const firstVerifiedField = account.get('fields').find(item => !!item.get('verified_at'));
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
const following = relationship?.get('following') ?? relationship?.get('requested');
|
|
||||||
|
|
||||||
const handleFollow = useCallback(() => {
|
|
||||||
if (following) {
|
|
||||||
dispatch(unfollowAccount(id));
|
|
||||||
} else {
|
|
||||||
dispatch(followAccount(id));
|
|
||||||
}
|
|
||||||
}, [id, following, dispatch]);
|
|
||||||
|
|
||||||
const handleDismiss = useCallback(() => {
|
const handleDismiss = useCallback(() => {
|
||||||
dispatch(dismissSuggestion(id));
|
dispatch(dismissSuggestion(id));
|
||||||
|
|
@ -109,7 +98,7 @@ const Card = ({ id, sources }) => {
|
||||||
{firstVerifiedField ? <VerifiedBadge link={firstVerifiedField.get('value')} /> : <Source id={sources.get(0)} />}
|
{firstVerifiedField ? <VerifiedBadge link={firstVerifiedField.get('value')} /> : <Source id={sources.get(0)} />}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Button text={intl.formatMessage(following ? messages.unfollow : messages.follow)} secondary={following} onClick={handleFollow} />
|
<FollowButton accountId={id} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -435,7 +435,7 @@ class Notification extends ImmutablePureComponent {
|
||||||
|
|
||||||
const targetAccount = report.get('target_account');
|
const targetAccount = report.get('target_account');
|
||||||
const targetDisplayNameHtml = { __html: targetAccount.get('display_name_html') };
|
const targetDisplayNameHtml = { __html: targetAccount.get('display_name_html') };
|
||||||
const targetLink = <bdi><Link className='notification__display-name' title={targetAccount.get('acct')} to={`/@${targetAccount.get('acct')}`} dangerouslySetInnerHTML={targetDisplayNameHtml} /></bdi>;
|
const targetLink = <bdi><Link className='notification__display-name' data-hover-card-account={targetAccount.get('id')} to={`/@${targetAccount.get('acct')}`} dangerouslySetInnerHTML={targetDisplayNameHtml} /></bdi>;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<HotKeys handlers={this.getHandlers()}>
|
<HotKeys handlers={this.getHandlers()}>
|
||||||
|
|
@ -458,7 +458,7 @@ class Notification extends ImmutablePureComponent {
|
||||||
const { notification } = this.props;
|
const { notification } = this.props;
|
||||||
const account = notification.get('account');
|
const account = notification.get('account');
|
||||||
const displayNameHtml = { __html: account.get('display_name_html') };
|
const displayNameHtml = { __html: account.get('display_name_html') };
|
||||||
const link = <bdi><Link className='notification__display-name' href={`/@${account.get('acct')}`} title={account.get('acct')} to={`/@${account.get('acct')}`} dangerouslySetInnerHTML={displayNameHtml} /></bdi>;
|
const link = <bdi><Link className='notification__display-name' href={`/@${account.get('acct')}`} data-hover-card-account={account.get('id')} to={`/@${account.get('acct')}`} dangerouslySetInnerHTML={displayNameHtml} /></bdi>;
|
||||||
|
|
||||||
switch(notification.get('type')) {
|
switch(notification.get('type')) {
|
||||||
case 'follow':
|
case 'follow':
|
||||||
|
|
|
||||||
|
|
@ -272,7 +272,7 @@ class DetailedStatus extends ImmutablePureComponent {
|
||||||
<FormattedMessage id='status.direct_indicator' defaultMessage='Private mention' />
|
<FormattedMessage id='status.direct_indicator' defaultMessage='Private mention' />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<a href={`/@${status.getIn(['account', 'acct'])}`} onClick={this.handleAccountClick} className='detailed-status__display-name'>
|
<a href={`/@${status.getIn(['account', 'acct'])}`} data-hover-card-account={status.getIn(['account', 'id'])} onClick={this.handleAccountClick} className='detailed-status__display-name'>
|
||||||
<div className='detailed-status__display-avatar'><Avatar account={status.get('account')} size={46} /></div>
|
<div className='detailed-status__display-avatar'><Avatar account={status.get('account')} size={46} /></div>
|
||||||
<DisplayName account={status.get('account')} localDomain={this.props.domain} />
|
<DisplayName account={status.get('account')} localDomain={this.props.domain} />
|
||||||
</a>
|
</a>
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,8 @@
|
||||||
import Column from '../../../components/column';
|
import Column from 'mastodon/components/column';
|
||||||
import ColumnHeader from '../../../components/column_header';
|
import { ColumnHeader } from 'mastodon/components/column_header';
|
||||||
|
import type { Props as ColumnHeaderProps } from 'mastodon/components/column_header';
|
||||||
|
|
||||||
interface Props {
|
export const ColumnLoading: React.FC<ColumnHeaderProps> = (otherProps) => (
|
||||||
multiColumn?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const ColumnLoading: React.FC<Props> = (otherProps) => (
|
|
||||||
<Column>
|
<Column>
|
||||||
<ColumnHeader {...otherProps} />
|
<ColumnHeader {...otherProps} />
|
||||||
<div className='scrollable' />
|
<div className='scrollable' />
|
||||||
|
|
|
||||||
|
|
@ -14,6 +14,7 @@ import { HotKeys } from 'react-hotkeys';
|
||||||
import { focusApp, unfocusApp, changeLayout } from 'mastodon/actions/app';
|
import { focusApp, unfocusApp, changeLayout } from 'mastodon/actions/app';
|
||||||
import { synchronouslySubmitMarkers, submitMarkers, fetchMarkers } from 'mastodon/actions/markers';
|
import { synchronouslySubmitMarkers, submitMarkers, fetchMarkers } from 'mastodon/actions/markers';
|
||||||
import { INTRODUCTION_VERSION } from 'mastodon/actions/onboarding';
|
import { INTRODUCTION_VERSION } from 'mastodon/actions/onboarding';
|
||||||
|
import { HoverCardController } from 'mastodon/components/hover_card_controller';
|
||||||
import { PictureInPicture } from 'mastodon/features/picture_in_picture';
|
import { PictureInPicture } from 'mastodon/features/picture_in_picture';
|
||||||
import { identityContextPropShape, withIdentity } from 'mastodon/identity_context';
|
import { identityContextPropShape, withIdentity } from 'mastodon/identity_context';
|
||||||
import { layoutFromWindow } from 'mastodon/is_mobile';
|
import { layoutFromWindow } from 'mastodon/is_mobile';
|
||||||
|
|
@ -585,6 +586,7 @@ class UI extends PureComponent {
|
||||||
|
|
||||||
{layout !== 'mobile' && <PictureInPicture />}
|
{layout !== 'mobile' && <PictureInPicture />}
|
||||||
<NotificationsContainer />
|
<NotificationsContainer />
|
||||||
|
<HoverCardController />
|
||||||
<LoadingBarContainer className='loading-bar' />
|
<LoadingBarContainer className='loading-bar' />
|
||||||
<ModalContainer />
|
<ModalContainer />
|
||||||
<UploadArea active={draggingOver} onClose={this.closeUploadModal} />
|
<UploadArea active={draggingOver} onClose={this.closeUploadModal} />
|
||||||
|
|
|
||||||
|
|
@ -35,9 +35,9 @@
|
||||||
"account.follow_back": "Follow back",
|
"account.follow_back": "Follow back",
|
||||||
"account.followers": "Followers",
|
"account.followers": "Followers",
|
||||||
"account.followers.empty": "No one follows this user yet.",
|
"account.followers.empty": "No one follows this user yet.",
|
||||||
"account.followers_counter": "{count, plural, one {{counter} Follower} other {{counter} Followers}}",
|
"account.followers_counter": "{count, plural, one {{counter} follower} other {{counter} followers}}",
|
||||||
"account.following": "Following",
|
"account.following": "Following",
|
||||||
"account.following_counter": "{count, plural, one {{counter} Following} other {{counter} Following}}",
|
"account.following_counter": "{count, plural, one {{counter} following} other {{counter} following}}",
|
||||||
"account.follows.empty": "This user doesn't follow anyone yet.",
|
"account.follows.empty": "This user doesn't follow anyone yet.",
|
||||||
"account.go_to_profile": "Go to profile",
|
"account.go_to_profile": "Go to profile",
|
||||||
"account.hide_reblogs": "Hide boosts from @{name}",
|
"account.hide_reblogs": "Hide boosts from @{name}",
|
||||||
|
|
@ -63,7 +63,7 @@
|
||||||
"account.requested_follow": "{name} has requested to follow you",
|
"account.requested_follow": "{name} has requested to follow you",
|
||||||
"account.share": "Share @{name}'s profile",
|
"account.share": "Share @{name}'s profile",
|
||||||
"account.show_reblogs": "Show boosts from @{name}",
|
"account.show_reblogs": "Show boosts from @{name}",
|
||||||
"account.statuses_counter": "{count, plural, one {{counter} Post} other {{counter} Posts}}",
|
"account.statuses_counter": "{count, plural, one {{counter} post} other {{counter} posts}}",
|
||||||
"account.unblock": "Unblock @{name}",
|
"account.unblock": "Unblock @{name}",
|
||||||
"account.unblock_domain": "Unblock domain {domain}",
|
"account.unblock_domain": "Unblock domain {domain}",
|
||||||
"account.unblock_short": "Unblock",
|
"account.unblock_short": "Unblock",
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,8 @@
|
||||||
import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
|
import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
DIRECTORY_FETCH_REQUEST,
|
expandDirectory,
|
||||||
DIRECTORY_FETCH_SUCCESS,
|
fetchDirectory
|
||||||
DIRECTORY_FETCH_FAIL,
|
|
||||||
DIRECTORY_EXPAND_REQUEST,
|
|
||||||
DIRECTORY_EXPAND_SUCCESS,
|
|
||||||
DIRECTORY_EXPAND_FAIL,
|
|
||||||
} from 'mastodon/actions/directory';
|
} from 'mastodon/actions/directory';
|
||||||
import {
|
import {
|
||||||
FEATURED_TAGS_FETCH_REQUEST,
|
FEATURED_TAGS_FETCH_REQUEST,
|
||||||
|
|
@ -117,6 +113,7 @@ const normalizeFeaturedTags = (state, path, featuredTags, accountId) => {
|
||||||
}));
|
}));
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/** @type {import('@reduxjs/toolkit').Reducer<typeof initialState>} */
|
||||||
export default function userLists(state = initialState, action) {
|
export default function userLists(state = initialState, action) {
|
||||||
switch(action.type) {
|
switch(action.type) {
|
||||||
case FOLLOWERS_FETCH_SUCCESS:
|
case FOLLOWERS_FETCH_SUCCESS:
|
||||||
|
|
@ -194,16 +191,6 @@ export default function userLists(state = initialState, action) {
|
||||||
case MUTES_FETCH_FAIL:
|
case MUTES_FETCH_FAIL:
|
||||||
case MUTES_EXPAND_FAIL:
|
case MUTES_EXPAND_FAIL:
|
||||||
return state.setIn(['mutes', 'isLoading'], false);
|
return state.setIn(['mutes', 'isLoading'], false);
|
||||||
case DIRECTORY_FETCH_SUCCESS:
|
|
||||||
return normalizeList(state, ['directory'], action.accounts, action.next);
|
|
||||||
case DIRECTORY_EXPAND_SUCCESS:
|
|
||||||
return appendToList(state, ['directory'], action.accounts, action.next);
|
|
||||||
case DIRECTORY_FETCH_REQUEST:
|
|
||||||
case DIRECTORY_EXPAND_REQUEST:
|
|
||||||
return state.setIn(['directory', 'isLoading'], true);
|
|
||||||
case DIRECTORY_FETCH_FAIL:
|
|
||||||
case DIRECTORY_EXPAND_FAIL:
|
|
||||||
return state.setIn(['directory', 'isLoading'], false);
|
|
||||||
case FEATURED_TAGS_FETCH_SUCCESS:
|
case FEATURED_TAGS_FETCH_SUCCESS:
|
||||||
return normalizeFeaturedTags(state, ['featured_tags', action.id], action.tags, action.id);
|
return normalizeFeaturedTags(state, ['featured_tags', action.id], action.tags, action.id);
|
||||||
case FEATURED_TAGS_FETCH_REQUEST:
|
case FEATURED_TAGS_FETCH_REQUEST:
|
||||||
|
|
@ -211,6 +198,17 @@ export default function userLists(state = initialState, action) {
|
||||||
case FEATURED_TAGS_FETCH_FAIL:
|
case FEATURED_TAGS_FETCH_FAIL:
|
||||||
return state.setIn(['featured_tags', action.id, 'isLoading'], false);
|
return state.setIn(['featured_tags', action.id, 'isLoading'], false);
|
||||||
default:
|
default:
|
||||||
|
if(fetchDirectory.fulfilled.match(action))
|
||||||
|
return normalizeList(state, ['directory'], action.payload.accounts, undefined);
|
||||||
|
else if( expandDirectory.fulfilled.match(action))
|
||||||
|
return appendToList(state, ['directory'], action.payload.accounts, undefined);
|
||||||
|
else if(fetchDirectory.pending.match(action) ||
|
||||||
|
expandDirectory.pending.match(action))
|
||||||
|
return state.setIn(['directory', 'isLoading'], true);
|
||||||
|
else if(fetchDirectory.rejected.match(action) ||
|
||||||
|
expandDirectory.rejected.match(action))
|
||||||
|
return state.setIn(['directory', 'isLoading'], false);
|
||||||
|
else
|
||||||
return state;
|
return state;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -59,6 +59,8 @@ $emojis-requiring-inversion: 'chains';
|
||||||
body {
|
body {
|
||||||
--dropdown-border-color: #d9e1e8;
|
--dropdown-border-color: #d9e1e8;
|
||||||
--dropdown-background-color: #fff;
|
--dropdown-background-color: #fff;
|
||||||
|
--modal-border-color: #d9e1e8;
|
||||||
|
--modal-background-color: var(--background-color-tint);
|
||||||
--background-border-color: #d9e1e8;
|
--background-border-color: #d9e1e8;
|
||||||
--background-color: #fff;
|
--background-color: #fff;
|
||||||
--background-color-tint: rgba(255, 255, 255, 80%);
|
--background-color-tint: rgba(255, 255, 255, 80%);
|
||||||
|
|
|
||||||
|
|
@ -120,8 +120,27 @@
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:disabled {
|
&.button--destructive {
|
||||||
opacity: 0.5;
|
&:active,
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
border-color: $ui-button-destructive-focus-background-color;
|
||||||
|
color: $ui-button-destructive-focus-background-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled,
|
||||||
|
&.disabled {
|
||||||
|
opacity: 0.7;
|
||||||
|
border-color: $ui-primary-color;
|
||||||
|
color: $ui-primary-color;
|
||||||
|
|
||||||
|
&:active,
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
border-color: $ui-primary-color;
|
||||||
|
color: $ui-primary-color;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2420,7 +2439,7 @@ a.account__display-name {
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-animation {
|
.dropdown-animation {
|
||||||
animation: dropdown 150ms cubic-bezier(0.1, 0.7, 0.1, 1);
|
animation: dropdown 250ms cubic-bezier(0.1, 0.7, 0.1, 1);
|
||||||
|
|
||||||
@keyframes dropdown {
|
@keyframes dropdown {
|
||||||
from {
|
from {
|
||||||
|
|
@ -10325,3 +10344,156 @@ noscript {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hover-card-controller[data-popper-reference-hidden='true'] {
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover-card {
|
||||||
|
box-shadow: var(--dropdown-shadow);
|
||||||
|
background: var(--modal-background-color);
|
||||||
|
backdrop-filter: var(--background-filter);
|
||||||
|
border: 1px solid var(--modal-border-color);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 16px;
|
||||||
|
width: 270px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
|
||||||
|
&--loading {
|
||||||
|
position: relative;
|
||||||
|
min-height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__name {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__number {
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 22px;
|
||||||
|
color: $secondary-text-color;
|
||||||
|
|
||||||
|
strong {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text-row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__bio {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 20px;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
max-height: 2 * 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: underline;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.display-name {
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 22px;
|
||||||
|
|
||||||
|
bdi {
|
||||||
|
font-weight: 500;
|
||||||
|
color: $primary-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__account {
|
||||||
|
display: block;
|
||||||
|
color: $dark-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-fields {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 20px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:focus,
|
||||||
|
&:hover,
|
||||||
|
&:active {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
dl {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
|
||||||
|
dt {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
color: $dark-text-color;
|
||||||
|
min-width: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
dd {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
font-weight: 500;
|
||||||
|
min-width: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.verified {
|
||||||
|
dd {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
color: $valid-value-color;
|
||||||
|
|
||||||
|
& > span {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user