ar
/
mastodon
forked from treehouse/mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Migrate to font-awesome 5.0. (#8799)

rebase/4.0.0rc2
Naoki Kosaka 2018-09-28 00:08:56 +09:00 committed by Eugen Rochko
parent 15fc2b76f9
commit 8bae14591b
47 changed files with 102 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/helpers/application_helper.rb
View File

@ -55,7 +55,7 @@ module ApplicationHelper
def fa_icon(icon, attributes = {})
class_names = attributes[:class]&.split(' ') || []
class_names << 'fa'
class_names << 'fas'
class_names += icon.split(' ').map { |cl| "fa-#{cl}" }
content_tag(:i, nil, attributes.merge(class: class_names.join(' ')))

4
app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.js.snap
View File

@ -15,7 +15,7 @@ exports[`<Avatar /> Autoplay renders a animated avatar 1`] = `
}
>
<i
className="fa fa-fw fa-robot bot-icon"
className="fas fa-fw fa-robot bot-icon"
/>
</div>
`;
@ -35,7 +35,7 @@ exports[`<Avatar /> Still renders a still avatar 1`] = `
}
>
<i
className="fa fa-fw fa-robot bot-icon"
className="fas fa-fw fa-robot bot-icon"
/>
</div>
`;

4
app/javascript/mastodon/components/attachment_list.js
View File

@ -24,7 +24,7 @@ export default class AttachmentList extends ImmutablePureComponent {
return (
<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'><i className='fas fa-link' /> {filename(displayUrl)}</a>
</li>
);
})}
@ -36,7 +36,7 @@ export default class AttachmentList extends ImmutablePureComponent {
return (
<div className='attachment-list'>
<div className='attachment-list__icon'>
<i className='fa fa-link' />
<i className='fas fa-link' />
</div>
<ul className='attachment-list__list'>

2
app/javascript/mastodon/components/bot_icon.js
View File

@ -13,7 +13,7 @@ export default class BotIcon extends ImmutablePureComponent {
if (account.get('bot')) {
return (
<i className='fa fa-fw fa-robot bot-icon' />
<i className='fas fa-fw fa-robot bot-icon' />
);
}

2
app/javascript/mastodon/components/column_back_button.js
View File

@ -19,7 +19,7 @@ export default class ColumnBackButton extends React.PureComponent {
render () {
return (
<button onClick={this.handleClick} className='column-back-button'>
<i className='fa fa-fw fa-chevron-left column-back-button__icon' />
<i className='fas fa-fw fa-chevron-left column-back-button__icon' />
<FormattedMessage id='column_back_button.label' defaultMessage='Back' />
</button>
);

2
app/javascript/mastodon/components/column_back_button_slim.js
View File

@ -8,7 +8,7 @@ export default class ColumnBackButtonSlim extends ColumnBackButton {
return (
<div className='column-back-button--slim'>
<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' />
<i className='fas fa-fw fa-chevron-left column-back-button__icon' />
<FormattedMessage id='column_back_button.label' defaultMessage='Back' />
</div>
</div>

14
app/javascript/mastodon/components/column_header.js
View File

@ -95,22 +95,22 @@ class ColumnHeader extends React.PureComponent {
}
if (multiColumn && pinned) {
pinButton = <button key='pin-button' className='text-btn column-header__setting-btn' onClick={onPin}><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={onPin}><i className='fas fa-times' /> <FormattedMessage id='column_header.unpin' defaultMessage='Unpin' /></button>;
moveButtons = (
<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}><i className='fas 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='fas fa-chevron-right' /></button>
</div>
);
} else if (multiColumn) {
pinButton = <button key='pin-button' className='text-btn column-header__setting-btn' onClick={onPin}><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={onPin}><i className='fas fa-plus' /> <FormattedMessage id='column_header.pin' defaultMessage='Pin' /></button>;
}
if (!pinned && (multiColumn || showBackButton)) {
backButton = (
<button onClick={this.handleBackClick} className='column-header__back-button'>
<i className='fa fa-fw fa-chevron-left column-back-button__icon' />
<i className='fas fa-fw fa-chevron-left column-back-button__icon' />
<FormattedMessage id='column_back_button.label' defaultMessage='Back' />
</button>
);
@ -126,7 +126,7 @@ class ColumnHeader extends React.PureComponent {
}
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-h' /></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}><i className='fas fa-sliders-h' /></button>;
}
const hasTitle = icon && title;
@ -136,7 +136,7 @@ class ColumnHeader extends React.PureComponent {
<h1 className={buttonClassName}>
{hasTitle && (
<button onClick={this.handleTitleClick}>
<i className={`fa fa-fw fa-${icon} column-header__icon`} />
<i className={`fas fa-fw fa-${icon} column-header__icon`} />
{title}
</button>
)}

4
app/javascript/mastodon/components/icon_button.js
View File

@ -86,7 +86,7 @@ export default class IconButton extends React.PureComponent {
style={style}
tabIndex={tabIndex}
>
<i className={`fa fa-fw fa-${icon}`} aria-hidden='true' />
<i className={`fas fa-fw fa-${icon}`} aria-hidden='true' />
</button>
);
}
@ -104,7 +104,7 @@ export default class IconButton extends React.PureComponent {
style={style}
tabIndex={tabIndex}
>
<i style={{ transform: `rotate(${rotate}deg)` }} className={`fa fa-fw fa-${icon}`} aria-hidden='true' />
<i style={{ transform: `rotate(${rotate}deg)` }} className={`fas fa-fw fa-${icon}`} aria-hidden='true' />
</button>
)}
</Motion>

2
app/javascript/mastodon/components/load_gap.js
View File

@ -25,7 +25,7 @@ class LoadGap extends React.PureComponent {
return (
<button className='load-more load-gap' disabled={disabled} onClick={this.handleClick} aria-label={intl.formatMessage(messages.load_more)}>
<i className='fa fa-ellipsis-h' />
<i className='fas fa-ellipsis-h' />
</button>
);
}

4
app/javascript/mastodon/components/status.js
View File

@ -193,7 +193,7 @@ class Status extends ImmutablePureComponent {
if (featured) {
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'><i className='fas fa-fw fa-thumbtack status__prepend-icon' /></div>
<FormattedMessage id='status.pinned' defaultMessage='Pinned toot' />
</div>
);
@ -202,7 +202,7 @@ class Status extends ImmutablePureComponent {
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'><i className='fas fa-fw fa-retweet status__prepend-icon' /></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> }} />
</div>
);

4
app/javascript/mastodon/features/account/components/header.js
View File

@ -150,7 +150,7 @@ class Header extends ImmutablePureComponent {
}
if (account.get('locked')) {
lockedIcon = <i className='fa fa-lock' />;
lockedIcon = <i className='fas fa-lock' />;
}
const content = { __html: account.get('note_emojified') };
@ -177,7 +177,7 @@ class Header extends ImmutablePureComponent {
<dt dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }} title={pair.get('name')} />
<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) })}><i className='fas fa-check verified__mark' /></span>} <span dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }} />
</dd>
</dl>
))}

