Added buttons and menu items to dismiss individual notifications (#76)

* Added DELETE verb for notifications

* Added notification dismiss button to status dropdown

* Added reveal-on-hover notif dismiss button, added FollowNotification component
This commit is contained in:
Ondřej Hruška 2017-07-14 17:03:43 +02:00 committed by beatrix
parent 6ce806f913
commit 75aafc932e
13 changed files with 192 additions and 23 deletions

View file

@ -24,6 +24,10 @@ class Api::V1::NotificationsController < Api::BaseController
render_empty
end
def destroy
dismiss
end
def dismiss
current_account.notifications.find_by!(id: params[:id]).destroy!
render_empty

View file

@ -6,6 +6,7 @@ import { makeGetNotification } from '../../../mastodon/selectors';
// Our imports //
import Notification from '.';
import { deleteNotification } from '../../../mastodon/actions/notifications';
const makeMapStateToProps = () => {
const getNotification = makeGetNotification();
@ -18,4 +19,10 @@ const makeMapStateToProps = () => {
return mapStateToProps;
};
export default connect(makeMapStateToProps)(Notification);
const mapDispatchToProps = (dispatch) => ({
onDeleteNotification (id) {
dispatch(deleteNotification(id));
},
});
export default connect(makeMapStateToProps, mapDispatchToProps)(Notification);

View file

@ -0,0 +1,78 @@
// Package imports //
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
import escapeTextContentForBrowser from 'escape-html';
import ImmutablePureComponent from 'react-immutable-pure-component';
// Mastodon imports //
import emojify from '../../../mastodon/emoji';
import Permalink from '../../../mastodon/components/permalink';
import AccountContainer from '../../../mastodon/containers/account_container';
const messages = defineMessages({
deleteNotification: { id: 'status.dismiss_notification', defaultMessage: 'Dismiss notification' },
});
@injectIntl
export default class FollowNotification extends ImmutablePureComponent {
static contextTypes = {
router: PropTypes.object,
};
static propTypes = {
notificationId: PropTypes.number.isRequired,
onDeleteNotification: PropTypes.func.isRequired,
account: ImmutablePropTypes.map.isRequired,
intl: PropTypes.object.isRequired,
};
// Avoid checking props that are functions (and whose equality will always
// evaluate to false. See react-immutable-pure-component for usage.
updateOnProps = [
'account',
]
handleNotificationDeleteClick = () => {
this.props.onDeleteNotification(this.props.notificationId);
}
render () {
const { account, intl } = this.props;
const dismissTitle = intl.formatMessage(messages.deleteNotification);
const dismiss = (
<button
aria-label={dismissTitle}
title={dismissTitle}
onClick={this.handleNotificationDeleteClick}
className='status__prepend-dismiss-button'
>
<i className='fa fa-eraser' />
</button>
);
const displayName = account.get('display_name').length > 0 ? account.get('display_name') : account.get('username');
const displayNameHTML = { __html: emojify(escapeTextContentForBrowser(displayName)) };
const link = <Permalink className='notification__display-name' href={account.get('url')} title={account.get('acct')} to={`/accounts/${account.get('id')}`} dangerouslySetInnerHTML={displayNameHTML} />;
return (
<div className='notification notification-follow'>
<div className='notification__message'>
<div className='notification__favourite-icon-wrapper'>
<i className='fa fa-fw fa-user-plus' />
</div>
<FormattedMessage id='notification.follow' defaultMessage='{name} followed you' values={{ name: link }} />
{dismiss}
</div>
<AccountContainer id={account.get('id')} withNote={false} />
</div>
);
}
}

View file

@ -1,42 +1,30 @@
// Package imports //
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { FormattedMessage } from 'react-intl';
import escapeTextContentForBrowser from 'escape-html';
import ImmutablePureComponent from 'react-immutable-pure-component';
import PropTypes from 'prop-types';
// Mastodon imports //
import AccountContainer from '../../../mastodon/containers/account_container';
import Permalink from '../../../mastodon/components/permalink';
import emojify from '../../../mastodon/emoji';
// Our imports //
import StatusContainer from '../status/container';
import FollowNotification from './follow_notification';
export default class Notification extends ImmutablePureComponent {
static propTypes = {
notification: ImmutablePropTypes.map.isRequired,
settings: ImmutablePropTypes.map.isRequired,
onDeleteNotification: PropTypes.func.isRequired,
};
renderFollow (notification) {
const account = notification.get('account');
const displayName = account.get('display_name').length > 0 ? account.get('display_name') : account.get('username');
const displayNameHTML = { __html: emojify(escapeTextContentForBrowser(displayName)) };
const link = <Permalink className='notification__display-name' href={account.get('url')} title={account.get('acct')} to={`/accounts/${account.get('id')}`} dangerouslySetInnerHTML={displayNameHTML} />;
return (
<div className='notification notification-follow'>
<div className='notification__message'>
<div className='notification__favourite-icon-wrapper'>
<i className='fa fa-fw fa-user-plus' />
</div>
<FormattedMessage id='notification.follow' defaultMessage='{name} followed you' values={{ name: link }} />
</div>
<AccountContainer id={account.get('id')} withNote={false} />
</div>
<FollowNotification
notificationId={notification.get('id')}
account={notification.get('account')}
onDeleteNotification={this.props.onDeleteNotification}
/>
);
}
@ -44,6 +32,7 @@ export default class Notification extends ImmutablePureComponent {
return (
<StatusContainer
id={notification.get('status')}
notificationId={notification.get('id')}
withDismiss
/>
);
@ -56,6 +45,7 @@ export default class Notification extends ImmutablePureComponent {
account={notification.get('account')}
prepend='favourite'
muted
notificationId={notification.get('id')}
withDismiss
/>
);
@ -68,6 +58,7 @@ export default class Notification extends ImmutablePureComponent {
account={notification.get('account')}
prepend='reblog'
muted
notificationId={notification.get('id')}
withDismiss
/>
);

View file

@ -24,6 +24,7 @@ const messages = defineMessages({
report: { id: 'status.report', defaultMessage: 'Report @{name}' },
muteConversation: { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' },
unmuteConversation: { id: 'status.unmute_conversation', defaultMessage: 'Unmute conversation' },
deleteNotification: { id: 'status.dismiss_notification', defaultMessage: 'Dismiss notification' },
});
@injectIntl
@ -35,6 +36,7 @@ export default class StatusActionBar extends ImmutablePureComponent {
static propTypes = {
status: ImmutablePropTypes.map.isRequired,
notificationId: PropTypes.number,
onReply: PropTypes.func,
onFavourite: PropTypes.func,
onReblog: PropTypes.func,
@ -44,6 +46,7 @@ export default class StatusActionBar extends ImmutablePureComponent {
onBlock: PropTypes.func,
onReport: PropTypes.func,
onMuteConversation: PropTypes.func,
onDeleteNotification: PropTypes.func,
me: PropTypes.number.isRequired,
withDismiss: PropTypes.bool,
intl: PropTypes.object.isRequired,
@ -97,6 +100,10 @@ export default class StatusActionBar extends ImmutablePureComponent {
this.props.onMuteConversation(this.props.status);
}
handleNotificationDeleteClick = () => {
this.props.onDeleteNotification(this.props.notificationId);
}
render () {
const { status, me, intl, withDismiss } = this.props;
const reblogDisabled = status.get('visibility') === 'private' || status.get('visibility') === 'direct';
@ -112,6 +119,7 @@ export default class StatusActionBar extends ImmutablePureComponent {
if (withDismiss) {
menu.push({ text: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation), action: this.handleConversationMuteClick });
menu.push({ text: intl.formatMessage(messages.deleteNotification), action: this.handleNotificationDeleteClick });
menu.push(null);
}

View file

@ -50,6 +50,7 @@ import {
} from '../../../mastodon/actions/statuses';
import { initReport } from '../../../mastodon/actions/reports';
import { openModal } from '../../../mastodon/actions/modal';
import { deleteNotification } from '../../../mastodon/actions/notifications';
// Our imports //
import Status from '.';
@ -245,6 +246,9 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
}
},
onDeleteNotification (id) {
dispatch(deleteNotification(id));
},
});
export default injectIntl(

View file

@ -170,6 +170,7 @@ export default class Status extends ImmutablePureComponent {
onReport : PropTypes.func,
onOpenMedia : PropTypes.func,
onOpenVideo : PropTypes.func,
onDeleteNotification : PropTypes.func,
reblogModal : PropTypes.bool,
deleteModal : PropTypes.bool,
autoPlayGif : PropTypes.bool,
@ -177,6 +178,7 @@ export default class Status extends ImmutablePureComponent {
collapse : PropTypes.bool,
prepend : PropTypes.string,
withDismiss : PropTypes.bool,
notificationId : PropTypes.number,
intersectionObserverWrapper : PropTypes.object,
};
@ -685,6 +687,8 @@ collapsed.
type={prepend}
account={account}
parseClick={parseClick}
notificationId={this.props.notificationId}
onDeleteNotification={this.props.onDeleteNotification}
/>
) : null}
<StatusHeader

View file

@ -23,11 +23,17 @@ import React from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import escapeTextContentForBrowser from 'escape-html';
import { defineMessages, injectIntl } from 'react-intl';
import { FormattedMessage } from 'react-intl';
// Mastodon imports //
import emojify from '../../../mastodon/emoji';
const messages = defineMessages({
deleteNotification: { id: 'status.dismiss_notification', defaultMessage: 'Dismiss notification' },
});
/* * * * */
/*
@ -53,12 +59,16 @@ element.
*/
@injectIntl
export default class StatusPrepend extends React.PureComponent {
static propTypes = {
type: PropTypes.string.isRequired,
account: ImmutablePropTypes.map.isRequired,
parseClick: PropTypes.func.isRequired,
notificationId: PropTypes.number,
onDeleteNotification: PropTypes.func,
intl: PropTypes.object.isRequired,
};
/*
@ -77,6 +87,10 @@ an account link is clicked.
parseClick(e, `/accounts/${+account.get('id')}`);
}
handleNotificationDeleteClick = () => {
this.props.onDeleteNotification(this.props.notificationId);
}
/*
#### `<Message>`.
@ -145,7 +159,19 @@ the `<Message>` inside of an <aside>.
render () {
const { Message } = this;
const { type } = this.props;
const { type, intl } = this.props;
const dismissTitle = intl.formatMessage(messages.deleteNotification);
const dismiss = this.props.notificationId ? (
<button
aria-label={dismissTitle}
title={dismissTitle}
onClick={this.handleNotificationDeleteClick}
className='status__prepend-dismiss-button'
>
<i className='fa fa-eraser' />
</button>
) : null;
return !type ? null : (
<aside className={type === 'reblogged_by' ? 'status__prepend' : 'notification__message'}>
@ -157,6 +183,7 @@ the `<Message>` inside of an <aside>.
/>
</div>
<Message />
{dismiss}
</aside>
);
}

View file

@ -6,6 +6,8 @@ import { defineMessages } from 'react-intl';
export const NOTIFICATIONS_UPDATE = 'NOTIFICATIONS_UPDATE';
export const NOTIFICATION_DELETE_SUCCESS = 'NOTIFICATION_DELETE_SUCCESS';
export const NOTIFICATIONS_REFRESH_REQUEST = 'NOTIFICATIONS_REFRESH_REQUEST';
export const NOTIFICATIONS_REFRESH_SUCCESS = 'NOTIFICATIONS_REFRESH_SUCCESS';
export const NOTIFICATIONS_REFRESH_FAIL = 'NOTIFICATIONS_REFRESH_FAIL';
@ -187,3 +189,18 @@ export function scrollTopNotifications(top) {
top,
};
};
export function deleteNotification(id) {
return (dispatch, getState) => {
api(getState).delete(`/api/v1/notifications/${id}`).then(() => {
dispatch(deleteNotificationSuccess(id));
});
};
};
export function deleteNotificationSuccess(id) {
return {
type: NOTIFICATION_DELETE_SUCCESS,
id: id,
};
};

View file

@ -190,6 +190,7 @@
"status.show_more": "Show more",
"status.uncollapse": "Uncollapse",
"status.unmute_conversation": "Unmute conversation",
"status.dismiss_notification": "Dismiss notification",
"tabs_bar.compose": "Compose",
"tabs_bar.federated_timeline": "Federated",
"tabs_bar.home": "Home",

View file

@ -8,6 +8,7 @@ import {
NOTIFICATIONS_EXPAND_FAIL,
NOTIFICATIONS_CLEAR,
NOTIFICATIONS_SCROLL_TOP,
NOTIFICATION_DELETE_SUCCESS,
} from '../actions/notifications';
import { ACCOUNT_BLOCK_SUCCESS } from '../actions/accounts';
import { TIMELINE_DELETE } from '../actions/timelines';
@ -92,6 +93,10 @@ const deleteByStatus = (state, statusId) => {
return state.update('items', list => list.filterNot(item => item.get('status') === statusId));
};
const deleteById = (state, notificationId) => {
return state.update('items', list => list.filterNot(item => item.get('id') === notificationId));
};
export default function notifications(state = initialState, action) {
switch(action.type) {
case NOTIFICATIONS_REFRESH_REQUEST:
@ -113,6 +118,8 @@ export default function notifications(state = initialState, action) {
return state.set('items', ImmutableList()).set('next', null);
case TIMELINE_DELETE:
return deleteByStatus(state, action.id);
case NOTIFICATION_DELETE_SUCCESS:
return deleteById(state, action.id);
default:
return state;
}

View file

@ -617,6 +617,27 @@
position: absolute;
}
.status__prepend-dismiss-button {
border: 0;
background: transparent;
position: absolute;
right: -3px;
opacity: 0;
transition: opacity 0.1s ease-in-out;
i.fa {
color: crimson;
}
.notification__message:hover & {
opacity: 1;
}
.notification-follow & {
right: 6px;
}
}
.status {
padding: 8px 10px;
padding-left: 68px;

View file

@ -175,7 +175,7 @@ Rails.application.routes.draw do
end
end
resources :notifications, only: [:index, :show] do
resources :notifications, only: [:index, :show, :destroy] do
collection do
post :clear
post :dismiss