New notification cleaning mode (#89)

This PR adds a new notification cleaning mode, super perfectly tuned for accessibility, and removes the previous notification cleaning functionality as it's now redundant.

* w.i.p. notif clearing mode

* Better CSS for selected notification and shorter text if Stretch is off

* wip for rebase ~

* all working in notif clearing mode, except the actual removal

* bulk delete route for piggo

* cleaning + refactor. endpoint gives 422 for some reason

* formatting

* use the right route

* fix broken destroy_multiple

* load more notifs after succ cleaning

* satisfy eslint

* Removed CSS for the old notif delete button

* Tabindex=0 is mandatory

In order to make it possible to tab to this element you must have tab index = 0. Removing this violates WCAG and makes it impossible to use the interface without good eyesight and a mouse. So nobody with certain mobility impairments, vision impairments, or brain injuries would be able to use this feature if you don't have tabindex=0

* Corrected aria-label

Previous label implied a different behavior from what actually happens

* aria role localization & made the overlay behave like a checkbox

* checkboxes css and better contrast

* color tuning for the notif overlay

* fanceh checkboxes etc and nice backgrounds

* SHUT UP TRAVIS
This commit is contained in:
Ondřej Hruška 2017-07-21 20:33:16 +02:00 committed by GitHub
parent 0efd7e7406
commit 604654ccb4
20 changed files with 514 additions and 157 deletions

View File

@ -33,6 +33,11 @@ class Api::V1::NotificationsController < Api::BaseController
render_empty render_empty
end end
def destroy_multiple
current_account.notifications.where(id: params[:ids]).destroy_all
render_empty
end
private private
def load_notifications def load_notifications

View File

@ -0,0 +1,56 @@
/*
`<NotificationPurgeButtonsContainer>`
=========================
This container connects `<NotificationPurgeButtons>`s to the Redux store.
*/
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
/*
Imports:
--------
*/
// Package imports //
import { connect } from 'react-redux';
// Our imports //
import NotificationPurgeButtons from './notification_purge_buttons';
import {
deleteMarkedNotifications,
enterNotificationClearingMode,
} from '../../../../mastodon/actions/notifications';
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
/*
Dispatch mapping:
-----------------
The `mapDispatchToProps()` function maps dispatches to our store to the
various props of our component. We only need to provide a dispatch for
deleting notifications.
*/
const mapDispatchToProps = dispatch => ({
onEnterCleaningMode(yes) {
dispatch(enterNotificationClearingMode(yes));
},
onDeleteMarkedNotifications() {
dispatch(deleteMarkedNotifications());
},
});
const mapStateToProps = state => ({
active: state.getIn(['notifications', 'cleaningMode']),
});
export default connect(mapStateToProps, mapDispatchToProps)(NotificationPurgeButtons);

View File

@ -0,0 +1,100 @@
/**
* Buttons widget for controlling the notification clearing mode.
* In idle state, the cleaning mode button is shown. When the mode is active,
* a Confirm and Abort buttons are shown in its place.
*/
// Package imports //
import React from 'react';
import PropTypes from 'prop-types';
import { defineMessages, injectIntl } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component';
// Mastodon imports //
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
const messages = defineMessages({
enter : { id: 'notification_purge.start', defaultMessage: 'Enter notification cleaning mode' },
accept : { id: 'notification_purge.confirm', defaultMessage: 'Dismiss selected notifications' },
abort : { id: 'notification_purge.abort', defaultMessage: 'Leave cleaning mode' },
});
@injectIntl
export default class NotificationPurgeButtons extends ImmutablePureComponent {
static propTypes = {
// Nukes all marked notifications
onDeleteMarkedNotifications : PropTypes.func.isRequired,
// Enables or disables the mode
// and also clears the marked status of all notifications
onEnterCleaningMode : PropTypes.func.isRequired,
// Active state, changed via onStateChange()
active: PropTypes.bool.isRequired,
// i18n
intl: PropTypes.object.isRequired,
};
onEnterBtnClick = () => {
this.props.onEnterCleaningMode(true);
}
onAcceptBtnClick = () => {
this.props.onDeleteMarkedNotifications();
}
onAbortBtnClick = () => {
this.props.onEnterCleaningMode(false);
}
render () {
const { intl, active } = this.props;
const msgEnter = intl.formatMessage(messages.enter);
const msgAccept = intl.formatMessage(messages.accept);
const msgAbort = intl.formatMessage(messages.abort);
let enterButton, acceptButton, abortButton;
if (active) {
acceptButton = (
<button
className='active'
aria-label={msgAccept}
title={msgAccept}
onClick={this.onAcceptBtnClick}
>
<i className='fa fa-check' />
</button>
);
abortButton = (
<button
className='active'
aria-label={msgAbort}
title={msgAbort}
onClick={this.onAbortBtnClick}
>
<i className='fa fa-times' />
</button>
);
} else {
enterButton = (
<button
aria-label={msgEnter}
title={msgEnter}
onClick={this.onEnterBtnClick}
>
<i className='fa fa-eraser' />
</button>
);
}
return (
<div className='column-header__notif-cleaning-buttons'>
{acceptButton}{abortButton}{enterButton}
</div>
);
}
}

View File

@ -24,7 +24,6 @@ import { makeGetNotification } from '../../../mastodon/selectors';
// Our imports // // Our imports //
import Notification from '.'; import Notification from '.';
import { deleteNotification } from '../../../mastodon/actions/notifications';
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
@ -53,21 +52,4 @@ const makeMapStateToProps = () => {
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
/* export default connect(makeMapStateToProps)(Notification);
Dispatch mapping:
-----------------
The `mapDispatchToProps()` function maps dispatches to our store to the
various props of our component. We only need to provide a dispatch for
deleting notifications.
*/
const mapDispatchToProps = dispatch => ({
onDeleteNotification (id) {
dispatch(deleteNotification(id));
},
});
export default connect(makeMapStateToProps, mapDispatchToProps)(Notification);

View File

@ -36,7 +36,7 @@ Imports:
import React from 'react'; import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { defineMessages, FormattedMessage, injectIntl } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import escapeTextContentForBrowser from 'escape-html'; import escapeTextContentForBrowser from 'escape-html';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
@ -45,55 +45,28 @@ import emojify from '../../../mastodon/emoji';
import Permalink from '../../../mastodon/components/permalink'; import Permalink from '../../../mastodon/components/permalink';
import AccountContainer from '../../../mastodon/containers/account_container'; import AccountContainer from '../../../mastodon/containers/account_container';
// Our imports //
import NotificationOverlayContainer from '../notification/overlay/container';
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
/* /*
Inital setup:
-------------
The `messages` constant is used to define any messages that we need
from inside props.
*/
const messages = defineMessages({
deleteNotification :
{ id: 'status.dismiss_notification', defaultMessage: 'Dismiss notification' },
});
/*
Implementation: Implementation:
--------------- ---------------
*/ */
@injectIntl
export default class NotificationFollow extends ImmutablePureComponent { export default class NotificationFollow extends ImmutablePureComponent {
static propTypes = { static propTypes = {
id : PropTypes.number.isRequired, id : PropTypes.number.isRequired,
onDeleteNotification : PropTypes.func.isRequired,
account : ImmutablePropTypes.map.isRequired, account : ImmutablePropTypes.map.isRequired,
intl : PropTypes.object.isRequired, notification : ImmutablePropTypes.map.isRequired,
}; };
/* /*
### `handleNotificationDeleteClick()`
This function just calls our `onDeleteNotification()` prop with the
notification's `id`.
*/
handleNotificationDeleteClick = () => {
this.props.onDeleteNotification(this.props.id);
}
/*
### `render()` ### `render()`
This actually renders the component. This actually renders the component.
@ -101,26 +74,7 @@ This actually renders the component.
*/ */
render () { render () {
const { account, intl } = this.props; const { account, notification } = this.props;
/*
`dismiss` creates the notification dismissal button. Its title is given
by `dismissTitle`.
*/
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>
);
/* /*
@ -149,6 +103,7 @@ We can now render our component.
return ( return (
<div className='notification notification-follow'> <div className='notification notification-follow'>
<NotificationOverlayContainer notification={notification} />
<div className='notification__message'> <div className='notification__message'>
<div className='notification__favourite-icon-wrapper'> <div className='notification__favourite-icon-wrapper'>
<i className='fa fa-fw fa-user-plus' /> <i className='fa fa-fw fa-user-plus' />
@ -159,8 +114,6 @@ We can now render our component.
defaultMessage='{name} followed you' defaultMessage='{name} followed you'
values={{ name: link }} values={{ name: link }}
/> />
{dismiss}
</div> </div>
<AccountContainer id={account.get('id')} withNote={false} /> <AccountContainer id={account.get('id')} withNote={false} />

View File

@ -2,7 +2,6 @@
import React from 'react'; import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import PropTypes from 'prop-types';
// Mastodon imports // // Mastodon imports //
@ -15,7 +14,6 @@ export default class Notification extends ImmutablePureComponent {
static propTypes = { static propTypes = {
notification: ImmutablePropTypes.map.isRequired, notification: ImmutablePropTypes.map.isRequired,
settings: ImmutablePropTypes.map.isRequired, settings: ImmutablePropTypes.map.isRequired,
onDeleteNotification: PropTypes.func.isRequired,
}; };
renderFollow (notification) { renderFollow (notification) {
@ -23,7 +21,7 @@ export default class Notification extends ImmutablePureComponent {
<NotificationFollow <NotificationFollow
id={notification.get('id')} id={notification.get('id')}
account={notification.get('account')} account={notification.get('account')}
onDeleteNotification={this.props.onDeleteNotification} notification={notification}
/> />
); );
} }
@ -32,7 +30,7 @@ export default class Notification extends ImmutablePureComponent {
return ( return (
<StatusContainer <StatusContainer
id={notification.get('status')} id={notification.get('status')}
notificationId={notification.get('id')} notification={notification}
withDismiss withDismiss
/> />
); );
@ -45,7 +43,7 @@ export default class Notification extends ImmutablePureComponent {
account={notification.get('account')} account={notification.get('account')}
prepend='favourite' prepend='favourite'
muted muted
notificationId={notification.get('id')} notification={notification}
withDismiss withDismiss
/> />
); );
@ -58,7 +56,7 @@ export default class Notification extends ImmutablePureComponent {
account={notification.get('account')} account={notification.get('account')}
prepend='reblog' prepend='reblog'
muted muted
notificationId={notification.get('id')} notification={notification}
withDismiss withDismiss
/> />
); );

View File

@ -0,0 +1,49 @@
/*
`<NotificationOverlayContainer>`
=========================
This container connects `<NotificationOverlay>`s to the Redux store.
*/
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
/*
Imports:
--------
*/
// Package imports //
import { connect } from 'react-redux';
// Our imports //
import NotificationOverlay from './notification_overlay';
import { markNotificationForDelete } from '../../../../mastodon/actions/notifications';
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
/*
Dispatch mapping:
-----------------
The `mapDispatchToProps()` function maps dispatches to our store to the
various props of our component. We only need to provide a dispatch for
deleting notifications.
*/
const mapDispatchToProps = dispatch => ({
onMarkForDelete(id, yes) {
dispatch(markNotificationForDelete(id, yes));
},
});
const mapStateToProps = state => ({
revealed: state.getIn(['notifications', 'cleaningMode']),
});
export default connect(mapStateToProps, mapDispatchToProps)(NotificationOverlay);

View File

@ -0,0 +1,59 @@
/**
* Notification overlay
*/
// Package imports //
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { defineMessages, injectIntl } from 'react-intl';
// Mastodon imports //
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
const messages = defineMessages({
markForDeletion: { id: 'notification.markForDeletion', defaultMessage: 'Mark for deletion' },
});
@injectIntl
export default class NotificationOverlay extends ImmutablePureComponent {
static propTypes = {
notification : ImmutablePropTypes.map.isRequired,
onMarkForDelete : PropTypes.func.isRequired,
revealed : PropTypes.bool.isRequired,
intl : PropTypes.object.isRequired,
};
onToggleMark = () => {
const mark = !this.props.notification.get('markedForDelete');
const id = this.props.notification.get('id');
this.props.onMarkForDelete(id, mark);
}
render () {
const { notification, revealed, intl } = this.props;
const active = notification.get('markedForDelete');
const label = intl.formatMessage(messages.markForDeletion);
return (
<div
aria-label={label}
role='checkbox'
aria-checked={active}
tabIndex={0}
className={`notification__dismiss-overlay ${active ? 'active' : ''} ${revealed ? 'show' : ''}`}
onClick={this.onToggleMark}
>
<div className='notification__dismiss-overlay__ckbox' aria-hidden='true' title={label}>
{active ? (<i className='fa fa-check' />) : ''}
</div>
</div>
);
}
}

View File

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

View File

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

View File

@ -47,6 +47,7 @@ import StatusContent from './content';
import StatusActionBar from './action_bar'; import StatusActionBar from './action_bar';
import StatusGallery from './gallery'; import StatusGallery from './gallery';
import StatusPlayer from './player'; import StatusPlayer from './player';
import NotificationOverlayContainer from '../notification/overlay/container';
/* * * * */ /* * * * */
@ -158,6 +159,7 @@ export default class Status extends ImmutablePureComponent {
status : ImmutablePropTypes.map, status : ImmutablePropTypes.map,
account : ImmutablePropTypes.map, account : ImmutablePropTypes.map,
settings : ImmutablePropTypes.map, settings : ImmutablePropTypes.map,
notification : ImmutablePropTypes.map,
me : PropTypes.number, me : PropTypes.number,
onFavourite : PropTypes.func, onFavourite : PropTypes.func,
onReblog : PropTypes.func, onReblog : PropTypes.func,
@ -170,7 +172,6 @@ export default class Status extends ImmutablePureComponent {
onReport : PropTypes.func, onReport : PropTypes.func,
onOpenMedia : PropTypes.func, onOpenMedia : PropTypes.func,
onOpenVideo : PropTypes.func, onOpenVideo : PropTypes.func,
onDeleteNotification : PropTypes.func,
reblogModal : PropTypes.bool, reblogModal : PropTypes.bool,
deleteModal : PropTypes.bool, deleteModal : PropTypes.bool,
autoPlayGif : PropTypes.bool, autoPlayGif : PropTypes.bool,
@ -178,7 +179,6 @@ export default class Status extends ImmutablePureComponent {
collapse : PropTypes.bool, collapse : PropTypes.bool,
prepend : PropTypes.string, prepend : PropTypes.string,
withDismiss : PropTypes.bool, withDismiss : PropTypes.bool,
notificationId : PropTypes.number,
intersectionObserverWrapper : PropTypes.object, intersectionObserverWrapper : PropTypes.object,
}; };
@ -186,6 +186,7 @@ export default class Status extends ImmutablePureComponent {
isExpanded : null, isExpanded : null,
isIntersecting : true, isIntersecting : true,
isHidden : false, isHidden : false,
markedForDelete : false,
} }
/* /*
@ -212,10 +213,12 @@ to remember to specify it here.
'autoPlayGif', 'autoPlayGif',
'muted', 'muted',
'collapse', 'collapse',
'notification',
] ]
updateOnStates = [ updateOnStates = [
'isExpanded', 'isExpanded',
'markedForDelete',
] ]
/* /*
@ -523,6 +526,10 @@ applicable.
} }
} }
markNotifForDelete = () => {
this.setState({ 'markedForDelete' : !this.state.markedForDelete });
}
/* /*
#### `render()`. #### `render()`.
@ -551,6 +558,7 @@ this operation are further explained in the code below.
onOpenVideo, onOpenVideo,
onOpenMedia, onOpenMedia,
autoPlayGif, autoPlayGif,
notification,
...other ...other
} = this.props; } = this.props;
const { isExpanded, isIntersecting, isHidden } = this.state; const { isExpanded, isIntersecting, isHidden } = this.state;
@ -678,6 +686,8 @@ collapsed.
isExpanded === false ? ' collapsed' : '' isExpanded === false ? ' collapsed' : ''
}${ }${
isExpanded === false && background ? ' has-background' : '' isExpanded === false && background ? ' has-background' : ''
}${
this.state.markedForDelete ? ' marked-for-delete' : ''
}` }`
} }
style={{ style={{
@ -689,13 +699,17 @@ collapsed.
}} }}
ref={handleRef} ref={handleRef}
> >
{notification ? (
<NotificationOverlayContainer
notification={notification}
/>
) : null}
{prepend && account ? ( {prepend && account ? (
<StatusPrepend <StatusPrepend
type={prepend} type={prepend}
account={account} account={account}
parseClick={parseClick} parseClick={parseClick}
notificationId={this.props.notificationId} notificationId={this.props.notificationId}
onDeleteNotification={this.props.onDeleteNotification}
/> />
) : null} ) : null}
<StatusHeader <StatusHeader

View File

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

View File

@ -28,5 +28,5 @@
"settings.wide_view": "Wide view (Desktop mode only)", "settings.wide_view": "Wide view (Desktop mode only)",
"status.collapse": "Collapse", "status.collapse": "Collapse",
"status.uncollapse": "Uncollapse", "status.uncollapse": "Uncollapse",
"status.dismiss_notification": "Dismiss notification" "notification.markForDeletion": "Mark for deletion"
} }

View File

@ -6,7 +6,15 @@ import { defineMessages } from 'react-intl';
export const NOTIFICATIONS_UPDATE = 'NOTIFICATIONS_UPDATE'; export const NOTIFICATIONS_UPDATE = 'NOTIFICATIONS_UPDATE';
export const NOTIFICATION_DELETE_SUCCESS = 'NOTIFICATION_DELETE_SUCCESS'; // tracking the notif cleaning request
export const NOTIFICATIONS_DELETE_MARKED_REQUEST = 'NOTIFICATIONS_DELETE_MARKED_REQUEST';
export const NOTIFICATIONS_DELETE_MARKED_SUCCESS = 'NOTIFICATIONS_DELETE_MARKED_SUCCESS';
export const NOTIFICATIONS_DELETE_MARKED_FAIL = 'NOTIFICATIONS_DELETE_MARKED_FAIL';
export const NOTIFICATIONS_ENTER_CLEARING_MODE = 'NOTIFICATIONS_ENTER_CLEARING_MODE'; // arg: yes
// Unmark notifications (when the cleaning mode is left)
export const NOTIFICATIONS_UNMARK_ALL_FOR_DELETE = 'NOTIFICATIONS_UNMARK_ALL_FOR_DELETE';
// Mark one for delete
export const NOTIFICATION_MARK_FOR_DELETE = 'NOTIFICATION_MARK_FOR_DELETE';
export const NOTIFICATIONS_REFRESH_REQUEST = 'NOTIFICATIONS_REFRESH_REQUEST'; export const NOTIFICATIONS_REFRESH_REQUEST = 'NOTIFICATIONS_REFRESH_REQUEST';
export const NOTIFICATIONS_REFRESH_SUCCESS = 'NOTIFICATIONS_REFRESH_SUCCESS'; export const NOTIFICATIONS_REFRESH_SUCCESS = 'NOTIFICATIONS_REFRESH_SUCCESS';
@ -190,17 +198,61 @@ export function scrollTopNotifications(top) {
}; };
}; };
export function deleteNotification(id) { export function deleteMarkedNotifications() {
return (dispatch, getState) => { return (dispatch, getState) => {
api(getState).delete(`/api/v1/notifications/${id}`).then(() => { dispatch(deleteMarkedNotificationsRequest());
dispatch(deleteNotificationSuccess(id));
let ids = [];
getState().getIn(['notifications', 'items']).forEach((n) => {
if (n.get('markedForDelete')) {
ids.push(n.get('id'));
}
});
if (ids.length === 0) {
dispatch(enterNotificationClearingMode(false));
return;
}
api(getState).delete(`/api/v1/notifications/destroy_multiple?ids[]=${ids.join('&ids[]=')}`).then(() => {
dispatch(deleteMarkedNotificationsSuccess());
dispatch(expandNotifications()); // Load more (to fill the empty space)
}).catch(error => {
console.error(error);
dispatch(deleteMarkedNotificationsFail(error));
}); });
}; };
}; };
export function deleteNotificationSuccess(id) { export function enterNotificationClearingMode(yes) {
return { return {
type: NOTIFICATION_DELETE_SUCCESS, type: NOTIFICATIONS_ENTER_CLEARING_MODE,
id: id, yes: yes,
};
};
export function deleteMarkedNotificationsRequest() {
return {
type: NOTIFICATIONS_DELETE_MARKED_REQUEST,
};
};
export function deleteMarkedNotificationsFail() {
return {
type: NOTIFICATIONS_DELETE_MARKED_FAIL,
};
};
export function markNotificationForDelete(id, yes) {
return {
type: NOTIFICATION_MARK_FOR_DELETE,
id: id,
yes: yes,
};
};
export function deleteMarkedNotificationsSuccess() {
return {
type: NOTIFICATIONS_DELETE_MARKED_SUCCESS,
}; };
}; };

View File

@ -34,7 +34,12 @@ export default class Column extends React.PureComponent {
const { children } = this.props; const { children } = this.props;
return ( return (
<div role='region' className='column' ref={this.setRef} onWheel={this.handleWheel}> <div
role='region'
className='column'
ref={this.setRef}
onWheel={this.handleWheel}
>
{children} {children}
</div> </div>
); );

View File

@ -1,8 +1,18 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classNames from 'classnames'; import classNames from 'classnames';
import { FormattedMessage } from 'react-intl'; import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
import ImmutablePropTypes from 'react-immutable-proptypes';
// Glitch imports
import NotificationPurgeButtonsContainer from '../../glitch/components/column/notif_cleaning_widget/container';
const messages = defineMessages({
titleNotifClearing: { id: 'column.notifications_clearing', defaultMessage: 'Dismiss selected notifications:' },
titleNotifClearingShort: { id: 'column.notifications_clearing_short', defaultMessage: 'Dismiss selected:' },
});
@injectIntl
export default class ColumnHeader extends React.PureComponent { export default class ColumnHeader extends React.PureComponent {
static contextTypes = { static contextTypes = {
@ -13,13 +23,17 @@ export default class ColumnHeader extends React.PureComponent {
title: PropTypes.node.isRequired, title: PropTypes.node.isRequired,
icon: PropTypes.string.isRequired, icon: PropTypes.string.isRequired,
active: PropTypes.bool, active: PropTypes.bool,
localSettings : ImmutablePropTypes.map,
multiColumn: PropTypes.bool, multiColumn: PropTypes.bool,
showBackButton: PropTypes.bool, showBackButton: PropTypes.bool,
notifCleaning: PropTypes.bool, // true only for the notification column
notifCleaningActive: PropTypes.bool,
children: PropTypes.node, children: PropTypes.node,
pinned: PropTypes.bool, pinned: PropTypes.bool,
onPin: PropTypes.func, onPin: PropTypes.func,
onMove: PropTypes.func, onMove: PropTypes.func,
onClick: PropTypes.func, onClick: PropTypes.func,
intl: PropTypes.object.isRequired,
}; };
state = { state = {
@ -58,9 +72,16 @@ export default class ColumnHeader extends React.PureComponent {
} }
render () { render () {
const { title, icon, active, children, pinned, onPin, multiColumn, showBackButton } = this.props; const { intl, icon, active, children, pinned, onPin, multiColumn, showBackButton, notifCleaning, localSettings } = this.props;
const { collapsed, animating } = this.state; const { collapsed, animating } = this.state;
let title = this.props.title;
if (notifCleaning && this.props.notifCleaningActive) {
title = intl.formatMessage(localSettings.getIn(['stretch']) ?
messages.titleNotifClearing :
messages.titleNotifClearingShort);
}
const wrapperClassName = classNames('column-header__wrapper', { const wrapperClassName = classNames('column-header__wrapper', {
'active': active, 'active': active,
}); });
@ -130,6 +151,7 @@ export default class ColumnHeader extends React.PureComponent {
{title} {title}
<div className='column-header__buttons'> <div className='column-header__buttons'>
{notifCleaning ? (<NotificationPurgeButtonsContainer />) : null}
{backButton} {backButton}
{collapseButton} {collapseButton}
</div> </div>

View File

@ -4,7 +4,10 @@ import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import Column from '../../components/column'; import Column from '../../components/column';
import ColumnHeader from '../../components/column_header'; import ColumnHeader from '../../components/column_header';
import { expandNotifications, scrollTopNotifications } from '../../actions/notifications'; import {
expandNotifications,
scrollTopNotifications,
} from '../../actions/notifications';
import { addColumn, removeColumn, moveColumn } from '../../actions/columns'; import { addColumn, removeColumn, moveColumn } from '../../actions/columns';
import NotificationContainer from '../../../glitch/components/notification/container'; import NotificationContainer from '../../../glitch/components/notification/container';
import { ScrollContainer } from 'react-router-scroll'; import { ScrollContainer } from 'react-router-scroll';
@ -26,9 +29,11 @@ const getNotifications = createSelector([
const mapStateToProps = state => ({ const mapStateToProps = state => ({
notifications: getNotifications(state), notifications: getNotifications(state),
localSettings: state.get('local_settings'),
isLoading: state.getIn(['notifications', 'isLoading'], true), isLoading: state.getIn(['notifications', 'isLoading'], true),
isUnread: state.getIn(['notifications', 'unread']) > 0, isUnread: state.getIn(['notifications', 'unread']) > 0,
hasMore: !!state.getIn(['notifications', 'next']), hasMore: !!state.getIn(['notifications', 'next']),
notifCleaningActive: state.getIn(['notifications', 'cleaningMode']),
}); });
@connect(mapStateToProps) @connect(mapStateToProps)
@ -45,6 +50,8 @@ export default class Notifications extends React.PureComponent {
isUnread: PropTypes.bool, isUnread: PropTypes.bool,
multiColumn: PropTypes.bool, multiColumn: PropTypes.bool,
hasMore: PropTypes.bool, hasMore: PropTypes.bool,
localSettings: ImmutablePropTypes.map,
notifCleaningActive: PropTypes.bool,
}; };
static defaultProps = { static defaultProps = {
@ -164,7 +171,9 @@ export default class Notifications extends React.PureComponent {
this.scrollableArea = scrollableArea; this.scrollableArea = scrollableArea;
return ( return (
<Column ref={this.setColumnRef}> <Column
ref={this.setColumnRef}
>
<ColumnHeader <ColumnHeader
icon='bell' icon='bell'
active={isUnread} active={isUnread}
@ -174,6 +183,9 @@ export default class Notifications extends React.PureComponent {
onClick={this.handleHeaderClick} onClick={this.handleHeaderClick}
pinned={pinned} pinned={pinned}
multiColumn={multiColumn} multiColumn={multiColumn}
localSettings={this.props.localSettings}
notifCleaning
notifCleaningActive={this.props.notifCleaningActive} // this is used to toggle the header text
> >
<ColumnSettingsContainer /> <ColumnSettingsContainer />
</ColumnHeader> </ColumnHeader>

View File

@ -8,7 +8,11 @@ import {
NOTIFICATIONS_EXPAND_FAIL, NOTIFICATIONS_EXPAND_FAIL,
NOTIFICATIONS_CLEAR, NOTIFICATIONS_CLEAR,
NOTIFICATIONS_SCROLL_TOP, NOTIFICATIONS_SCROLL_TOP,
NOTIFICATION_DELETE_SUCCESS, NOTIFICATIONS_DELETE_MARKED_REQUEST,
NOTIFICATIONS_DELETE_MARKED_SUCCESS,
NOTIFICATION_MARK_FOR_DELETE,
NOTIFICATIONS_DELETE_MARKED_FAIL,
NOTIFICATIONS_ENTER_CLEARING_MODE,
} from '../actions/notifications'; } from '../actions/notifications';
import { ACCOUNT_BLOCK_SUCCESS } from '../actions/accounts'; import { ACCOUNT_BLOCK_SUCCESS } from '../actions/accounts';
import { TIMELINE_DELETE } from '../actions/timelines'; import { TIMELINE_DELETE } from '../actions/timelines';
@ -21,12 +25,14 @@ const initialState = ImmutableMap({
unread: 0, unread: 0,
loaded: false, loaded: false,
isLoading: true, isLoading: true,
cleaningMode: false,
}); });
const notificationToMap = notification => ImmutableMap({ const notificationToMap = notification => ImmutableMap({
id: notification.id, id: notification.id,
type: notification.type, type: notification.type,
account: notification.account.id, account: notification.account.id,
markedForDelete: false,
status: notification.status ? notification.status.id : null, status: notification.status ? notification.status.id : null,
}); });
@ -93,17 +99,34 @@ const deleteByStatus = (state, statusId) => {
return state.update('items', list => list.filterNot(item => item.get('status') === statusId)); return state.update('items', list => list.filterNot(item => item.get('status') === statusId));
}; };
const deleteById = (state, notificationId) => { const markForDelete = (state, notificationId, yes) => {
return state.update('items', list => list.filterNot(item => item.get('id') === notificationId)); return state.update('items', list => list.map(item => {
if(item.get('id') === notificationId) {
return item.set('markedForDelete', yes);
} else {
return item;
}
}));
};
const unmarkAllForDelete = (state) => {
return state.update('items', list => list.map(item => item.set('markedForDelete', false)));
};
const deleteMarkedNotifs = (state) => {
return state.update('items', list => list.filterNot(item => item.get('markedForDelete')));
}; };
export default function notifications(state = initialState, action) { export default function notifications(state = initialState, action) {
switch(action.type) { switch(action.type) {
case NOTIFICATIONS_REFRESH_REQUEST: case NOTIFICATIONS_REFRESH_REQUEST:
case NOTIFICATIONS_EXPAND_REQUEST: case NOTIFICATIONS_EXPAND_REQUEST:
case NOTIFICATIONS_DELETE_MARKED_REQUEST:
return state.set('isLoading', true);
case NOTIFICATIONS_DELETE_MARKED_FAIL:
case NOTIFICATIONS_REFRESH_FAIL: case NOTIFICATIONS_REFRESH_FAIL:
case NOTIFICATIONS_EXPAND_FAIL: case NOTIFICATIONS_EXPAND_FAIL:
return state.set('isLoading', true); return state.set('isLoading', false);
case NOTIFICATIONS_SCROLL_TOP: case NOTIFICATIONS_SCROLL_TOP:
return updateTop(state, action.top); return updateTop(state, action.top);
case NOTIFICATIONS_UPDATE: case NOTIFICATIONS_UPDATE:
@ -118,8 +141,15 @@ export default function notifications(state = initialState, action) {
return state.set('items', ImmutableList()).set('next', null); return state.set('items', ImmutableList()).set('next', null);
case TIMELINE_DELETE: case TIMELINE_DELETE:
return deleteByStatus(state, action.id); return deleteByStatus(state, action.id);
case NOTIFICATION_DELETE_SUCCESS: case NOTIFICATION_MARK_FOR_DELETE:
return deleteById(state, action.id); return markForDelete(state, action.id, action.yes);
case NOTIFICATIONS_DELETE_MARKED_SUCCESS:
return deleteMarkedNotifs(state).set('isLoading', false).set('cleaningMode', false);
case NOTIFICATIONS_ENTER_CLEARING_MODE:
const st = state.set('cleaningMode', action.yes);
if (!action.yes)
return unmarkAllForDelete(st);
else return st;
default: default:
return state; return state;
} }

View File

@ -451,6 +451,63 @@
cursor: pointer; cursor: pointer;
} }
.notification__dismiss-overlay {
position: absolute;
left: 0; top: 0; right: 0; bottom: 0;
$c1: #00000A;
$c2: #222228;
background: linear-gradient(to right,
rgba($c1, 0.1),
rgba($c1, 0.2) 60%,
rgba($c2, 1) 90%,
rgba($c2, 1));
z-index: 999;
align-items: center;
justify-content: flex-end;
cursor: pointer;
display: none;
&.show {
display: flex;
}
// make it brighter
&.active {
$c: #222931;
background: linear-gradient(to right,
rgba($c, 0.1),
rgba($c, 0.2) 60%,
rgba($c, 1) 90%,
rgba($c, 1));
}
&:focus {
outline: 0 !important;
}
}
.notification__dismiss-overlay__ckbox {
border: 2px solid #9baec8;
border-radius: 2px;
width: 30px;
height: 30px;
margin-right: 20px;
font-size: 20px;
color: #c3dcfd;
text-shadow: 0 0 5px black;
display: flex;
justify-content: center;
align-items: center;
:focus & {
outline: rgb(77, 144, 254) auto 10px;
outline: -webkit-focus-ring-color auto 10px;
}
}
// --- Extra clickable area in the status gutter --- // --- Extra clickable area in the status gutter ---
.ui.wide { .ui.wide {
@mixin xtraspaces-full { @mixin xtraspaces-full {
@ -627,24 +684,14 @@
position: absolute; position: absolute;
} }
.status__prepend-dismiss-button { .notification-follow {
border: 0; position: relative;
background: transparent;
position: absolute;
right: -3px;
opacity: 0;
transition: opacity 0.1s ease-in-out;
i.fa { // same like Status
color: crimson; border-bottom: 1px solid lighten($ui-base-color, 8%);
}
.notification__message:hover & { .account {
opacity: 1; border-bottom: 0 none;
}
.notification-follow & {
right: 6px;
} }
} }
@ -2408,6 +2455,17 @@ button.icon-button.active i.fa-retweet {
} }
} }
.column-header__notif-cleaning-buttons {
display: flex;
align-items: stretch;
button {
@extend .column-header__button;
padding-left: 12px;
padding-right: 12px;
}
}
.column-header__collapsible { .column-header__collapsible {
max-height: 70vh; max-height: 70vh;
overflow: hidden; overflow: hidden;

View File

@ -182,6 +182,7 @@ Rails.application.routes.draw do
collection do collection do
post :clear post :clear
post :dismiss post :dismiss
delete :destroy_multiple
end end
end end