2
app/javascript/mastodon/features/account_timeline/components/moved_note.js
View File

@ -33,7 +33,7 @@ export default class MovedNote extends ImmutablePureComponent {
return (
<div className='account__moved-note'>
<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'><i className='fas fa-fw fa-suitcase account__moved-note__icon' /></div>
<FormattedMessage id='account.moved_to' defaultMessage='{name} has moved to:' values={{ name: <bdi><strong dangerouslySetInnerHTML={displayNameHtml} /></bdi> }} />
</div>

2
app/javascript/mastodon/features/compose/components/compose_form.js
View File

@ -160,7 +160,7 @@ class ComposeForm extends ImmutablePureComponent {
let publishText = '';
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'><i className='fas fa-lock' /> {intl.formatMessage(messages.publish)}</span>;
} else {
publishText = this.props.privacy !== 'unlisted' ? intl.formatMessage(messages.publishLoud, { publish: intl.formatMessage(messages.publish) }) : intl.formatMessage(messages.publish);
}

2
app/javascript/mastodon/features/compose/components/privacy_dropdown.js
View File

@ -132,7 +132,7 @@ class PrivacyDropdownMenu extends React.PureComponent {
{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 className='privacy-dropdown__option__icon'>
<i className={`fa fa-fw fa-${item.icon}`} />
<i className={`fas fa-fw fa-${item.icon}`} />
</div>
<div className='privacy-dropdown__option__content'>

4
app/javascript/mastodon/features/compose/components/search.js
View File

@ -116,8 +116,8 @@ class Search extends React.PureComponent {
</label>
<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' : ''}`} />
<i className={`fas fa-search ${hasValue ? '' : 'active'}`} />
<i aria-label={intl.formatMessage(messages.placeholder)} className={`fas fa-times-circle ${hasValue ? 'active' : ''}`} />
</div>
<Overlay show={expanded && !hasValue} placement='bottom' target={this}>

8
app/javascript/mastodon/features/compose/components/search_results.js
View File

@ -22,7 +22,7 @@ export default class SearchResults extends ImmutablePureComponent {
count += results.get('accounts').size;
accounts = (
<div className='search-results__section'>
<h5><i className='fa fa-fw fa-users' /><FormattedMessage id='search_results.accounts' defaultMessage='People' /></h5>
<h5><i className='fas fa-fw fa-users' /><FormattedMessage id='search_results.accounts' defaultMessage='People' /></h5>
{results.get('accounts').map(accountId => <AccountContainer key={accountId} id={accountId} />)}
</div>
@ -33,7 +33,7 @@ export default class SearchResults extends ImmutablePureComponent {
count += results.get('statuses').size;
statuses = (
<div className='search-results__section'>
<h5><i className='fa fa-fw fa-quote-right' /><FormattedMessage id='search_results.statuses' defaultMessage='Toots' /></h5>
<h5><i className='fas fa-fw fa-quote-right' /><FormattedMessage id='search_results.statuses' defaultMessage='Toots' /></h5>
{results.get('statuses').map(statusId => <StatusContainer key={statusId} id={statusId} />)}
</div>
@ -44,7 +44,7 @@ export default class SearchResults extends ImmutablePureComponent {
count += results.get('hashtags').size;
hashtags = (
<div className='search-results__section'>
<h5><i className='fa fa-fw fa-hashtag' /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></h5>
<h5><i className='fas fa-fw fa-hashtag' /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></h5>
{results.get('hashtags').map(hashtag => <Hashtag key={hashtag.get('name')} hashtag={hashtag} />)}
</div>
@ -54,7 +54,7 @@ export default class SearchResults extends ImmutablePureComponent {
return (
<div className='search-results'>
<div className='search-results__header'>
<i className='fa fa-search fa-fw' />
<i className='fas fa-search fa-fw' />
<FormattedMessage id='search_results.total' defaultMessage='{count, number} {count, plural, one {result} other {results}}' values={{ count }} />
</div>

4
app/javascript/mastodon/features/compose/components/upload.js
View File

@ -89,8 +89,8 @@ class Upload extends ImmutablePureComponent {
{({ scale }) => (
<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 })}>
<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}><i className='fas fa-times' /> <FormattedMessage id='upload_form.undo' defaultMessage='Delete' /></button>
{media.get('type') === 'image' && <button className='icon-button' onClick={this.handleFocalPointClick}><i className='fas fa-crosshairs' /> <FormattedMessage id='upload_form.focus' defaultMessage='Crop' /></button>}
</div>
<div className={classNames('compose-form__upload-description', { active })}>

2
app/javascript/mastodon/features/compose/components/upload_progress.js
View File

@ -21,7 +21,7 @@ export default class UploadProgress extends React.PureComponent {
return (
<div className='upload-progress'>
<div className='upload-progress__icon'>
<i className='fa fa-upload' />
<i className='fas fa-upload' />
</div>
<div className='upload-progress__message'>

14
app/javascript/mastodon/features/compose/index.js
View File

@ -76,21 +76,21 @@ class Compose extends React.PureComponent {
const { columns } = this.props;
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)}><i role='img' className='fas fa-fw fa-bars' /></Link>
{!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)}><i role='img' className='fas fa-fw fa-home' /></Link>
)}
{!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)}><i role='img' className='fas fa-fw fa-bell' /></Link>
)}
{!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)}><i role='img' className='fas fa-fw fa-users' /></Link>
)}
{!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)}><i role='img' className='fas fa-fw fa-globe' /></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-alt' /></a>
<a href='/settings/preferences' className='drawer__tab' title={intl.formatMessage(messages.preferences)} aria-label={intl.formatMessage(messages.preferences)}><i role='img' className='fas 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='fas fa-fw fa-sign-out-alt' /></a>
</nav>
);
}

2
app/javascript/mastodon/features/getting_started/index.js
View File

@ -120,7 +120,7 @@ class GettingStarted extends ImmutablePureComponent {
{multiColumn && <div className='column-header__wrapper'>
<h1 className='column-header'>
<button>
<i className='fa fa-bars fa-fw column-header__icon' />
<i className='fas fa-bars fa-fw column-header__icon' />
<FormattedMessage id='getting_started.heading' defaultMessage='Getting started' />
</button>
</h1>

4
app/javascript/mastodon/features/list_editor/components/search.js
View File

@ -65,8 +65,8 @@ class Search extends React.PureComponent {
</label>
<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 })} />
<i className={classNames('fas fa-search', { active: !hasValue })} />
<i aria-label={intl.formatMessage(messages.search)} className={classNames('fas fa-times-circle', { active: hasValue })} />
</div>
</div>
);

