import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import ImmutablePureComponent from 'react-immutable-pure-component';
+import Icon from 'flavours/glitch/components/icon';
const filename = url => url.split('/').pop().split('#')[0].split('?')[0];
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'><Icon id='link' /> {filename(displayUrl)}</a>
</li>
);
})}
return (
<div className='attachment-list'>
<div className='attachment-list__icon'>
- <i className='fa fa-link' />
+ <Icon id='link' />
</div>
<ul className='attachment-list__list'>
import React from 'react';
import { FormattedMessage } from 'react-intl';
import PropTypes from 'prop-types';
+import Icon from 'flavours/glitch/components/icon';
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' />
+ <Icon id='chevron-left' className='column-back-button__icon' fixedWidth />
<FormattedMessage id='column_back_button.label' defaultMessage='Back' />
</button>
);
import React from 'react';
import { FormattedMessage } from 'react-intl';
import PropTypes from 'prop-types';
+import Icon from 'mastodon/components/icon';
export default class ColumnBackButtonSlim extends React.PureComponent {
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' />
+ <Icon id='chevron-left' className='column-back-button__icon' fixedWidth />
<FormattedMessage id='column_back_button.label' defaultMessage='Back' />
</div>
</div>
import classNames from 'classnames';
import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
import ImmutablePropTypes from 'react-immutable-proptypes';
+import Icon from 'flavours/glitch/components/icon';
import NotificationPurgeButtonsContainer from 'flavours/glitch/containers/notification_purge_buttons_container';
}
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 = (
<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>
);
} 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)) {
backButton = (
<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' />
</button>
);
}
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;
<h1 className={buttonClassName}>
{hasTitle && (
<button onClick={this.handleTitleClick}>
- <i className={`fa fa-fw fa-${icon} column-header__icon`} />
+ <Icon id={icon} fixedWidth className='column-header__icon' />
{title}
</button>
)}
onClick={this.onEnterCleaningMode}
className={notifCleaningButtonClassName}
>
- <i className='fa fa-eraser' />
+ <Icon id='eraser' />
</button>
) : null}
{collapseButton}
import React from 'react';
import PropTypes from 'prop-types';
import { injectIntl, defineMessages } from 'react-intl';
+import Icon from 'flavours/glitch/components/icon';
const messages = defineMessages({
load_more: { id: 'status.load_more', defaultMessage: 'Load more' },
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' />
+ <Icon id='ellipsis-h' />
</button>
);
}
import PropTypes from 'prop-types';
import { defineMessages, injectIntl } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component';
+import Icon from 'flavours/glitch/components/icon';
const messages = defineMessages({
btnAll : { id: 'notification_purge.btn_all', defaultMessage: 'Select\nall' },
</button>
<button onClick={this.props.onDeleteMarked}>
- <i className='fa fa-trash' /><br />{intl.formatMessage(messages.btnApply)}
+ <Icon id='trash' /><br />{intl.formatMessage(messages.btnApply)}
</button>
</div>
);
import { FormattedMessage } from 'react-intl';
import Permalink from './permalink';
import classnames from 'classnames';
+import Icon from 'flavours/glitch/components/icon';
import { autoPlayGif } from 'flavours/glitch/util/initial_state';
import { decode as decodeIDNA } from 'flavours/glitch/util/idna';
key='0'
/>,
mediaIcon ? (
- <i
- className={
- `fa fa-fw fa-${mediaIcon} status__content__spoiler-icon`
- }
+ <Icon
+ fixedWidth
+ className='status__content__spoiler-icon'
+ id={mediaIcon}
aria-hidden='true'
key='1'
/>
// Mastodon imports.
import IconButton from './icon_button';
import VisibilityIcon from './status_visibility_icon';
+import Icon from 'flavours/glitch/components/icon';
// Messages for use with internationalization stuff.
const messages = defineMessages({
return (
<div className='status__info__icons'>
{status.get('in_reply_to_id', null) !== null ? (
- <i
- className={`fa fa-fw fa-comment status__reply-icon`}
+ <Icon
+ className='status__reply-icon'
+ fixedWidth
+ id='comment'
aria-hidden='true'
title={intl.formatMessage(messages.inReplyTo)}
/>
) : null}
{status.get('local_only') &&
- <i
- className={`fa fa-fw fa-home`}
+ <Icon
+ fixedWidth
+ id='home'
aria-hidden='true'
title={intl.formatMessage(messages.localOnly)}
/>}
{mediaIcon ? (
- <i
- className={`fa fa-fw fa-${mediaIcon} status__media-icon`}
+ <Icon
+ fixedWidth
+ className='status__media-icon`'
+ id={mediaIcon}
aria-hidden='true'
title={this.mediaIconTitleText()}
/>
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { FormattedMessage } from 'react-intl';
+import Icon from 'flavours/glitch/components/icon';
export default class StatusPrepend extends React.PureComponent {
return !type ? null : (
<aside className={type === 'reblogged_by' || type === 'featured' ? 'status__prepend' : 'notification__message'}>
<div className={type === 'reblogged_by' || type === 'featured' ? 'status__prepend-icon-wrapper' : 'notification__favourite-icon-wrapper'}>
- <i
- className={`fa fa-fw fa-${
- type === 'favourite' ? 'star star-icon' : (type === 'featured' ? 'thumb-tack' : (type === 'poll' ? 'tasks' : 'retweet'))
- } status__prepend-icon`}
+ <Icon
+ className={`status__prepend-icon ${type === 'favourite' ? 'star-icon' : ''}`}
+ id={type === 'favourite' ? 'star' : (type === 'featured' ? 'thumb-tack' : (type === 'poll' ? 'tasks' : 'retweet'))}
/>
</div>
<Message />
import PropTypes from 'prop-types';
import { defineMessages, injectIntl } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component';
+import Icon from 'flavours/glitch/components/icon';
const messages = defineMessages({
public: { id: 'privacy.public.short', defaultMessage: 'Public' },
render() {
const { withLabel, visibility, intl } = this.props;
- const visibilityClass = {
+ const visibilityIcon = {
public: 'globe',
unlisted: 'unlock',
private: 'lock',
const label = intl.formatMessage(messages[visibility]);
- const icon = (<i
- className={`status__visibility-icon fa fa-fw fa-${visibilityClass}`}
+ const icon = (<Icon
+ className='status__visibility-icon'
+ fixedWidth
+ id={visibilityIcon}
title={label}
aria-hidden='true'
/>);
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
+import Icon from 'flavours/glitch/components/icon';
import { autoPlayGif, displayMedia } from 'flavours/glitch/util/initial_state';
import classNames from 'classnames';
import { decode } from 'blurhash';
} else if (attachment.get('type') === 'audio') {
thumbnail = (
<span className='account-gallery__item__icons'>
- <i className='fa fa-music' />
+ <Icon id='music' />
</span>
);
} else if (attachment.get('type') === 'image') {
const icon = (
<span className='account-gallery__item__icons'>
- <i className='fa fa-eye-slash' />
+ <Icon id='eye-slash' />
</span>
);
import ImmutablePureComponent from 'react-immutable-pure-component';
import AvatarOverlay from '../../../components/avatar_overlay';
import DisplayName from '../../../components/display_name';
+import Icon from 'flavours/glitch/components/icon';
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'><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> }} />
</div>
<div className='drawer--results'>
<div className='trends'>
<div className='trends__header'>
- <i className='fa fa-user-plus fa-fw' />
+ <Icon fixedWidth id='user-plus' />
<FormattedMessage id='suggestions.header' defaultMessage='You might be interested in…' />
</div>
import IconButton from '../../../components/icon_button';
import { defineMessages, injectIntl } from 'react-intl';
import { removeFromListAdder, addToListAdder } from '../../../actions/lists';
+import Icon from 'flavours/glitch/components/icon';
const messages = defineMessages({
remove: { id: 'lists.account.remove', defaultMessage: 'Remove from list' },
<div className='list'>
<div className='list__wrapper'>
<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')}
</div>
import PropTypes from 'prop-types';
import { defineMessages } from 'react-intl';
import classNames from 'classnames';
+import Icon from 'flavours/glitch/components/icon';
const messages = defineMessages({
search: { id: 'lists.search', defaultMessage: 'Search among people you follow' },
</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 })} />
+ <Icon id='search' className={classNames({ active: !hasValue })} />
+ <Icon id='times-circle' aria-label={intl.formatMessage(messages.search)} className={classNames({ active: hasValue })} />
</div>
</div>
);
import { openModal } from 'flavours/glitch/actions/modal';
import MissingIndicator from 'flavours/glitch/components/missing_indicator';
import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
+import Icon from 'flavours/glitch/components/icon';
const messages = defineMessages({
deleteMessage: { id: 'confirmations.delete_list.message', defaultMessage: 'Are you sure you want to permanently delete this list?' },
>
<div className='column-header__links'>
<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 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>
</div>
import PropTypes from 'prop-types';
import classNames from 'classnames';
+import Icon from 'flavours/glitch/components/icon';
+
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
export default class LocalSettingsPage extends React.PureComponent {
active,
}, className);
- const iconElem = icon ? <i className={`fa fa-fw fa-${icon}`} /> : (textIcon ? <span className='text-icon-button'>{textIcon}</span> : null);
+ const iconElem = icon ? <Icon fixedWidth id={icon} /> : (textIcon ? <span className='text-icon-button'>{textIcon}</span> : null);
if (href) return (
<a
import React from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
+import Icon from 'flavours/glitch/components/icon';
export default class ClearColumnButton extends React.Component {
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}><Icon id='eraser' /> <FormattedMessage id='notifications.clear' defaultMessage='Clear notifications' /></button>
);
}
import React from 'react';
import PropTypes from 'prop-types';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import Icon from 'flavours/glitch/components/icon';
const tooltips = defineMessages({
mentions: { id: 'notifications.filter.mentions', defaultMessage: 'Mentions' },
onClick={this.onClick('mention')}
title={intl.formatMessage(tooltips.mentions)}
>
- <i className='fa fa-fw fa-at' />
+ <Icon id='at' fixedWidth />
</button>
<button
className={selectedFilter === 'favourite' ? 'active' : ''}
onClick={this.onClick('favourite')}
title={intl.formatMessage(tooltips.favourites)}
>
- <i className='fa fa-fw fa-star' />
+ <Icon id='star' fixedWidth />
</button>
<button
className={selectedFilter === 'reblog' ? 'active' : ''}
onClick={this.onClick('reblog')}
title={intl.formatMessage(tooltips.boosts)}
>
- <i className='fa fa-fw fa-retweet' />
+ <Icon id='retweet' fixedWidth />
</button>
<button
className={selectedFilter === 'poll' ? 'active' : ''}
onClick={this.onClick('poll')}
title={intl.formatMessage(tooltips.polls)}
>
- <i className='fa fa-fw fa-tasks' />
+ <Icon id='tasks' fixedWidth />
</button>
<button
className={selectedFilter === 'follow' ? 'active' : ''}
onClick={this.onClick('follow')}
title={intl.formatMessage(tooltips.follows)}
>
- <i className='fa fa-fw fa-user-plus' />
+ <Icon id='user-plus' fixedWidth />
</button>
</div>
);
import Permalink from 'flavours/glitch/components/permalink';
import AccountContainer from 'flavours/glitch/containers/account_container';
import NotificationOverlayContainer from '../containers/overlay_container';
+import Icon from 'flavours/glitch/components/icon';
export default class NotificationFollow extends ImmutablePureComponent {
<div className='notification notification-follow focusable' tabIndex='0'>
<div className='notification__message'>
<div className='notification__favourite-icon-wrapper'>
- <i className='fa fa-fw fa-user-plus' />
+ <Icon fixedWidth id='user-plus' />
</div>
<FormattedMessage
import PropTypes from 'prop-types';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { defineMessages, injectIntl } from 'react-intl';
+import Icon from 'flavours/glitch/components/icon';
const messages = defineMessages({
markForDeletion: { id: 'notification.markForDeletion', defaultMessage: 'Mark for deletion' },
>
<div className='wrappy'>
<div className='ckbox' aria-hidden='true' title={label}>
- {active ? (<i className='fa fa-check' />) : ''}
+ {active ? (<Icon id='check' />) : ''}
</div>
</div>
</div>
import punycode from 'punycode';
import classnames from 'classnames';
import { decode as decodeIDNA } from 'flavours/glitch/util/idna';
+import Icon from 'flavours/glitch/components/icon';
const getHostname = url => {
const parser = document.createElement('a');
<div className='status-card__actions'>
<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>
} else {
embed = (
<div className='status-card__image'>
- <i className='fa fa-file-text' />
+ <Icon id='file-text' />
</div>
);
}
import scheduleIdleTask from 'flavours/glitch/util/schedule_idle_task';
import classNames from 'classnames';
import PollContainer from 'flavours/glitch/containers/poll_container';
+import Icon from 'flavours/glitch/components/icon';
export default class DetailedStatus extends ImmutablePureComponent {
}
if (status.get('visibility') === 'private') {
- reblogLink = <i className={`fa fa-${reblogIcon}`} />;
+ reblogLink = <Icon id={reblogIcon} />;
} else if (this.context.router) {
reblogLink = (
<Link to={`/statuses/${status.get('id')}/reblogs`} className='detailed-status__link'>
- <i className={`fa fa-${reblogIcon}`} />
+ <Icon id={reblogIcon} />
<span className='detailed-status__reblogs'>
<FormattedNumber value={status.get('reblogs_count')} />
</span>
} else {
reblogLink = (
<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'>
<FormattedNumber value={status.get('reblogs_count')} />
</span>
if (this.context.router) {
favouriteLink = (
<Link to={`/statuses/${status.get('id')}/favourites`} className='detailed-status__link'>
- <i className='fa fa-star' />
+ <Icon id='star' />
<span className='detailed-status__favorites'>
<FormattedNumber value={status.get('favourites_count')} />
</span>
} else {
favouriteLink = (
<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'>
<FormattedNumber value={status.get('favourites_count')} />
</span>
import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from 'flavours/glitch/util/fullscreen';
import { autoUnfoldCW } from 'flavours/glitch/util/content_warning';
import { textForScreenReader, defaultMediaVisibility } from 'flavours/glitch/components/status';
+import Icon from 'flavours/glitch/components/icon';
const messages = defineMessages({
deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
onClick={this.handleHeaderClick}
showBackButton
extraButton={(
- <button className='column-header__button' title={intl.formatMessage(!isExpanded ? messages.revealAll : messages.hideAll)} aria-label={intl.formatMessage(!isExpanded ? messages.revealAll : messages.hideAll)} onClick={this.handleToggleAll} aria-pressed={!isExpanded ? 'false' : 'true'}><i className={`fa fa-${!isExpanded ? 'eye-slash' : 'eye'}`} /></button>
+ <button className='column-header__button' title={intl.formatMessage(!isExpanded ? messages.revealAll : messages.hideAll)} aria-label={intl.formatMessage(!isExpanded ? messages.revealAll : messages.hideAll)} onClick={this.handleToggleAll} aria-pressed={!isExpanded ? 'false' : 'true'}><Icon id={status.get('hidden') ? 'eye-slash' : 'eye'} /></button>
)}
/>
import RelativeTimestamp from 'flavours/glitch/components/relative_timestamp';
import DisplayName from 'flavours/glitch/components/display_name';
import AttachmentList from 'flavours/glitch/components/attachment_list';
+import Icon from 'flavours/glitch/components/icon';
import ImmutablePureComponent from 'react-immutable-pure-component';
const messages = defineMessages({
{ missingMediaDescription ?
<FormattedMessage id='boost_modal.missing_description' defaultMessage='This toot contains some media without description' />
:
- <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> }} />
+ <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(buttonText)} onClick={this.handleReblog} ref={this.setRef} />
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
+import Icon from 'flavours/glitch/components/icon';
export default class ColumnHeader extends React.PureComponent {
let iconElement = '';
if (icon) {
- iconElement = <i className={`fa fa-fw fa-${icon} column-header__icon`} />;
+ iconElement = <Icon id={icon} fixedWidth className='column-header__icon' />;
}
return (
import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
+import Icon from 'flavours/glitch/components/icon';
const ColumnLink = ({ icon, text, to, onClick, href, method, badge }) => {
const badgeElement = typeof badge !== 'undefined' ? <span className='column-link__badge'>{badge}</span> : null;
if (href) {
return (
<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}
{badgeElement}
</a>
} else if (to) {
return (
<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}
{badgeElement}
</Link>
}
return (
<a href='#' onClick={onClick && handleOnClick} className='column-link' tabIndex='0'>
- <i className={`fa fa-fw fa-${icon} column-link__icon`} />
+ <Icon id={icon} fixedWidth className='column-link__icon' />
{text}
{badgeElement}
</a>
ListTimeline,
Directory,
} from 'flavours/glitch/util/async-components';
+import Icon from 'flavours/glitch/components/icon';
import ComposePanel from './compose_panel';
import NavigationPanel from './navigation_panel';
const columnIndex = getIndex(this.context.router.history.location.pathname);
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>;
const content = 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%' }} disabled={!swipeToChangeColumns}>
import Avatar from 'flavours/glitch/components/avatar';
import RelativeTimestamp from 'flavours/glitch/components/relative_timestamp';
import DisplayName from 'flavours/glitch/components/display_name';
+import Icon from 'flavours/glitch/components/icon';
import ImmutablePureComponent from 'react-immutable-pure-component';
const messages = defineMessages({
</div>
<div className='favourite-modal__action-bar'>
- <div><FormattedMessage id='favourite_modal.combo' defaultMessage='You can press {combo} to skip this next time' values={{ combo: <span>Shift + <i className='fa fa-star' /></span> }} /></div>
+ <div><FormattedMessage id='favourite_modal.combo' defaultMessage='You can press {combo} to skip this next time' values={{ combo: <span>Shift + <Icon id='star' /></span> }} /></div>
<Button text={intl.formatMessage(messages.favourite)} onClick={this.handleFavourite} ref={this.setRef} />
</div>
</div>
import IconButton from 'flavours/glitch/components/icon_button';
import ImmutablePureComponent from 'react-immutable-pure-component';
import ImageLoader from './image_loader';
+import Icon from 'flavours/glitch/components/icon';
const messages = defineMessages({
close: { id: 'lightbox.close', defaultMessage: 'Close' },
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)}><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) {
pagination = media.map((item, i) => {
import { FormattedMessage, injectIntl } from 'react-intl';
import { debounce } from 'lodash';
import { isUserTouching } from 'flavours/glitch/util/is_mobile';
+import Icon from 'flavours/glitch/components/icon';
import NotificationsCounterIcon from './notifications_counter_icon';
export const links = [
- <NavLink className='tabs-bar__link' 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' 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' to='/notifications' data-preview-title-id='column.notifications' data-preview-icon='bell' ><NotificationsCounterIcon /><FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></NavLink>,
-
- <NavLink className='tabs-bar__link' 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' 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 optional' 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' 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' 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' 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 optional' 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' 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) {
import classNames from 'classnames';
import { isFullscreen, requestFullscreen, exitFullscreen } from 'flavours/glitch/util/fullscreen';
import { displayMedia, useBlurhash } from 'flavours/glitch/util/initial_state';
+import Icon from 'flavours/glitch/components/icon';
import { decode } from 'blurhash';
const messages = defineMessages({
<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}><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__current' style={{ width: `${volumeWidth}px` }} />
<span
</div>
<div className='video-player__buttons right'>
- {(!onCloseVideo && !editable) && <button type='button' aria-label={intl.formatMessage(messages.hide)} onClick={this.toggleReveal}><i className='fa fa-fw fa-eye-slash' /></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 && !editable) && <button type='button' aria-label={intl.formatMessage(messages.hide)} onClick={this.toggleReveal}><Icon id='eye-slash' 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>
cat aescling's git repositories / mastodon.git / commitdiff