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 TRAVISmain
Ondřej Hruška
7 years ago
committed by
GitHub
parent
0efd7e7406
commit
604654ccb4
@ -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);
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
@ -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);
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in new issue