4
app/javascript/mastodon/features/list_timeline/index.js
View File

@ -150,11 +150,11 @@ class ListTimeline extends React.PureComponent {
>
<div className='column-header__links'>
<button className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.handleEditClick}>
<i className='fa fa-pencil-alt' /> <FormattedMessage id='lists.edit' defaultMessage='Edit list' />
<i className='fas fa-pencil-alt' /> <FormattedMessage id='lists.edit' defaultMessage='Edit list' />
</button>
<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' />
<i className='fas fa-trash' /> <FormattedMessage id='lists.delete' defaultMessage='Delete list' />
</button>
</div>

2
app/javascript/mastodon/features/notifications/components/clear_column_button.js
View File

@ -10,7 +10,7 @@ export default class ClearColumnButton extends React.PureComponent {
render () {
return (
<button className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.props.onClick}><i className='fa fa-eraser' /> <FormattedMessage id='notifications.clear' defaultMessage='Clear notifications' /></button>
<button className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.props.onClick}><i className='fas fa-eraser' /> <FormattedMessage id='notifications.clear' defaultMessage='Clear notifications' /></button>
);
}

6
app/javascript/mastodon/features/notifications/components/notification.js
View File

@ -83,7 +83,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__message'>
<div className='notification__favourite-icon-wrapper'>
<i className='fa fa-fw fa-user-plus' />
<i className='fas fa-fw fa-user-plus' />
</div>
<FormattedMessage id='notification.follow' defaultMessage='{name} followed you' values={{ name: link }} />
@ -116,7 +116,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__message'>
<div className='notification__favourite-icon-wrapper'>
<i className='fa fa-fw fa-star star-icon' />
<i className='fas fa-fw fa-star star-icon' />
</div>
<FormattedMessage id='notification.favourite' defaultMessage='{name} favourited your status' values={{ name: link }} />
</div>
@ -135,7 +135,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__message'>
<div className='notification__favourite-icon-wrapper'>
<i className='fa fa-fw fa-retweet' />
<i className='fas fa-fw fa-retweet' />
</div>
<FormattedMessage id='notification.reblog' defaultMessage='{name} boosted your status' values={{ name: link }} />
</div>

