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:
@@ -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);
|
Reference in New Issue
Block a user