diff options
Diffstat (limited to 'app/javascript/flavours/glitch/components')
8 files changed, 37 insertions, 15 deletions
diff --git a/app/javascript/flavours/glitch/components/account.js b/app/javascript/flavours/glitch/components/account.js index 265ee94f6..df17f1897 100644 --- a/app/javascript/flavours/glitch/components/account.js +++ b/app/javascript/flavours/glitch/components/account.js @@ -132,7 +132,7 @@ export default class Account extends ImmutablePureComponent { <div className='account__relationship'> {buttons} </div> - : null} + : null} </div> </div> ); diff --git a/app/javascript/flavours/glitch/components/attachment_list.js b/app/javascript/flavours/glitch/components/attachment_list.js index b3d00b335..3a28c70f3 100644 --- a/app/javascript/flavours/glitch/components/attachment_list.js +++ b/app/javascript/flavours/glitch/components/attachment_list.js @@ -21,9 +21,9 @@ export default class AttachmentList extends ImmutablePureComponent { <ul className='attachment-list__list'> {media.map(attachment => - <li key={attachment.get('id')}> + (<li key={attachment.get('id')}> <a href={attachment.get('remote_url')} target='_blank' rel='noopener'>{filename(attachment.get('remote_url'))}</a> - </li> + </li>) )} </ul> </div> diff --git a/app/javascript/flavours/glitch/components/collapsable.js b/app/javascript/flavours/glitch/components/collapsable.js index fe125a729..0e8b04033 100644 --- a/app/javascript/flavours/glitch/components/collapsable.js +++ b/app/javascript/flavours/glitch/components/collapsable.js @@ -6,9 +6,9 @@ import PropTypes from 'prop-types'; const Collapsable = ({ fullHeight, isVisible, children }) => ( <Motion defaultStyle={{ opacity: !isVisible ? 0 : 100, height: isVisible ? fullHeight : 0 }} style={{ opacity: spring(!isVisible ? 0 : 100), height: spring(!isVisible ? 0 : fullHeight) }}> {({ opacity, height }) => - <div style={{ height: `${height}px`, overflow: 'hidden', opacity: opacity / 100, display: Math.floor(opacity) === 0 ? 'none' : 'block' }}> + (<div style={{ height: `${height}px`, overflow: 'hidden', opacity: opacity / 100, display: Math.floor(opacity) === 0 ? 'none' : 'block' }}> {children} - </div> + </div>) } </Motion> ); diff --git a/app/javascript/flavours/glitch/components/icon_button.js b/app/javascript/flavours/glitch/components/icon_button.js index 13b91e8a1..dfbe75110 100644 --- a/app/javascript/flavours/glitch/components/icon_button.js +++ b/app/javascript/flavours/glitch/components/icon_button.js @@ -116,7 +116,7 @@ export default class IconButton extends React.PureComponent { return ( <Motion defaultStyle={motionDefaultStyle} style={motionStyle}> {({ rotate }) => - <button + (<button aria-label={title} aria-pressed={pressed} aria-expanded={expanded} @@ -128,7 +128,7 @@ export default class IconButton extends React.PureComponent { > <i style={{ transform: `rotate(${rotate}deg)` }} className={`fa fa-fw fa-${icon}`} aria-hidden='true' /> {this.props.label} - </button> + </button>) } </Motion> ); diff --git a/app/javascript/flavours/glitch/components/missing_indicator.js b/app/javascript/flavours/glitch/components/missing_indicator.js index 87df7f61c..70d8c3b98 100644 --- a/app/javascript/flavours/glitch/components/missing_indicator.js +++ b/app/javascript/flavours/glitch/components/missing_indicator.js @@ -2,9 +2,14 @@ import React from 'react'; import { FormattedMessage } from 'react-intl'; const MissingIndicator = () => ( - <div className='missing-indicator'> + <div className='regeneration-indicator missing-indicator'> <div> - <FormattedMessage id='missing_indicator.label' defaultMessage='Not found' /> + <div className='regeneration-indicator__figure' /> + + <div className='regeneration-indicator__label'> + <FormattedMessage id='missing_indicator.label' tagName='strong' defaultMessage='Not found' /> + <FormattedMessage id='missing_indicator.sublabel' defaultMessage='This resource could not be found' /> + </div> </div> </div> ); diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js index 4feb9180b..feffc2d59 100644 --- a/app/javascript/flavours/glitch/components/status.js +++ b/app/javascript/flavours/glitch/components/status.js @@ -318,14 +318,14 @@ export default class Status extends ImmutablePureComponent { media = ( <Bundle fetchComponent={Video} loading={this.renderLoadingVideoPlayer} > - {Component => <Component + {Component => (<Component preview={video.get('preview_url')} src={video.get('url')} sensitive={status.get('sensitive')} letterbox={settings.getIn(['media', 'letterbox'])} fullwidth={settings.getIn(['media', 'fullwidth'])} onOpenVideo={this.handleOpenVideo} - />} + />)} </Bundle> ); mediaIcon = 'video-camera'; diff --git a/app/javascript/flavours/glitch/components/status_header.js b/app/javascript/flavours/glitch/components/status_header.js index bfa996cd5..e8c7a771e 100644 --- a/app/javascript/flavours/glitch/components/status_header.js +++ b/app/javascript/flavours/glitch/components/status_header.js @@ -104,8 +104,8 @@ export default class StatusHeader extends React.PureComponent { active={collapsed} title={ collapsed ? - intl.formatMessage(messages.uncollapse) : - intl.formatMessage(messages.collapse) + intl.formatMessage(messages.uncollapse) : + intl.formatMessage(messages.collapse) } icon='angle-double-up' onClick={this.handleCollapsedClick} diff --git a/app/javascript/flavours/glitch/components/status_list.js b/app/javascript/flavours/glitch/components/status_list.js index f190ba6ab..f253f0fdc 100644 --- a/app/javascript/flavours/glitch/components/status_list.js +++ b/app/javascript/flavours/glitch/components/status_list.js @@ -4,6 +4,7 @@ import PropTypes from 'prop-types'; import StatusContainer from 'flavours/glitch/containers/status_container'; import ImmutablePureComponent from 'react-immutable-pure-component'; import ScrollableList from './scrollable_list'; +import { FormattedMessage } from 'react-intl'; export default class StatusList extends ImmutablePureComponent { @@ -16,6 +17,7 @@ export default class StatusList extends ImmutablePureComponent { trackScroll: PropTypes.bool, shouldUpdateScroll: PropTypes.func, isLoading: PropTypes.bool, + isPartial: PropTypes.bool, hasMore: PropTypes.bool, prepend: PropTypes.node, emptyMessage: PropTypes.node, @@ -48,8 +50,23 @@ export default class StatusList extends ImmutablePureComponent { } render () { - const { statusIds, ...other } = this.props; - const { isLoading } = other; + const { statusIds, ...other } = this.props; + const { isLoading, isPartial } = other; + + if (isPartial) { + return ( + <div className='regeneration-indicator'> + <div> + <div className='regeneration-indicator__figure' /> + + <div className='regeneration-indicator__label'> + <FormattedMessage id='regeneration_indicator.label' tagName='strong' defaultMessage='Loading…' /> + <FormattedMessage id='regeneration_indicator.sublabel' defaultMessage='Your home feed is being prepared!' /> + </div> + </div> + </div> + ); + } const scrollableContent = (isLoading || statusIds.size > 0) ? ( statusIds.map((statusId) => ( |