gitea/nas
1
0
Fork 2
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Merge remote-tracking branch 'parent/main' into kb-upstream-20231026

Browse source
This commit is contained in:
KMY 2023-10-26 20:24:34 +09:00
commit 5448bcf276
313 changed files with 3717 additions and 4735 deletions
Download patch file Download diff file Expand all files Collapse all files

4
app/javascript/mastodon/features/ui/components/actions_modal.jsx
View file

@ -20,12 +20,12 @@ export default class ActionsModal extends ImmutablePureComponent {
return <li key={`sep-${i}`} className='dropdown-menu__separator' />;
}
const { icon = null, text, meta = null, active = false, href = '#' } = action;
const { icon = null, iconComponent = null, text, meta = null, active = false, href = '#' } = action;
return (
<li key={`${text}-${i}`}>
<a href={href} target='_blank' rel='noopener noreferrer' onClick={this.props.onClick} data-index={i} className={classNames({ active })}>
{icon && <IconButton title={text} icon={icon} role='presentation' tabIndex={-1} inverted />}
{icon && <IconButton title={text} icon={icon} iconComponent={iconComponent} role='presentation' tabIndex={-1} inverted />}
<div>
<div className={classNames({ 'actions-modal__item-label': !!meta })}>{text}</div>
<div>{meta}</div>

34
app/javascript/mastodon/features/ui/components/boost_modal.jsx
View file

@ -9,9 +9,12 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { connect } from 'react-redux';
import { ReactComponent as RepeatIcon } from '@material-symbols/svg-600/outlined/repeat.svg';
import { changeBoostPrivacy } from 'mastodon/actions/boosts';
import AttachmentList from 'mastodon/components/attachment_list';
import { Icon } from 'mastodon/components/icon';
import { VisibilityIcon } from 'mastodon/components/visibility_icon';
import PrivacyDropdown from 'mastodon/features/compose/components/privacy_dropdown';
import { WithRouterPropTypes } from 'mastodon/utils/react_router';
@ -24,16 +27,6 @@ import StatusContent from '../../../components/status_content';
const messages = defineMessages({
cancel_reblog: { id: 'status.cancel_reblog_private', defaultMessage: 'Unboost' },
reblog: { id: 'status.reblog', defaultMessage: 'Boost' },
public_short: { id: 'privacy.public.short', defaultMessage: 'Public' },
unlisted_short: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
public_unlisted_short: { id: 'privacy.public_unlisted.short', defaultMessage: 'Public unlisted' },
login_short: { id: 'privacy.login.short', defaultMessage: 'Login only' },
private_short: { id: 'privacy.private.short', defaultMessage: 'Followers only' },
limited_short: { id: 'privacy.limited.short', defaultMessage: 'Limited menbers only' },
mutual_short: { id: 'privacy.mutual.short', defaultMessage: 'Mutual followers only' },
circle_short: { id: 'privacy.circle.short', defaultMessage: 'Circle members only' },
personal_short: { id: 'privacy.personal.short', defaultMessage: 'Yourself only' },
direct_short: { id: 'privacy.direct.short', defaultMessage: 'Mentioned people only' },
});
const mapStateToProps = state => {
@ -82,28 +75,13 @@ class BoostModal extends ImmutablePureComponent {
const { status, privacy, intl } = this.props;
const buttonText = status.get('reblogged') ? messages.cancel_reblog : messages.reblog;
const visibilityIconInfo = {
'public': { icon: 'globe', text: intl.formatMessage(messages.public_short) },
'unlisted': { icon: 'unlock', text: intl.formatMessage(messages.unlisted_short) },
'public_unlisted': { icon: 'cloud', text: intl.formatMessage(messages.public_unlisted_short) },
'login': { icon: 'key', text: intl.formatMessage(messages.login_short) },
'private': { icon: 'lock', text: intl.formatMessage(messages.private_short) },
'limited': { icon: 'get-pocket', text: intl.formatMessage(messages.limited_short) },
'mutual': { icon: 'exchange', text: intl.formatMessage(messages.mutual_short) },
'circle': { icon: 'user-circle', text: intl.formatMessage(messages.circle_short) },
'personal': { icon: 'sticky-note-o', text: intl.formatMessage(messages.personal_short) },
'direct': { icon: 'at', text: intl.formatMessage(messages.direct_short) },
};
const visibilityIcon = visibilityIconInfo[status.get('limited_scope') || status.get('visibility_ex')];
return (
<div className='modal-root__modal boost-modal'>
<div className='boost-modal__container'>
<div className={classNames('status', `status-${status.get('visibility_ex')}`, 'light')}>
<div className='status__info'>
<a href={`/@${status.getIn(['account', 'acct'])}/${status.get('id')}`} className='status__relative-time' target='_blank' rel='noopener noreferrer'>
<span className='status__visibility-icon'><Icon id={visibilityIcon.icon} title={visibilityIcon.text} /></span>
<span className='status__visibility-icon'><VisibilityIcon visibility={status.get('limited_scope') || status.get('visibility_ex')} /></span>
<RelativeTimestamp timestamp={status.get('created_at')} />
</a>
@ -128,8 +106,8 @@ class BoostModal extends ImmutablePureComponent {
</div>
<div className='boost-modal__action-bar'>
<div><FormattedMessage id='boost_modal.combo' defaultMessage='You can press {combo} to skip this next time' values={{ combo: <span>Shift + <Icon id='retweet' /></span> }} /></div>
{status.get('visibility_ex') !== 'private' && !status.get('reblogged') && (
<div><FormattedMessage id='boost_modal.combo' defaultMessage='You can press {combo} to skip this next time' values={{ combo: <span>Shift + <Icon id='retweet' icon={RepeatIcon} /></span> }} /></div>
{status.get('visibility') !== 'private' && !status.get('reblogged') && (
<PrivacyDropdown
noDirect
value={privacy}

4
app/javascript/mastodon/features/ui/components/bundle_modal_error.jsx
View file

@ -3,6 +3,8 @@ import { PureComponent } from 'react';
import { defineMessages, injectIntl } from 'react-intl';
import { ReactComponent as RefreshIcon } from '@material-symbols/svg-600/outlined/refresh.svg';
import { IconButton } from '../../../components/icon_button';
const messages = defineMessages({
@ -31,7 +33,7 @@ class BundleModalError extends PureComponent {
return (
<div className='modal-root__modal error-modal'>
<div className='error-modal__body'>
<IconButton title={formatMessage(messages.retry)} icon='refresh' onClick={this.handleRetry} size={64} />
<IconButton title={formatMessage(messages.retry)} icon='refresh' iconComponent={RefreshIcon} onClick={this.handleRetry} size={64} />
{formatMessage(messages.error)}
</div>

5
app/javascript/mastodon/features/ui/components/column.jsx
View file

@ -13,6 +13,7 @@ export default class Column extends PureComponent {
static propTypes = {
heading: PropTypes.string,
icon: PropTypes.string,
iconComponent: PropTypes.func,
children: PropTypes.node,
active: PropTypes.bool,
hideHeadingOnMobile: PropTypes.bool,
@ -50,13 +51,13 @@ export default class Column extends PureComponent {
};
render () {
const { heading, icon, children, active, hideHeadingOnMobile } = this.props;
const { heading, icon, iconComponent, children, active, hideHeadingOnMobile } = this.props;
const showHeading = heading && (!hideHeadingOnMobile || (hideHeadingOnMobile && !isMobile(window.innerWidth)));
const columnHeaderId = showHeading && heading.replace(/ /g, '-');
const header = showHeading && (
<ColumnHeader icon={icon} active={active} type={heading} onClick={this.handleHeaderClick} columnHeaderId={columnHeaderId} />
<ColumnHeader icon={icon} iconComponent={iconComponent} active={active} type={heading} onClick={this.handleHeaderClick} columnHeaderId={columnHeaderId} />
);
return (
<div

5
app/javascript/mastodon/features/ui/components/column_header.jsx
View file

@ -9,6 +9,7 @@ export default class ColumnHeader extends PureComponent {
static propTypes = {
icon: PropTypes.string,
iconComponent: PropTypes.func,
type: PropTypes.string,
active: PropTypes.bool,
onClick: PropTypes.func,
@ -20,11 +21,11 @@ export default class ColumnHeader extends PureComponent {
};
render () {
const { icon, type, active, columnHeaderId } = this.props;
const { icon, iconComponent, type, active, columnHeaderId } = this.props;
let iconElement = '';
if (icon) {
iconElement = <Icon id={icon} fixedWidth className='column-header__icon' />;
iconElement = <Icon id={icon} icon={iconComponent} className='column-header__icon' />;
}
return (

5
app/javascript/mastodon/features/ui/components/column_link.jsx
View file

@ -5,10 +5,10 @@ import { NavLink } from 'react-router-dom';
import { Icon } from 'mastodon/components/icon';
const ColumnLink = ({ icon, text, to, href, method, badge, transparent, children, ...other }) => {
const ColumnLink = ({ icon, iconComponent, text, to, href, method, badge, transparent, children, ...other }) => {
const className = classNames('column-link', { 'column-link--transparent': transparent });
const badgeElement = typeof badge !== 'undefined' ? <span className='column-link__badge'>{badge}</span> : null;
const iconElement = typeof icon === 'string' ? <Icon id={icon} fixedWidth className='column-link__icon' /> : icon;
const iconElement = (typeof icon === 'string' || iconComponent) ? <Icon id={icon} icon={iconComponent} className='column-link__icon' /> : icon;
const childElement = typeof children !== 'undefined' ? <p>{children}</p> : null;
if (href) {
@ -33,6 +33,7 @@ const ColumnLink = ({ icon, text, to, href, method, badge, transparent, children
ColumnLink.propTypes = {
icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
iconComponent: PropTypes.func,
text: PropTypes.string.isRequired,
to: PropTypes.string,
href: PropTypes.string,

32
app/javascript/mastodon/features/ui/components/column_loading.jsx
View file

@ -1,32 +0,0 @@
import PropTypes from 'prop-types';
import ImmutablePureComponent from 'react-immutable-pure-component';
import Column from '../../../components/column';
import ColumnHeader from '../../../components/column_header';
export default class ColumnLoading extends ImmutablePureComponent {
static propTypes = {
title: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
icon: PropTypes.string,
multiColumn: PropTypes.bool,
};
static defaultProps = {
title: '',
icon: '',
};
render() {
let { title, icon, multiColumn } = this.props;
return (
<Column>
<ColumnHeader icon={icon} title={title} multiColumn={multiColumn} focusable={false} placeholder />
<div className='scrollable' />
</Column>
);
}
}

13
app/javascript/mastodon/features/ui/components/column_loading.tsx Normal file
View file

@ -0,0 +1,13 @@
import Column from '../../../components/column';
import ColumnHeader from '../../../components/column_header';
interface Props {
multiColumn?: boolean;
}
export const ColumnLoading: React.FC<Props> = (otherProps) => (
<Column>
<ColumnHeader {...otherProps} />
<div className='scrollable' />
</Column>
);

2
app/javascript/mastodon/features/ui/components/columns_area.jsx
View file

@ -28,7 +28,7 @@ import {
} from '../util/async-components';
import BundleColumnError from './bundle_column_error';
import ColumnLoading from './column_loading';
import { ColumnLoading } from './column_loading';
import ComposePanel from './compose_panel';
import DrawerLoading from './drawer_loading';
import NavigationPanel from './navigation_panel';

3
app/javascript/mastodon/features/ui/components/compare_history_modal.jsx
View file

@ -6,6 +6,7 @@ import { FormattedMessage } from 'react-intl';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { connect } from 'react-redux';
import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
import escapeTextContentForBrowser from 'escape-html';
import { closeModal } from 'mastodon/actions/modal';
@ -65,7 +66,7 @@ class CompareHistoryModal extends PureComponent {
return (
<div className='modal-root__modal compare-history-modal'>
<div className='report-modal__target'>
<IconButton className='report-modal__close' icon='times' onClick={onClose} size={20} />
<IconButton className='report-modal__close' icon='times' iconComponent={CloseIcon} onClick={onClose} size={20} />
{label}
</div>

4
app/javascript/mastodon/features/ui/components/embed_modal.jsx
View file

@ -4,6 +4,8 @@ import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
import api from 'mastodon/api';
import { IconButton } from 'mastodon/components/icon_button';
@ -62,7 +64,7 @@ class EmbedModal extends ImmutablePureComponent {
return (
<div className='modal-root__modal report-modal embed-modal'>
<div className='report-modal__target'>
<IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={16} />
<IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' iconComponent={CloseIcon} onClick={onClose} size={16} />
<FormattedMessage id='status.embed' defaultMessage='Embed' />
</div>

4
app/javascript/mastodon/features/ui/components/filter_modal.jsx
View file

@ -5,6 +5,8 @@ import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { connect } from 'react-redux';
import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
import { fetchFilters, createFilter, createFilterStatus } from 'mastodon/actions/filters';
import { fetchStatus } from 'mastodon/actions/statuses';
import { IconButton } from 'mastodon/components/icon_button';
@ -120,7 +122,7 @@ class FilterModal extends ImmutablePureComponent {
return (
<div className='modal-root__modal report-dialog-modal'>
<div className='report-modal__target'>
<IconButton className='report-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={20} />
<IconButton className='report-modal__close' title={intl.formatMessage(messages.close)} icon='times' iconComponent={CloseIcon} onClick={onClose} size={20} />
<FormattedMessage id='filter_modal.title.status' defaultMessage='Filter a post' />
</div>

3
app/javascript/mastodon/features/ui/components/focal_point_modal.jsx
View file

@ -9,6 +9,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { connect } from 'react-redux';
import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
import Textarea from 'react-textarea-autosize';
import { length } from 'stringz';
// eslint-disable-next-line import/extensions
@ -312,7 +313,7 @@ class FocalPointModal extends ImmutablePureComponent {
return (
<div className='modal-root__modal report-modal' style={{ maxWidth: 960 }}>
<div className='report-modal__target'>
<IconButton className='report-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={20} />
<IconButton className='report-modal__close' title={intl.formatMessage(messages.close)} icon='times' iconComponent={CloseIcon} onClick={onClose} size={20} />
<FormattedMessage id='upload_modal.edit_media' defaultMessage='Edit media' />
</div>

4
app/javascript/mastodon/features/ui/components/follow_requests_column_link.jsx
View file

@ -6,6 +6,8 @@ import { injectIntl, defineMessages } from 'react-intl';
import { List as ImmutableList } from 'immutable';
import { connect } from 'react-redux';
import { ReactComponent as PersonAddIcon } from '@material-symbols/svg-600/outlined/person_add.svg';
import { fetchFollowRequests } from 'mastodon/actions/accounts';
import { IconWithBadge } from 'mastodon/components/icon_with_badge';
import ColumnLink from 'mastodon/features/ui/components/column_link';
@ -43,7 +45,7 @@ class FollowRequestsColumnLink extends Component {
<ColumnLink
transparent
to='/follow_requests'
icon={<IconWithBadge className='column-link__icon' id='user-plus' count={count} />}
icon={<IconWithBadge className='column-link__icon' id='user-plus' icon={PersonAddIcon} count={count} />}
text={intl.formatMessage(messages.text)}
/>
);

7
app/javascript/mastodon/features/ui/components/header.jsx
View file

@ -7,6 +7,9 @@ import { Link, withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { ReactComponent as RefreshIcon } from '@material-symbols/svg-600/outlined/refresh.svg';
import { ReactComponent as SearchIcon } from '@material-symbols/svg-600/outlined/search.svg';
import { openModal } from 'mastodon/actions/modal';
import { fetchServer } from 'mastodon/actions/server';
import { Avatar } from 'mastodon/components/avatar';
@ -73,8 +76,8 @@ class Header extends PureComponent {
if (signedIn) {
content = (
<>
{<button onClick={this.handleReload} className='button button-secondary' aria-label={intl.formatMessage(messages.reload)}><Icon id='refresh' /></button>}
{location.pathname !== '/search' && <Link to='/search' className='button button-secondary' aria-label={intl.formatMessage(messages.search)}><Icon id='search' /></Link>}
{<button onClick={this.handleReload} className='button button-secondary' aria-label={intl.formatMessage(messages.reload)}><Icon id='refresh' icon={RefreshIcon} /></button>}
{location.pathname !== '/search' && <Link to='/search' className='button button-secondary' aria-label={intl.formatMessage(messages.search)}><Icon id='search' icon={SearchIcon} /></Link>}
{location.pathname !== '/publish' && <Link to='/publish' className='button button-secondary'><FormattedMessage id='compose_form.publish_form' defaultMessage='New post' /></Link>}
<Account />
</>

4
app/javascript/mastodon/features/ui/components/image_modal.jsx
View file

@ -5,6 +5,8 @@ import { defineMessages, injectIntl } from 'react-intl';
import classNames from 'classnames';
import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
import { IconButton } from 'mastodon/components/icon_button';
import ImageLoader from './image_loader';
@ -53,7 +55,7 @@ class ImageModal extends PureComponent {
</div>
<div className={navigationClassName}>
<IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={40} />
<IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' iconComponent={CloseIcon} onClick={onClose} size={40} />
</div>
</div>
);

7
app/javascript/mastodon/features/ui/components/list_panel.jsx
View file

@ -5,6 +5,9 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { ReactComponent as ListAltIcon } from '@material-symbols/svg-600/outlined/list_alt.svg';
import { ReactComponent as AntennaIcon } from '@material-symbols/svg-600/outlined/wifi.svg';
import { fetchAntennas } from 'mastodon/actions/antennas';
import { fetchLists } from 'mastodon/actions/lists';
@ -58,10 +61,10 @@ class ListPanel extends ImmutablePureComponent {
<hr />
{lists && lists.map(list => (
<ColumnLink icon='list-ul' key={list.get('id')} strict text={list.get('title')} to={`/lists/${list.get('id')}`} transparent />
<ColumnLink icon='list-ul' iconComponent={ListAltIcon} key={list.get('id')} strict text={list.get('title')} to={`/lists/${list.get('id')}`} transparent />
))}
{antennas && antennas.take(8 - (lists ? lists.size : 0)).map(antenna => (
<ColumnLink icon='wifi' key={antenna.get('id')} strict text={antenna.get('title')} to={`/antennast/${antenna.get('id')}`} transparent />
<ColumnLink icon='wifi' iconComponent={AntennaIcon} key={antenna.get('id')} strict text={antenna.get('title')} to={`/antennast/${antenna.get('id')}`} transparent />
))}
</div>
);

9
app/javascript/mastodon/features/ui/components/media_modal.jsx
View file

@ -7,6 +7,9 @@ import classNames from 'classnames';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { ReactComponent as ChevronLeftIcon } from '@material-symbols/svg-600/outlined/chevron_left.svg';
import { ReactComponent as ChevronRightIcon } from '@material-symbols/svg-600/outlined/chevron_right.svg';
import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
import ReactSwipeableViews from 'react-swipeable-views';
import { getAverageFromBlurhash } from 'mastodon/blurhash';
@ -139,8 +142,8 @@ class MediaModal extends ImmutablePureComponent {
const index = this.getIndex();
const leftNav = media.size > 1 && <button tabIndex={0} className='media-modal__nav media-modal__nav--left' onClick={this.handlePrevClick} aria-label={intl.formatMessage(messages.previous)}><Icon id='chevron-left' fixedWidth /></button>;
const rightNav = media.size > 1 && <button tabIndex={0} className='media-modal__nav media-modal__nav--right' onClick={this.handleNextClick} aria-label={intl.formatMessage(messages.next)}><Icon id='chevron-right' fixedWidth /></button>;
const leftNav = media.size > 1 && <button tabIndex={0} className='media-modal__nav media-modal__nav--left' onClick={this.handlePrevClick} aria-label={intl.formatMessage(messages.previous)}><Icon id='chevron-left' icon={ChevronLeftIcon} /></button>;
const rightNav = media.size > 1 && <button tabIndex={0} className='media-modal__nav media-modal__nav--right' onClick={this.handleNextClick} aria-label={intl.formatMessage(messages.next)}><Icon id='chevron-right' icon={ChevronRightIcon} /></button>;
const content = media.map((image) => {
const width = image.getIn(['meta', 'original', 'width']) || null;
@ -243,7 +246,7 @@ class MediaModal extends ImmutablePureComponent {
</div>
<div className={navigationClassName}>
<IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={40} />
<IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' iconComponent={CloseIcon} onClick={onClose} size={40} />
{leftNav}
{rightNav}

44
app/javascript/mastodon/features/ui/components/navigation_panel.jsx
View file

@ -5,6 +5,20 @@ import { defineMessages, injectIntl } from 'react-intl';
import { Link } from 'react-router-dom';
import { ReactComponent as CircleIcon } from '@material-symbols/svg-600/outlined/account_circle.svg';
import { ReactComponent as AlternateEmailIcon } from '@material-symbols/svg-600/outlined/alternate_email.svg';
import { ReactComponent as BookmarksIcon } from '@material-symbols/svg-600/outlined/bookmarks-fill.svg';
import { ReactComponent as PeopleIcon } from '@material-symbols/svg-600/outlined/group.svg';
import { ReactComponent as HomeIcon } from '@material-symbols/svg-600/outlined/home-fill.svg';
import { ReactComponent as ListAltIcon } from '@material-symbols/svg-600/outlined/list_alt.svg';
import { ReactComponent as MoreHorizIcon } from '@material-symbols/svg-600/outlined/more_horiz.svg';
import { ReactComponent as PublicIcon } from '@material-symbols/svg-600/outlined/public.svg';
import { ReactComponent as SearchIcon } from '@material-symbols/svg-600/outlined/search.svg';
import { ReactComponent as SettingsIcon } from '@material-symbols/svg-600/outlined/settings-fill.svg';
import { ReactComponent as StarIcon } from '@material-symbols/svg-600/outlined/star-fill.svg';
import { ReactComponent as TagIcon } from '@material-symbols/svg-600/outlined/tag.svg';
import { ReactComponent as AntennaIcon } from '@material-symbols/svg-600/outlined/wifi.svg';
import { WordmarkLogo } from 'mastodon/components/logo';
import { NavigationPortal } from 'mastodon/components/navigation_portal';
import { enableDtlMenu, timelinePreview, trendsEnabled, dtlTag } from 'mastodon/initial_state';
@ -61,9 +75,9 @@ class NavigationPanel extends Component {
const { signedIn, disabledAccountId } = this.context.identity;
const explorer = (trendsEnabled ? (
<ColumnLink transparent to='/explore' icon='hashtag' text={intl.formatMessage(messages.explore)} />
<ColumnLink transparent to='/explore' icon='hashtag' iconComponent={TagIcon} text={intl.formatMessage(messages.explore)} />
) : (
<ColumnLink transparent to='/search' icon='search' text={intl.formatMessage(messages.search)} />
<ColumnLink transparent to='/search' icon='search' iconComponent={SearchIcon} text={intl.formatMessage(messages.search)} />
));
let banner = undefined;
@ -92,24 +106,24 @@ class NavigationPanel extends Component {
{signedIn && (
<>
<ColumnLink transparent to='/home' icon='home' text={intl.formatMessage(messages.home)} />
<ColumnLink transparent to='/home' icon='home' iconComponent={HomeIcon} text={intl.formatMessage(messages.home)} />
<ColumnLink transparent to='/notifications' icon={<NotificationsCounterIcon className='column-link__icon' />} text={intl.formatMessage(messages.notifications)} />
<ColumnLink transparent to='/public/local/fixed' icon='users' text={intl.formatMessage(messages.local)} />
<ColumnLink transparent to='/public/local/fixed' icon='users' iconComponent={PeopleIcon} text={intl.formatMessage(messages.local)} />
</>
)}
{signedIn && enableDtlMenu && dtlTag && (
<ColumnLink transparent to={`/tags/${dtlTag}`} icon='users' text={intl.formatMessage(messages.deepLocal)} />
<ColumnLink transparent to={`/tags/${dtlTag}`} icon='users' iconComponent={PeopleIcon} text={intl.formatMessage(messages.deepLocal)} />
)}
{!signedIn && explorer}
{signedIn && (
<ColumnLink transparent to='/public' isActive={this.isFirehoseActive} icon='globe' text={intl.formatMessage(messages.firehose)} />
<ColumnLink transparent to='/public' isActive={this.isFirehoseActive} icon='globe' iconComponent={PublicIcon} text={intl.formatMessage(messages.firehose)} />
)}
{(!signedIn && timelinePreview) && (
<ColumnLink transparent to='/public/local' isActive={this.isFirehoseActive} icon='globe' text={intl.formatMessage(messages.firehose)} />
<ColumnLink transparent to='/public/local' isActive={this.isFirehoseActive} icon='globe' iconComponent={PublicIcon} text={intl.formatMessage(messages.firehose)} />
)}
{signedIn && (
@ -121,11 +135,11 @@ class NavigationPanel extends Component {
{signedIn && (
<>
<ColumnLink transparent to='/lists' icon='list-ul' text={intl.formatMessage(messages.lists)} />
<ColumnLink transparent to='/antennasw' icon='wifi' text={intl.formatMessage(messages.antennas)} isActive={this.isAntennasActive} />
<ColumnLink transparent to='/circles' icon='user-circle' text={intl.formatMessage(messages.circles)} />
<ColumnLink transparent to='/lists' icon='list-ul' iconComponent={ListAltIcon} text={intl.formatMessage(messages.lists)} />
<ColumnLink transparent to='/antennasw' icon='wifi' iconComponent={AntennaIcon} text={intl.formatMessage(messages.antennas)} isActive={this.isAntennasActive} />
<ColumnLink transparent to='/circles' icon='user-circle' iconComponent={CircleIcon} text={intl.formatMessage(messages.circles)} />
<FollowRequestsColumnLink />
<ColumnLink transparent to='/conversations' icon='at' text={intl.formatMessage(messages.direct)} />
<ColumnLink transparent to='/conversations' icon='at' iconComponent={AlternateEmailIcon} text={intl.formatMessage(messages.direct)} />
</>
)}
@ -133,11 +147,11 @@ class NavigationPanel extends Component {
{signedIn && (
<>
<ColumnLink transparent to='/bookmark_categories' icon='bookmark' text={intl.formatMessage(messages.bookmarks)} />
<ColumnLink transparent to='/favourites' icon='star' text={intl.formatMessage(messages.favourites)} />
<ColumnLink transparent to='/bookmark_categories' icon='bookmarks' iconComponent={BookmarksIcon} text={intl.formatMessage(messages.bookmarks)} />
<ColumnLink transparent to='/favourites' icon='star' iconComponent={StarIcon} text={intl.formatMessage(messages.favourites)} />
<hr />
<ColumnLink transparent href='/settings/preferences' icon='cog' text={intl.formatMessage(messages.preferences)} />
<ColumnLink transparent href='/settings/preferences' icon='cog' iconComponent={SettingsIcon} text={intl.formatMessage(messages.preferences)} />
</>
)}
@ -150,7 +164,7 @@ class NavigationPanel extends Component {
<div className='navigation-panel__legal'>
<hr />
<ColumnLink transparent to='/about' icon='ellipsis-h' text={intl.formatMessage(messages.about)} />
<ColumnLink transparent to='/about' icon='ellipsis-h' iconComponent={MoreHorizIcon} text={intl.formatMessage(messages.about)} />
</div>
<NavigationPortal />

4
app/javascript/mastodon/features/ui/components/notifications_counter_icon.js
View file

@ -1,10 +1,14 @@
import { connect } from 'react-redux';
import { ReactComponent as NotificationsIcon } from '@material-symbols/svg-600/outlined/notifications-fill.svg';
import { IconWithBadge } from 'mastodon/components/icon_with_badge';
const mapStateToProps = state => ({
count: state.getIn(['notifications', 'unread']),
id: 'bell',
icon: NotificationsIcon,
});
export default connect(mapStateToProps)(IconWithBadge);

4
app/javascript/mastodon/features/ui/components/report_modal.jsx
View file

@ -7,6 +7,8 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { connect } from 'react-redux';
import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
import { submitReport } from 'mastodon/actions/reports';
import { fetchServer } from 'mastodon/actions/server';
import { expandAccountTimeline } from 'mastodon/actions/timelines';
@ -209,7 +211,7 @@ class ReportModal extends ImmutablePureComponent {
return (
<div className='modal-root__modal report-dialog-modal'>
<div className='report-modal__target'>
<IconButton className='report-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={20} />
<IconButton className='report-modal__close' title={intl.formatMessage(messages.close)} icon='times' iconComponent={CloseIcon} onClick={onClose} size={20} />
<FormattedMessage id='report.target' defaultMessage='Report {target}' values={{ target: <strong>{account.get('acct')}</strong> }} />
</div>

4
app/javascript/mastodon/features/ui/components/zoomable_image.jsx
View file

@ -3,6 +3,9 @@ import { PureComponent } from 'react';
import { defineMessages, injectIntl } from 'react-intl';
import { ReactComponent as FullscreenExitIcon } from '@material-symbols/svg-600/outlined/fullscreen_exit.svg';
import { ReactComponent as RectangleIcon } from '@material-symbols/svg-600/outlined/rectangle.svg';
import { IconButton } from 'mastodon/components/icon_button';
const messages = defineMessages({
@ -418,6 +421,7 @@ class ZoomableImage extends PureComponent {
className={`media-modal__zoom-button ${zoomButtonShouldHide}`}
title={zoomButtonTitle}
icon={this.state.zoomState}
iconComponent={this.state.zoomState === 'compress' ? FullscreenExitIcon : RectangleIcon}
onClick={this.handleZoomClick}
size={40}
style={{

2
app/javascript/mastodon/features/ui/index.jsx
View file

@ -562,7 +562,7 @@ class UI extends PureComponent {
};
handleHotkeyGoToEmojiReactions = () => {
this.context.router.history.push('/emoji_reactions');
this.props.history.push('/emoji_reactions');
};
handleHotkeyGoToPinned = () => {

2
app/javascript/mastodon/features/ui/util/react_router_helpers.jsx
View file

@ -6,7 +6,7 @@ import { Switch, Route, useLocation } from 'react-router-dom';
import StackTrace from 'stacktrace-js';
import BundleColumnError from '../components/bundle_column_error';
import ColumnLoading from '../components/column_loading';
import { ColumnLoading } from '../components/column_loading';
import BundleContainer from '../containers/bundle_container';
// Small wrapper to pass multiColumn to the route components