diff options
Diffstat (limited to 'app/javascript/flavours/glitch/features/ui')
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/actions_modal.jsx (renamed from app/javascript/flavours/glitch/features/ui/components/actions_modal.js) | 4 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/audio_modal.jsx (renamed from app/javascript/flavours/glitch/features/ui/components/audio_modal.js) | 8 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/block_modal.jsx (renamed from app/javascript/flavours/glitch/features/ui/components/block_modal.js) | 12 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/boost_modal.jsx (renamed from app/javascript/flavours/glitch/features/ui/components/boost_modal.js) | 16 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/bundle.jsx (renamed from app/javascript/flavours/glitch/features/ui/components/bundle.js) | 10 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/bundle_column_error.jsx (renamed from app/javascript/flavours/glitch/features/ui/components/bundle_column_error.js) | 11 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/bundle_modal_error.jsx (renamed from app/javascript/flavours/glitch/features/ui/components/bundle_modal_error.js) | 4 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/column.jsx (renamed from app/javascript/flavours/glitch/features/ui/components/column.js) | 6 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/column_header.jsx (renamed from app/javascript/flavours/glitch/features/ui/components/column_header.js) | 2 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/column_link.jsx (renamed from app/javascript/flavours/glitch/features/ui/components/column_link.js) | 4 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/column_loading.jsx (renamed from app/javascript/flavours/glitch/features/ui/components/column_loading.js) | 0 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/column_subheading.jsx (renamed from app/javascript/flavours/glitch/features/ui/components/column_subheading.js) | 0 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/columns_area.jsx (renamed from app/javascript/flavours/glitch/features/ui/components/columns_area.js) | 12 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/compare_history_modal.jsx (renamed from app/javascript/flavours/glitch/features/ui/components/compare_history_modal.js) | 14 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/compose_panel.jsx (renamed from app/javascript/flavours/glitch/features/ui/components/compose_panel.js) | 5 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/confirmation_modal.jsx (renamed from app/javascript/flavours/glitch/features/ui/components/confirmation_modal.js) | 13 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/deprecated_settings_modal.jsx (renamed from app/javascript/flavours/glitch/features/ui/components/deprecated_settings_modal.js) | 7 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/disabled_account_banner.jsx (renamed from app/javascript/flavours/glitch/features/ui/components/disabled_account_banner.js) | 8 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/doodle_modal.jsx (renamed from app/javascript/flavours/glitch/features/ui/components/doodle_modal.js) | 9 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/drawer_loading.jsx (renamed from app/javascript/flavours/glitch/features/ui/components/drawer_loading.js) | 0 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/embed_modal.jsx (renamed from app/javascript/flavours/glitch/features/ui/components/embed_modal.js) | 9 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/favourite_modal.jsx (renamed from app/javascript/flavours/glitch/features/ui/components/favourite_modal.js) | 11 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/filter_modal.jsx (renamed from app/javascript/flavours/glitch/features/ui/components/filter_modal.js) | 4 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/focal_point_modal.jsx (renamed from app/javascript/flavours/glitch/features/ui/components/focal_point_modal.js) | 47 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/follow_requests_column_link.jsx (renamed from app/javascript/flavours/glitch/features/ui/components/follow_requests_column_link.js) | 4 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/header.jsx (renamed from app/javascript/flavours/glitch/features/ui/components/header.js) | 4 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/image_loader.jsx (renamed from app/javascript/flavours/glitch/features/ui/components/image_loader.js) | 13 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/image_modal.jsx (renamed from app/javascript/flavours/glitch/features/ui/components/image_modal.js) | 3 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/link_footer.jsx (renamed from app/javascript/flavours/glitch/features/ui/components/link_footer.js) | 24 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/list_panel.jsx (renamed from app/javascript/flavours/glitch/features/ui/components/list_panel.js) | 4 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/media_modal.jsx (renamed from app/javascript/flavours/glitch/features/ui/components/media_modal.js) | 29 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/modal_loading.jsx (renamed from app/javascript/flavours/glitch/features/ui/components/modal_loading.js) | 0 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/modal_root.jsx (renamed from app/javascript/flavours/glitch/features/ui/components/modal_root.js) | 16 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/mute_modal.jsx (renamed from app/javascript/flavours/glitch/features/ui/components/mute_modal.js) | 14 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/navigation_panel.jsx (renamed from app/javascript/flavours/glitch/features/ui/components/navigation_panel.js) | 5 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/onboarding_modal.jsx (renamed from app/javascript/flavours/glitch/features/ui/components/onboarding_modal.js) | 24 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/report_modal.jsx (renamed from app/javascript/flavours/glitch/features/ui/components/report_modal.js) | 6 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/sign_in_banner.jsx (renamed from app/javascript/flavours/glitch/features/ui/components/sign_in_banner.js) | 2 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/upload_area.jsx (renamed from app/javascript/flavours/glitch/features/ui/components/upload_area.js) | 2 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/video_modal.jsx (renamed from app/javascript/flavours/glitch/features/ui/components/video_modal.js) | 13 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/zoomable_image.jsx (renamed from app/javascript/flavours/glitch/features/ui/components/zoomable_image.js) | 36 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/index.jsx (renamed from app/javascript/flavours/glitch/features/ui/index.js) | 84 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/util/async-components.js | 4 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/util/react_router_helpers.jsx (renamed from app/javascript/flavours/glitch/features/ui/util/react_router_helpers.js) | 10 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/util/reduced_motion.jsx (renamed from app/javascript/flavours/glitch/features/ui/util/reduced_motion.js) | 2 |
45 files changed, 286 insertions, 229 deletions
diff --git a/app/javascript/flavours/glitch/features/ui/components/actions_modal.js b/app/javascript/flavours/glitch/features/ui/components/actions_modal.jsx index aae2e4426..9a9b1a3f1 100644 --- a/app/javascript/flavours/glitch/features/ui/components/actions_modal.js +++ b/app/javascript/flavours/glitch/features/ui/components/actions_modal.jsx @@ -36,7 +36,7 @@ export default class ActionsModal extends ImmutablePureComponent { if (!contents) { contents = ( <React.Fragment> - {icon && <IconButton title={text} icon={icon} role='presentation' tabIndex='-1' inverted />} + {icon && <IconButton title={text} icon={icon} role='presentation' tabIndex={-1} inverted />} <div> <div className={classNames({ 'actions-modal__item-label': !!meta })}>{text}</div> <div>{meta}</div> @@ -52,7 +52,7 @@ export default class ActionsModal extends ImmutablePureComponent { </a> </li> ); - } + }; render () { const status = this.props.status && ( diff --git a/app/javascript/flavours/glitch/features/ui/components/audio_modal.js b/app/javascript/flavours/glitch/features/ui/components/audio_modal.jsx index fc98cc6af..0aeabd94c 100644 --- a/app/javascript/flavours/glitch/features/ui/components/audio_modal.js +++ b/app/javascript/flavours/glitch/features/ui/components/audio_modal.jsx @@ -7,15 +7,16 @@ import ImmutablePureComponent from 'react-immutable-pure-component'; import Footer from 'flavours/glitch/features/picture_in_picture/components/footer'; const mapStateToProps = (state, { statusId }) => ({ + language: state.getIn(['statuses', statusId, 'language']), accountStaticAvatar: state.getIn(['accounts', state.getIn(['statuses', statusId, 'account']), 'avatar_static']), }); -export default @connect(mapStateToProps) class AudioModal extends ImmutablePureComponent { static propTypes = { media: ImmutablePropTypes.map.isRequired, statusId: PropTypes.string.isRequired, + language: PropTypes.string, accountStaticAvatar: PropTypes.string.isRequired, options: PropTypes.shape({ autoPlay: PropTypes.bool, @@ -29,7 +30,7 @@ class AudioModal extends ImmutablePureComponent { }; render () { - const { media, accountStaticAvatar, statusId, onClose } = this.props; + const { media, language, accountStaticAvatar, statusId, onClose } = this.props; const options = this.props.options || {}; return ( @@ -38,6 +39,7 @@ class AudioModal extends ImmutablePureComponent { <Audio src={media.get('url')} alt={media.get('description')} + lang={language} duration={media.getIn(['meta', 'original', 'duration'], 0)} height={150} poster={media.get('preview_url') || accountStaticAvatar} @@ -56,3 +58,5 @@ class AudioModal extends ImmutablePureComponent { } } + +export default connect(mapStateToProps, null, null, { forwardRef: true })(AudioModal); diff --git a/app/javascript/flavours/glitch/features/ui/components/block_modal.js b/app/javascript/flavours/glitch/features/ui/components/block_modal.jsx index a07baeaa6..a9506aa69 100644 --- a/app/javascript/flavours/glitch/features/ui/components/block_modal.js +++ b/app/javascript/flavours/glitch/features/ui/components/block_modal.jsx @@ -36,8 +36,6 @@ const mapDispatchToProps = dispatch => { }; }; -export default @connect(makeMapStateToProps, mapDispatchToProps) -@injectIntl class BlockModal extends React.PureComponent { static propTypes = { @@ -55,20 +53,20 @@ class BlockModal extends React.PureComponent { handleClick = () => { this.props.onClose(); this.props.onConfirm(this.props.account); - } + }; handleSecondary = () => { this.props.onClose(); this.props.onBlockAndReport(this.props.account); - } + }; handleCancel = () => { this.props.onClose(); - } + }; setRef = (c) => { this.button = c; - } + }; render () { const { account } = this.props; @@ -101,3 +99,5 @@ class BlockModal extends React.PureComponent { } } + +export default connect(makeMapStateToProps, mapDispatchToProps)(injectIntl(BlockModal)); diff --git a/app/javascript/flavours/glitch/features/ui/components/boost_modal.js b/app/javascript/flavours/glitch/features/ui/components/boost_modal.jsx index 8d9496bb9..d9523a26e 100644 --- a/app/javascript/flavours/glitch/features/ui/components/boost_modal.js +++ b/app/javascript/flavours/glitch/features/ui/components/boost_modal.jsx @@ -35,8 +35,6 @@ const mapDispatchToProps = dispatch => { }; }; -export default @connect(mapStateToProps, mapDispatchToProps) -@injectIntl class BoostModal extends ImmutablePureComponent { static contextTypes = { @@ -58,17 +56,17 @@ class BoostModal extends ImmutablePureComponent { handleReblog = () => { this.props.onReblog(this.props.status, this.props.privacy); this.props.onClose(); - } + }; handleAccountClick = (e) => { if (e.button === 0) { e.preventDefault(); this.props.onClose(); - let state = {...this.context.router.history.location.state}; + let state = { ...this.context.router.history.location.state }; state.mastodonBackSteps = (state.mastodonBackSteps || 0) + 1; this.context.router.history.push(`/@${this.props.status.getIn(['account', 'acct'])}`, state); } - } + }; _findContainer = () => { return document.getElementsByClassName('modal-root__container')[0]; @@ -76,7 +74,7 @@ class BoostModal extends ImmutablePureComponent { setRef = (c) => { this.button = c; - } + }; render () { const { status, missingMediaDescription, privacy, intl } = this.props; @@ -116,9 +114,9 @@ class BoostModal extends ImmutablePureComponent { <div className='boost-modal__action-bar'> <div> { missingMediaDescription ? - <FormattedMessage id='boost_modal.missing_description' defaultMessage='This toot contains some media without description' /> + <FormattedMessage id='boost_modal.missing_description' defaultMessage='This toot contains some media without description' /> : - <FormattedMessage id='boost_modal.combo' defaultMessage='You can press {combo} to skip this next time' values={{ combo: <span>Shift + <Icon id='retweet' /></span> }} /> + <FormattedMessage id='boost_modal.combo' defaultMessage='You can press {combo} to skip this next time' values={{ combo: <span>Shift + <Icon id='retweet' /></span> }} /> } </div> @@ -137,3 +135,5 @@ class BoostModal extends ImmutablePureComponent { } } + +export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(BoostModal)); diff --git a/app/javascript/flavours/glitch/features/ui/components/bundle.js b/app/javascript/flavours/glitch/features/ui/components/bundle.jsx index 8f0d7b8b1..27b13ecfe 100644 --- a/app/javascript/flavours/glitch/features/ui/components/bundle.js +++ b/app/javascript/flavours/glitch/features/ui/components/bundle.jsx @@ -15,7 +15,7 @@ class Bundle extends React.Component { onFetch: PropTypes.func, onFetchSuccess: PropTypes.func, onFetchFail: PropTypes.func, - } + }; static defaultProps = { loading: emptyComponent, @@ -24,14 +24,14 @@ class Bundle extends React.Component { onFetch: noop, onFetchSuccess: noop, onFetchFail: noop, - } + }; - static cache = {} + static cache = {}; state = { mod: undefined, forceRender: false, - } + }; componentWillMount() { this.load(this.props); @@ -84,7 +84,7 @@ class Bundle extends React.Component { this.setState({ mod: null }); onFetchFail(error); }); - } + }; render() { const { loading: Loading, error: Error, children, renderDelay } = this.props; diff --git a/app/javascript/flavours/glitch/features/ui/components/bundle_column_error.js b/app/javascript/flavours/glitch/features/ui/components/bundle_column_error.jsx index 7cbe1413d..eaabbc460 100644 --- a/app/javascript/flavours/glitch/features/ui/components/bundle_column_error.js +++ b/app/javascript/flavours/glitch/features/ui/components/bundle_column_error.jsx @@ -31,7 +31,7 @@ class GIF extends React.PureComponent { if (!animate) { this.setState({ hovering: true }); } - } + }; handleMouseLeave = () => { const { animate } = this.props; @@ -39,7 +39,7 @@ class GIF extends React.PureComponent { if (!animate) { this.setState({ hovering: false }); } - } + }; render () { const { src, staticSrc, className, animate } = this.props; @@ -75,7 +75,7 @@ class CopyButton extends React.PureComponent { navigator.clipboard.writeText(value); this.setState({ copied: true }); this.timeout = setTimeout(() => this.setState({ copied: false }), 700); - } + }; componentWillUnmount () { if (this.timeout) clearTimeout(this.timeout); @@ -92,7 +92,6 @@ class CopyButton extends React.PureComponent { } -export default @injectIntl class BundleColumnError extends React.PureComponent { static propTypes = { @@ -113,7 +112,7 @@ class BundleColumnError extends React.PureComponent { if (onRetry) { onRetry(); } - } + }; render () { const { errorType, multiColumn, stacktrace } = this.props; @@ -160,3 +159,5 @@ class BundleColumnError extends React.PureComponent { } } + +export default injectIntl(BundleColumnError); diff --git a/app/javascript/flavours/glitch/features/ui/components/bundle_modal_error.js b/app/javascript/flavours/glitch/features/ui/components/bundle_modal_error.jsx index 2c14a1e5c..b79105450 100644 --- a/app/javascript/flavours/glitch/features/ui/components/bundle_modal_error.js +++ b/app/javascript/flavours/glitch/features/ui/components/bundle_modal_error.jsx @@ -16,11 +16,11 @@ class BundleModalError extends React.Component { onRetry: PropTypes.func.isRequired, onClose: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, - } + }; handleRetry = () => { this.props.onRetry(); - } + }; render () { const { onClose, intl: { formatMessage } } = this.props; diff --git a/app/javascript/flavours/glitch/features/ui/components/column.js b/app/javascript/flavours/glitch/features/ui/components/column.jsx index e9c1e2f87..cc2abc43a 100644 --- a/app/javascript/flavours/glitch/features/ui/components/column.js +++ b/app/javascript/flavours/glitch/features/ui/components/column.jsx @@ -25,7 +25,7 @@ export default class Column extends React.PureComponent { } this._interruptScrollAnimation = scrollTop(scrollable); - } + }; scrollTop () { const scrollable = this.props.bindToDocument ? document.scrollingElement : this.node.querySelector('.scrollable'); @@ -42,11 +42,11 @@ export default class Column extends React.PureComponent { if (typeof this._interruptScrollAnimation !== 'undefined') { this._interruptScrollAnimation(); } - }, 200) + }, 200); setRef = (c) => { this.node = c; - } + }; render () { const { heading, icon, children, active, hideHeadingOnMobile, name } = this.props; diff --git a/app/javascript/flavours/glitch/features/ui/components/column_header.js b/app/javascript/flavours/glitch/features/ui/components/column_header.jsx index 528ff73a6..151476f8b 100644 --- a/app/javascript/flavours/glitch/features/ui/components/column_header.js +++ b/app/javascript/flavours/glitch/features/ui/components/column_header.jsx @@ -15,7 +15,7 @@ export default class ColumnHeader extends React.PureComponent { handleClick = () => { this.props.onClick(); - } + }; render () { const { icon, type, active, columnHeaderId } = this.props; diff --git a/app/javascript/flavours/glitch/features/ui/components/column_link.js b/app/javascript/flavours/glitch/features/ui/components/column_link.jsx index bd1c20b47..4fffa54f4 100644 --- a/app/javascript/flavours/glitch/features/ui/components/column_link.js +++ b/app/javascript/flavours/glitch/features/ui/components/column_link.jsx @@ -30,9 +30,9 @@ const ColumnLink = ({ icon, text, to, onClick, href, method, badge, transparent, e.preventDefault(); e.stopPropagation(); return onClick(e); - } + }; return ( - <a href='#' onClick={onClick && handleOnClick} className={className} title={text} {...other} tabIndex='0'> + <a href='#' onClick={onClick && handleOnClick} className={className} title={text} {...other} tabIndex={0}> {iconElement} <span>{text}</span> {badgeElement} diff --git a/app/javascript/flavours/glitch/features/ui/components/column_loading.js b/app/javascript/flavours/glitch/features/ui/components/column_loading.jsx index b07385397..b07385397 100644 --- a/app/javascript/flavours/glitch/features/ui/components/column_loading.js +++ b/app/javascript/flavours/glitch/features/ui/components/column_loading.jsx diff --git a/app/javascript/flavours/glitch/features/ui/components/column_subheading.js b/app/javascript/flavours/glitch/features/ui/components/column_subheading.jsx index 8160c4aa3..8160c4aa3 100644 --- a/app/javascript/flavours/glitch/features/ui/components/column_subheading.js +++ b/app/javascript/flavours/glitch/features/ui/components/column_subheading.jsx diff --git a/app/javascript/flavours/glitch/features/ui/components/columns_area.js b/app/javascript/flavours/glitch/features/ui/components/columns_area.jsx index 993a50796..3b3b0d58f 100644 --- a/app/javascript/flavours/glitch/features/ui/components/columns_area.js +++ b/app/javascript/flavours/glitch/features/ui/components/columns_area.jsx @@ -59,7 +59,7 @@ export default class ColumnsArea extends ImmutablePureComponent { state = { renderComposePanel: !(this.mediaQuery && this.mediaQuery.matches), - } + }; componentDidMount() { if (!this.props.singleColumn) { @@ -113,7 +113,7 @@ export default class ColumnsArea extends ImmutablePureComponent { handleLayoutChange = (e) => { this.setState({ renderComposePanel: !e.matches }); - } + }; handleWheel = () => { if (typeof this._interruptScrollAnimation !== 'function') { @@ -121,19 +121,19 @@ export default class ColumnsArea extends ImmutablePureComponent { } this._interruptScrollAnimation(); - } + }; setRef = (node) => { this.node = node; - } + }; renderLoading = columnId => () => { return columnId === 'COMPOSE' ? <DrawerLoading /> : <ColumnLoading multiColumn />; - } + }; renderError = (props) => { return <BundleColumnError multiColumn errorType='network' {...props} />; - } + }; render () { const { columns, children, singleColumn, navbarUnder, openSettings } = this.props; diff --git a/app/javascript/flavours/glitch/features/ui/components/compare_history_modal.js b/app/javascript/flavours/glitch/features/ui/components/compare_history_modal.jsx index baf7f25be..cc3a16d17 100644 --- a/app/javascript/flavours/glitch/features/ui/components/compare_history_modal.js +++ b/app/javascript/flavours/glitch/features/ui/components/compare_history_modal.jsx @@ -12,6 +12,7 @@ import RelativeTimestamp from 'flavours/glitch/components/relative_timestamp'; import MediaAttachments from 'flavours/glitch/components/media_attachments'; const mapStateToProps = (state, { statusId }) => ({ + language: state.getIn(['statuses', statusId, 'language']), versions: state.getIn(['history', statusId, 'items']), }); @@ -23,18 +24,18 @@ const mapDispatchToProps = dispatch => ({ }); -export default @connect(mapStateToProps, mapDispatchToProps) class CompareHistoryModal extends React.PureComponent { static propTypes = { onClose: PropTypes.func.isRequired, index: PropTypes.number.isRequired, statusId: PropTypes.string.isRequired, + language: PropTypes.string.isRequired, versions: ImmutablePropTypes.list.isRequired, }; render () { - const { index, versions, onClose } = this.props; + const { index, versions, language, onClose } = this.props; const currentVersion = versions.get(index); const emojiMap = currentVersion.get('emojis').reduce((obj, emoji) => { @@ -65,12 +66,12 @@ class CompareHistoryModal extends React.PureComponent { <div className='status__content'> {currentVersion.get('spoiler_text').length > 0 && ( <React.Fragment> - <div className='translate' dangerouslySetInnerHTML={spoilerContent} /> + <div className='translate' dangerouslySetInnerHTML={spoilerContent} lang={language} /> <hr /> </React.Fragment> )} - <div className='status__content__text status__content__text--visible translate' dangerouslySetInnerHTML={content} /> + <div className='status__content__text status__content__text--visible translate' dangerouslySetInnerHTML={content} lang={language} /> {!!currentVersion.get('poll') && ( <div className='poll'> @@ -82,6 +83,7 @@ class CompareHistoryModal extends React.PureComponent { <span className='poll__option__text translate' dangerouslySetInnerHTML={{ __html: emojify(escapeTextContentForBrowser(option.get('title')), emojiMap) }} + lang={language} /> </li> ))} @@ -89,7 +91,7 @@ class CompareHistoryModal extends React.PureComponent { </div> )} - <MediaAttachments status={currentVersion} /> + <MediaAttachments status={currentVersion} lang={language} /> </div> </div> </div> @@ -97,3 +99,5 @@ class CompareHistoryModal extends React.PureComponent { } } + +export default connect(mapStateToProps, mapDispatchToProps)(CompareHistoryModal); diff --git a/app/javascript/flavours/glitch/features/ui/components/compose_panel.js b/app/javascript/flavours/glitch/features/ui/components/compose_panel.jsx index dde252a61..1dedf92ca 100644 --- a/app/javascript/flavours/glitch/features/ui/components/compose_panel.js +++ b/app/javascript/flavours/glitch/features/ui/components/compose_panel.jsx @@ -8,7 +8,6 @@ import LinkFooter from './link_footer'; import ServerBanner from 'flavours/glitch/components/server_banner'; import { mountCompose, unmountCompose } from 'flavours/glitch/actions/compose'; -export default @connect() class ComposePanel extends React.PureComponent { static contextTypes = { @@ -55,4 +54,6 @@ class ComposePanel extends React.PureComponent { ); } -}; +} + +export default connect()(ComposePanel); diff --git a/app/javascript/flavours/glitch/features/ui/components/confirmation_modal.js b/app/javascript/flavours/glitch/features/ui/components/confirmation_modal.jsx index a665b9fb1..08f55c125 100644 --- a/app/javascript/flavours/glitch/features/ui/components/confirmation_modal.js +++ b/app/javascript/flavours/glitch/features/ui/components/confirmation_modal.jsx @@ -3,7 +3,6 @@ import PropTypes from 'prop-types'; import { injectIntl, FormattedMessage } from 'react-intl'; import Button from 'flavours/glitch/components/button'; -export default @injectIntl class ConfirmationModal extends React.PureComponent { static propTypes = { @@ -34,24 +33,24 @@ class ConfirmationModal extends React.PureComponent { if (this.props.onDoNotAsk && this.doNotAskCheckbox.checked) { this.props.onDoNotAsk(); } - } + }; handleSecondary = () => { this.props.onClose(); this.props.onSecondary(); - } + }; handleCancel = () => { this.props.onClose(); - } + }; setRef = (c) => { this.button = c; - } + }; setDoNotAskRef = (c) => { this.doNotAskCheckbox = c; - } + }; render () { const { message, confirm, secondary, onDoNotAsk } = this.props; @@ -86,3 +85,5 @@ class ConfirmationModal extends React.PureComponent { } } + +export default injectIntl(ConfirmationModal); diff --git a/app/javascript/flavours/glitch/features/ui/components/deprecated_settings_modal.js b/app/javascript/flavours/glitch/features/ui/components/deprecated_settings_modal.jsx index 68f04cb21..5a1c1ee1b 100644 --- a/app/javascript/flavours/glitch/features/ui/components/deprecated_settings_modal.js +++ b/app/javascript/flavours/glitch/features/ui/components/deprecated_settings_modal.jsx @@ -13,7 +13,6 @@ const messages = defineMessages({ user_setting_disable_swiping: { id: 'settings.swipe_to_change_columns', defaultMessage: 'Allow swiping to change columns (Mobile only)' }, }); -export default @injectIntl class DeprecatedSettingsModal extends React.PureComponent { static propTypes = { @@ -30,11 +29,11 @@ class DeprecatedSettingsModal extends React.PureComponent { handleClick = () => { this.props.onConfirm(); this.props.onClose(); - } + }; setRef = (c) => { this.button = c; - } + }; render () { const { settings, intl } = this.props; @@ -84,3 +83,5 @@ class DeprecatedSettingsModal extends React.PureComponent { } } + +export default injectIntl(DeprecatedSettingsModal); diff --git a/app/javascript/flavours/glitch/features/ui/components/disabled_account_banner.js b/app/javascript/flavours/glitch/features/ui/components/disabled_account_banner.jsx index c861d4d81..0ba79d648 100644 --- a/app/javascript/flavours/glitch/features/ui/components/disabled_account_banner.js +++ b/app/javascript/flavours/glitch/features/ui/components/disabled_account_banner.jsx @@ -28,8 +28,6 @@ const mapDispatchToProps = (dispatch, { intl }) => ({ }, }); -export default @injectIntl -@connect(mapStateToProps, mapDispatchToProps) class DisabledAccountBanner extends React.PureComponent { static propTypes = { @@ -46,7 +44,7 @@ class DisabledAccountBanner extends React.PureComponent { this.props.onLogout(); return false; - } + }; render () { const { disabledAcct, movedToAcct } = this.props; @@ -89,4 +87,6 @@ class DisabledAccountBanner extends React.PureComponent { ); } -}; +} + +export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(DisabledAccountBanner)); diff --git a/app/javascript/flavours/glitch/features/ui/components/doodle_modal.js b/app/javascript/flavours/glitch/features/ui/components/doodle_modal.jsx index 0d10204fc..162957ad8 100644 --- a/app/javascript/flavours/glitch/features/ui/components/doodle_modal.js +++ b/app/javascript/flavours/glitch/features/ui/components/doodle_modal.jsx @@ -145,7 +145,6 @@ const mapDispatchToProps = dispatch => ({ * - Ctrl + left mouse button: pick background * - Right mouse button: pick background */ -export default @connect(mapStateToProps, mapDispatchToProps) class DoodleModal extends ImmutablePureComponent { static propTypes = { @@ -279,7 +278,7 @@ class DoodleModal extends ImmutablePureComponent { this.swapped = false; window.addEventListener('keyup', this.handleKeyUp, false); window.addEventListener('keydown', this.handleKeyDown, false); - }; + } /** * Tear component down @@ -575,7 +574,7 @@ class DoodleModal extends ImmutablePureComponent { <div> <select aria-label='Canvas size' onInput={this.changeSize} defaultValue={this.size}> { Object.values(mapValues(DOODLE_SIZES, (val, k) => - <option key={k} value={k}>{val[2]}</option> + <option key={k} value={k}>{val[2]}</option>, )) } </select> </div> @@ -602,7 +601,7 @@ class DoodleModal extends ImmutablePureComponent { 'foreground': this.fg === c[0], 'background': this.bg === c[0], })} - /> + />, ) } </div> @@ -612,3 +611,5 @@ class DoodleModal extends ImmutablePureComponent { } } + +export default connect(mapStateToProps, mapDispatchToProps)(DoodleModal); diff --git a/app/javascript/flavours/glitch/features/ui/components/drawer_loading.js b/app/javascript/flavours/glitch/features/ui/components/drawer_loading.jsx index 08b0d2347..08b0d2347 100644 --- a/app/javascript/flavours/glitch/features/ui/components/drawer_loading.js +++ b/app/javascript/flavours/glitch/features/ui/components/drawer_loading.jsx diff --git a/app/javascript/flavours/glitch/features/ui/components/embed_modal.js b/app/javascript/flavours/glitch/features/ui/components/embed_modal.jsx index 624b68f7e..4f1173fd5 100644 --- a/app/javascript/flavours/glitch/features/ui/components/embed_modal.js +++ b/app/javascript/flavours/glitch/features/ui/components/embed_modal.jsx @@ -9,7 +9,6 @@ const messages = defineMessages({ close: { id: 'lightbox.close', defaultMessage: 'Close' }, }); -export default @injectIntl class EmbedModal extends ImmutablePureComponent { static propTypes = { @@ -17,7 +16,7 @@ class EmbedModal extends ImmutablePureComponent { onClose: PropTypes.func.isRequired, onError: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, - } + }; state = { loading: false, @@ -48,11 +47,11 @@ class EmbedModal extends ImmutablePureComponent { setIframeRef = c => { this.iframe = c; - } + }; handleTextareaClick = (e) => { e.target.select(); - } + }; render () { const { intl, onClose } = this.props; @@ -95,3 +94,5 @@ class EmbedModal extends ImmutablePureComponent { } } + +export default injectIntl(EmbedModal); diff --git a/app/javascript/flavours/glitch/features/ui/components/favourite_modal.js b/app/javascript/flavours/glitch/features/ui/components/favourite_modal.jsx index d7f671d58..fa6f11792 100644 --- a/app/javascript/flavours/glitch/features/ui/components/favourite_modal.js +++ b/app/javascript/flavours/glitch/features/ui/components/favourite_modal.jsx @@ -17,7 +17,6 @@ const messages = defineMessages({ favourite: { id: 'status.favourite', defaultMessage: 'Favourite' }, }); -export default @injectIntl class FavouriteModal extends ImmutablePureComponent { static contextTypes = { @@ -38,21 +37,21 @@ class FavouriteModal extends ImmutablePureComponent { handleFavourite = () => { this.props.onFavourite(this.props.status); this.props.onClose(); - } + }; handleAccountClick = (e) => { if (e.button === 0) { e.preventDefault(); this.props.onClose(); - let state = {...this.context.router.history.location.state}; + let state = { ...this.context.router.history.location.state }; state.mastodonBackSteps = (state.mastodonBackSteps || 0) + 1; this.context.router.history.push(`/@${this.props.status.getIn(['account', 'acct'])}`, state); } - } + }; setRef = (c) => { this.button = c; - } + }; render () { const { status, intl } = this.props; @@ -99,3 +98,5 @@ class FavouriteModal extends ImmutablePureComponent { } } + +export default injectIntl(FavouriteModal); diff --git a/app/javascript/flavours/glitch/features/ui/components/filter_modal.js b/app/javascript/flavours/glitch/features/ui/components/filter_modal.jsx index d2482e733..2d49312e5 100644 --- a/app/javascript/flavours/glitch/features/ui/components/filter_modal.js +++ b/app/javascript/flavours/glitch/features/ui/components/filter_modal.jsx @@ -13,8 +13,6 @@ const messages = defineMessages({ close: { id: 'lightbox.close', defaultMessage: 'Close' }, }); -export default @connect(undefined) -@injectIntl class FilterModal extends ImmutablePureComponent { static propTypes = { @@ -132,3 +130,5 @@ class FilterModal extends ImmutablePureComponent { } } + +export default connect(injectIntl(FilterModal)); diff --git a/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.js b/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.jsx index 0dd07fb76..a5637d31c 100644 --- a/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.js +++ b/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.jsx @@ -5,11 +5,10 @@ import ImmutablePureComponent from 'react-immutable-pure-component'; import { connect } from 'react-redux'; import classNames from 'classnames'; import { changeUploadCompose, uploadThumbnail, onChangeMediaDescription, onChangeMediaFocus } from 'flavours/glitch/actions/compose'; -import { getPointerPosition } from 'flavours/glitch/features/video'; +import Video, { getPointerPosition } from 'flavours/glitch/features/video'; import { FormattedMessage, defineMessages, injectIntl } from 'react-intl'; import IconButton from 'flavours/glitch/components/icon_button'; import Button from 'flavours/glitch/components/button'; -import Video from 'flavours/glitch/features/video'; import Audio from 'flavours/glitch/features/audio'; import Textarea from 'react-textarea-autosize'; import UploadProgress from 'flavours/glitch/features/compose/components/upload_progress'; @@ -39,6 +38,7 @@ const mapStateToProps = (state, { id }) => ({ account: state.getIn(['accounts', me]), isUploadingThumbnail: state.getIn(['compose', 'isUploadingThumbnail']), description: state.getIn(['compose', 'media_modal', 'description']), + lang: state.getIn(['compose', 'language']), focusX: state.getIn(['compose', 'media_modal', 'focusX']), focusY: state.getIn(['compose', 'media_modal', 'focusY']), dirty: state.getIn(['compose', 'media_modal', 'dirty']), @@ -99,8 +99,6 @@ class ImageLoader extends React.PureComponent { } -export default @connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true }) -@(component => injectIntl(component, { withRef: true })) class FocalPointModal extends ImmutablePureComponent { static propTypes = { @@ -134,7 +132,7 @@ class FocalPointModal extends ImmutablePureComponent { this.updatePosition(e); this.setState({ dragging: true }); - } + }; handleTouchStart = e => { document.addEventListener('touchmove', this.handleMouseMove); @@ -142,25 +140,25 @@ class FocalPointModal extends ImmutablePureComponent { this.updatePosition(e); this.setState({ dragging: true }); - } + }; handleMouseMove = e => { this.updatePosition(e); - } + }; handleMouseUp = () => { document.removeEventListener('mousemove', this.handleMouseMove); document.removeEventListener('mouseup', this.handleMouseUp); this.setState({ dragging: false }); - } + }; handleTouchEnd = () => { document.removeEventListener('touchmove', this.handleMouseMove); document.removeEventListener('touchend', this.handleTouchEnd); this.setState({ dragging: false }); - } + }; updatePosition = e => { const { x, y } = getPointerPosition(this.node, e); @@ -168,11 +166,11 @@ class FocalPointModal extends ImmutablePureComponent { const focusY = (y - .5) * -2; this.props.onChangeFocus(focusX, focusY); - } + }; handleChange = e => { this.props.onChangeDescription(e.target.value); - } + }; handleKeyDown = (e) => { if (e.keyCode === 13 && (e.ctrlKey || e.metaKey)) { @@ -181,11 +179,11 @@ class FocalPointModal extends ImmutablePureComponent { this.props.onChangeDescription(e.target.value); this.handleSubmit(); } - } + }; handleSubmit = () => { this.props.onSave(this.props.description, this.props.focusX, this.props.focusY); - } + }; getCloseConfirmationMessage = () => { const { intl, dirty } = this.props; @@ -198,15 +196,15 @@ class FocalPointModal extends ImmutablePureComponent { } else { return null; } - } + }; setRef = c => { this.node = c; - } + }; handleTextDetection = () => { this._detectText(); - } + }; _detectText = (refreshCache = false) => { const { media } = this.props; @@ -257,24 +255,24 @@ class FocalPointModal extends ImmutablePureComponent { console.error(e); this.setState({ detecting: false }); }); - } + }; handleThumbnailChange = e => { if (e.target.files.length > 0) { this.props.onSelectThumbnail(e.target.files); } - } + }; setFileInputRef = c => { this.fileInput = c; - } + }; handleFileInputClick = () => { this.fileInput.click(); - } + }; render () { - const { media, intl, account, onClose, isUploadingThumbnail, description, focusX, focusY, dirty, is_changing_upload } = this.props; + const { media, intl, account, onClose, isUploadingThumbnail, description, lang, focusX, focusY, dirty, is_changing_upload } = this.props; const { dragging, detecting, progress, ocrStatus } = this.state; const x = (focusX / 2) + .5; const y = (focusY / -2) + .5; @@ -320,7 +318,7 @@ class FocalPointModal extends ImmutablePureComponent { <React.Fragment> <label className='setting-text-label' htmlFor='upload-modal__thumbnail'><FormattedMessage id='upload_form.thumbnail' defaultMessage='Change thumbnail' /></label> - <Button disabled={isUploadingThumbnail} text={intl.formatMessage(messages.chooseImage)} onClick={this.handleFileInputClick} /> + <Button disabled={isUploadingThumbnail || !media.get('unattached')} text={intl.formatMessage(messages.chooseImage)} onClick={this.handleFileInputClick} /> <label> <span style={{ display: 'none' }}>{intl.formatMessage(messages.chooseImage)}</span> @@ -349,6 +347,7 @@ class FocalPointModal extends ImmutablePureComponent { id='upload-modal__description' className='setting-text light' value={detecting ? '…' : description} + lang={lang} onChange={this.handleChange} onKeyDown={this.handleKeyDown} disabled={detecting || is_changing_upload} @@ -415,3 +414,7 @@ class FocalPointModal extends ImmutablePureComponent { } } + +export default connect(mapStateToProps, mapDispatchToProps, null, { + forwardRef: true, +})(injectIntl(FocalPointModal, { withRef: true })); diff --git a/app/javascript/flavours/glitch/features/ui/components/follow_requests_column_link.js b/app/javascript/flavours/glitch/features/ui/components/follow_requests_column_link.jsx index 301392a52..f3e3b78ed 100644 --- a/app/javascript/flavours/glitch/features/ui/components/follow_requests_column_link.js +++ b/app/javascript/flavours/glitch/features/ui/components/follow_requests_column_link.jsx @@ -15,8 +15,6 @@ const mapStateToProps = state => ({ count: state.getIn(['user_lists', 'follow_requests', 'items'], ImmutableList()).size, }); -export default @injectIntl -@connect(mapStateToProps) class FollowRequestsColumnLink extends React.Component { static propTypes = { @@ -49,3 +47,5 @@ class FollowRequestsColumnLink extends React.Component { } } + +export default injectIntl(connect(mapStateToProps)(FollowRequestsColumnLink)); diff --git a/app/javascript/flavours/glitch/features/ui/components/header.js b/app/javascript/flavours/glitch/features/ui/components/header.jsx index d9ad94961..f7bab2487 100644 --- a/app/javascript/flavours/glitch/features/ui/components/header.js +++ b/app/javascript/flavours/glitch/features/ui/components/header.jsx @@ -23,8 +23,6 @@ const mapDispatchToProps = (dispatch) => ({ }, }); -export default @connect(null, mapDispatchToProps) -@withRouter class Header extends React.PureComponent { static contextTypes = { @@ -86,3 +84,5 @@ class Header extends React.PureComponent { } } + +export default withRouter(connect(null, mapDispatchToProps)(Header)); diff --git a/app/javascript/flavours/glitch/features/ui/components/image_loader.js b/app/javascript/flavours/glitch/features/ui/components/image_loader.jsx index dfa0efe49..9093eab28 100644 --- a/app/javascript/flavours/glitch/features/ui/components/image_loader.js +++ b/app/javascript/flavours/glitch/features/ui/components/image_loader.jsx @@ -8,16 +8,18 @@ export default class ImageLoader extends PureComponent { static propTypes = { alt: PropTypes.string, + lang: PropTypes.string, src: PropTypes.string.isRequired, previewSrc: PropTypes.string, width: PropTypes.number, height: PropTypes.number, onClick: PropTypes.func, zoomButtonHidden: PropTypes.bool, - } + }; static defaultProps = { alt: '', + lang: '', width: null, height: null, }; @@ -26,7 +28,7 @@ export default class ImageLoader extends PureComponent { loading: true, error: false, width: null, - } + }; removers = []; canvas = null; @@ -86,7 +88,7 @@ export default class ImageLoader extends PureComponent { image.addEventListener('load', handleLoad); image.src = previewSrc; this.removers.push(removeEventListeners); - }) + }); clearPreviewCanvas () { const { width, height } = this.canvas; @@ -126,10 +128,10 @@ export default class ImageLoader extends PureComponent { setCanvasRef = c => { this.canvas = c; if (c) this.setState({ width: c.offsetWidth }); - } + }; render () { - const { alt, src, width, height, onClick } = this.props; + const { alt, lang, src, width, height, onClick } = this.props; const { loading } = this.state; const className = classNames('image-loader', { @@ -154,6 +156,7 @@ export default class ImageLoader extends PureComponent { ) : ( <ZoomableImage alt={alt} + lang={lang} src={src} onClick={onClick} width={width} diff --git a/app/javascript/flavours/glitch/features/ui/components/image_modal.js b/app/javascript/flavours/glitch/features/ui/components/image_modal.jsx index a792b9be7..5198b8809 100644 --- a/app/javascript/flavours/glitch/features/ui/components/image_modal.js +++ b/app/javascript/flavours/glitch/features/ui/components/image_modal.jsx @@ -9,7 +9,6 @@ const messages = defineMessages({ close: { id: 'lightbox.close', defaultMessage: 'Close' }, }); -export default @injectIntl class ImageModal extends React.PureComponent { static propTypes = { @@ -57,3 +56,5 @@ class ImageModal extends React.PureComponent { } } + +export default injectIntl(ImageModal); diff --git a/app/javascript/flavours/glitch/features/ui/components/link_footer.js b/app/javascript/flavours/glitch/features/ui/components/link_footer.jsx index ac0c78674..e813a72b0 100644 --- a/app/javascript/flavours/glitch/features/ui/components/link_footer.js +++ b/app/javascript/flavours/glitch/features/ui/components/link_footer.jsx @@ -3,7 +3,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { FormattedMessage, defineMessages, injectIntl } from 'react-intl'; import { Link } from 'react-router-dom'; -import { domain, version, source_url, profile_directory as profileDirectory } from 'flavours/glitch/initial_state'; +import { domain, version, source_url, statusPageUrl, profile_directory as profileDirectory } from 'flavours/glitch/initial_state'; import { logOut } from 'flavours/glitch/utils/log_out'; import { openModal } from 'flavours/glitch/actions/modal'; import { PERMISSION_INVITE_USERS } from 'flavours/glitch/permissions'; @@ -24,8 +24,6 @@ const mapDispatchToProps = (dispatch, { intl }) => ({ }, }); -export default @injectIntl -@connect(null, mapDispatchToProps) class LinkFooter extends React.PureComponent { static contextTypes = { @@ -44,7 +42,7 @@ class LinkFooter extends React.PureComponent { this.props.onLogout(); return false; - } + }; render () { const { signedIn, permissions } = this.context.identity; @@ -59,21 +57,27 @@ class LinkFooter extends React.PureComponent { <p> <strong>{domain}</strong>: {' '} - <Link key='about' to='/about'><FormattedMessage id='footer.about' defaultMessage='About' /></Link> + <Link to='/about'><FormattedMessage id='footer.about' defaultMessage='About' /></Link> + {statusPageUrl && ( + <> + {DividingCircle} + <a href={statusPageUrl} target='_blank' rel='noopener'><FormattedMessage id='footer.status' defaultMessage='Status' /></a> + </> + )} {canInvite && ( <> {DividingCircle} - <a key='invites' href='/invites' target='_blank'><FormattedMessage id='footer.invite' defaultMessage='Invite people' /></a> + <a href='/invites' target='_blank'><FormattedMessage id='footer.invite' defaultMessage='Invite people' /></a> </> )} {canProfileDirectory && ( <> {DividingCircle} - <Link key='directory' to='/directory'><FormattedMessage id='footer.directory' defaultMessage='Profiles directory' /></Link> + <Link to='/directory'><FormattedMessage id='footer.directory' defaultMessage='Profiles directory' /></Link> </> )} {DividingCircle} - <Link key='privacy-policy' to='/privacy-policy'><FormattedMessage id='footer.privacy_policy' defaultMessage='Privacy policy' /></Link> + <Link to='/privacy-policy'><FormattedMessage id='footer.privacy_policy' defaultMessage='Privacy policy' /></Link> </p> <p> @@ -93,4 +97,6 @@ class LinkFooter extends React.PureComponent { ); } -}; +} + +export default injectIntl(connect(null, mapDispatchToProps)(LinkFooter)); diff --git a/app/javascript/flavours/glitch/features/ui/components/list_panel.js b/app/javascript/flavours/glitch/features/ui/components/list_panel.jsx index dff830065..489f3a1b4 100644 --- a/app/javascript/flavours/glitch/features/ui/components/list_panel.js +++ b/app/javascript/flavours/glitch/features/ui/components/list_panel.jsx @@ -20,8 +20,6 @@ const mapStateToProps = state => ({ lists: getOrderedLists(state), }); -export default @withRouter -@connect(mapStateToProps) class ListPanel extends ImmutablePureComponent { static propTypes = { @@ -53,3 +51,5 @@ class ListPanel extends ImmutablePureComponent { } } + +export default withRouter(connect(mapStateToProps)(ListPanel)); diff --git a/app/javascript/flavours/glitch/features/ui/components/media_modal.js b/app/javascript/flavours/glitch/features/ui/components/media_modal.jsx index ec3af857d..fd2bd43cf 100644 --- a/app/javascript/flavours/glitch/features/ui/components/media_modal.js +++ b/app/javascript/flavours/glitch/features/ui/components/media_modal.jsx @@ -3,6 +3,7 @@ import ReactSwipeableViews from 'react-swipeable-views'; import ImmutablePropTypes from 'react-immutable-proptypes'; import PropTypes from 'prop-types'; import Video from 'flavours/glitch/features/video'; +import { connect } from 'react-redux'; import classNames from 'classnames'; import { defineMessages, injectIntl } from 'react-intl'; import IconButton from 'flavours/glitch/components/icon_button'; @@ -20,7 +21,10 @@ const messages = defineMessages({ next: { id: 'lightbox.next', defaultMessage: 'Next' }, }); -export default @injectIntl +const mapStateToProps = (state, { statusId }) => ({ + language: state.getIn(['statuses', statusId, 'language']), +}); + class MediaModal extends ImmutablePureComponent { static contextTypes = { @@ -47,27 +51,27 @@ class MediaModal extends ImmutablePureComponent { handleSwipe = (index) => { this.setState({ index: index % this.props.media.size }); - } + }; handleTransitionEnd = () => { this.setState({ zoomButtonHidden: false, }); - } + }; handleNextClick = () => { this.setState({ index: (this.getIndex() + 1) % this.props.media.size, zoomButtonHidden: true, }); - } + }; handlePrevClick = () => { this.setState({ index: (this.props.media.size + this.getIndex() - 1) % this.props.media.size, zoomButtonHidden: true, }); - } + }; handleChangeIndex = (e) => { const index = Number(e.currentTarget.getAttribute('data-index')); @@ -76,7 +80,7 @@ class MediaModal extends ImmutablePureComponent { index: index % this.props.media.size, zoomButtonHidden: true, }); - } + }; handleKeyDown = (e) => { switch(e.key) { @@ -91,7 +95,7 @@ class MediaModal extends ImmutablePureComponent { e.stopPropagation(); break; } - } + }; componentDidMount () { window.addEventListener('keydown', this.handleKeyDown, false); @@ -131,13 +135,13 @@ class MediaModal extends ImmutablePureComponent { } render () { - const { media, statusId, intl, onClose } = this.props; + const { media, language, statusId, intl, onClose } = this.props; const { navigationHidden } = this.state; const index = this.getIndex(); - const leftNav = media.size > 1 && <button tabIndex='0' className='media-modal__nav media-modal__nav--left' onClick={this.handlePrevClick} aria-label={intl.formatMessage(messages.previous)}><Icon id='chevron-left' fixedWidth /></button>; - const rightNav = media.size > 1 && <button tabIndex='0' className='media-modal__nav media-modal__nav--right' onClick={this.handleNextClick} aria-label={intl.formatMessage(messages.next)}><Icon id='chevron-right' fixedWidth /></button>; + const leftNav = media.size > 1 && <button tabIndex={0} className='media-modal__nav media-modal__nav--left' onClick={this.handlePrevClick} aria-label={intl.formatMessage(messages.previous)}><Icon id='chevron-left' fixedWidth /></button>; + const rightNav = media.size > 1 && <button tabIndex={0} className='media-modal__nav media-modal__nav--right' onClick={this.handleNextClick} aria-label={intl.formatMessage(messages.next)}><Icon id='chevron-right' fixedWidth /></button>; const content = media.map((image) => { const width = image.getIn(['meta', 'original', 'width']) || null; @@ -151,6 +155,7 @@ class MediaModal extends ImmutablePureComponent { width={width} height={height} alt={image.get('description')} + lang={language} key={image.get('url')} onClick={this.toggleNavigation} zoomButtonHidden={this.state.zoomButtonHidden} @@ -173,6 +178,7 @@ class MediaModal extends ImmutablePureComponent { onCloseVideo={onClose} detailed alt={image.get('description')} + lang={language} key={image.get('url')} /> ); @@ -184,6 +190,7 @@ class MediaModal extends ImmutablePureComponent { height={height} key={image.get('preview_url')} alt={image.get('description')} + lang={language} onClick={this.toggleNavigation} /> ); @@ -250,3 +257,5 @@ class MediaModal extends ImmutablePureComponent { } } + +export default connect(mapStateToProps, null, null, { forwardRef: true })(injectIntl(MediaModal)); diff --git a/app/javascript/flavours/glitch/features/ui/components/modal_loading.js b/app/javascript/flavours/glitch/features/ui/components/modal_loading.jsx index b1c322154..b1c322154 100644 --- a/app/javascript/flavours/glitch/features/ui/components/modal_loading.js +++ b/app/javascript/flavours/glitch/features/ui/components/modal_loading.jsx diff --git a/app/javascript/flavours/glitch/features/ui/components/modal_root.js b/app/javascript/flavours/glitch/features/ui/components/modal_root.jsx index 379f57cbb..c133f2b6a 100644 --- a/app/javascript/flavours/glitch/features/ui/components/modal_root.js +++ b/app/javascript/flavours/glitch/features/ui/components/modal_root.jsx @@ -76,28 +76,28 @@ export default class ModalRoot extends React.PureComponent { }; componentDidUpdate () { - if (!!this.props.type) { + if (this.props.type) { document.body.classList.add('with-modals--active'); document.documentElement.style.marginRight = `${getScrollbarWidth()}px`; } else { document.body.classList.remove('with-modals--active'); - document.documentElement.style.marginRight = 0; + document.documentElement.style.marginRight = '0'; } } setBackgroundColor = color => { this.setState({ backgroundColor: color }); - } + }; renderLoading = modalId => () => { return ['MEDIA', 'VIDEO', 'BOOST', 'FAVOURITE', 'DOODLE', 'CONFIRM', 'ACTIONS'].indexOf(modalId) === -1 ? <ModalLoading /> : null; - } + }; renderError = (props) => { const { onClose } = this.props; return <BundleModalError {...props} onClose={onClose} />; - } + }; handleClose = (ignoreFocus = false) => { const { onClose } = this.props; @@ -110,14 +110,14 @@ export default class ModalRoot extends React.PureComponent { // This would be much smoother with react-intl 3+ and `forwardRef`. } onClose(message, ignoreFocus); - } + }; setModalRef = (c) => { this._modal = c; - } + }; // prevent closing of modal when clicking the overlay - noop = () => {} + noop = () => {}; render () { const { type, props, ignoreFocus } = this.props; diff --git a/app/javascript/flavours/glitch/features/ui/components/mute_modal.js b/app/javascript/flavours/glitch/features/ui/components/mute_modal.jsx index 7d25db316..a74ebfb05 100644 --- a/app/javascript/flavours/glitch/features/ui/components/mute_modal.js +++ b/app/javascript/flavours/glitch/features/ui/components/mute_modal.jsx @@ -43,8 +43,6 @@ const mapDispatchToProps = dispatch => { }; }; -export default @connect(mapStateToProps, mapDispatchToProps) -@injectIntl class MuteModal extends React.PureComponent { static propTypes = { @@ -65,23 +63,23 @@ class MuteModal extends React.PureComponent { handleClick = () => { this.props.onClose(); this.props.onConfirm(this.props.account, this.props.notifications, this.props.muteDuration); - } + }; handleCancel = () => { this.props.onClose(); - } + }; setRef = (c) => { this.button = c; - } + }; toggleNotifications = () => { this.props.onToggleNotifications(); - } + }; changeMuteDuration = (e) => { this.props.onChangeMuteDuration(e); - } + }; render () { const { account, notifications, muteDuration, intl } = this.props; @@ -138,3 +136,5 @@ class MuteModal extends React.PureComponent { } } + +export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(MuteModal)); diff --git a/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js b/app/javascript/flavours/glitch/features/ui/components/navigation_panel.jsx index 3b46c6eec..6e8744ef0 100644 --- a/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js +++ b/app/javascript/flavours/glitch/features/ui/components/navigation_panel.jsx @@ -29,7 +29,6 @@ const messages = defineMessages({ app_settings: { id: 'navigation_bar.app_settings', defaultMessage: 'App settings' }, }); -export default @injectIntl class NavigationPanel extends React.Component { static contextTypes = { @@ -78,8 +77,8 @@ class NavigationPanel extends React.Component { {signedIn && ( <React.Fragment> <ColumnLink transparent to='/conversations' icon='at' text={intl.formatMessage(messages.direct)} /> - <ColumnLink transparent to='/favourites' icon='star' text={intl.formatMessage(messages.favourites)} /> <ColumnLink transparent to='/bookmarks' icon='bookmark' text={intl.formatMessage(messages.bookmarks)} /> + <ColumnLink transparent to='/favourites' icon='star' text={intl.formatMessage(messages.favourites)} /> <ColumnLink transparent to='/lists' icon='list-ul' text={intl.formatMessage(messages.lists)} /> <ListPanel /> @@ -102,3 +101,5 @@ class NavigationPanel extends React.Component { } } + +export default injectIntl(NavigationPanel); diff --git a/app/javascript/flavours/glitch/features/ui/components/onboarding_modal.js b/app/javascript/flavours/glitch/features/ui/components/onboarding_modal.jsx index 5ca003ee9..7c9105c58 100644 --- a/app/javascript/flavours/glitch/features/ui/components/onboarding_modal.js +++ b/app/javascript/flavours/glitch/features/ui/components/onboarding_modal.jsx @@ -49,7 +49,7 @@ const PageTwo = ({ intl, myAccount }) => ( privacy='public' text='Awoo! #introductions' spoilerText='' - suggestions={ [] } + suggestions={[]} /> </div> </div> @@ -171,8 +171,6 @@ const mapStateToProps = state => ({ domain: state.getIn(['meta', 'domain']), }); -export default @connect(mapStateToProps) -@injectIntl class OnboardingModal extends React.PureComponent { static propTypes = { @@ -196,7 +194,7 @@ class OnboardingModal extends React.PureComponent { <PageFour domain={domain} intl={intl} />, <PageSix admin={admin} domain={domain} />, ]; - }; + } componentDidMount() { window.addEventListener('keyup', this.handleKeyUp); @@ -209,30 +207,30 @@ class OnboardingModal extends React.PureComponent { handleSkip = (e) => { e.preventDefault(); this.props.onClose(); - } + }; handleDot = (e) => { const i = Number(e.currentTarget.getAttribute('data-index')); e.preventDefault(); this.setState({ currentIndex: i }); - } + }; handlePrev = () => { this.setState(({ currentIndex }) => ({ currentIndex: Math.max(0, currentIndex - 1), })); - } + }; handleNext = () => { const { pages } = this; this.setState(({ currentIndex }) => ({ currentIndex: Math.min(currentIndex + 1, pages.length - 1), })); - } + }; handleSwipe = (index) => { this.setState({ currentIndex: index }); - } + }; handleKeyUp = ({ key }) => { switch (key) { @@ -243,11 +241,11 @@ class OnboardingModal extends React.PureComponent { this.handleNext(); break; } - } + }; handleClose = () => { this.props.onClose(); - } + }; render () { const { pages } = this; @@ -302,7 +300,7 @@ class OnboardingModal extends React.PureComponent { <div key={`dot-${i}`} role='button' - tabIndex='0' + tabIndex={0} data-index={i} onClick={this.handleDot} className={className} @@ -320,3 +318,5 @@ class OnboardingModal extends React.PureComponent { } } + +export default connect(mapStateToProps)(injectIntl(OnboardingModal)); diff --git a/app/javascript/flavours/glitch/features/ui/components/report_modal.js b/app/javascript/flavours/glitch/features/ui/components/report_modal.jsx index 7b6a4a784..79b495877 100644 --- a/app/javascript/flavours/glitch/features/ui/components/report_modal.js +++ b/app/javascript/flavours/glitch/features/ui/components/report_modal.jsx @@ -31,8 +31,6 @@ const makeMapStateToProps = () => { return mapStateToProps; }; -export default @connect(makeMapStateToProps) -@injectIntl class ReportModal extends ImmutablePureComponent { static propTypes = { @@ -96,7 +94,7 @@ class ReportModal extends ImmutablePureComponent { } else { this.setState({ selectedRuleIds: selectedRuleIds.remove(ruleId) }); } - } + }; handleChangeCategory = category => { this.setState({ category }); @@ -219,3 +217,5 @@ class ReportModal extends ImmutablePureComponent { } } + +export default connect(makeMapStateToProps)(injectIntl(ReportModal)); diff --git a/app/javascript/flavours/glitch/features/ui/components/sign_in_banner.js b/app/javascript/flavours/glitch/features/ui/components/sign_in_banner.jsx index e8023803f..c0d62aca0 100644 --- a/app/javascript/flavours/glitch/features/ui/components/sign_in_banner.js +++ b/app/javascript/flavours/glitch/features/ui/components/sign_in_banner.jsx @@ -30,7 +30,7 @@ const SignInBanner = () => { return ( <div className='sign-in-banner'> - <p><FormattedMessage id='sign_in_banner.text' defaultMessage='Sign in to follow profiles or hashtags, favourite, share and reply to posts, or interact from your account on a different server.' /></p> + <p><FormattedMessage id='sign_in_banner.text' defaultMessage='Sign in to follow profiles or hashtags, favourite, share and reply to posts. You can also interact from your account on a different server.' /></p> <a href='/auth/sign_in' className='button button--block'><FormattedMessage id='sign_in_banner.sign_in' defaultMessage='Sign in' /></a> {signupButton} </div> diff --git a/app/javascript/flavours/glitch/features/ui/components/upload_area.js b/app/javascript/flavours/glitch/features/ui/components/upload_area.jsx index 6958ba9df..0e07b67f8 100644 --- a/app/javascript/flavours/glitch/features/ui/components/upload_area.js +++ b/app/javascript/flavours/glitch/features/ui/components/upload_area.jsx @@ -22,7 +22,7 @@ export default class UploadArea extends React.PureComponent { break; } } - } + }; componentDidMount () { window.addEventListener('keyup', this.handleKeyUp, false); diff --git a/app/javascript/flavours/glitch/features/ui/components/video_modal.js b/app/javascript/flavours/glitch/features/ui/components/video_modal.jsx index 90be11e4b..4cde0ebad 100644 --- a/app/javascript/flavours/glitch/features/ui/components/video_modal.js +++ b/app/javascript/flavours/glitch/features/ui/components/video_modal.jsx @@ -2,11 +2,16 @@ import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import PropTypes from 'prop-types'; import Video from 'flavours/glitch/features/video'; +import { connect } from 'react-redux'; import ImmutablePureComponent from 'react-immutable-pure-component'; import Footer from 'flavours/glitch/features/picture_in_picture/components/footer'; import { getAverageFromBlurhash } from 'flavours/glitch/blurhash'; -export default class VideoModal extends ImmutablePureComponent { +const mapStateToProps = (state, { statusId }) => ({ + language: state.getIn(['statuses', statusId, 'language']), +}); + +class VideoModal extends ImmutablePureComponent { static contextTypes = { router: PropTypes.object, @@ -15,6 +20,7 @@ export default class VideoModal extends ImmutablePureComponent { static propTypes = { media: ImmutablePropTypes.map.isRequired, statusId: PropTypes.string, + language: PropTypes.string, options: PropTypes.shape({ startTime: PropTypes.number, autoPlay: PropTypes.bool, @@ -35,7 +41,7 @@ export default class VideoModal extends ImmutablePureComponent { } render () { - const { media, statusId, onClose } = this.props; + const { media, statusId, language, onClose } = this.props; const options = this.props.options || {}; return ( @@ -53,6 +59,7 @@ export default class VideoModal extends ImmutablePureComponent { autoFocus detailed alt={media.get('description')} + lang={language} /> </div> @@ -64,3 +71,5 @@ export default class VideoModal extends ImmutablePureComponent { } } + +export default connect(mapStateToProps, null, null, { forwardRef: true })(VideoModal); diff --git a/app/javascript/flavours/glitch/features/ui/components/zoomable_image.js b/app/javascript/flavours/glitch/features/ui/components/zoomable_image.jsx index caeeced64..47401cfe4 100644 --- a/app/javascript/flavours/glitch/features/ui/components/zoomable_image.js +++ b/app/javascript/flavours/glitch/features/ui/components/zoomable_image.jsx @@ -91,21 +91,22 @@ const normalizeWheel = event => { }; }; -export default @injectIntl class ZoomableImage extends React.PureComponent { static propTypes = { alt: PropTypes.string, + lang: PropTypes.string, src: PropTypes.string.isRequired, width: PropTypes.number, height: PropTypes.number, onClick: PropTypes.func, zoomButtonHidden: PropTypes.bool, intl: PropTypes.object.isRequired, - } + }; static defaultProps = { alt: '', + lang: '', width: null, height: null, }; @@ -132,7 +133,7 @@ class ZoomableImage extends React.PureComponent { dragged: false, lockScroll: { x: 0, y: 0 }, lockTranslate: { x: 0, y: 0 }, - } + }; removers = []; container = null; @@ -212,7 +213,7 @@ class ZoomableImage extends React.PureComponent { // lock horizontal scroll this.container.scrollLeft = Math.max(this.container.scrollLeft + event.pixelX, this.state.lockScroll.x); - } + }; mouseDownHandler = e => { this.container.style.cursor = 'grabbing'; @@ -228,7 +229,7 @@ class ZoomableImage extends React.PureComponent { this.image.addEventListener('mousemove', this.mouseMoveHandler); this.image.addEventListener('mouseup', this.mouseUpHandler); - } + }; mouseMoveHandler = e => { const dx = e.clientX - this.state.dragPosition.x; @@ -238,7 +239,7 @@ class ZoomableImage extends React.PureComponent { this.container.scrollTop = Math.max(this.state.dragPosition.top - dy, this.state.lockScroll.y); this.setState({ dragged: true }); - } + }; mouseUpHandler = () => { this.container.style.cursor = 'grab'; @@ -246,13 +247,13 @@ class ZoomableImage extends React.PureComponent { this.image.removeEventListener('mousemove', this.mouseMoveHandler); this.image.removeEventListener('mouseup', this.mouseUpHandler); - } + }; handleTouchStart = e => { if (e.touches.length !== 2) return; this.lastDistance = getDistance(...e.touches); - } + }; handleTouchMove = e => { const { scrollTop, scrollHeight, clientHeight } = this.container; @@ -275,7 +276,7 @@ class ZoomableImage extends React.PureComponent { this.lastMidpoint = midpoint; this.lastDistance = distance; - } + }; zoom(nextScale, midpoint) { const { scale, zoomMatrix } = this.state; @@ -314,11 +315,11 @@ class ZoomableImage extends React.PureComponent { const handler = this.props.onClick; if (handler) handler(); this.setState({ navigationHidden: !this.state.navigationHidden }); - } + }; handleMouseDown = e => { e.preventDefault(); - } + }; initZoomMatrix = () => { const { width, height } = this.props; @@ -350,7 +351,7 @@ class ZoomableImage extends React.PureComponent { translateY: translateY, }, }); - } + }; handleZoomClick = e => { e.preventDefault(); @@ -392,18 +393,18 @@ class ZoomableImage extends React.PureComponent { this.container.style.cursor = 'grab'; this.container.style.removeProperty('user-select'); - } + }; setContainerRef = c => { this.container = c; - } + }; setImageRef = c => { this.image = c; - } + }; render () { - const { alt, src, width, height, intl } = this.props; + const { alt, lang, src, width, height, intl } = this.props; const { scale, lockTranslate } = this.state; const overflow = scale === MIN_SCALE ? 'hidden' : 'scroll'; const zoomButtonShouldHide = this.state.navigationHidden || this.props.zoomButtonHidden || this.state.zoomMatrix.rate <= MIN_SCALE ? 'media-modal__zoom-button--hidden' : ''; @@ -431,6 +432,7 @@ class ZoomableImage extends React.PureComponent { ref={this.setImageRef} alt={alt} title={alt} + lang={lang} src={src} width={width} height={height} @@ -448,3 +450,5 @@ class ZoomableImage extends React.PureComponent { } } + +export default injectIntl(ZoomableImage); diff --git a/app/javascript/flavours/glitch/features/ui/index.js b/app/javascript/flavours/glitch/features/ui/index.jsx index 72e13d9d6..fa35f689d 100644 --- a/app/javascript/flavours/glitch/features/ui/index.js +++ b/app/javascript/flavours/glitch/features/ui/index.jsx @@ -10,7 +10,7 @@ import { debounce } from 'lodash'; import { uploadCompose, resetCompose, changeComposeSpoilerness } from 'flavours/glitch/actions/compose'; import { expandHomeTimeline } from 'flavours/glitch/actions/timelines'; import { expandNotifications, notificationsSetVisibility } from 'flavours/glitch/actions/notifications'; -import { fetchServer } from 'flavours/glitch/actions/server'; +import { fetchServer, fetchServerTranslationLanguages } from 'flavours/glitch/actions/server'; import { clearHeight } from 'flavours/glitch/actions/height_cache'; import { changeLayout } from 'flavours/glitch/actions/app'; import { synchronouslySubmitMarkers, submitMarkers, fetchMarkers } from 'flavours/glitch/actions/markers'; @@ -42,6 +42,7 @@ import { FollowRequests, FavouritedStatuses, BookmarkedStatuses, + FollowedTags, ListTimeline, Blocks, DomainBlocks, @@ -56,7 +57,7 @@ import { PrivacyPolicy, } from './util/async-components'; import { HotKeys } from 'react-hotkeys'; -import initialState, { me, owner, singleUserMode, showTrends } from '../../initial_state'; +import initialState, { me, owner, singleUserMode, showTrends, trendsAsLanding } from '../../initial_state'; import { closeOnboarding, INTRODUCTION_VERSION } from 'flavours/glitch/actions/onboarding'; import { defineMessages, FormattedMessage, injectIntl } from 'react-intl'; import { Helmet } from 'react-helmet'; @@ -161,7 +162,7 @@ class SwitchingColumnsArea extends React.PureComponent { if (c) { this.node = c; } - } + }; render () { const { children, mobile, navbarUnder } = this.props; @@ -177,7 +178,7 @@ class SwitchingColumnsArea extends React.PureComponent { } } else if (singleUserMode && owner && initialState?.accounts[owner]) { redirect = <Redirect from='/' to={`/@${initialState.accounts[owner].username}`} exact />; - } else if (showTrends) { + } else if (showTrends && trendsAsLanding) { redirect = <Redirect from='/' to='/explore' exact />; } else { redirect = <Redirect from='/' to='/about' exact />; @@ -230,6 +231,7 @@ class SwitchingColumnsArea extends React.PureComponent { <WrappedRoute path='/follow_requests' component={FollowRequests} content={children} /> <WrappedRoute path='/blocks' component={Blocks} content={children} /> <WrappedRoute path='/domain_blocks' component={DomainBlocks} content={children} /> + <WrappedRoute path='/followed_tags' component={FollowedTags} content={children} /> <WrappedRoute path='/mutes' component={Mutes} content={children} /> <WrappedRoute path='/lists' component={Lists} content={children} /> <WrappedRoute path='/getting-started-misc' component={GettingStartedMisc} content={children} /> @@ -238,13 +240,10 @@ class SwitchingColumnsArea extends React.PureComponent { </WrappedSwitch> </ColumnsAreaContainer> ); - }; + } } -export default @connect(mapStateToProps) -@injectIntl -@withRouter class UI extends React.Component { static contextTypes = { @@ -290,7 +289,7 @@ class UI extends React.Component { // but we set user-friendly message for other browsers, e.g. Edge. e.returnValue = intl.formatMessage(messages.beforeUnload); } - } + }; handleDragEnter = (e) => { e.preventDefault(); @@ -306,7 +305,7 @@ class UI extends React.Component { if (e.dataTransfer && e.dataTransfer.types.includes('Files') && this.props.canUploadMore && this.context.identity.signedIn) { this.setState({ draggingOver: true }); } - } + }; handleDragOver = (e) => { if (this.dataTransferIsText(e.dataTransfer)) return false; @@ -320,7 +319,7 @@ class UI extends React.Component { } return false; - } + }; handleDrop = (e) => { if (this.dataTransferIsText(e.dataTransfer)) return; @@ -333,7 +332,7 @@ class UI extends React.Component { if (e.dataTransfer && e.dataTransfer.files.length >= 1 && this.props.canUploadMore && this.context.identity.signedIn) { this.props.dispatch(uploadCompose(e.dataTransfer.files)); } - } + }; handleDragLeave = (e) => { e.preventDefault(); @@ -346,15 +345,15 @@ class UI extends React.Component { } this.setState({ draggingOver: false }); - } + }; dataTransferIsText = (dataTransfer) => { return (dataTransfer && Array.from(dataTransfer.types).filter((type) => type === 'text/plain').length === 1); - } + }; closeUploadModal = () => { this.setState({ draggingOver: false }); - } + }; handleServiceWorkerPostMessage = ({ data }) => { if (data.type === 'navigate') { @@ -362,7 +361,7 @@ class UI extends React.Component { } else { console.warn('Unknown message type:', data.type); } - } + }; handleVisibilityChange = () => { const visibility = !document[this.visibilityHiddenProp]; @@ -370,7 +369,7 @@ class UI extends React.Component { if (visibility) { this.props.dispatch(submitMarkers({ immediate: true })); } - } + }; handleLayoutChange = debounce(() => { this.props.dispatch(clearHeight()); // The cached heights are no longer accurate, invalidate @@ -387,7 +386,7 @@ class UI extends React.Component { } else { this.handleLayoutChange(); } - } + }; componentDidMount () { const { signedIn } = this.context.identity; @@ -405,7 +404,7 @@ class UI extends React.Component { navigator.serviceWorker.addEventListener('message', this.handleServiceWorkerPostMessage); } - this.favicon = new Favico({ animation:"none" }); + this.favicon = new Favico({ animation:'none' }); // On first launch, redirect to the follow recommendations page if (signedIn && this.props.firstLaunch) { @@ -417,6 +416,7 @@ class UI extends React.Component { this.props.dispatch(fetchMarkers()); this.props.dispatch(expandHomeTimeline()); this.props.dispatch(expandNotifications()); + this.props.dispatch(fetchServerTranslationLanguages()); setTimeout(() => this.props.dispatch(fetchServer()), 3000); } @@ -485,7 +485,7 @@ class UI extends React.Component { setRef = c => { this.node = c; - } + }; handleHotkeyNew = e => { e.preventDefault(); @@ -495,7 +495,7 @@ class UI extends React.Component { if (element) { element.focus(); } - } + }; handleHotkeySearch = e => { e.preventDefault(); @@ -505,17 +505,17 @@ class UI extends React.Component { if (element) { element.focus(); } - } + }; handleHotkeyForceNew = e => { this.handleHotkeyNew(e); this.props.dispatch(resetCompose()); - } + }; handleHotkeyToggleComposeSpoilers = e => { e.preventDefault(); this.props.dispatch(changeComposeSpoilerness()); - } + }; handleHotkeyFocusColumn = e => { const index = (e.key * 1) + 1; // First child is drawer, skip that @@ -533,7 +533,7 @@ class UI extends React.Component { status.focus(); } } - } + }; handleHotkeyBack = () => { // if history is exhausted, or we would leave mastodon, just go to root. @@ -542,11 +542,11 @@ class UI extends React.Component { } else { this.props.history.push('/'); } - } + }; setHotkeysRef = c => { this.hotkeys = c; - } + }; handleHotkeyToggleHelp = () => { if (this.props.location.pathname === '/keyboard-shortcuts') { @@ -554,55 +554,55 @@ class UI extends React.Component { } else { this.props.history.push('/keyboard-shortcuts'); } - } + }; handleHotkeyGoToHome = () => { this.props.history.push('/home'); - } + }; handleHotkeyGoToNotifications = () => { this.props.history.push('/notifications'); - } + }; handleHotkeyGoToLocal = () => { this.props.history.push('/public/local'); - } + }; handleHotkeyGoToFederated = () => { this.props.history.push('/public'); - } + }; handleHotkeyGoToDirect = () => { this.props.history.push('/conversations'); - } + }; handleHotkeyGoToStart = () => { this.props.history.push('/getting-started'); - } + }; handleHotkeyGoToFavourites = () => { this.props.history.push('/favourites'); - } + }; handleHotkeyGoToPinned = () => { this.props.history.push('/pinned'); - } + }; handleHotkeyGoToProfile = () => { this.props.history.push(`/@${this.props.username}`); - } + }; handleHotkeyGoToBlocked = () => { this.props.history.push('/blocks'); - } + }; handleHotkeyGoToMuted = () => { this.props.history.push('/mutes'); - } + }; handleHotkeyGoToRequests = () => { this.props.history.push('/follow_requests'); - } + }; render () { const { draggingOver } = this.state; @@ -659,7 +659,7 @@ class UI extends React.Component { <PermaLink href={moved.get('url')} to={`/@${moved.get('acct')}`}> @{moved.get('acct')} </PermaLink> - )}} + ) }} /> </div>)} @@ -680,3 +680,5 @@ class UI extends React.Component { } } + +export default connect(mapStateToProps)(injectIntl(withRouter(UI))); diff --git a/app/javascript/flavours/glitch/features/ui/util/async-components.js b/app/javascript/flavours/glitch/features/ui/util/async-components.js index 025b22e61..03e501628 100644 --- a/app/javascript/flavours/glitch/features/ui/util/async-components.js +++ b/app/javascript/flavours/glitch/features/ui/util/async-components.js @@ -98,6 +98,10 @@ export function FavouritedStatuses () { return import(/* webpackChunkName: "flavours/glitch/async/favourited_statuses" */'flavours/glitch/features/favourited_statuses'); } +export function FollowedTags () { + return import(/* webpackChunkName: "flavours/glitch/async/followed_tags" */'flavours/glitch/features/followed_tags'); +} + export function BookmarkedStatuses () { return import(/* webpackChunkName: "flavours/glitch/async/bookmarked_statuses" */'flavours/glitch/features/bookmarked_statuses'); } diff --git a/app/javascript/flavours/glitch/features/ui/util/react_router_helpers.js b/app/javascript/flavours/glitch/features/ui/util/react_router_helpers.jsx index 8946c8252..b1c952d87 100644 --- a/app/javascript/flavours/glitch/features/ui/util/react_router_helpers.js +++ b/app/javascript/flavours/glitch/features/ui/util/react_router_helpers.jsx @@ -36,7 +36,7 @@ export class WrappedRoute extends React.Component { content: PropTypes.node, multiColumn: PropTypes.bool, componentParams: PropTypes.object, - } + }; static defaultProps = { componentParams: {}, @@ -46,7 +46,7 @@ export class WrappedRoute extends React.Component { return { hasError: true, }; - }; + } state = { hasError: false, @@ -80,17 +80,17 @@ export class WrappedRoute extends React.Component { {Component => <Component params={match.params} multiColumn={multiColumn} {...componentParams}>{content}</Component>} </BundleContainer> ); - } + }; renderLoading = () => { const { multiColumn } = this.props; return <ColumnLoading multiColumn={multiColumn} />; - } + }; renderError = (props) => { return <BundleColumnError {...props} errorType='network' />; - } + }; render () { const { component: Component, content, ...rest } = this.props; diff --git a/app/javascript/flavours/glitch/features/ui/util/reduced_motion.js b/app/javascript/flavours/glitch/features/ui/util/reduced_motion.jsx index 95519042b..1123b80ed 100644 --- a/app/javascript/flavours/glitch/features/ui/util/reduced_motion.js +++ b/app/javascript/flavours/glitch/features/ui/util/reduced_motion.jsx @@ -17,7 +17,7 @@ class ReducedMotion extends React.Component { defaultStyle: PropTypes.object, style: PropTypes.object, children: PropTypes.func, - } + }; render() { |