Use upstream's Icon component
Rework the codebase to avoid unnecessary differences with upstream
This commit is contained in:
@ -185,7 +185,7 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent
|
||||
if (on !== null && typeof on !== 'undefined') {
|
||||
prefix = <Toggle checked={on} onChange={this.handleClick} />;
|
||||
} else if (icon) {
|
||||
prefix = <Icon className='icon' fullwidth icon={icon} />
|
||||
prefix = <Icon className='icon' fixedWidth id={icon} />
|
||||
}
|
||||
|
||||
return (
|
||||
|
@ -82,13 +82,13 @@ class Header extends ImmutablePureComponent {
|
||||
aria-label={intl.formatMessage(messages.start)}
|
||||
title={intl.formatMessage(messages.start)}
|
||||
to='/getting-started'
|
||||
><Icon icon='asterisk' /></Link>
|
||||
><Icon id='asterisk' /></Link>
|
||||
{renderForColumn('HOME', (
|
||||
<Link
|
||||
aria-label={intl.formatMessage(messages.home_timeline)}
|
||||
title={intl.formatMessage(messages.home_timeline)}
|
||||
to='/timelines/home'
|
||||
><Icon icon='home' /></Link>
|
||||
><Icon id='home' /></Link>
|
||||
))}
|
||||
{renderForColumn('NOTIFICATIONS', (
|
||||
<Link
|
||||
@ -97,7 +97,7 @@ class Header extends ImmutablePureComponent {
|
||||
to='/notifications'
|
||||
>
|
||||
<span className='icon-badge-wrapper'>
|
||||
<Icon icon='bell' />
|
||||
<Icon id='bell' />
|
||||
{ showNotificationsBadge && unreadNotifications > 0 && <div className='icon-badge' />}
|
||||
</span>
|
||||
</Link>
|
||||
@ -107,27 +107,27 @@ class Header extends ImmutablePureComponent {
|
||||
aria-label={intl.formatMessage(messages.community)}
|
||||
title={intl.formatMessage(messages.community)}
|
||||
to='/timelines/public/local'
|
||||
><Icon icon='users' /></Link>
|
||||
><Icon id='users' /></Link>
|
||||
))}
|
||||
{renderForColumn('PUBLIC', (
|
||||
<Link
|
||||
aria-label={intl.formatMessage(messages.public)}
|
||||
title={intl.formatMessage(messages.public)}
|
||||
to='/timelines/public'
|
||||
><Icon icon='globe' /></Link>
|
||||
><Icon id='globe' /></Link>
|
||||
))}
|
||||
<a
|
||||
aria-label={intl.formatMessage(messages.settings)}
|
||||
onClick={onSettingsClick}
|
||||
href='#'
|
||||
title={intl.formatMessage(messages.settings)}
|
||||
><Icon icon='cogs' /></a>
|
||||
><Icon id='cogs' /></a>
|
||||
<a
|
||||
aria-label={intl.formatMessage(messages.logout)}
|
||||
onClick={this.handleLogoutClick}
|
||||
href={ signOutLink }
|
||||
title={intl.formatMessage(messages.logout)}
|
||||
><Icon icon='sign-out' /></a>
|
||||
><Icon id='sign-out' /></a>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
@ -79,7 +79,7 @@ class Option extends React.PureComponent {
|
||||
</label>
|
||||
|
||||
<div className='poll__cancel'>
|
||||
<IconButton disabled={index <= 1} title={intl.formatMessage(messages.remove_option)} icon='times' onClick={this.handleOptionRemove} />
|
||||
<IconButton disabled={index <= 1} title={intl.formatMessage(messages.remove_option)} id='times' onClick={this.handleOptionRemove} />
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
@ -132,7 +132,7 @@ class PollForm extends ImmutablePureComponent {
|
||||
{options.size < pollLimits.max_options && (
|
||||
<label className='poll__text editable'>
|
||||
<span className={classNames('poll__input')} style={{ opacity: 0 }} />
|
||||
<button className='button button-secondary' onClick={this.handleAddOption}><Icon icon='plus' /> <FormattedMessage {...messages.add_option} /></button>
|
||||
<button className='button button-secondary' onClick={this.handleAddOption}><Icon id='plus' /> <FormattedMessage {...messages.add_option} /></button>
|
||||
</label>
|
||||
)}
|
||||
</ul>
|
||||
|
@ -58,7 +58,7 @@ class Publisher extends ImmutablePureComponent {
|
||||
text={
|
||||
<span>
|
||||
<Icon
|
||||
icon={{
|
||||
id={{
|
||||
public: 'globe',
|
||||
unlisted: 'unlock',
|
||||
private: 'lock',
|
||||
@ -80,7 +80,7 @@ class Publisher extends ImmutablePureComponent {
|
||||
return (
|
||||
<span>
|
||||
<Icon
|
||||
icon={{
|
||||
id={{
|
||||
direct: 'envelope',
|
||||
private: 'lock',
|
||||
public: 'globe',
|
||||
|
@ -153,8 +153,8 @@ class Search extends React.PureComponent {
|
||||
role='button'
|
||||
tabIndex='0'
|
||||
>
|
||||
<Icon icon='search' className={hasValue ? '' : 'active'} />
|
||||
<Icon icon='times-circle' className={hasValue ? 'active' : ''} />
|
||||
<Icon id='search' className={hasValue ? '' : 'active'} />
|
||||
<Icon id='times-circle' className={hasValue ? 'active' : ''} />
|
||||
</div>
|
||||
|
||||
<Overlay show={expanded && !hasValue} placement='bottom' target={this}>
|
||||
|
@ -82,7 +82,7 @@ class SearchResults extends ImmutablePureComponent {
|
||||
count += results.get('accounts').size;
|
||||
accounts = (
|
||||
<section>
|
||||
<h5><Icon icon='users' fixedWidth /><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 id={accountId} key={accountId} />)}
|
||||
|
||||
@ -95,7 +95,7 @@ class SearchResults extends ImmutablePureComponent {
|
||||
count += results.get('statuses').size;
|
||||
statuses = (
|
||||
<section>
|
||||
<h5><Icon icon='quote-right' fixedWidth /><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 id={statusId} key={statusId}/>)}
|
||||
|
||||
@ -108,7 +108,7 @@ class SearchResults extends ImmutablePureComponent {
|
||||
count += results.get('hashtags').size;
|
||||
hashtags = (
|
||||
<section>
|
||||
<h5><Icon icon='hashtag' fixedWidth /><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} />)}
|
||||
|
||||
@ -121,7 +121,7 @@ class SearchResults extends ImmutablePureComponent {
|
||||
return (
|
||||
<div className='drawer--results'>
|
||||
<header className='search-results__header'>
|
||||
<Icon icon='search' fixedWidth />
|
||||
<Icon id='search' fixedWidth />
|
||||
<FormattedMessage id='search_results.total' defaultMessage='{count, number} {count, plural, one {result} other {results}}' values={{ count }} />
|
||||
</header>
|
||||
|
||||
|
@ -47,8 +47,8 @@ class TextareaIcons extends ImmutablePureComponent {
|
||||
title={intl.formatMessage(message)}
|
||||
>
|
||||
<Icon
|
||||
fullwidth
|
||||
icon={icon}
|
||||
fixedWidth
|
||||
id={icon}
|
||||
/>
|
||||
</span>
|
||||
) : null
|
||||
|
@ -44,7 +44,7 @@ export default class Upload extends ImmutablePureComponent {
|
||||
{({ scale }) => (
|
||||
<div style={{ transform: `scale(${scale})`, backgroundImage: `url(${media.get('preview_url')})`, backgroundPosition: `${x}% ${y}%` }}>
|
||||
<div className={classNames('composer--upload_form--actions', { active: true })}>
|
||||
<button className='icon-button' onClick={this.handleUndoClick}><Icon icon='times' /> <FormattedMessage id='upload_form.undo' defaultMessage='Delete' /></button>
|
||||
<button className='icon-button' onClick={this.handleUndoClick}><Icon id='times' /> <FormattedMessage id='upload_form.undo' defaultMessage='Delete' /></button>
|
||||
<button className='icon-button' onClick={this.handleFocalPointClick}><Icon id='pencil' /> <FormattedMessage id='upload_form.edit' defaultMessage='Edit' /></button>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -22,7 +22,7 @@ export default class UploadProgress extends React.PureComponent {
|
||||
|
||||
return (
|
||||
<div className='composer--upload_form--progress'>
|
||||
<Icon icon={icon} />
|
||||
<Icon id={icon} />
|
||||
|
||||
<div className='message'>
|
||||
{message}
|
||||
|
Reference in New Issue
Block a user