diff options
Diffstat (limited to 'app/javascript/themes/glitch/features/notifications/components')
6 files changed, 0 insertions, 385 deletions
diff --git a/app/javascript/themes/glitch/features/notifications/components/clear_column_button.js b/app/javascript/themes/glitch/features/notifications/components/clear_column_button.js deleted file mode 100644 index 22a10753f..000000000 --- a/app/javascript/themes/glitch/features/notifications/components/clear_column_button.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { FormattedMessage } from 'react-intl'; - -export default class ClearColumnButton extends React.Component { - - static propTypes = { - onClick: PropTypes.func.isRequired, - }; - - render () { - return ( - <button className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.props.onClick}><i className='fa fa-eraser' /> <FormattedMessage id='notifications.clear' defaultMessage='Clear notifications' /></button> - ); - } - -} diff --git a/app/javascript/themes/glitch/features/notifications/components/column_settings.js b/app/javascript/themes/glitch/features/notifications/components/column_settings.js deleted file mode 100644 index 88a29d4d3..000000000 --- a/app/javascript/themes/glitch/features/notifications/components/column_settings.js +++ /dev/null @@ -1,86 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import ImmutablePropTypes from 'react-immutable-proptypes'; -import { FormattedMessage } from 'react-intl'; -import ClearColumnButton from './clear_column_button'; -import SettingToggle from './setting_toggle'; - -export default class ColumnSettings extends React.PureComponent { - - static propTypes = { - settings: ImmutablePropTypes.map.isRequired, - pushSettings: ImmutablePropTypes.map.isRequired, - onChange: PropTypes.func.isRequired, - onSave: PropTypes.func.isRequired, - onClear: PropTypes.func.isRequired, - }; - - onPushChange = (key, checked) => { - this.props.onChange(['push', ...key], checked); - } - - render () { - const { settings, pushSettings, onChange, onClear } = this.props; - - const alertStr = <FormattedMessage id='notifications.column_settings.alert' defaultMessage='Desktop notifications' />; - const showStr = <FormattedMessage id='notifications.column_settings.show' defaultMessage='Show in column' />; - const soundStr = <FormattedMessage id='notifications.column_settings.sound' defaultMessage='Play sound' />; - - const showPushSettings = pushSettings.get('browserSupport') && pushSettings.get('isSubscribed'); - const pushStr = showPushSettings && <FormattedMessage id='notifications.column_settings.push' defaultMessage='Push notifications' />; - const pushMeta = showPushSettings && <FormattedMessage id='notifications.column_settings.push_meta' defaultMessage='This device' />; - - return ( - <div> - <div className='column-settings__row'> - <ClearColumnButton onClick={onClear} /> - </div> - - <div role='group' aria-labelledby='notifications-follow'> - <span id='notifications-follow' className='column-settings__section'><FormattedMessage id='notifications.column_settings.follow' defaultMessage='New followers:' /></span> - - <div className='column-settings__row'> - <SettingToggle prefix='notifications_desktop' settings={settings} settingKey={['alerts', 'follow']} onChange={onChange} label={alertStr} /> - {showPushSettings && <SettingToggle prefix='notifications_push' settings={pushSettings} settingKey={['alerts', 'follow']} meta={pushMeta} onChange={this.onPushChange} label={pushStr} />} - <SettingToggle prefix='notifications' settings={settings} settingKey={['shows', 'follow']} onChange={onChange} label={showStr} /> - <SettingToggle prefix='notifications' settings={settings} settingKey={['sounds', 'follow']} onChange={onChange} label={soundStr} /> - </div> - </div> - - <div role='group' aria-labelledby='notifications-favourite'> - <span id='notifications-favourite' className='column-settings__section'><FormattedMessage id='notifications.column_settings.favourite' defaultMessage='Favourites:' /></span> - - <div className='column-settings__row'> - <SettingToggle prefix='notifications_desktop' settings={settings} settingKey={['alerts', 'favourite']} onChange={onChange} label={alertStr} /> - {showPushSettings && <SettingToggle prefix='notifications_push' settings={pushSettings} settingKey={['alerts', 'favourite']} meta={pushMeta} onChange={this.onPushChange} label={pushStr} />} - <SettingToggle prefix='notifications' settings={settings} settingKey={['shows', 'favourite']} onChange={onChange} label={showStr} /> - <SettingToggle prefix='notifications' settings={settings} settingKey={['sounds', 'favourite']} onChange={onChange} label={soundStr} /> - </div> - </div> - - <div role='group' aria-labelledby='notifications-mention'> - <span id='notifications-mention' className='column-settings__section'><FormattedMessage id='notifications.column_settings.mention' defaultMessage='Mentions:' /></span> - - <div className='column-settings__row'> - <SettingToggle prefix='notifications_desktop' settings={settings} settingKey={['alerts', 'mention']} onChange={onChange} label={alertStr} /> - {showPushSettings && <SettingToggle prefix='notifications_push' settings={pushSettings} settingKey={['alerts', 'mention']} meta={pushMeta} onChange={this.onPushChange} label={pushStr} />} - <SettingToggle prefix='notifications' settings={settings} settingKey={['shows', 'mention']} onChange={onChange} label={showStr} /> - <SettingToggle prefix='notifications' settings={settings} settingKey={['sounds', 'mention']} onChange={onChange} label={soundStr} /> - </div> - </div> - - <div role='group' aria-labelledby='notifications-reblog'> - <span id='notifications-reblog' className='column-settings__section'><FormattedMessage id='notifications.column_settings.reblog' defaultMessage='Boosts:' /></span> - - <div className='column-settings__row'> - <SettingToggle prefix='notifications_desktop' settings={settings} settingKey={['alerts', 'reblog']} onChange={onChange} label={alertStr} /> - {showPushSettings && <SettingToggle prefix='notifications_push' settings={pushSettings} settingKey={['alerts', 'reblog']} meta={pushMeta} onChange={this.onPushChange} label={pushStr} />} - <SettingToggle prefix='notifications' settings={settings} settingKey={['shows', 'reblog']} onChange={onChange} label={showStr} /> - <SettingToggle prefix='notifications' settings={settings} settingKey={['sounds', 'reblog']} onChange={onChange} label={soundStr} /> - </div> - </div> - </div> - ); - } - -} diff --git a/app/javascript/themes/glitch/features/notifications/components/follow.js b/app/javascript/themes/glitch/features/notifications/components/follow.js deleted file mode 100644 index 96cfe83e6..000000000 --- a/app/javascript/themes/glitch/features/notifications/components/follow.js +++ /dev/null @@ -1,98 +0,0 @@ -// Package imports. -import React from 'react'; -import ImmutablePropTypes from 'react-immutable-proptypes'; -import PropTypes from 'prop-types'; -import { FormattedMessage } from 'react-intl'; -import ImmutablePureComponent from 'react-immutable-pure-component'; -import { HotKeys } from 'react-hotkeys'; - -// Our imports. -import Permalink from 'themes/glitch/components/permalink'; -import AccountContainer from 'themes/glitch/containers/account_container'; -import NotificationOverlayContainer from '../containers/overlay_container'; - -export default class NotificationFollow extends ImmutablePureComponent { - - static propTypes = { - hidden: PropTypes.bool, - id: PropTypes.string.isRequired, - account: ImmutablePropTypes.map.isRequired, - notification: ImmutablePropTypes.map.isRequired, - }; - - handleMoveUp = () => { - const { notification, onMoveUp } = this.props; - onMoveUp(notification.get('id')); - } - - handleMoveDown = () => { - const { notification, onMoveDown } = this.props; - onMoveDown(notification.get('id')); - } - - handleOpen = () => { - this.handleOpenProfile(); - } - - handleOpenProfile = () => { - const { notification } = this.props; - this.context.router.history.push(`/accounts/${notification.getIn(['account', 'id'])}`); - } - - handleMention = e => { - e.preventDefault(); - - const { notification, onMention } = this.props; - onMention(notification.get('account'), this.context.router.history); - } - - getHandlers () { - return { - moveUp: this.handleMoveUp, - moveDown: this.handleMoveDown, - open: this.handleOpen, - openProfile: this.handleOpenProfile, - mention: this.handleMention, - reply: this.handleMention, - }; - } - - render () { - const { account, notification, hidden } = this.props; - - // Links to the display name. - const displayName = account.get('display_name_html') || account.get('username'); - const link = ( - <Permalink - className='notification__display-name' - href={account.get('url')} - title={account.get('acct')} - to={`/accounts/${account.get('id')}`} - dangerouslySetInnerHTML={{ __html: displayName }} - /> - ); - - // Renders. - return ( - <HotKeys handlers={this.getHandlers()}> - <div className='notification notification-follow focusable' tabIndex='0'> - <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 hidden={hidden} id={account.get('id')} withNote={false} /> - <NotificationOverlayContainer notification={notification} /> - </div> - </HotKeys> - ); - } - -} diff --git a/app/javascript/themes/glitch/features/notifications/components/notification.js b/app/javascript/themes/glitch/features/notifications/components/notification.js deleted file mode 100644 index 47f5770bf..000000000 --- a/app/javascript/themes/glitch/features/notifications/components/notification.js +++ /dev/null @@ -1,93 +0,0 @@ -// Package imports. -import React from 'react'; -import PropTypes from 'prop-types'; -import ImmutablePropTypes from 'react-immutable-proptypes'; -import ImmutablePureComponent from 'react-immutable-pure-component'; - -// Our imports, -import StatusContainer from 'themes/glitch/containers/status_container'; -import NotificationFollow from './follow'; - -export default class Notification extends ImmutablePureComponent { - - static propTypes = { - notification: ImmutablePropTypes.map.isRequired, - hidden: PropTypes.bool, - onMoveUp: PropTypes.func.isRequired, - onMoveDown: PropTypes.func.isRequired, - onMention: PropTypes.func.isRequired, - }; - - render () { - const { - hidden, - notification, - onMoveDown, - onMoveUp, - onMention, - } = this.props; - - switch(notification.get('type')) { - case 'follow': - return ( - <NotificationFollow - hidden={hidden} - id={notification.get('id')} - account={notification.get('account')} - notification={notification} - onMoveDown={onMoveDown} - onMoveUp={onMoveUp} - onMention={onMention} - /> - ); - case 'mention': - return ( - <StatusContainer - containerId={notification.get('id')} - hidden={hidden} - id={notification.get('status')} - notification={notification} - onMoveDown={onMoveDown} - onMoveUp={onMoveUp} - onMention={onMention} - withDismiss - /> - ); - case 'favourite': - return ( - <StatusContainer - containerId={notification.get('id')} - hidden={hidden} - id={notification.get('status')} - account={notification.get('account')} - prepend='favourite' - muted - notification={notification} - onMoveDown={onMoveDown} - onMoveUp={onMoveUp} - onMention={onMention} - withDismiss - /> - ); - case 'reblog': - return ( - <StatusContainer - containerId={notification.get('id')} - hidden={hidden} - id={notification.get('status')} - account={notification.get('account')} - prepend='reblog' - muted - notification={notification} - onMoveDown={onMoveDown} - onMoveUp={onMoveUp} - onMention={onMention} - withDismiss - /> - ); - default: - return null; - } - } - -} diff --git a/app/javascript/themes/glitch/features/notifications/components/overlay.js b/app/javascript/themes/glitch/features/notifications/components/overlay.js deleted file mode 100644 index e56f9c628..000000000 --- a/app/javascript/themes/glitch/features/notifications/components/overlay.js +++ /dev/null @@ -1,57 +0,0 @@ -/** - * 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'; - -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, - show : 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, show, intl } = this.props; - - const active = notification.get('markedForDelete'); - const label = intl.formatMessage(messages.markForDeletion); - - return show ? ( - <div - aria-label={label} - role='checkbox' - aria-checked={active} - tabIndex={0} - className={`notification__dismiss-overlay ${active ? 'active' : ''}`} - onClick={this.onToggleMark} - > - <div className='wrappy'> - <div className='ckbox' aria-hidden='true' title={label}> - {active ? (<i className='fa fa-check' />) : ''} - </div> - </div> - </div> - ) : null; - } - -} diff --git a/app/javascript/themes/glitch/features/notifications/components/setting_toggle.js b/app/javascript/themes/glitch/features/notifications/components/setting_toggle.js deleted file mode 100644 index 281359d2a..000000000 --- a/app/javascript/themes/glitch/features/notifications/components/setting_toggle.js +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import ImmutablePropTypes from 'react-immutable-proptypes'; -import Toggle from 'react-toggle'; - -export default class SettingToggle extends React.PureComponent { - - static propTypes = { - prefix: PropTypes.string, - settings: ImmutablePropTypes.map.isRequired, - settingKey: PropTypes.array.isRequired, - label: PropTypes.node.isRequired, - meta: PropTypes.node, - onChange: PropTypes.func.isRequired, - } - - onChange = ({ target }) => { - this.props.onChange(this.props.settingKey, target.checked); - } - - render () { - const { prefix, settings, settingKey, label, meta } = this.props; - const id = ['setting-toggle', prefix, ...settingKey].filter(Boolean).join('-'); - - return ( - <div className='setting-toggle'> - <Toggle id={id} checked={settings.getIn(settingKey)} onChange={this.onChange} onKeyDown={this.onKeyDown} /> - <label htmlFor={id} className='setting-toggle__label'>{label}</label> - {meta && <span className='setting-meta__label'>{meta}</span>} - </div> - ); - } - -} |