diff options
Diffstat (limited to 'app/javascript/flavours/glitch')
4 files changed, 39 insertions, 18 deletions
diff --git a/app/javascript/flavours/glitch/components/hashtag.js b/app/javascript/flavours/glitch/components/hashtag.js index 769185a2b..5bbf32c87 100644 --- a/app/javascript/flavours/glitch/components/hashtag.js +++ b/app/javascript/flavours/glitch/components/hashtag.js @@ -1,7 +1,7 @@ // @ts-check import React from 'react'; import { Sparklines, SparklinesCurve } from 'react-sparklines'; -import { FormattedMessage } from 'react-intl'; +import { FormattedMessage, injectIntl, defineMessages } from 'react-intl'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import Permalink from './permalink'; @@ -9,6 +9,10 @@ import ShortNumber from 'flavours/glitch/components/short_number'; import Skeleton from 'flavours/glitch/components/skeleton'; import classNames from 'classnames'; +const messages = defineMessages({ + totalVolume: { id: 'hashtag.total_volume', defaultMessage: 'Total volume in the last {days, plural, one {day} other {{days} days}}' }, +}); + class SilentErrorBoundary extends React.Component { static propTypes = { @@ -41,10 +45,11 @@ class SilentErrorBoundary extends React.Component { const accountsCountRenderer = (displayNumber, pluralReady) => ( <FormattedMessage id='trends.counter_by_accounts' - defaultMessage='{count, plural, one {{counter} person} other {{counter} people}} talking' + defaultMessage='{count, plural, one {{counter} person} other {{counter} people}} in the past {days, plural, one {day} other {{days} days}}' values={{ count: pluralReady, counter: <strong>{displayNumber}</strong>, + days: 2, }} /> ); @@ -64,7 +69,7 @@ ImmutableHashtag.propTypes = { hashtag: ImmutablePropTypes.map.isRequired, }; -const Hashtag = ({ name, href, to, people, uses, history, className }) => ( +const Hashtag = injectIntl(({ name, href, to, people, uses, history, className, intl }) => ( <div className={classNames('trends__item', className)}> <div className='trends__item__name'> <Permalink href={href} to={to}> @@ -74,9 +79,10 @@ const Hashtag = ({ name, href, to, people, uses, history, className }) => ( {typeof people !== 'undefined' ? <ShortNumber value={people} renderer={accountsCountRenderer} /> : <Skeleton width={100} />} </div> - <div className='trends__item__current'> + <abbr className='trends__item__current' title={intl.formatMessage(messages.totalVolume, { days: 2 })}> {typeof uses !== 'undefined' ? <ShortNumber value={uses} /> : <Skeleton width={42} height={36} />} - </div> + <span className='trends__item__current__asterisk'>*</span> + </abbr> <div className='trends__item__sparkline'> <SilentErrorBoundary> @@ -86,7 +92,7 @@ const Hashtag = ({ name, href, to, people, uses, history, className }) => ( </SilentErrorBoundary> </div> </div> -); +)); Hashtag.propTypes = { name: PropTypes.string, diff --git a/app/javascript/flavours/glitch/features/ui/components/image_loader.js b/app/javascript/flavours/glitch/features/ui/components/image_loader.js index c6f16a792..dfa0efe49 100644 --- a/app/javascript/flavours/glitch/features/ui/components/image_loader.js +++ b/app/javascript/flavours/glitch/features/ui/components/image_loader.js @@ -1,10 +1,10 @@ -import React from 'react'; -import PropTypes from 'prop-types'; import classNames from 'classnames'; +import PropTypes from 'prop-types'; +import React, { PureComponent } from 'react'; import { LoadingBar } from 'react-redux-loading-bar'; import ZoomableImage from './zoomable_image'; -export default class ImageLoader extends React.PureComponent { +export default class ImageLoader extends PureComponent { static propTypes = { alt: PropTypes.string, @@ -43,7 +43,7 @@ export default class ImageLoader extends React.PureComponent { this.loadImage(this.props); } - componentWillReceiveProps (nextProps) { + UNSAFE_componentWillReceiveProps (nextProps) { if (this.props.src !== nextProps.src) { this.loadImage(nextProps); } @@ -139,14 +139,18 @@ export default class ImageLoader extends React.PureComponent { return ( <div className={className}> - <LoadingBar loading={loading ? 1 : 0} className='loading-bar' style={{ width: this.state.width || width }} /> {loading ? ( - <canvas - className='image-loader__preview-canvas' - ref={this.setCanvasRef} - width={width} - height={height} - /> + <> + <div className='loading-bar__container' style={{ width: this.state.width || width }}> + <LoadingBar className='loading-bar' loading={1} /> + </div> + <canvas + className='image-loader__preview-canvas' + ref={this.setCanvasRef} + width={width} + height={height} + /> + </> ) : ( <ZoomableImage alt={alt} diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index 7f9ed2186..b54c3f696 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -442,10 +442,14 @@ object-fit: contain; } - .loading-bar { + .loading-bar__container { position: relative; } + .loading-bar { + position: absolute; + } + &.image-loader--amorphous .image-loader__preview-canvas { display: none; } diff --git a/app/javascript/flavours/glitch/styles/components/search.scss b/app/javascript/flavours/glitch/styles/components/search.scss index f7415368b..17a34db62 100644 --- a/app/javascript/flavours/glitch/styles/components/search.scss +++ b/app/javascript/flavours/glitch/styles/components/search.scss @@ -176,6 +176,13 @@ padding-right: 15px; margin-left: 5px; color: $secondary-text-color; + text-decoration: none; + + &__asterisk { + color: $darker-text-color; + font-size: 18px; + vertical-align: super; + } } &__sparkline { |