2
app/javascript/mastodon/features/pinned_statuses/index.js
View File

@ -46,7 +46,7 @@ class PinnedStatuses extends ImmutablePureComponent {
const { intl, shouldUpdateScroll, statusIds, hasMore } = this.props;
return (
<Column icon='thumb-tack' heading={intl.formatMessage(messages.heading)} ref={this.setRef}>
<Column icon='thumbtack' heading={intl.formatMessage(messages.heading)} ref={this.setRef}>
<ColumnBackButtonSlim />
<StatusList
statusIds={statusIds}

4
app/javascript/mastodon/features/status/components/card.js
View File

@ -173,8 +173,8 @@ export default class Card extends React.PureComponent {
<div className='status-card__actions'>
<div>
<button onClick={this.handleEmbedClick}><i className={`fa fa-${iconVariant}`} /></button>
<a href={card.get('url')} target='_blank' rel='noopener'><i className='fa fa-external-link' /></a>
<button onClick={this.handleEmbedClick}><i className={`fas fa-${iconVariant}`} /></button>
<a href={card.get('url')} target='_blank' rel='noopener'><i className='fas fa-external-link-alt' /></a>
</div>
</div>
</div>

6
app/javascript/mastodon/features/status/components/detailed_status.js
View File

@ -94,10 +94,10 @@ export default class DetailedStatus extends ImmutablePureComponent {
}
if (status.get('visibility') === 'private') {
reblogLink = <i className={`fa fa-${reblogIcon}`} />;
reblogLink = <i className={`fas fa-${reblogIcon}`} />;
} else {
reblogLink = (<Link to={`/statuses/${status.get('id')}/reblogs`} className='detailed-status__link'>
<i className={`fa fa-${reblogIcon}`} />
<i className={`fas fa-${reblogIcon}`} />
<span className='detailed-status__reblogs'>
<FormattedNumber value={status.get('reblogs_count')} />
</span>
@ -119,7 +119,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
<a className='detailed-status__datetime' href={status.get('url')} target='_blank' rel='noopener'>
<FormattedDate value={new Date(status.get('created_at'))} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' />
</a>{applicationLink} · {reblogLink} · <Link to={`/statuses/${status.get('id')}/favourites`} className='detailed-status__link'>
<i className='fa fa-star' />
<i className='fas fa-star' />
<span className='detailed-status__favorites'>
<FormattedNumber value={status.get('favourites_count')} />
</span>

2
app/javascript/mastodon/features/status/index.js
View File

@ -410,7 +410,7 @@ class Status extends ImmutablePureComponent {
<ColumnHeader
showBackButton
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'}><i className={`fas fa-${status.get('hidden') ? 'eye-slash' : 'eye'}`} /></button>
)}
/>

2
app/javascript/mastodon/features/ui/components/boost_modal.js
View File

@ -74,7 +74,7 @@ class BoostModal extends ImmutablePureComponent {
</div>
<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 + <i className='fas fa-retweet' /></span> }} /></div>
<Button text={intl.formatMessage(messages.reblog)} onClick={this.handleReblog} ref={this.setRef} />
</div>
</div>

2
app/javascript/mastodon/features/ui/components/column_header.js
View File

@ -21,7 +21,7 @@ export default class ColumnHeader extends React.PureComponent {
let iconElement = '';
if (icon) {
iconElement = <i className={`fa fa-fw fa-${icon} column-header__icon`} />;
iconElement = <i className={`fas fa-fw fa-${icon} column-header__icon`} />;
}
return (

4
app/javascript/mastodon/features/ui/components/column_link.js
View File

@ -8,7 +8,7 @@ const ColumnLink = ({ icon, text, to, href, method, badge }) => {
if (href) {
return (
<a href={href} className='column-link' data-method={method}>
<i className={`fa fa-fw fa-${icon} column-link__icon`} />
<i className={`fas fa-fw fa-${icon} column-link__icon`} />
{text}
{badgeElement}
</a>
@ -16,7 +16,7 @@ const ColumnLink = ({ icon, text, to, href, method, badge }) => {
} else {
return (
<Link to={to} className='column-link'>
<i className={`fa fa-fw fa-${icon} column-link__icon`} />
<i className={`fas fa-fw fa-${icon} column-link__icon`} />
{text}
{badgeElement}
</Link>

2
app/javascript/mastodon/features/ui/components/columns_area.js
View File

@ -160,7 +160,7 @@ class ColumnsArea extends ImmutablePureComponent {
this.pendingIndex = null;
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-alt' /></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)}><i className='fas fa-pencil-alt' /></Link>;
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%' }}>

4
app/javascript/mastodon/features/ui/components/media_modal.js
View File

@ -108,8 +108,8 @@ class MediaModal extends ImmutablePureComponent {
const index = this.getIndex();
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)}><i className='fas 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='fas fa-fw fa-chevron-right' /></button>;
if (media.size > 1) {
pagination = media.map((item, i) => {

4
app/javascript/mastodon/features/ui/components/onboarding_modal.js
View File

@ -262,11 +262,11 @@ class OnboardingModal extends React.PureComponent {
const nextOrDoneBtn = hasMore ? (
<button onClick={this.handleNext} className='onboarding-modal__nav onboarding-modal__next shake-bottom'>
<FormattedMessage id='onboarding.next' defaultMessage='Next' /> <i className='fa fa-fw fa-chevron-right' />
<FormattedMessage id='onboarding.next' defaultMessage='Next' /> <i className='fas fa-fw fa-chevron-right' />
</button>
) : (
<button onClick={this.handleClose} className='onboarding-modal__nav onboarding-modal__done shake-bottom'>
<FormattedMessage id='onboarding.done' defaultMessage='Done' /> <i className='fa fa-fw fa-check' />
<FormattedMessage id='onboarding.done' defaultMessage='Done' /> <i className='fas fa-fw fa-check' />
</button>
);

12
app/javascript/mastodon/features/ui/components/tabs_bar.js
View File

@ -6,14 +6,14 @@ import { debounce } from 'lodash';
import { isUserTouching } from '../../../is_mobile';
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' ><i className='fas 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='fas fa-fw fa-bell' /><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' ><i className='fas 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='fas 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='fas fa-fw fa-search' /><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' ><i className='fas fa-fw fa-bars' /></NavLink>,
];
export function getIndex (path) {

12
app/javascript/mastodon/features/video/index.js
View File

@ -353,10 +353,10 @@ class Video extends React.PureComponent {
<div className='video-player__buttons-bar'>
<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}><i className={classNames('fas 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('fas fa-fw', { 'fa-volume-off': muted, 'fa-volume-up': !muted })} /></button>
{!onCloseVideo && <button type='button' aria-label={intl.formatMessage(messages.hide)} onClick={this.toggleReveal}><i className='fa fa-fw fa-eye' /></button>}
{!onCloseVideo && <button type='button' aria-label={intl.formatMessage(messages.hide)} onClick={this.toggleReveal}><i className='fas fa-fw fa-eye' /></button>}
{(detailed || fullscreen) &&
<span>
@ -368,9 +368,9 @@ class Video extends React.PureComponent {
</div>
<div className='video-player__buttons right'>
{(!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>
{(!fullscreen && onOpenVideo) && <button type='button' aria-label={intl.formatMessage(messages.expand)} onClick={this.handleOpenVideo}><i className='fas fa-fw fa-expand' /></button>}
{onCloseVideo && <button type='button' aria-label={intl.formatMessage(messages.close)} onClick={this.handleCloseVideo}><i className='fas fa-fw fa-compress' /></button>}
<button type='button' aria-label={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} onClick={this.toggleFullscreen}><i className={classNames('fas fa-fw', { 'fa-arrows-alt': !fullscreen, 'fa-compress': fullscreen })} /></button>
</div>
</div>
</div>

2
app/javascript/styles/mastodon/about.scss
View File

@ -1113,7 +1113,7 @@ $small-breakpoint: 960px;
align-items: center;
margin-left: 15px;
.fa {
.fas {
display: block;
color: $darker-text-color;
font-size: 48px;

4
app/javascript/styles/mastodon/accounts.scss
View File

@ -136,7 +136,7 @@
float: left;
padding-left: 0;
.fa {
.fas {
display: inline-block;
margin-right: 5px;
}
@ -146,7 +146,7 @@
float: right;
padding-right: 0;
.fa {
.fas {
display: inline-block;
margin-left: 5px;
}

2
app/javascript/styles/mastodon/admin.scss
View File

@ -50,7 +50,7 @@ $no-columns-breakpoint: 600px;
transition: all 200ms linear;
border-radius: 4px 0 0 4px;
i.fa {
i.fas {
margin-right: 5px;
}

22
app/javascript/styles/mastodon/components.scss
View File

@ -675,7 +675,7 @@
&:hover {
text-decoration: underline;
.fa {
.fas {
color: lighten($dark-text-color, 7%);
}
}
@ -690,7 +690,7 @@
}
}
.fa {
.fas {
color: $dark-text-color;
}
}
@ -1496,7 +1496,7 @@ a.account__display-name {
font-size: 15px;
position: relative;
.fa {
.fas {
color: $highlight-text-color;
}
@ -2044,7 +2044,7 @@ a.account__display-name {
border-bottom: 2px solid lighten($ui-base-color, 8%);
transition: all 50ms linear;
.fa {
.fas {
font-weight: 400;
font-size: 16px;
}
@ -3274,7 +3274,7 @@ a.status-card {
overflow: hidden;
display: flex;
.fa {
.fas {
font-size: 34px;
margin-right: 10px;
}
@ -3491,7 +3491,7 @@ a.status-card {
outline: 0 !important;
}
.fa {
.fas {
position: absolute;
top: 10px;
right: 10px;
@ -3545,7 +3545,7 @@ a.status-card {
font-size: 16px;
cursor: default;
.fa {
.fas {
display: inline-block;
margin-right: 5px;
}
@ -3564,7 +3564,7 @@ a.status-card {
font-size: 16px;
color: $dark-text-color;
.fa {
.fas {
display: inline-block;
margin-right: 5px;
}
@ -4462,7 +4462,7 @@ a.status-card {
justify-content: center;
font-size: 26px;
.fa {
.fas {
display: block;
}
}
@ -4500,7 +4500,7 @@ a.status-card {
display: block;
}
.fa {
.fas {
color: $dark-text-color;
}
}
@ -5447,7 +5447,7 @@ noscript {
font-size: 16px;
cursor: default;
.fa {
.fas {
display: inline-block;
margin-right: 5px;
}

2
app/javascript/styles/mastodon/forms.scss
View File

@ -656,7 +656,7 @@ code {
}
}
.fa {
.fas {
font-weight: 400;
}
}

6
app/javascript/styles/mastodon/rtl.scss
View File

@ -38,7 +38,7 @@ body.rtl {
padding-left: 30px;
}
.search__icon .fa {
.search__icon .fas {
right: auto;
left: 10px;
}
@ -197,7 +197,7 @@ body.rtl {
}
.admin-wrapper .sidebar ul a i.fa,
a.table-action-link i.fa {
a.table-action-link i.fas {
margin-right: 0;
margin-left: 5px;
}
@ -264,7 +264,7 @@ body.rtl {
left: 0;
}
.landing-page .fa-external-link {
.landing-page .fa-external-link-alt {
padding-right: 5px;
padding-left: 0 !important;
}

2
app/javascript/styles/mastodon/tables.scss
View File

@ -112,7 +112,7 @@ a.table-action-link {
color: $primary-text-color;
}
i.fa {
i.fas {
font-weight: 400;
margin-right: 5px;
}

2
app/javascript/styles/mastodon/widgets.scss
View File

@ -196,7 +196,7 @@
&__message {
margin-bottom: 15px;
.fa {
.fas {
margin-right: 5px;
color: $darker-text-color;
}

2
app/views/about/_links.html.haml
View File

@ -13,4 +13,4 @@
%li
= link_to 'https://joinmastodon.org/' do
= "#{t('about.other_instances')}"
%i.fa.fa-external-link{ style: 'padding-left: 5px;' }
%i.fa.fa-external-link-alt{ style: 'padding-left: 5px;' }

2
app/views/stream_entries/_status.html.haml
View File

@ -35,7 +35,7 @@
- elsif pinned
.status__prepend
.status__prepend-icon-wrapper
%i.status__prepend-icon.fa.fa-fw.fa-thumb-tack
%i.status__prepend-icon.fa.fa-fw.fa-thumbtack
%span
= t('stream_entries.pinned')

2
spec/helpers/application_helper_spec.rb
View File

@ -55,7 +55,7 @@ describe ApplicationHelper do
describe 'fa_icon' do
it 'returns a tag of fixed-width cog' do
expect(helper.fa_icon('cog fw')).to eq '<i class="fa fa-cog fa-fw"></i>'
expect(helper.fa_icon('cog fw')).to eq '<i class="fas fa-cog fa-fw"></i>'
end
end