diff options
author | Ondřej Hruška <ondra@ondrovo.com> | 2017-07-21 20:33:16 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-07-21 20:33:16 +0200 |
commit | 604654ccb417ffdc9b48d876bea76c8bec14f360 (patch) | |
tree | 1fe2c98677aa5328c8366a37114325b625399ace /app/javascript/glitch/components/status/prepend.js | |
parent | 0efd7e740602dd684712563b7ad0b41c23d86d69 (diff) |
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
Diffstat (limited to 'app/javascript/glitch/components/status/prepend.js')
-rw-r--r-- | app/javascript/glitch/components/status/prepend.js | 28 |
1 files changed, 1 insertions, 27 deletions
diff --git a/app/javascript/glitch/components/status/prepend.js b/app/javascript/glitch/components/status/prepend.js index d9b04b5ec..6213e4c8d 100644 --- a/app/javascript/glitch/components/status/prepend.js +++ b/app/javascript/glitch/components/status/prepend.js @@ -23,17 +23,11 @@ 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' }, -}); - /* * * * */ /* @@ -59,7 +53,6 @@ element. */ -@injectIntl export default class StatusPrepend extends React.PureComponent { static propTypes = { @@ -67,8 +60,6 @@ export default class StatusPrepend extends React.PureComponent { account: ImmutablePropTypes.map.isRequired, parseClick: PropTypes.func.isRequired, 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')}`); } - handleNotificationDeleteClick = () => { - this.props.onDeleteNotification(this.props.notificationId); - } - /* #### `<Message>`. @@ -159,19 +146,7 @@ the `<Message>` inside of an <aside>. render () { const { Message } = this; - 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; + const { type } = this.props; return !type ? null : ( <aside className={type === 'reblogged_by' ? 'status__prepend' : 'notification__message'}> @@ -183,7 +158,6 @@ the `<Message>` inside of an <aside>. /> </div> <Message /> - {dismiss} </aside> ); } |