* Refactor uses of icons to an Icon component in web UI * Refactor options passed to the Icon component * Make tests work with absolute component pathsmaster
@@ -41,6 +41,11 @@ module.exports = { | |||||
'node_modules', | 'node_modules', | ||||
'\\.(css|scss|json)$', | '\\.(css|scss|json)$', | ||||
], | ], | ||||
'import/resolver': { | |||||
node: { | |||||
paths: ['app/javascript'], | |||||
}, | |||||
}, | |||||
}, | }, | ||||
rules: { | rules: { | ||||
@@ -2,6 +2,7 @@ import React from 'react'; | |||||
import ImmutablePropTypes from 'react-immutable-proptypes'; | import ImmutablePropTypes from 'react-immutable-proptypes'; | ||||
import PropTypes from 'prop-types'; | import PropTypes from 'prop-types'; | ||||
import ImmutablePureComponent from 'react-immutable-pure-component'; | import ImmutablePureComponent from 'react-immutable-pure-component'; | ||||
import Icon from 'mastodon/components/icon'; | |||||
const filename = url => url.split('/').pop().split('#')[0].split('?')[0]; | const filename = url => url.split('/').pop().split('#')[0].split('?')[0]; | ||||
@@ -24,7 +25,7 @@ export default class AttachmentList extends ImmutablePureComponent { | |||||
return ( | return ( | ||||
<li key={attachment.get('id')}> | <li key={attachment.get('id')}> | ||||
<a href={displayUrl} target='_blank' rel='noopener'><i className='fa fa-link' /> {filename(displayUrl)}</a> | |||||
<a href={displayUrl} target='_blank' rel='noopener'><Icon id='link' /> {filename(displayUrl)}</a> | |||||
</li> | </li> | ||||
); | ); | ||||
})} | })} | ||||
@@ -36,7 +37,7 @@ export default class AttachmentList extends ImmutablePureComponent { | |||||
return ( | return ( | ||||
<div className='attachment-list'> | <div className='attachment-list'> | ||||
<div className='attachment-list__icon'> | <div className='attachment-list__icon'> | ||||
<i className='fa fa-link' /> | |||||
<Icon id='link' /> | |||||
</div> | </div> | ||||
<ul className='attachment-list__list'> | <ul className='attachment-list__list'> | ||||
@@ -1,6 +1,7 @@ | |||||
import React from 'react'; | import React from 'react'; | ||||
import { FormattedMessage } from 'react-intl'; | import { FormattedMessage } from 'react-intl'; | ||||
import PropTypes from 'prop-types'; | import PropTypes from 'prop-types'; | ||||
import Icon from 'mastodon/components/icon'; | |||||
export default class ColumnBackButton extends React.PureComponent { | export default class ColumnBackButton extends React.PureComponent { | ||||
@@ -19,7 +20,7 @@ export default class ColumnBackButton extends React.PureComponent { | |||||
render () { | render () { | ||||
return ( | return ( | ||||
<button onClick={this.handleClick} className='column-back-button'> | <button onClick={this.handleClick} className='column-back-button'> | ||||
<i className='fa fa-fw fa-chevron-left column-back-button__icon' /> | |||||
<Icon id='chevron-left' className='column-back-button__icon' fixedWidth /> | |||||
<FormattedMessage id='column_back_button.label' defaultMessage='Back' /> | <FormattedMessage id='column_back_button.label' defaultMessage='Back' /> | ||||
</button> | </button> | ||||
); | ); | ||||
@@ -1,6 +1,7 @@ | |||||
import React from 'react'; | import React from 'react'; | ||||
import { FormattedMessage } from 'react-intl'; | import { FormattedMessage } from 'react-intl'; | ||||
import ColumnBackButton from './column_back_button'; | import ColumnBackButton from './column_back_button'; | ||||
import Icon from 'mastodon/components/icon'; | |||||
export default class ColumnBackButtonSlim extends ColumnBackButton { | export default class ColumnBackButtonSlim extends ColumnBackButton { | ||||
@@ -8,7 +9,7 @@ export default class ColumnBackButtonSlim extends ColumnBackButton { | |||||
return ( | return ( | ||||
<div className='column-back-button--slim'> | <div className='column-back-button--slim'> | ||||
<div role='button' tabIndex='0' onClick={this.handleClick} className='column-back-button column-back-button--slim-button'> | <div role='button' tabIndex='0' onClick={this.handleClick} className='column-back-button column-back-button--slim-button'> | ||||
<i className='fa fa-fw fa-chevron-left column-back-button__icon' /> | |||||
<Icon id='chevron-left' className='column-back-button__icon' fixedWidth /> | |||||
<FormattedMessage id='column_back_button.label' defaultMessage='Back' /> | <FormattedMessage id='column_back_button.label' defaultMessage='Back' /> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
@@ -2,6 +2,7 @@ import React from 'react'; | |||||
import PropTypes from 'prop-types'; | import PropTypes from 'prop-types'; | ||||
import classNames from 'classnames'; | import classNames from 'classnames'; | ||||
import { FormattedMessage, injectIntl, defineMessages } from 'react-intl'; | import { FormattedMessage, injectIntl, defineMessages } from 'react-intl'; | ||||
import Icon from 'mastodon/components/icon'; | |||||
const messages = defineMessages({ | const messages = defineMessages({ | ||||
show: { id: 'column_header.show_settings', defaultMessage: 'Show settings' }, | show: { id: 'column_header.show_settings', defaultMessage: 'Show settings' }, | ||||
@@ -109,22 +110,22 @@ class ColumnHeader extends React.PureComponent { | |||||
} | } | ||||
if (multiColumn && pinned) { | if (multiColumn && pinned) { | ||||
pinButton = <button key='pin-button' className='text-btn column-header__setting-btn' onClick={this.handlePin}><i className='fa fa fa-times' /> <FormattedMessage id='column_header.unpin' defaultMessage='Unpin' /></button>; | |||||
pinButton = <button key='pin-button' className='text-btn column-header__setting-btn' onClick={this.handlePin}><Icon id='times' /> <FormattedMessage id='column_header.unpin' defaultMessage='Unpin' /></button>; | |||||
moveButtons = ( | moveButtons = ( | ||||
<div key='move-buttons' className='column-header__setting-arrows'> | <div key='move-buttons' className='column-header__setting-arrows'> | ||||
<button title={formatMessage(messages.moveLeft)} aria-label={formatMessage(messages.moveLeft)} className='text-btn column-header__setting-btn' onClick={this.handleMoveLeft}><i className='fa fa-chevron-left' /></button> | |||||
<button title={formatMessage(messages.moveRight)} aria-label={formatMessage(messages.moveRight)} className='text-btn column-header__setting-btn' onClick={this.handleMoveRight}><i className='fa fa-chevron-right' /></button> | |||||
<button title={formatMessage(messages.moveLeft)} aria-label={formatMessage(messages.moveLeft)} className='text-btn column-header__setting-btn' onClick={this.handleMoveLeft}><Icon id='chevron-left' /></button> | |||||
<button title={formatMessage(messages.moveRight)} aria-label={formatMessage(messages.moveRight)} className='text-btn column-header__setting-btn' onClick={this.handleMoveRight}><Icon id='chevron-right' /></button> | |||||
</div> | </div> | ||||
); | ); | ||||
} else if (multiColumn) { | } else if (multiColumn) { | ||||
pinButton = <button key='pin-button' className='text-btn column-header__setting-btn' onClick={this.handlePin}><i className='fa fa fa-plus' /> <FormattedMessage id='column_header.pin' defaultMessage='Pin' /></button>; | |||||
pinButton = <button key='pin-button' className='text-btn column-header__setting-btn' onClick={this.handlePin}><Icon id='plus' /> <FormattedMessage id='column_header.pin' defaultMessage='Pin' /></button>; | |||||
} | } | ||||
if (!pinned && (multiColumn || showBackButton)) { | if (!pinned && (multiColumn || showBackButton)) { | ||||
backButton = ( | backButton = ( | ||||
<button onClick={this.handleBackClick} className='column-header__back-button'> | <button onClick={this.handleBackClick} className='column-header__back-button'> | ||||
<i className='fa fa-fw fa-chevron-left column-back-button__icon' /> | |||||
<Icon id='chevron-left' className='column-back-button__icon' fixedWidth /> | |||||
<FormattedMessage id='column_back_button.label' defaultMessage='Back' /> | <FormattedMessage id='column_back_button.label' defaultMessage='Back' /> | ||||
</button> | </button> | ||||
); | ); | ||||
@@ -140,7 +141,7 @@ class ColumnHeader extends React.PureComponent { | |||||
} | } | ||||
if (children || multiColumn) { | if (children || multiColumn) { | ||||
collapseButton = <button className={collapsibleButtonClassName} title={formatMessage(collapsed ? messages.show : messages.hide)} aria-label={formatMessage(collapsed ? messages.show : messages.hide)} aria-pressed={collapsed ? 'false' : 'true'} onClick={this.handleToggleClick}><i className='fa fa-sliders' /></button>; | |||||
collapseButton = <button className={collapsibleButtonClassName} title={formatMessage(collapsed ? messages.show : messages.hide)} aria-label={formatMessage(collapsed ? messages.show : messages.hide)} aria-pressed={collapsed ? 'false' : 'true'} onClick={this.handleToggleClick}><Icon id='sliders' /></button>; | |||||
} | } | ||||
const hasTitle = icon && title; | const hasTitle = icon && title; | ||||
@@ -150,7 +151,7 @@ class ColumnHeader extends React.PureComponent { | |||||
<h1 className={buttonClassName}> | <h1 className={buttonClassName}> | ||||
{hasTitle && ( | {hasTitle && ( | ||||
<button onClick={this.handleTitleClick}> | <button onClick={this.handleTitleClick}> | ||||
<i className={`fa fa-fw fa-${icon} column-header__icon`} /> | |||||
<Icon id={icon} fixedWidth className='column-header__icon' /> | |||||
{title} | {title} | ||||
</button> | </button> | ||||
)} | )} | ||||
@@ -0,0 +1,21 @@ | |||||
import React from 'react'; | |||||
import PropTypes from 'prop-types'; | |||||
import classNames from 'classnames'; | |||||
export default class Icon extends React.PureComponent { | |||||
static propTypes = { | |||||
id: PropTypes.string.isRequired, | |||||
className: PropTypes.string, | |||||
fixedWidth: PropTypes.bool, | |||||
}; | |||||
render () { | |||||
const { id, className, fixedWidth, ...other } = this.props; | |||||
return ( | |||||
<i role='img' className={classNames('fa', `fa-${id}`, className, { 'fa-fw': fixedWidth })} {...other} /> | |||||
); | |||||
} | |||||
} |
@@ -3,6 +3,7 @@ import Motion from '../features/ui/util/optional_motion'; | |||||
import spring from 'react-motion/lib/spring'; | import spring from 'react-motion/lib/spring'; | ||||
import PropTypes from 'prop-types'; | import PropTypes from 'prop-types'; | ||||
import classNames from 'classnames'; | import classNames from 'classnames'; | ||||
import Icon from 'mastodon/components/icon'; | |||||
export default class IconButton extends React.PureComponent { | export default class IconButton extends React.PureComponent { | ||||
@@ -86,7 +87,7 @@ export default class IconButton extends React.PureComponent { | |||||
style={style} | style={style} | ||||
tabIndex={tabIndex} | tabIndex={tabIndex} | ||||
> | > | ||||
<i className={`fa fa-fw fa-${icon}`} aria-hidden='true' /> | |||||
<Icon id={icon} fixedWidth aria-hidden='true' /> | |||||
</button> | </button> | ||||
); | ); | ||||
} | } | ||||
@@ -104,7 +105,7 @@ export default class IconButton extends React.PureComponent { | |||||
style={style} | style={style} | ||||
tabIndex={tabIndex} | tabIndex={tabIndex} | ||||
> | > | ||||
<i style={{ transform: `rotate(${rotate}deg)` }} className={`fa fa-fw fa-${icon}`} aria-hidden='true' /> | |||||
<Icon id={icon} style={{ transform: `rotate(${rotate}deg)` }} fixedWidth aria-hidden='true' /> | |||||
</button> | </button> | ||||
)} | )} | ||||
</Motion> | </Motion> | ||||
@@ -1,6 +1,7 @@ | |||||
import React from 'react'; | import React from 'react'; | ||||
import PropTypes from 'prop-types'; | import PropTypes from 'prop-types'; | ||||
import { injectIntl, defineMessages } from 'react-intl'; | import { injectIntl, defineMessages } from 'react-intl'; | ||||
import Icon from 'mastodon/components/icon'; | |||||
const messages = defineMessages({ | const messages = defineMessages({ | ||||
load_more: { id: 'status.load_more', defaultMessage: 'Load more' }, | load_more: { id: 'status.load_more', defaultMessage: 'Load more' }, | ||||
@@ -25,7 +26,7 @@ class LoadGap extends React.PureComponent { | |||||
return ( | return ( | ||||
<button className='load-more load-gap' disabled={disabled} onClick={this.handleClick} aria-label={intl.formatMessage(messages.load_more)}> | <button className='load-more load-gap' disabled={disabled} onClick={this.handleClick} aria-label={intl.formatMessage(messages.load_more)}> | ||||
<i className='fa fa-ellipsis-h' /> | |||||
<Icon id='ellipsis-h' /> | |||||
</button> | </button> | ||||
); | ); | ||||
} | } | ||||
@@ -15,6 +15,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component'; | |||||
import { MediaGallery, Video } from '../features/ui/util/async-components'; | import { MediaGallery, Video } from '../features/ui/util/async-components'; | ||||
import { HotKeys } from 'react-hotkeys'; | import { HotKeys } from 'react-hotkeys'; | ||||
import classNames from 'classnames'; | import classNames from 'classnames'; | ||||
import Icon from 'mastodon/components/icon'; | |||||
// We use the component (and not the container) since we do not want | // We use the component (and not the container) since we do not want | ||||
// to use the progress bar to show download progress | // to use the progress bar to show download progress | ||||
@@ -204,7 +205,7 @@ class Status extends ImmutablePureComponent { | |||||
if (featured) { | if (featured) { | ||||
prepend = ( | prepend = ( | ||||
<div className='status__prepend'> | <div className='status__prepend'> | ||||
<div className='status__prepend-icon-wrapper'><i className='fa fa-fw fa-thumb-tack status__prepend-icon' /></div> | |||||
<div className='status__prepend-icon-wrapper'><Icon id='thumb-tack' className='status__prepend-icon' fixedWidth /></div> | |||||
<FormattedMessage id='status.pinned' defaultMessage='Pinned toot' /> | <FormattedMessage id='status.pinned' defaultMessage='Pinned toot' /> | ||||
</div> | </div> | ||||
); | ); | ||||
@@ -213,7 +214,7 @@ class Status extends ImmutablePureComponent { | |||||
prepend = ( | prepend = ( | ||||
<div className='status__prepend'> | <div className='status__prepend'> | ||||
<div className='status__prepend-icon-wrapper'><i className='fa fa-fw fa-retweet status__prepend-icon' /></div> | |||||
<div className='status__prepend-icon-wrapper'><Icon id='retweet' className='status__prepend-icon' fixedWidth /></div> | |||||
<FormattedMessage id='status.reblogged_by' defaultMessage='{name} boosted' values={{ name: <a onClick={this.handleAccountClick} data-id={status.getIn(['account', 'id'])} href={status.getIn(['account', 'url'])} className='status__display-name muted'><bdi><strong dangerouslySetInnerHTML={display_name_html} /></bdi></a> }} /> | <FormattedMessage id='status.reblogged_by' defaultMessage='{name} boosted' values={{ name: <a onClick={this.handleAccountClick} data-id={status.getIn(['account', 'id'])} href={status.getIn(['account', 'url'])} className='status__display-name muted'><bdi><strong dangerouslySetInnerHTML={display_name_html} /></bdi></a> }} /> | ||||
</div> | </div> | ||||
); | ); | ||||
@@ -5,6 +5,7 @@ import { isRtl } from '../rtl'; | |||||
import { FormattedMessage } from 'react-intl'; | import { FormattedMessage } from 'react-intl'; | ||||
import Permalink from './permalink'; | import Permalink from './permalink'; | ||||
import classnames from 'classnames'; | import classnames from 'classnames'; | ||||
import Icon from 'mastodon/components/icon'; | |||||
const MAX_HEIGHT = 642; // 20px * 32 (+ 2px padding at the top) | const MAX_HEIGHT = 642; // 20px * 32 (+ 2px padding at the top) | ||||
@@ -160,7 +161,7 @@ export default class StatusContent extends React.PureComponent { | |||||
const readMoreButton = ( | const readMoreButton = ( | ||||
<button className='status__content__read-more-button' onClick={this.props.onClick} key='read-more'> | <button className='status__content__read-more-button' onClick={this.props.onClick} key='read-more'> | ||||
<FormattedMessage id='status.read_more' defaultMessage='Read more' /><i className='fa fa-fw fa-angle-right' /> | |||||
<FormattedMessage id='status.read_more' defaultMessage='Read more' /><Icon id='angle-right' fixedWidth /> | |||||
</button> | </button> | ||||
); | ); | ||||
@@ -8,6 +8,7 @@ import spring from 'react-motion/lib/spring'; | |||||
import ImmutablePureComponent from 'react-immutable-pure-component'; | import ImmutablePureComponent from 'react-immutable-pure-component'; | ||||
import { autoPlayGif, me } from '../../../initial_state'; | import { autoPlayGif, me } from '../../../initial_state'; | ||||
import classNames from 'classnames'; | import classNames from 'classnames'; | ||||
import Icon from 'mastodon/components/icon'; | |||||
const messages = defineMessages({ | const messages = defineMessages({ | ||||
unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' }, | unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' }, | ||||
@@ -149,7 +150,7 @@ class Header extends ImmutablePureComponent { | |||||
} | } | ||||
if (account.get('locked')) { | if (account.get('locked')) { | ||||
lockedIcon = <i className='fa fa-lock' title={intl.formatMessage(messages.account_locked)} />; | |||||
lockedIcon = <Icon id='lock' title={intl.formatMessage(messages.account_locked)} />; | |||||
} | } | ||||
const content = { __html: account.get('note_emojified') }; | const content = { __html: account.get('note_emojified') }; | ||||
@@ -176,7 +177,7 @@ class Header extends ImmutablePureComponent { | |||||
<dt dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }} title={pair.get('name')} /> | <dt dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }} title={pair.get('name')} /> | ||||
<dd className={pair.get('verified_at') && 'verified'} title={pair.get('value_plain')}> | <dd className={pair.get('verified_at') && 'verified'} title={pair.get('value_plain')}> | ||||
{pair.get('verified_at') && <span title={intl.formatMessage(messages.linkVerifiedOn, { date: intl.formatDate(pair.get('verified_at'), dateFormatOptions) })}><i className='fa fa-check verified__mark' /></span>} <span dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }} /> | |||||
{pair.get('verified_at') && <span title={intl.formatMessage(messages.linkVerifiedOn, { date: intl.formatDate(pair.get('verified_at'), dateFormatOptions) })}><Icon id='check' className='verified__mark' /></span>} <span dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }} /> | |||||
</dd> | </dd> | ||||
</dl> | </dl> | ||||
))} | ))} | ||||
@@ -3,6 +3,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; | |||||
import ImmutablePureComponent from 'react-immutable-pure-component'; | import ImmutablePureComponent from 'react-immutable-pure-component'; | ||||
import Permalink from '../../../components/permalink'; | import Permalink from '../../../components/permalink'; | ||||
import { displayMedia } from '../../../initial_state'; | import { displayMedia } from '../../../initial_state'; | ||||
import Icon from 'mastodon/components/icon'; | |||||
export default class MediaItem extends ImmutablePureComponent { | export default class MediaItem extends ImmutablePureComponent { | ||||
@@ -45,7 +46,7 @@ export default class MediaItem extends ImmutablePureComponent { | |||||
} else { | } else { | ||||
icon = ( | icon = ( | ||||
<span className='account-gallery__item__icons'> | <span className='account-gallery__item__icons'> | ||||
<i className='fa fa-eye-slash' /> | |||||
<Icon id='eye-slash' /> | |||||
</span> | </span> | ||||
); | ); | ||||
} | } | ||||
@@ -5,6 +5,7 @@ import { FormattedMessage } from 'react-intl'; | |||||
import ImmutablePureComponent from 'react-immutable-pure-component'; | import ImmutablePureComponent from 'react-immutable-pure-component'; | ||||
import AvatarOverlay from '../../../components/avatar_overlay'; | import AvatarOverlay from '../../../components/avatar_overlay'; | ||||
import DisplayName from '../../../components/display_name'; | import DisplayName from '../../../components/display_name'; | ||||
import Icon from 'mastodon/components/icon'; | |||||
export default class MovedNote extends ImmutablePureComponent { | export default class MovedNote extends ImmutablePureComponent { | ||||
@@ -33,7 +34,7 @@ export default class MovedNote extends ImmutablePureComponent { | |||||
return ( | return ( | ||||
<div className='account__moved-note'> | <div className='account__moved-note'> | ||||
<div className='account__moved-note__message'> | <div className='account__moved-note__message'> | ||||
<div className='account__moved-note__icon-wrapper'><i className='fa fa-fw fa-suitcase account__moved-note__icon' /></div> | |||||
<div className='account__moved-note__icon-wrapper'><Icon id='suitcase' className='account__moved-note__icon' fixedWidth /></div> | |||||
<FormattedMessage id='account.moved_to' defaultMessage='{name} has moved to:' values={{ name: <bdi><strong dangerouslySetInnerHTML={displayNameHtml} /></bdi> }} /> | <FormattedMessage id='account.moved_to' defaultMessage='{name} has moved to:' values={{ name: <bdi><strong dangerouslySetInnerHTML={displayNameHtml} /></bdi> }} /> | ||||
</div> | </div> | ||||
@@ -17,6 +17,7 @@ import { isMobile } from '../../../is_mobile'; | |||||
import ImmutablePureComponent from 'react-immutable-pure-component'; | import ImmutablePureComponent from 'react-immutable-pure-component'; | ||||
import { length } from 'stringz'; | import { length } from 'stringz'; | ||||
import { countableText } from '../util/counter'; | import { countableText } from '../util/counter'; | ||||
import Icon from 'mastodon/components/icon'; | |||||
const allowedAroundShortCode = '><\u0085\u0020\u00a0\u1680\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028\u2029\u0009\u000a\u000b\u000c\u000d'; | const allowedAroundShortCode = '><\u0085\u0020\u00a0\u1680\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028\u2029\u0009\u000a\u000b\u000c\u000d'; | ||||
@@ -165,7 +166,7 @@ class ComposeForm extends ImmutablePureComponent { | |||||
let publishText = ''; | let publishText = ''; | ||||
if (this.props.privacy === 'private' || this.props.privacy === 'direct') { | if (this.props.privacy === 'private' || this.props.privacy === 'direct') { | ||||
publishText = <span className='compose-form__publish-private'><i className='fa fa-lock' /> {intl.formatMessage(messages.publish)}</span>; | |||||
publishText = <span className='compose-form__publish-private'><Icon id='lock' /> {intl.formatMessage(messages.publish)}</span>; | |||||
} else { | } else { | ||||
publishText = this.props.privacy !== 'unlisted' ? intl.formatMessage(messages.publishLoud, { publish: intl.formatMessage(messages.publish) }) : intl.formatMessage(messages.publish); | publishText = this.props.privacy !== 'unlisted' ? intl.formatMessage(messages.publishLoud, { publish: intl.formatMessage(messages.publish) }) : intl.formatMessage(messages.publish); | ||||
} | } | ||||
@@ -7,6 +7,7 @@ import Motion from '../../ui/util/optional_motion'; | |||||
import spring from 'react-motion/lib/spring'; | import spring from 'react-motion/lib/spring'; | ||||
import detectPassiveEvents from 'detect-passive-events'; | import detectPassiveEvents from 'detect-passive-events'; | ||||
import classNames from 'classnames'; | import classNames from 'classnames'; | ||||
import Icon from 'mastodon/components/icon'; | |||||
const messages = defineMessages({ | const messages = defineMessages({ | ||||
public_short: { id: 'privacy.public.short', defaultMessage: 'Public' }, | public_short: { id: 'privacy.public.short', defaultMessage: 'Public' }, | ||||
@@ -132,7 +133,7 @@ class PrivacyDropdownMenu extends React.PureComponent { | |||||
{items.map(item => ( | {items.map(item => ( | ||||
<div role='option' tabIndex='0' key={item.value} data-index={item.value} onKeyDown={this.handleKeyDown} onClick={this.handleClick} className={classNames('privacy-dropdown__option', { active: item.value === value })} aria-selected={item.value === value} ref={item.value === value ? this.setFocusRef : null}> | <div role='option' tabIndex='0' key={item.value} data-index={item.value} onKeyDown={this.handleKeyDown} onClick={this.handleClick} className={classNames('privacy-dropdown__option', { active: item.value === value })} aria-selected={item.value === value} ref={item.value === value ? this.setFocusRef : null}> | ||||
<div className='privacy-dropdown__option__icon'> | <div className='privacy-dropdown__option__icon'> | ||||
<i className={`fa fa-fw fa-${item.icon}`} /> | |||||
<Icon id={item.icon} fixedWidth /> | |||||
</div> | </div> | ||||
<div className='privacy-dropdown__option__content'> | <div className='privacy-dropdown__option__content'> | ||||
@@ -5,6 +5,7 @@ import Overlay from 'react-overlays/lib/Overlay'; | |||||
import Motion from '../../ui/util/optional_motion'; | import Motion from '../../ui/util/optional_motion'; | ||||
import spring from 'react-motion/lib/spring'; | import spring from 'react-motion/lib/spring'; | ||||
import { searchEnabled } from '../../../initial_state'; | import { searchEnabled } from '../../../initial_state'; | ||||
import Icon from 'mastodon/components/icon'; | |||||
const messages = defineMessages({ | const messages = defineMessages({ | ||||
placeholder: { id: 'search.placeholder', defaultMessage: 'Search' }, | placeholder: { id: 'search.placeholder', defaultMessage: 'Search' }, | ||||
@@ -116,8 +117,8 @@ class Search extends React.PureComponent { | |||||
</label> | </label> | ||||
<div role='button' tabIndex='0' className='search__icon' onClick={this.handleClear}> | <div role='button' tabIndex='0' className='search__icon' onClick={this.handleClear}> | ||||
<i className={`fa fa-search ${hasValue ? '' : 'active'}`} /> | |||||
<i aria-label={intl.formatMessage(messages.placeholder)} className={`fa fa-times-circle ${hasValue ? 'active' : ''}`} /> | |||||
<Icon id='search' className={hasValue ? '' : 'active'} /> | |||||
<Icon id='times-circle' className={hasValue ? 'active' : ''} aria-label={intl.formatMessage(messages.placeholder)} /> | |||||
</div> | </div> | ||||
<Overlay show={expanded && !hasValue} placement='bottom' target={this}> | <Overlay show={expanded && !hasValue} placement='bottom' target={this}> | ||||
@@ -6,6 +6,7 @@ import AccountContainer from '../../../containers/account_container'; | |||||
import StatusContainer from '../../../containers/status_container'; | import StatusContainer from '../../../containers/status_container'; | ||||
import ImmutablePureComponent from 'react-immutable-pure-component'; | import ImmutablePureComponent from 'react-immutable-pure-component'; | ||||
import Hashtag from '../../../components/hashtag'; | import Hashtag from '../../../components/hashtag'; | ||||
import Icon from 'mastodon/components/icon'; | |||||
const messages = defineMessages({ | const messages = defineMessages({ | ||||
dismissSuggestion: { id: 'suggestions.dismiss', defaultMessage: 'Dismiss suggestion' }, | dismissSuggestion: { id: 'suggestions.dismiss', defaultMessage: 'Dismiss suggestion' }, | ||||
@@ -34,7 +35,7 @@ class SearchResults extends ImmutablePureComponent { | |||||
<div className='search-results'> | <div className='search-results'> | ||||
<div className='trends'> | <div className='trends'> | ||||
<div className='trends__header'> | <div className='trends__header'> | ||||
<i className='fa fa-user-plus fa-fw' /> | |||||
<Icon id='user-plus' fixedWidth /> | |||||
<FormattedMessage id='suggestions.header' defaultMessage='You might be interested in…' /> | <FormattedMessage id='suggestions.header' defaultMessage='You might be interested in…' /> | ||||
</div> | </div> | ||||
@@ -59,7 +60,7 @@ class SearchResults extends ImmutablePureComponent { | |||||
count += results.get('accounts').size; | count += results.get('accounts').size; | ||||
accounts = ( | accounts = ( | ||||
<div className='search-results__section'> | <div className='search-results__section'> | ||||
<h5><i className='fa fa-fw fa-users' /><FormattedMessage id='search_results.accounts' defaultMessage='People' /></h5> | |||||
<h5><Icon id='users' fixedWidth /><FormattedMessage id='search_results.accounts' defaultMessage='People' /></h5> | |||||
{results.get('accounts').map(accountId => <AccountContainer key={accountId} id={accountId} />)} | {results.get('accounts').map(accountId => <AccountContainer key={accountId} id={accountId} />)} | ||||
</div> | </div> | ||||
@@ -70,7 +71,7 @@ class SearchResults extends ImmutablePureComponent { | |||||
count += results.get('statuses').size; | count += results.get('statuses').size; | ||||
statuses = ( | statuses = ( | ||||
<div className='search-results__section'> | <div className='search-results__section'> | ||||
<h5><i className='fa fa-fw fa-quote-right' /><FormattedMessage id='search_results.statuses' defaultMessage='Toots' /></h5> | |||||
<h5><Icon id='quote-right' fixedWidth /><FormattedMessage id='search_results.statuses' defaultMessage='Toots' /></h5> | |||||
{results.get('statuses').map(statusId => <StatusContainer key={statusId} id={statusId} />)} | {results.get('statuses').map(statusId => <StatusContainer key={statusId} id={statusId} />)} | ||||
</div> | </div> | ||||
@@ -81,7 +82,7 @@ class SearchResults extends ImmutablePureComponent { | |||||
count += results.get('hashtags').size; | count += results.get('hashtags').size; | ||||
hashtags = ( | hashtags = ( | ||||
<div className='search-results__section'> | <div className='search-results__section'> | ||||
<h5><i className='fa fa-fw fa-hashtag' /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></h5> | |||||
<h5><Icon id='hashtag' fixedWidth /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></h5> | |||||
{results.get('hashtags').map(hashtag => <Hashtag key={hashtag.get('name')} hashtag={hashtag} />)} | {results.get('hashtags').map(hashtag => <Hashtag key={hashtag.get('name')} hashtag={hashtag} />)} | ||||
</div> | </div> | ||||
@@ -91,7 +92,7 @@ class SearchResults extends ImmutablePureComponent { | |||||
return ( | return ( | ||||
<div className='search-results'> | <div className='search-results'> | ||||
<div className='search-results__header'> | <div className='search-results__header'> | ||||
<i className='fa fa-search fa-fw' /> | |||||
<Icon id='search' fixedWidth /> | |||||
<FormattedMessage id='search_results.total' defaultMessage='{count, number} {count, plural, one {result} other {results}}' values={{ count }} /> | <FormattedMessage id='search_results.total' defaultMessage='{count, number} {count, plural, one {result} other {results}}' values={{ count }} /> | ||||
</div> | </div> | ||||
@@ -6,6 +6,7 @@ import spring from 'react-motion/lib/spring'; | |||||
import ImmutablePureComponent from 'react-immutable-pure-component'; | import ImmutablePureComponent from 'react-immutable-pure-component'; | ||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; | import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; | ||||
import classNames from 'classnames'; | import classNames from 'classnames'; | ||||
import Icon from 'mastodon/components/icon'; | |||||
const messages = defineMessages({ | const messages = defineMessages({ | ||||
description: { id: 'upload_form.description', defaultMessage: 'Describe for the visually impaired' }, | description: { id: 'upload_form.description', defaultMessage: 'Describe for the visually impaired' }, | ||||
@@ -99,8 +100,8 @@ class Upload extends ImmutablePureComponent { | |||||
{({ scale }) => ( | {({ scale }) => ( | ||||
<div className='compose-form__upload-thumbnail' style={{ transform: `scale(${scale})`, backgroundImage: `url(${media.get('preview_url')})`, backgroundPosition: `${x}% ${y}%` }}> | <div className='compose-form__upload-thumbnail' style={{ transform: `scale(${scale})`, backgroundImage: `url(${media.get('preview_url')})`, backgroundPosition: `${x}% ${y}%` }}> | ||||
<div className={classNames('compose-form__upload__actions', { active })}> | <div className={classNames('compose-form__upload__actions', { active })}> | ||||
<button className='icon-button' onClick={this.handleUndoClick}><i className='fa fa-times' /> <FormattedMessage id='upload_form.undo' defaultMessage='Delete' /></button> | |||||
{media.get('type') === 'image' && <button className='icon-button' onClick={this.handleFocalPointClick}><i className='fa fa-crosshairs' /> <FormattedMessage id='upload_form.focus' defaultMessage='Crop' /></button>} | |||||
<button className='icon-button' onClick={this.handleUndoClick}><Icon id='times' /> <FormattedMessage id='upload_form.undo' defaultMessage='Delete' /></button> | |||||
{media.get('type') === 'image' && <button className='icon-button' onClick={this.handleFocalPointClick}><Icon id='crosshairs' /> <FormattedMessage id='upload_form.focus' defaultMessage='Crop' /></button>} | |||||
</div> | </div> | ||||
<div className={classNames('compose-form__upload-description', { active })}> | <div className={classNames('compose-form__upload-description', { active })}> | ||||
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; | |||||
import Motion from '../../ui/util/optional_motion'; | import Motion from '../../ui/util/optional_motion'; | ||||
import spring from 'react-motion/lib/spring'; | import spring from 'react-motion/lib/spring'; | ||||
import { FormattedMessage } from 'react-intl'; | import { FormattedMessage } from 'react-intl'; | ||||
import Icon from 'mastodon/components/icon'; | |||||
export default class UploadProgress extends React.PureComponent { | export default class UploadProgress extends React.PureComponent { | ||||
@@ -21,7 +22,7 @@ export default class UploadProgress extends React.PureComponent { | |||||
return ( | return ( | ||||
<div className='upload-progress'> | <div className='upload-progress'> | ||||
<div className='upload-progress__icon'> | <div className='upload-progress__icon'> | ||||
<i className='fa fa-upload' /> | |||||
<Icon id='upload' /> | |||||
</div> | </div> | ||||
<div className='upload-progress__message'> | <div className='upload-progress__message'> | ||||
@@ -14,6 +14,7 @@ import SearchResultsContainer from './containers/search_results_container'; | |||||
import { changeComposing } from '../../actions/compose'; | import { changeComposing } from '../../actions/compose'; | ||||
import elephantUIPlane from '../../../images/elephant_ui_plane.svg'; | import elephantUIPlane from '../../../images/elephant_ui_plane.svg'; | ||||
import { mascot } from '../../initial_state'; | import { mascot } from '../../initial_state'; | ||||
import Icon from 'mastodon/components/icon'; | |||||
const messages = defineMessages({ | const messages = defineMessages({ | ||||
start: { id: 'getting_started.heading', defaultMessage: 'Getting started' }, | start: { id: 'getting_started.heading', defaultMessage: 'Getting started' }, | ||||
@@ -77,21 +78,21 @@ class Compose extends React.PureComponent { | |||||
const { columns } = this.props; | const { columns } = this.props; | ||||
header = ( | header = ( | ||||
<nav className='drawer__header'> | <nav className='drawer__header'> | ||||
<Link to='/getting-started' className='drawer__tab' title={intl.formatMessage(messages.start)} aria-label={intl.formatMessage(messages.start)}><i role='img' className='fa fa-fw fa-bars' /></Link> | |||||
<Link to='/getting-started' className='drawer__tab' title={intl.formatMessage(messages.start)} aria-label={intl.formatMessage(messages.start)}><Icon id='bars' fixedWidth /></Link> | |||||
{!columns.some(column => column.get('id') === 'HOME') && ( | {!columns.some(column => column.get('id') === 'HOME') && ( | ||||
<Link to='/timelines/home' className='drawer__tab' title={intl.formatMessage(messages.home_timeline)} aria-label={intl.formatMessage(messages.home_timeline)}><i role='img' className='fa fa-fw fa-home' /></Link> | |||||
<Link to='/timelines/home' className='drawer__tab' title={intl.formatMessage(messages.home_timeline)} aria-label={intl.formatMessage(messages.home_timeline)}><Icon id='home' fixedWidth /></Link> | |||||
)} | )} | ||||
{!columns.some(column => column.get('id') === 'NOTIFICATIONS') && ( | {!columns.some(column => column.get('id') === 'NOTIFICATIONS') && ( | ||||
<Link to='/notifications' className='drawer__tab' title={intl.formatMessage(messages.notifications)} aria-label={intl.formatMessage(messages.notifications)}><i role='img' className='fa fa-fw fa-bell' /></Link> | |||||
<Link to='/notifications' className='drawer__tab' title={intl.formatMessage(messages.notifications)} aria-label={intl.formatMessage(messages.notifications)}><Icon id='bell' fixedWidth /></Link> | |||||
)} | )} | ||||
{!columns.some(column => column.get('id') === 'COMMUNITY') && ( | {!columns.some(column => column.get('id') === 'COMMUNITY') && ( | ||||
<Link to='/timelines/public/local' className='drawer__tab' title={intl.formatMessage(messages.community)} aria-label={intl.formatMessage(messages.community)}><i role='img' className='fa fa-fw fa-users' /></Link> | |||||
<Link to='/timelines/public/local' className='drawer__tab' title={intl.formatMessage(messages.community)} aria-label={intl.formatMessage(messages.community)}><Icon id='users' fixedWidth /></Link> | |||||
)} | )} | ||||
{!columns.some(column => column.get('id') === 'PUBLIC') && ( | {!columns.some(column => column.get('id') === 'PUBLIC') && ( | ||||
<Link to='/timelines/public' className='drawer__tab' title={intl.formatMessage(messages.public)} aria-label={intl.formatMessage(messages.public)}><i role='img' className='fa fa-fw fa-globe' /></Link> | |||||
<Link to='/timelines/public' className='drawer__tab' title={intl.formatMessage(messages.public)} aria-label={intl.formatMessage(messages.public)}><Icon id='globe' fixedWidth /></Link> | |||||
)} | )} | ||||
<a href='/settings/preferences' className='drawer__tab' title={intl.formatMessage(messages.preferences)} aria-label={intl.formatMessage(messages.preferences)}><i role='img' className='fa fa-fw fa-cog' /></a> | |||||
<a href='/auth/sign_out' className='drawer__tab' data-method='delete' title={intl.formatMessage(messages.logout)} aria-label={intl.formatMessage(messages.logout)}><i role='img' className='fa fa-fw fa-sign-out' /></a> | |||||
<a href='/settings/preferences' className='drawer__tab' title={intl.formatMessage(messages.preferences)} aria-label={intl.formatMessage(messages.preferences)}><Icon id='cog' fixedWidth /></a> | |||||
<a href='/auth/sign_out' className='drawer__tab' data-method='delete' title={intl.formatMessage(messages.logout)} aria-label={intl.formatMessage(messages.logout)}><Icon id='sign-out' fixedWidth /></a> | |||||
</nav> | </nav> | ||||
); | ); | ||||
} | } | ||||
@@ -12,6 +12,7 @@ import { fetchFollowRequests } from '../../actions/accounts'; | |||||
import { List as ImmutableList } from 'immutable'; | import { List as ImmutableList } from 'immutable'; | ||||
import { Link } from 'react-router-dom'; | import { Link } from 'react-router-dom'; | ||||
import NavigationBar from '../compose/components/navigation_bar'; | import NavigationBar from '../compose/components/navigation_bar'; | ||||
import Icon from 'mastodon/components/icon'; | |||||
const messages = defineMessages({ | const messages = defineMessages({ | ||||
home_timeline: { id: 'tabs_bar.home', defaultMessage: 'Home' }, | home_timeline: { id: 'tabs_bar.home', defaultMessage: 'Home' }, | ||||
@@ -140,7 +141,7 @@ class GettingStarted extends ImmutablePureComponent { | |||||
{multiColumn && <div className='column-header__wrapper'> | {multiColumn && <div className='column-header__wrapper'> | ||||
<h1 className='column-header'> | <h1 className='column-header'> | ||||
<button> | <button> | ||||
<i className='fa fa-bars fa-fw column-header__icon' /> | |||||
<Icon id='bars' className='column-header__icon' fixedWidth /> | |||||
<FormattedMessage id='getting_started.heading' defaultMessage='Getting started' /> | <FormattedMessage id='getting_started.heading' defaultMessage='Getting started' /> | ||||
</button> | </button> | ||||
</h1> | </h1> | ||||
@@ -6,6 +6,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; | |||||
import IconButton from '../../../components/icon_button'; | import IconButton from '../../../components/icon_button'; | ||||
import { defineMessages, injectIntl } from 'react-intl'; | import { defineMessages, injectIntl } from 'react-intl'; | ||||
import { removeFromListAdder, addToListAdder } from '../../../actions/lists'; | import { removeFromListAdder, addToListAdder } from '../../../actions/lists'; | ||||
import Icon from 'mastodon/components/icon'; | |||||
const messages = defineMessages({ | const messages = defineMessages({ | ||||
remove: { id: 'lists.account.remove', defaultMessage: 'Remove from list' }, | remove: { id: 'lists.account.remove', defaultMessage: 'Remove from list' }, | ||||
@@ -53,7 +54,7 @@ class List extends ImmutablePureComponent { | |||||
<div className='list'> | <div className='list'> | ||||
<div className='list__wrapper'> | <div className='list__wrapper'> | ||||
<div className='list__display-name'> | <div className='list__display-name'> | ||||
<i className='fa fa-fw fa-list-ul column-link__icon' /> | |||||
<Icon id='list-ul' className='column-link__icon' fixedWidth /> | |||||
{list.get('title')} | {list.get('title')} | ||||
</div> | </div> | ||||
@@ -4,6 +4,7 @@ import { connect } from 'react-redux'; | |||||
import { defineMessages, injectIntl } from 'react-intl'; | import { defineMessages, injectIntl } from 'react-intl'; | ||||
import { fetchListSuggestions, clearListSuggestions, changeListSuggestions } from '../../../actions/lists'; | import { fetchListSuggestions, clearListSuggestions, changeListSuggestions } from '../../../actions/lists'; | ||||
import classNames from 'classnames'; | import classNames from 'classnames'; | ||||
import Icon from 'mastodon/components/icon'; | |||||
const messages = defineMessages({ | const messages = defineMessages({ | ||||
search: { id: 'lists.search', defaultMessage: 'Search among people you follow' }, | search: { id: 'lists.search', defaultMessage: 'Search among people you follow' }, | ||||
@@ -65,8 +66,8 @@ class Search extends React.PureComponent { | |||||
</label> | </label> | ||||
<div role='button' tabIndex='0' className='search__icon' onClick={this.handleClear}> | <div role='button' tabIndex='0' className='search__icon' onClick={this.handleClear}> | ||||
<i className={classNames('fa fa-search', { active: !hasValue })} /> | |||||
<i aria-label={intl.formatMessage(messages.search)} className={classNames('fa fa-times-circle', { active: hasValue })} /> | |||||
<Icon id='search' className={classNames({ active: !hasValue })} /> | |||||
<Icon id='times-circle' aria-label={intl.formatMessage(messages.search)} className={classNames({ active: hasValue })} /> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
); | ); | ||||
@@ -14,6 +14,7 @@ import { fetchList, deleteList } from '../../actions/lists'; | |||||
import { openModal } from '../../actions/modal'; | import { openModal } from '../../actions/modal'; | ||||
import MissingIndicator from '../../components/missing_indicator'; | import MissingIndicator from '../../components/missing_indicator'; | ||||
import LoadingIndicator from '../../components/loading_indicator'; | import LoadingIndicator from '../../components/loading_indicator'; | ||||
import Icon from 'mastodon/components/icon'; | |||||
const messages = defineMessages({ | const messages = defineMessages({ | ||||
deleteMessage: { id: 'confirmations.delete_list.message', defaultMessage: 'Are you sure you want to permanently delete this list?' }, | deleteMessage: { id: 'confirmations.delete_list.message', defaultMessage: 'Are you sure you want to permanently delete this list?' }, | ||||
@@ -150,11 +151,11 @@ class ListTimeline extends React.PureComponent { | |||||
> | > | ||||
<div className='column-header__links'> | <div className='column-header__links'> | ||||
<button className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.handleEditClick}> | <button className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.handleEditClick}> | ||||
<i className='fa fa-pencil' /> <FormattedMessage id='lists.edit' defaultMessage='Edit list' /> | |||||
<Icon id='pencil' /> <FormattedMessage id='lists.edit' defaultMessage='Edit list' /> | |||||
</button> | </button> | ||||
<button className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.handleDeleteClick}> | <button className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.handleDeleteClick}> | ||||
<i className='fa fa-trash' /> <FormattedMessage id='lists.delete' defaultMessage='Delete list' /> | |||||
<Icon id='trash' /> <FormattedMessage id='lists.delete' defaultMessage='Delete list' /> | |||||
</button> | </button> | ||||
</div> | </div> | ||||
@@ -1,6 +1,7 @@ | |||||
import React from 'react'; | import React from 'react'; | ||||
import PropTypes from 'prop-types'; | import PropTypes from 'prop-types'; | ||||
import { FormattedMessage } from 'react-intl'; | import { FormattedMessage } from 'react-intl'; | ||||
import Icon from 'mastodon/components/icon'; | |||||
export default class ClearColumnButton extends React.PureComponent { | export default class ClearColumnButton extends React.PureComponent { | ||||
@@ -10,7 +11,7 @@ export default class ClearColumnButton extends React.PureComponent { | |||||
render () { | render () { | ||||
return ( | 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> | |||||
<button className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.props.onClick}><Icon id='eraser' /> <FormattedMessage id='notifications.clear' defaultMessage='Clear notifications' /></button> | |||||
); | ); | ||||
} | } | ||||
@@ -1,6 +1,7 @@ | |||||
import React from 'react'; | import React from 'react'; | ||||
import PropTypes from 'prop-types'; | import PropTypes from 'prop-types'; | ||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; | import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; | ||||
import Icon from 'mastodon/components/icon'; | |||||
const tooltips = defineMessages({ | const tooltips = defineMessages({ | ||||
mentions: { id: 'notifications.filter.mentions', defaultMessage: 'Mentions' }, | mentions: { id: 'notifications.filter.mentions', defaultMessage: 'Mentions' }, | ||||
@@ -62,28 +63,28 @@ class FilterBar extends React.PureComponent { | |||||
onClick={this.onClick('mention')} | onClick={this.onClick('mention')} | ||||
title={intl.formatMessage(tooltips.mentions)} | title={intl.formatMessage(tooltips.mentions)} | ||||
> | > | ||||
<i className='fa fa-fw fa-at' /> | |||||
<Icon id='at' fixedWidth /> | |||||
</button> | </button> | ||||
<button | <button | ||||
className={selectedFilter === 'favourite' ? 'active' : ''} | className={selectedFilter === 'favourite' ? 'active' : ''} | ||||
onClick={this.onClick('favourite')} | onClick={this.onClick('favourite')} | ||||
title={intl.formatMessage(tooltips.favourites)} | title={intl.formatMessage(tooltips.favourites)} | ||||
> | > | ||||
<i className='fa fa-fw fa-star' /> | |||||
<Icon id='star' fixedWidth /> | |||||
</button> | </button> | ||||
<button | <button | ||||
className={selectedFilter === 'reblog' ? 'active' : ''} | className={selectedFilter === 'reblog' ? 'active' : ''} | ||||
onClick={this.onClick('reblog')} | onClick={this.onClick('reblog')} | ||||
title={intl.formatMessage(tooltips.boosts)} | title={intl.formatMessage(tooltips.boosts)} | ||||
> | > | ||||
<i className='fa fa-fw fa-retweet' /> | |||||
<Icon id='retweet' fixedWidth /> | |||||
</button> | </button> | ||||
<button | <button | ||||
className={selectedFilter === 'follow' ? 'active' : ''} | className={selectedFilter === 'follow' ? 'active' : ''} | ||||
onClick={this.onClick('follow')} | onClick={this.onClick('follow')} | ||||
title={intl.formatMessage(tooltips.follows)} | title={intl.formatMessage(tooltips.follows)} | ||||
> | > | ||||
<i className='fa fa-fw fa-user-plus' /> | |||||
<Icon id='user-plus' fixedWidth /> | |||||
</button> | </button> | ||||
</div> | </div> | ||||
); | ); | ||||
@@ -7,6 +7,7 @@ import { injectIntl, FormattedMessage } from 'react-intl'; | |||||
import Permalink from '../../../components/permalink'; | import Permalink from '../../../components/permalink'; | ||||
import ImmutablePureComponent from 'react-immutable-pure-component'; | import ImmutablePureComponent from 'react-immutable-pure-component'; | ||||
import { HotKeys } from 'react-hotkeys'; | import { HotKeys } from 'react-hotkeys'; | ||||
import Icon from 'mastodon/components/icon'; | |||||
const notificationForScreenReader = (intl, message, timestamp) => { | const notificationForScreenReader = (intl, message, timestamp) => { | ||||
const output = [message]; | const output = [message]; | ||||
@@ -105,7 +106,7 @@ class Notification extends ImmutablePureComponent { | |||||
<div className='notification notification-follow focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.follow', defaultMessage: '{name} followed you' }, { name: account.get('acct') }), notification.get('created_at'))}> | <div className='notification notification-follow focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.follow', defaultMessage: '{name} followed you' }, { name: account.get('acct') }), notification.get('created_at'))}> | ||||
<div className='notification__message'> | <div className='notification__message'> | ||||
<div className='notification__favourite-icon-wrapper'> | <div className='notification__favourite-icon-wrapper'> | ||||
<i className='fa fa-fw fa-user-plus' /> | |||||
<Icon id='user-plus' fixedWidth /> | |||||
</div> | </div> | ||||
<span title={notification.get('created_at')}> | <span title={notification.get('created_at')}> | ||||
@@ -140,7 +141,7 @@ class Notification extends ImmutablePureComponent { | |||||
<div className='notification notification-favourite focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.favourite', defaultMessage: '{name} favourited your status' }, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}> | <div className='notification notification-favourite focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.favourite', defaultMessage: '{name} favourited your status' }, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}> | ||||
<div className='notification__message'> | <div className='notification__message'> | ||||
<div className='notification__favourite-icon-wrapper'> | <div className='notification__favourite-icon-wrapper'> | ||||
<i className='fa fa-fw fa-star star-icon' /> | |||||
<Icon id='star' className='star-icon' fixedWidth /> | |||||
</div> | </div> | ||||
<span title={notification.get('created_at')}> | <span title={notification.get('created_at')}> | ||||
@@ -162,7 +163,7 @@ class Notification extends ImmutablePureComponent { | |||||
<div className='notification notification-reblog focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.reblog', defaultMessage: '{name} boosted your status' }, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}> | <div className='notification notification-reblog focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.reblog', defaultMessage: '{name} boosted your status' }, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}> | ||||
<div className='notification__message'> | <div className='notification__message'> | ||||
<div className='notification__favourite-icon-wrapper'> | <div className='notification__favourite-icon-wrapper'> | ||||
<i className='fa fa-fw fa-retweet' /> | |||||
<Icon id='retweet' fixedWidth /> | |||||
</div> | </div> | ||||
<span title={notification.get('created_at')}> | <span title={notification.get('created_at')}> | ||||
@@ -4,6 +4,7 @@ import Immutable from 'immutable'; | |||||
import ImmutablePropTypes from 'react-immutable-proptypes'; | import ImmutablePropTypes from 'react-immutable-proptypes'; | ||||
import punycode from 'punycode'; | import punycode from 'punycode'; | ||||
import classnames from 'classnames'; | import classnames from 'classnames'; | ||||
import Icon from 'mastodon/components/icon'; | |||||
const IDNA_PREFIX = 'xn--'; | const IDNA_PREFIX = 'xn--'; | ||||
@@ -175,8 +176,8 @@ export default class Card extends React.PureComponent { | |||||
<div className='status-card__actions'> | <div className='status-card__actions'> | ||||
<div> | <div> | ||||
<button onClick={this.handleEmbedClick}><i className={`fa fa-${iconVariant}`} /></button> | |||||
{horizontal && <a href={card.get('url')} target='_blank' rel='noopener'><i className='fa fa-external-link' /></a>} | |||||
<button onClick={this.handleEmbedClick}><Icon id={iconVariant} /></button> | |||||
{horizontal && <a href={card.get('url')} target='_blank' rel='noopener'><Icon id='external-link' /></a>} | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
@@ -198,7 +199,7 @@ export default class Card extends React.PureComponent { | |||||
} else { | } else { | ||||
embed = ( | embed = ( | ||||
<div className='status-card__image'> | <div className='status-card__image'> | ||||
<i className='fa fa-file-text' /> | |||||
<Icon id='file-text' /> | |||||
</div> | </div> | ||||
); | ); | ||||
} | } | ||||
@@ -13,6 +13,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component'; | |||||
import Video from '../../video'; | import Video from '../../video'; | ||||
import scheduleIdleTask from '../../ui/util/schedule_idle_task'; | import scheduleIdleTask from '../../ui/util/schedule_idle_task'; | ||||
import classNames from 'classnames'; | import classNames from 'classnames'; | ||||
import Icon from 'mastodon/components/icon'; | |||||
export default class DetailedStatus extends ImmutablePureComponent { | export default class DetailedStatus extends ImmutablePureComponent { | ||||
@@ -148,11 +149,11 @@ export default class DetailedStatus extends ImmutablePureComponent { | |||||
} | } | ||||
if (status.get('visibility') === 'private') { | if (status.get('visibility') === 'private') { | ||||
reblogLink = <i className={`fa fa-${reblogIcon}`} />; | |||||
reblogLink = <Icon id={reblogIcon} />; | |||||
} else if (this.context.router) { | } else if (this.context.router) { | ||||
reblogLink = ( | reblogLink = ( | ||||
<Link to={`/statuses/${status.get('id')}/reblogs`} className='detailed-status__link'> | <Link to={`/statuses/${status.get('id')}/reblogs`} className='detailed-status__link'> | ||||
<i className={`fa fa-${reblogIcon}`} /> | |||||
<Icon id={reblogIcon} /> | |||||
<span className='detailed-status__reblogs'> | <span className='detailed-status__reblogs'> | ||||
<FormattedNumber value={status.get('reblogs_count')} /> | <FormattedNumber value={status.get('reblogs_count')} /> | ||||
</span> | </span> | ||||
@@ -161,7 +162,7 @@ export default class DetailedStatus extends ImmutablePureComponent { | |||||
} else { | } else { | ||||
reblogLink = ( | reblogLink = ( | ||||
<a href={`/interact/${status.get('id')}?type=reblog`} className='detailed-status__link' onClick={this.handleModalLink}> | <a href={`/interact/${status.get('id')}?type=reblog`} className='detailed-status__link' onClick={this.handleModalLink}> | ||||
<i className={`fa fa-${reblogIcon}`} /> | |||||
<Icon id={reblogIcon} /> | |||||
<span className='detailed-status__reblogs'> | <span className='detailed-status__reblogs'> | ||||
<FormattedNumber value={status.get('reblogs_count')} /> | <FormattedNumber value={status.get('reblogs_count')} /> | ||||
</span> | </span> | ||||
@@ -172,7 +173,7 @@ export default class DetailedStatus extends ImmutablePureComponent { | |||||
if (this.context.router) { | if (this.context.router) { | ||||
favouriteLink = ( | favouriteLink = ( | ||||
<Link to={`/statuses/${status.get('id')}/favourites`} className='detailed-status__link'> | <Link to={`/statuses/${status.get('id')}/favourites`} className='detailed-status__link'> | ||||
<i className='fa fa-star' /> | |||||
<Icon id='star' /> | |||||
<span className='detailed-status__favorites'> | <span className='detailed-status__favorites'> | ||||
<FormattedNumber value={status.get('favourites_count')} /> | <FormattedNumber value={status.get('favourites_count')} /> | ||||
</span> | </span> | ||||
@@ -181,7 +182,7 @@ export default class DetailedStatus extends ImmutablePureComponent { | |||||
} else { | } else { | ||||
favouriteLink = ( | favouriteLink = ( | ||||
<a href={`/interact/${status.get('id')}?type=favourite`} className='detailed-status__link' onClick={this.handleModalLink}> | <a href={`/interact/${status.get('id')}?type=favourite`} className='detailed-status__link' onClick={this.handleModalLink}> | ||||
<i className='fa fa-star' /> | |||||
<Icon id='star' /> | |||||
<span className='detailed-status__favorites'> | <span className='detailed-status__favorites'> | ||||
<FormattedNumber value={status.get('favourites_count')} /> | <FormattedNumber value={status.get('favourites_count')} /> | ||||
</span> | </span> | ||||
@@ -44,6 +44,7 @@ import { HotKeys } from 'react-hotkeys'; | |||||
import { boostModal, deleteModal } from '../../initial_state'; | import { boostModal, deleteModal } from '../../initial_state'; | ||||
import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from '../ui/util/fullscreen'; | import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from '../ui/util/fullscreen'; | ||||
import { textForScreenReader } from '../../components/status'; | import { textForScreenReader } from '../../components/status'; | ||||
import Icon from 'mastodon/components/icon'; | |||||
const messages = defineMessages({ | const messages = defineMessages({ | ||||
deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' }, | deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' }, | ||||
@@ -425,7 +426,7 @@ class Status extends ImmutablePureComponent { | |||||
<ColumnHeader | <ColumnHeader | ||||
showBackButton | showBackButton | ||||
extraButton={( | extraButton={( | ||||
<button className='column-header__button' title={intl.formatMessage(status.get('hidden') ? messages.revealAll : messages.hideAll)} aria-label={intl.formatMessage(status.get('hidden') ? messages.revealAll : messages.hideAll)} onClick={this.handleToggleAll} aria-pressed={status.get('hidden') ? 'false' : 'true'}><i className={`fa fa-${status.get('hidden') ? 'eye-slash' : 'eye'}`} /></button> | |||||
<button className='column-header__button' title={intl.formatMessage(status.get('hidden') ? messages.revealAll : messages.hideAll)} aria-label={intl.formatMessage(status.get('hidden') ? messages.revealAll : messages.hideAll)} onClick={this.handleToggleAll} aria-pressed={status.get('hidden') ? 'false' : 'true'}><Icon id={status.get('hidden') ? 'eye-slash' : 'eye'} /></button> | |||||
)} | )} | ||||
/> | /> | ||||
@@ -8,6 +8,7 @@ import Avatar from '../../../components/avatar'; | |||||
import RelativeTimestamp from '../../../components/relative_timestamp'; | import RelativeTimestamp from '../../../components/relative_timestamp'; | ||||
import DisplayName from '../../../components/display_name'; | import DisplayName from '../../../components/display_name'; | ||||
import ImmutablePureComponent from 'react-immutable-pure-component'; | import ImmutablePureComponent from 'react-immutable-pure-component'; | ||||
import Icon from 'mastodon/components/icon'; | |||||
const messages = defineMessages({ | const messages = defineMessages({ | ||||
reblog: { id: 'status.reblog', defaultMessage: 'Boost' }, | reblog: { id: 'status.reblog', defaultMessage: 'Boost' }, | ||||
@@ -74,7 +75,7 @@ class BoostModal extends ImmutablePureComponent { | |||||
</div> | </div> | ||||
<div className='boost-modal__action-bar'> | <div className='boost-modal__action-bar'> | ||||
<div><FormattedMessage id='boost_modal.combo' defaultMessage='You can press {combo} to skip this next time' values={{ combo: <span>Shift + <i className='fa fa-retweet' /></span> }} /></div> | |||||
<div><FormattedMessage id='boost_modal.combo' defaultMessage='You can press {combo} to skip this next time' values={{ combo: <span>Shift + <Icon id='retweet' /></span> }} /></div> | |||||
<Button text={intl.formatMessage(messages.reblog)} onClick={this.handleReblog} ref={this.setRef} /> | <Button text={intl.formatMessage(messages.reblog)} onClick={this.handleReblog} ref={this.setRef} /> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
@@ -1,6 +1,7 @@ | |||||
import React from 'react'; | import React from 'react'; | ||||
import PropTypes from 'prop-types'; | import PropTypes from 'prop-types'; | ||||
import classNames from 'classnames'; | import classNames from 'classnames'; | ||||
import Icon from 'mastodon/components/icon'; | |||||
export default class ColumnHeader extends React.PureComponent { | export default class ColumnHeader extends React.PureComponent { | ||||
@@ -21,7 +22,7 @@ export default class ColumnHeader extends React.PureComponent { | |||||
let iconElement = ''; | let iconElement = ''; | ||||
if (icon) { | if (icon) { | ||||
iconElement = <i className={`fa fa-fw fa-${icon} column-header__icon`} />; | |||||
iconElement = <Icon id={icon} fixedWidth className='column-header__icon' />; | |||||
} | } | ||||
return ( | return ( | ||||
@@ -1,6 +1,7 @@ | |||||
import React from 'react'; | import React from 'react'; | ||||
import PropTypes from 'prop-types'; | import PropTypes from 'prop-types'; | ||||
import { Link } from 'react-router-dom'; | import { Link } from 'react-router-dom'; | ||||
import Icon from 'mastodon/components/icon'; | |||||
const ColumnLink = ({ icon, text, to, href, method, badge }) => { | const ColumnLink = ({ icon, text, to, href, method, badge }) => { | ||||
const badgeElement = typeof badge !== 'undefined' ? <span className='column-link__badge'>{badge}</span> : null; | const badgeElement = typeof badge !== 'undefined' ? <span className='column-link__badge'>{badge}</span> : null; | ||||
@@ -8,7 +9,7 @@ const ColumnLink = ({ icon, text, to, href, method, badge }) => { | |||||
if (href) { | if (href) { | ||||
return ( | return ( | ||||
<a href={href} className='column-link' data-method={method}> | <a href={href} className='column-link' data-method={method}> | ||||
<i className={`fa fa-fw fa-${icon} column-link__icon`} /> | |||||
<Icon id={icon} fixedWidth className='column-link__icon' /> | |||||
{text} | {text} | ||||
{badgeElement} | {badgeElement} | ||||
</a> | </a> | ||||
@@ -16,7 +17,7 @@ const ColumnLink = ({ icon, text, to, href, method, badge }) => { | |||||
} else { | } else { | ||||
return ( | return ( | ||||
<Link to={to} className='column-link'> | <Link to={to} className='column-link'> | ||||
<i className={`fa fa-fw fa-${icon} column-link__icon`} /> | |||||
<Icon id={icon} fixedWidth className='column-link__icon' /> | |||||
{text} | {text} | ||||
{badgeElement} | {badgeElement} | ||||
</Link> | </Link> | ||||
@@ -13,6 +13,7 @@ import ColumnLoading from './column_loading'; | |||||
import DrawerLoading from './drawer_loading'; | import DrawerLoading from './drawer_loading'; | ||||
import BundleColumnError from './bundle_column_error'; | import BundleColumnError from './bundle_column_error'; | ||||
import { Compose, Notifications, HomeTimeline, CommunityTimeline, PublicTimeline, HashtagTimeline, DirectTimeline, FavouritedStatuses, ListTimeline } from '../../ui/util/async-components'; | import { Compose, Notifications, HomeTimeline, CommunityTimeline, PublicTimeline, HashtagTimeline, DirectTimeline, FavouritedStatuses, ListTimeline } from '../../ui/util/async-components'; | ||||
import Icon from 'mastodon/components/icon'; | |||||
import detectPassiveEvents from 'detect-passive-events'; | import detectPassiveEvents from 'detect-passive-events'; | ||||
import { scrollRight } from '../../../scroll'; | import { scrollRight } from '../../../scroll'; | ||||
@@ -160,7 +161,7 @@ class ColumnsArea extends ImmutablePureComponent { | |||||
this.pendingIndex = null; | this.pendingIndex = null; | ||||
if (singleColumn) { | if (singleColumn) { | ||||
const floatingActionButton = shouldHideFAB(this.context.router.history.location.pathname) ? null : <Link key='floating-action-button' to='/statuses/new' className='floating-action-button' aria-label={intl.formatMessage(messages.publish)}><i className='fa fa-pencil' /></Link>; | |||||
const floatingActionButton = shouldHideFAB(this.context.router.history.location.pathname) ? null : <Link key='floating-action-button' to='/statuses/new' className='floating-action-button' aria-label={intl.formatMessage(messages.publish)}><Icon id='pencil' /></Link>; | |||||
return columnIndex !== -1 ? [ | return columnIndex !== -1 ? [ | ||||
<ReactSwipeableViews key='content' index={columnIndex} onChangeIndex={this.handleSwipe} onTransitionEnd={this.handleAnimationEnd} animateTransitions={shouldAnimate} springConfig={{ duration: '400ms', delay: '0s', easeFunction: 'ease' }} style={{ height: '100%' }}> | <ReactSwipeableViews key='content' index={columnIndex} onChangeIndex={this.handleSwipe} onTransitionEnd={this.handleAnimationEnd} animateTransitions={shouldAnimate} springConfig={{ duration: '400ms', delay: '0s', easeFunction: 'ease' }} style={{ height: '100%' }}> | ||||
@@ -9,6 +9,7 @@ import { defineMessages, injectIntl } from 'react-intl'; | |||||
import IconButton from '../../../components/icon_button'; | import IconButton from '../../../components/icon_button'; | ||||
import ImmutablePureComponent from 'react-immutable-pure-component'; | import ImmutablePureComponent from 'react-immutable-pure-component'; | ||||
import ImageLoader from './image_loader'; | import ImageLoader from './image_loader'; | ||||
import Icon from 'mastodon/components/icon'; | |||||
const messages = defineMessages({ | const messages = defineMessages({ | ||||
close: { id: 'lightbox.close', defaultMessage: 'Close' }, | close: { id: 'lightbox.close', defaultMessage: 'Close' }, | ||||
@@ -108,8 +109,8 @@ class MediaModal extends ImmutablePureComponent { | |||||
const index = this.getIndex(); | const index = this.getIndex(); | ||||
let pagination = []; | let pagination = []; | ||||
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)}><i className='fa fa-fw fa-chevron-left' /></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)}><i className='fa fa-fw fa-chevron-right' /></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>; | |||||
if (media.size > 1) { | if (media.size > 1) { | ||||
pagination = media.map((item, i) => { | pagination = media.map((item, i) => { | ||||
@@ -4,16 +4,17 @@ import { NavLink, withRouter } from 'react-router-dom'; | |||||
import { FormattedMessage, injectIntl } from 'react-intl'; | import { FormattedMessage, injectIntl } from 'react-intl'; | ||||
import { debounce } from 'lodash'; | import { debounce } from 'lodash'; | ||||
import { isUserTouching } from '../../../is_mobile'; | import { isUserTouching } from '../../../is_mobile'; | ||||
import Icon from 'mastodon/components/icon'; | |||||
export const links = [ | export const links = [ | ||||
<NavLink className='tabs-bar__link primary' to='/timelines/home' data-preview-title-id='column.home' data-preview-icon='home' ><i className='fa fa-fw fa-home' /><FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></NavLink>, | |||||
<NavLink className='tabs-bar__link primary' to='/notifications' data-preview-title-id='column.notifications' data-preview-icon='bell' ><i className='fa fa-fw fa-bell' /><FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></NavLink>, | |||||
<NavLink className='tabs-bar__link primary' to='/timelines/home' data-preview-title-id='column.home' data-preview-icon='home' ><Icon id='home' fixedWidth /><FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></NavLink>, | |||||
<NavLink className='tabs-bar__link primary' to='/notifications' data-preview-title-id='column.notifications' data-preview-icon='bell' ><Icon id='bell' fixedWidth /><FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></NavLink>, | |||||
<NavLink className='tabs-bar__link secondary' to='/timelines/public/local' data-preview-title-id='column.community' data-preview-icon='users' ><i className='fa fa-fw fa-users' /><FormattedMessage id='tabs_bar.local_timeline' defaultMessage='Local' /></NavLink>, | |||||
<NavLink className='tabs-bar__link secondary' exact to='/timelines/public' data-preview-title-id='column.public' data-preview-icon='globe' ><i className='fa fa-fw fa-globe' /><FormattedMessage id='tabs_bar.federated_timeline' defaultMessage='Federated' /></NavLink>, | |||||
<NavLink className='tabs-bar__link primary' to='/search' data-preview-title-id='tabs_bar.search' data-preview-icon='bell' ><i className='fa fa-fw fa-search' /><FormattedMessage id='tabs_bar.search' defaultMessage='Search' /></NavLink>, | |||||
<NavLink className='tabs-bar__link secondary' to='/timelines/public/local' data-preview-title-id='column.community' data-preview-icon='users' ><Icon id='users' fixedWidth /><FormattedMessage id='tabs_bar.local_timeline' defaultMessage='Local' /></NavLink>, | |||||
<NavLink className='tabs-bar__link secondary' exact to='/timelines/public' data-preview-title-id='column.public' data-preview-icon='globe' ><Icon id='globe' fixedWidth /><FormattedMessage id='tabs_bar.federated_timeline' defaultMessage='Federated' /></NavLink>, | |||||
<NavLink className='tabs-bar__link primary' to='/search' data-preview-title-id='tabs_bar.search' data-preview-icon='bell' ><Icon id='search' fixedWidth /><FormattedMessage id='tabs_bar.search' defaultMessage='Search' /></NavLink>, | |||||
<NavLink className='tabs-bar__link primary' style={{ flexGrow: '0', flexBasis: '30px' }} to='/getting-started' data-preview-title-id='getting_started.heading' data-preview-icon='bars' ><i className='fa fa-fw fa-bars' /></NavLink>, | |||||
<NavLink className='tabs-bar__link primary' style={{ flexGrow: '0', flexBasis: '30px' }} to='/getting-started' data-preview-title-id='getting_started.heading' data-preview-icon='bars' ><Icon id='bars' fixedWidth /></NavLink>, | |||||
]; | ]; | ||||
export function getIndex (path) { | export function getIndex (path) { | ||||
@@ -6,6 +6,7 @@ import { throttle } from 'lodash'; | |||||
import classNames from 'classnames'; | import classNames from 'classnames'; | ||||
import { isFullscreen, requestFullscreen, exitFullscreen } from '../ui/util/fullscreen'; | import { isFullscreen, requestFullscreen, exitFullscreen } from '../ui/util/fullscreen'; | ||||
import { displayMedia } from '../../initial_state'; | import { displayMedia } from '../../initial_state'; | ||||
import Icon from 'mastodon/components/icon'; | |||||
const messages = defineMessages({ | const messages = defineMessages({ | ||||
play: { id: 'video.play', defaultMessage: 'Play' }, | play: { id: 'video.play', defaultMessage: 'Play' }, | ||||
@@ -416,8 +417,8 @@ class Video extends React.PureComponent { | |||||
<div className='video-player__buttons-bar'> | <div className='video-player__buttons-bar'> | ||||
<div className='video-player__buttons left'> | <div className='video-player__buttons left'> | ||||
<button type='button' aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} onClick={this.togglePlay}><i className={classNames('fa fa-fw', { 'fa-play': paused, 'fa-pause': !paused })} /></button> | |||||
<button type='button' aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} onClick={this.toggleMute}><i className={classNames('fa fa-fw', { 'fa-volume-off': muted, 'fa-volume-up': !muted })} /></button> | |||||
<button type='button' aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} onClick={this.togglePlay}><Icon id={paused ? 'play' : 'pause'} fixedWidth /></button> | |||||
<button type='button' aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} onClick={this.toggleMute}><Icon id={muted ? 'volume-off' : 'volume-up'} fixedWidth /></button> | |||||
<div className='video-player__volume' onMouseDown={this.handleVolumeMouseDown} ref={this.setVolumeRef}> | <div className='video-player__volume' onMouseDown={this.handleVolumeMouseDown} ref={this.setVolumeRef}> | ||||
<div className='video-player__volume__current' style={{ width: `${volumeWidth}px` }} /> | <div className='video-player__volume__current' style={{ width: `${volumeWidth}px` }} /> | ||||
<span | <span | ||||
@@ -437,10 +438,10 @@ class Video extends React.PureComponent { | |||||
</div> | </div> | ||||
<div className='video-player__buttons right'> | <div className='video-player__buttons right'> | ||||
{!onCloseVideo && <button type='button' aria-label={intl.formatMessage(messages.hide)} onClick={this.toggleReveal}><i className='fa fa-fw fa-eye' /></button>} | |||||
{(!fullscreen && onOpenVideo) && <button type='button' aria-label={intl.formatMessage(messages.expand)} onClick={this.handleOpenVideo}><i className='fa fa-fw fa-expand' /></button>} | |||||
{onCloseVideo && <button type='button' aria-label={intl.formatMessage(messages.close)} onClick={this.handleCloseVideo}><i className='fa fa-fw fa-compress' /></button>} | |||||
<button type='button' aria-label={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} onClick={this.toggleFullscreen}><i className={classNames('fa fa-fw', { 'fa-arrows-alt': !fullscreen, 'fa-compress': fullscreen })} /></button> | |||||
{!onCloseVideo && <button type='button' aria-label={intl.formatMessage(messages.hide)} onClick={this.toggleReveal}><Icon id='eye' fixedWidth /></button>} | |||||
{(!fullscreen && onOpenVideo) && <button type='button' aria-label={intl.formatMessage(messages.expand)} onClick={this.handleOpenVideo}><Icon id='expand' fixedWidth /></button>} | |||||
{onCloseVideo && <button type='button' aria-label={intl.formatMessage(messages.close)} onClick={this.handleCloseVideo}><Icon id='compress' fixedWidth /></button>} | |||||
<button type='button' aria-label={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} onClick={this.toggleFullscreen}><Icon id={fullscreen ? 'compress' : 'arrows-alt'} fixedWidth /></button> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
@@ -22,4 +22,8 @@ module.exports = { | |||||
'!app/javascript/mastodon/test_setup.js', | '!app/javascript/mastodon/test_setup.js', | ||||
], | ], | ||||
coverageDirectory: '<rootDir>/coverage', | coverageDirectory: '<rootDir>/coverage', | ||||
moduleDirectories: [ | |||||
'<rootDir>/node_modules', | |||||
'<rootDir>/app/javascript', | |||||
], | |||||
}; | }; |