mirror/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon synced 2024-11-27 14:28:24 +09:00
Code

Change design of request notifications

Browse Source
This commit is contained in:
Claire 2024-07-29 19:01:29 +02:00
parent 4eab6aef95
commit f4f7caf38a
2 changed files with 23 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
app/javascript/mastodon/features/notifications/components/notification_request.jsx
View File

@ -1,31 +1,26 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { useCallback } from 'react'; import { useCallback } from 'react';
import { defineMessages, useIntl } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux'; import { useSelector, useDispatch } from 'react-redux';
import ChevronRightIcon from '@/material-icons/400-24px/chevron_right.svg?react';
import DeleteIcon from '@/material-icons/400-24px/delete.svg?react'; import DeleteIcon from '@/material-icons/400-24px/delete.svg?react';
import DoneIcon from '@/material-icons/400-24px/done.svg?react'; import DoneIcon from '@/material-icons/400-24px/done.svg?react';
import { acceptNotificationRequest, dismissNotificationRequest } from 'mastodon/actions/notifications'; import { acceptNotificationRequest, dismissNotificationRequest } from 'mastodon/actions/notifications';
import { Avatar } from 'mastodon/components/avatar'; import { Avatar } from 'mastodon/components/avatar';
import { IconButton } from 'mastodon/components/icon_button'; import { Icon } from 'mastodon/components/icon';
import { makeGetAccount } from 'mastodon/selectors'; import { makeGetAccount } from 'mastodon/selectors';
import { toCappedNumber } from 'mastodon/utils/numbers'; import { toCappedNumber } from 'mastodon/utils/numbers';
const getAccount = makeGetAccount(); const getAccount = makeGetAccount();
const messages = defineMessages({
accept: { id: 'notification_requests.accept', defaultMessage: 'Accept' },
dismiss: { id: 'notification_requests.dismiss', defaultMessage: 'Dismiss' },
});
export const NotificationRequest = ({ id, accountId, notificationsCount }) => { export const NotificationRequest = ({ id, accountId, notificationsCount }) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const account = useSelector(state => getAccount(state, accountId)); const account = useSelector(state => getAccount(state, accountId));
const intl = useIntl();
const handleDismiss = useCallback(() => { const handleDismiss = useCallback(() => {
dispatch(dismissNotificationRequest(id)); dispatch(dismissNotificationRequest(id));
@ -48,11 +43,19 @@ export const NotificationRequest = ({ id, accountId, notificationsCount }) => {
<span>@{account?.get('acct')}</span> <span>@{account?.get('acct')}</span>
</div> </div>
<Icon id='chevron-right' icon={ChevronRightIcon} className='notification-request__disclosure-indicator' />
</Link> </Link>
<div className='notification-request__actions'> <div className='notification-request__actions'>
<IconButton iconComponent={DeleteIcon} onClick={handleDismiss} title={intl.formatMessage(messages.dismiss)} /> <button type='button' className='button button-tertiary button--destructive' onClick={handleDismiss}>
<IconButton iconComponent={DoneIcon} onClick={handleAccept} title={intl.formatMessage(messages.accept)} /> <Icon id='times' icon={DeleteIcon} />
<FormattedMessage id='notification_requests.dismiss' defaultMessage='Dismiss' />
</button>
<button type='button' className='button button-tertiary' onClick={handleAccept}>
<Icon id='check' icon={DoneIcon} />
<FormattedMessage id='notification_requests.accept' defaultMessage='Accept' />
</button>
</div> </div>
</div> </div>
); );

15
app/javascript/styles/mastodon/components.scss
View File

@ -10195,6 +10195,7 @@ noscript {
.notification-request { .notification-request {
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
gap: 16px; gap: 16px;
padding: 15px; padding: 15px;
@ -10208,6 +10209,7 @@ noscript {
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
overflow: hidden; overflow: hidden;
width: 100%;
.account__avatar { .account__avatar {
flex-shrink: 0; flex-shrink: 0;
@ -10234,21 +10236,24 @@ noscript {
.filtered-notifications-banner__badge { .filtered-notifications-banner__badge {
background: $ui-button-background-color; background: $ui-button-background-color;
border-radius: 4px; border-radius: 8px;
padding: 1px 6px; padding: 1px 6px;
color: $white; color: $white;
} }
} }
&__disclosure-indicator {
color: $darker-text-color;
}
&__actions { &__actions {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
width: 100%;
.icon-button { .button {
border-radius: 4px; flex-grow: 1;
border: 1px solid var(--background-border-color);
padding: 5px;
} }
} }
} }