tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

9
app/javascript/glitch/components/notification/container.js
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);

78
app/javascript/glitch/components/notification/follow_notification.js Normal file
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>
);
}
}

31
app/javascript/glitch/components/notification/index.js
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
/>
);

8
app/javascript/glitch/components/status/action_bar.js
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);
}

4
app/javascript/glitch/components/status/container.js
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(

4
app/javascript/glitch/components/status/index.js
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

29
app/javascript/glitch/components/status/prepend.js
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>
);
}