Use the `Icon` component instead of directly using `i` tag
This commit is contained in:
parent
f154d9d6e9
commit
2aa0cdf7e6
|
@ -2,6 +2,7 @@ import React from 'react';
|
|||
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];
|
||||
|
||||
|
@ -24,7 +25,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'><Icon id='link' /> {filename(displayUrl)}</a>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
|
@ -36,7 +37,7 @@ export default class AttachmentList extends ImmutablePureComponent {
|
|||
return (
|
||||
<div className='attachment-list'>
|
||||
<div className='attachment-list__icon'>
|
||||
<i className='fa fa-link' />
|
||||
<Icon id='link' />
|
||||
</div>
|
||||
|
||||
<ul className='attachment-list__list'>
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
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 {
|
||||
|
||||
|
@ -25,7 +26,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' />
|
||||
<Icon id='chevron-left' className='column-back-button__icon' fixedWidth />
|
||||
<FormattedMessage id='column_back_button.label' defaultMessage='Back' />
|
||||
</button>
|
||||
);
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
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 {
|
||||
|
||||
|
@ -26,7 +27,7 @@ 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>
|
||||
|
|
|
@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
|
|||
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';
|
||||
|
||||
|
@ -148,22 +149,22 @@ class ColumnHeader extends React.PureComponent {
|
|||
}
|
||||
|
||||
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>
|
||||
);
|
||||
|
@ -179,7 +180,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' /></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;
|
||||
|
@ -189,7 +190,7 @@ class ColumnHeader extends React.PureComponent {
|
|||
<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>
|
||||
)}
|
||||
|
@ -206,7 +207,7 @@ class ColumnHeader extends React.PureComponent {
|
|||
onClick={this.onEnterCleaningMode}
|
||||
className={notifCleaningButtonClassName}
|
||||
>
|
||||
<i className='fa fa-eraser' />
|
||||
<Icon id='eraser' />
|
||||
</button>
|
||||
) : null}
|
||||
{collapseButton}
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
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' },
|
||||
|
@ -25,7 +26,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' />
|
||||
<Icon id='ellipsis-h' />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -10,6 +10,7 @@ import React from 'react';
|
|||
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' },
|
||||
|
@ -49,7 +50,7 @@ class NotificationPurgeButtons extends ImmutablePureComponent {
|
|||
</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>
|
||||
);
|
||||
|
|
|
@ -5,6 +5,7 @@ import { isRtl } from 'flavours/glitch/util/rtl';
|
|||
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';
|
||||
|
||||
|
@ -289,10 +290,10 @@ export default class StatusContent extends React.PureComponent {
|
|||
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'
|
||||
/>
|
||||
|
|
|
@ -7,6 +7,7 @@ import { defineMessages, injectIntl } from 'react-intl';
|
|||
// 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({
|
||||
|
@ -74,21 +75,26 @@ class StatusIcons extends React.PureComponent {
|
|||
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()}
|
||||
/>
|
||||
|
|
|
@ -3,6 +3,7 @@ import React from 'react';
|
|||
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 {
|
||||
|
||||
|
@ -80,10 +81,9 @@ 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 />
|
||||
|
|
|
@ -3,6 +3,7 @@ import React from 'react';
|
|||
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' },
|
||||
|
@ -23,7 +24,7 @@ class VisibilityIcon extends ImmutablePureComponent {
|
|||
render() {
|
||||
const { withLabel, visibility, intl } = this.props;
|
||||
|
||||
const visibilityClass = {
|
||||
const visibilityIcon = {
|
||||
public: 'globe',
|
||||
unlisted: 'unlock',
|
||||
private: 'lock',
|
||||
|
@ -32,8 +33,10 @@ class VisibilityIcon extends ImmutablePureComponent {
|
|||
|
||||
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'
|
||||
/>);
|
||||
|
|
|
@ -2,6 +2,7 @@ import React from 'react';
|
|||
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';
|
||||
|
@ -97,7 +98,7 @@ export default class MediaItem extends ImmutablePureComponent {
|
|||
} 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') {
|
||||
|
@ -139,7 +140,7 @@ export default class MediaItem extends ImmutablePureComponent {
|
|||
|
||||
const icon = (
|
||||
<span className='account-gallery__item__icons'>
|
||||
<i className='fa fa-eye-slash' />
|
||||
<Icon id='eye-slash' />
|
||||
</span>
|
||||
);
|
||||
|
||||
|
|
|
@ -5,6 +5,7 @@ import { FormattedMessage } from 'react-intl';
|
|||
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 {
|
||||
|
||||
|
@ -35,7 +36,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'><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>
|
||||
|
||||
|
|
|
@ -47,7 +47,7 @@ class SearchResults extends ImmutablePureComponent {
|
|||
<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>
|
||||
|
||||
|
|
|
@ -6,6 +6,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
|
|||
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' },
|
||||
|
@ -53,7 +54,7 @@ class List extends ImmutablePureComponent {
|
|||
<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>
|
||||
|
||||
|
|
|
@ -2,6 +2,7 @@ import React from 'react';
|
|||
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' },
|
||||
|
@ -51,8 +52,8 @@ export default 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 })} />
|
||||
<Icon id='search' className={classNames({ active: !hasValue })} />
|
||||
<Icon id='times-circle' aria-label={intl.formatMessage(messages.search)} className={classNames({ active: hasValue })} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -13,6 +13,7 @@ import { fetchList, deleteList, updateList } from 'flavours/glitch/actions/lists
|
|||
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?' },
|
||||
|
@ -176,11 +177,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' /> <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>
|
||||
|
||||
|
|
|
@ -3,6 +3,8 @@ import React from 'react';
|
|||
import PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import Icon from 'flavours/glitch/components/icon';
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
export default class LocalSettingsPage extends React.PureComponent {
|
||||
|
@ -42,7 +44,7 @@ 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
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
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 {
|
||||
|
||||
|
@ -10,7 +11,7 @@ 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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
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' },
|
||||
|
@ -63,35 +64,35 @@ class FilterBar extends React.PureComponent {
|
|||
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>
|
||||
);
|
||||
|
|
|
@ -10,6 +10,7 @@ import { HotKeys } from 'react-hotkeys';
|
|||
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 {
|
||||
|
||||
|
@ -78,7 +79,7 @@ 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
|
||||
|
|
|
@ -9,6 +9,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
|
|||
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' },
|
||||
|
@ -47,7 +48,7 @@ class NotificationOverlay extends ImmutablePureComponent {
|
|||
>
|
||||
<div className='wrappy'>
|
||||
<div className='ckbox' aria-hidden='true' title={label}>
|
||||
{active ? (<i className='fa fa-check' />) : ''}
|
||||
{active ? (<Icon id='check' />) : ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -5,6 +5,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
|
|||
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');
|
||||
|
@ -170,8 +171,8 @@ export default class Card extends React.PureComponent {
|
|||
|
||||
<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>
|
||||
|
@ -193,7 +194,7 @@ export default class Card extends React.PureComponent {
|
|||
} else {
|
||||
embed = (
|
||||
<div className='status-card__image'>
|
||||
<i className='fa fa-file-text' />
|
||||
<Icon id='file-text' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -16,6 +16,7 @@ import VisibilityIcon from 'flavours/glitch/components/status_visibility_icon';
|
|||
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 {
|
||||
|
||||
|
@ -197,11 +198,11 @@ 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>
|
||||
|
@ -210,7 +211,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
|
|||
} 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>
|
||||
|
@ -221,7 +222,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
|
|||
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>
|
||||
|
@ -230,7 +231,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
|
|||
} 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>
|
||||
|
|
|
@ -43,6 +43,7 @@ import { boostModal, favouriteModal, deleteModal } from 'flavours/glitch/util/in
|
|||
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' },
|
||||
|
@ -549,7 +550,7 @@ class Status extends ImmutablePureComponent {
|
|||
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>
|
||||
)}
|
||||
/>
|
||||
|
||||
|
|
|
@ -8,6 +8,7 @@ import Avatar from 'flavours/glitch/components/avatar';
|
|||
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({
|
||||
|
@ -91,7 +92,7 @@ class BoostModal extends ImmutablePureComponent {
|
|||
{ 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} />
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
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 {
|
||||
|
||||
|
@ -21,7 +22,7 @@ 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 (
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
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;
|
||||
|
@ -8,7 +9,7 @@ const ColumnLink = ({ icon, text, to, onClick, 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`} />
|
||||
<Icon id={icon} fixedWidth className='column-link__icon' />
|
||||
{text}
|
||||
{badgeElement}
|
||||
</a>
|
||||
|
@ -16,7 +17,7 @@ const ColumnLink = ({ icon, text, to, onClick, href, method, badge }) => {
|
|||
} 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>
|
||||
|
@ -29,7 +30,7 @@ const ColumnLink = ({ icon, text, to, onClick, href, method, badge }) => {
|
|||
}
|
||||
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>
|
||||
|
|
|
@ -25,6 +25,7 @@ import {
|
|||
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';
|
||||
|
||||
|
@ -182,7 +183,7 @@ class ColumnsArea extends ImmutablePureComponent {
|
|||
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}>
|
||||
|
|
|
@ -7,6 +7,7 @@ import StatusContent from 'flavours/glitch/components/status_content';
|
|||
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({
|
||||
|
@ -76,7 +77,7 @@ class FavouriteModal extends ImmutablePureComponent {
|
|||
</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>
|
||||
|
|
|
@ -9,6 +9,7 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
|||
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' },
|
||||
|
@ -100,8 +101,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)}><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) => {
|
||||
|
|
|
@ -4,16 +4,16 @@ import { NavLink, withRouter } from 'react-router-dom';
|
|||
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) {
|
||||
|
|
|
@ -6,6 +6,7 @@ import { throttle } from 'lodash';
|
|||
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({
|
||||
|
@ -486,8 +487,8 @@ 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}><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
|
||||
|
@ -509,10 +510,10 @@ class Video extends React.PureComponent {
|
|||
</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>
|
||||
|
|
Loading…
Reference in New Issue