techhub/mastodon
2
0
Fork 0
Code Activity

fix: Fix outdated icon in notifications permissions banner (#35193)

Browse Source
This commit is contained in:
diondiondion
2025-06-26 15:25:12 +02:00
committed by GitHub
parent b804ed0cba
commit 9576434d47
3 changed files with 75 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/mastodon/components/column_header.tsx
View File

@@ -18,7 +18,7 @@ import { useIdentity } from 'mastodon/identity_context';
import { useAppHistory } from './router'; import { useAppHistory } from './router';
const messages = defineMessages({ export const messages = defineMessages({
show: { id: 'column_header.show_settings', defaultMessage: 'Show settings' }, show: { id: 'column_header.show_settings', defaultMessage: 'Show settings' },
hide: { id: 'column_header.hide_settings', defaultMessage: 'Hide settings' }, hide: { id: 'column_header.hide_settings', defaultMessage: 'Hide settings' },
moveLeft: { moveLeft: {

53
app/javascript/mastodon/features/notifications/components/notifications_permission_banner.jsx
View File

@@ -1,53 +0,0 @@
import PropTypes from 'prop-types';
import { PureComponent } from 'react';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { connect } from 'react-redux';
import SettingsIcon from '@/material-icons/400-20px/settings.svg?react';
import CloseIcon from '@/material-icons/400-24px/close.svg?react';
import { requestBrowserPermission } from 'mastodon/actions/notifications';
import { changeSetting } from 'mastodon/actions/settings';
import { Button } from 'mastodon/components/button';
import { Icon } from 'mastodon/components/icon';
import { IconButton } from 'mastodon/components/icon_button';
const messages = defineMessages({
close: { id: 'lightbox.close', defaultMessage: 'Close' },
});
class NotificationsPermissionBanner extends PureComponent {
static propTypes = {
dispatch: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
};
handleClick = () => {
this.props.dispatch(requestBrowserPermission());
};
handleClose = () => {
this.props.dispatch(changeSetting(['notifications', 'dismissPermissionBanner'], true));
};
render () {
const { intl } = this.props;
return (
<div className='notifications-permission-banner'>
<div className='notifications-permission-banner__close'>
<IconButton icon='times' iconComponent={CloseIcon} onClick={this.handleClose} title={intl.formatMessage(messages.close)} />
</div>
<h2><FormattedMessage id='notifications_permission_banner.title' defaultMessage='Never miss a thing' /></h2>
<p><FormattedMessage id='notifications_permission_banner.how_to_control' defaultMessage="To receive notifications when Mastodon isn't open, enable desktop notifications. You can control precisely which types of interactions generate desktop notifications through the {icon} button above once they're enabled." values={{ icon: <Icon id='sliders' icon={SettingsIcon} /> }} /></p>
<Button onClick={this.handleClick}><FormattedMessage id='notifications_permission_banner.enable' defaultMessage='Enable desktop notifications' /></Button>
</div>
);
}
}
export default connect()(injectIntl(NotificationsPermissionBanner));

74
app/javascript/mastodon/features/notifications/components/notifications_permission_banner.tsx Normal file
View File

@@ -0,0 +1,74 @@
import { useCallback } from 'react';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import { useAppDispatch } from '@/mastodon/store';
import CloseIcon from '@/material-icons/400-24px/close.svg?react';
import UnfoldMoreIcon from '@/material-icons/400-24px/unfold_more.svg?react';
import { requestBrowserPermission } from 'mastodon/actions/notifications';
import { changeSetting } from 'mastodon/actions/settings';
import { Button } from 'mastodon/components/button';
import { messages as columnHeaderMessages } from 'mastodon/components/column_header';
import { Icon } from 'mastodon/components/icon';
import { IconButton } from 'mastodon/components/icon_button';
const messages = defineMessages({
close: { id: 'lightbox.close', defaultMessage: 'Close' },
});
const NotificationsPermissionBanner: React.FC = () => {
const intl = useIntl();
const dispatch = useAppDispatch();
const handleClick = useCallback(() => {
dispatch(requestBrowserPermission());
}, [dispatch]);
const handleClose = useCallback(() => {
dispatch(changeSetting(['notifications', 'dismissPermissionBanner'], true));
}, [dispatch]);
return (
<div className='notifications-permission-banner'>
<div className='notifications-permission-banner__close'>
<IconButton
icon='times'
iconComponent={CloseIcon}
onClick={handleClose}
title={intl.formatMessage(messages.close)}
/>
</div>
<h2>
<FormattedMessage
id='notifications_permission_banner.title'
defaultMessage='Never miss a thing'
/>
</h2>
<p>
<FormattedMessage
id='notifications_permission_banner.how_to_control'
defaultMessage="To receive notifications when Mastodon isn't open, enable desktop notifications. You can control precisely which types of interactions generate desktop notifications through the {icon} button above once they're enabled."
values={{
icon: (
<Icon
id='sliders'
icon={UnfoldMoreIcon}
aria-label={intl.formatMessage(columnHeaderMessages.show)}
/>
),
}}
/>
</p>
<Button onClick={handleClick}>
<FormattedMessage
id='notifications_permission_banner.enable'
defaultMessage='Enable desktop notifications'
/>
</Button>
</div>
);
};
// eslint-disable-next-line import/no-default-export
export default NotificationsPermissionBanner;