lint
This commit is contained in:
@@ -123,26 +123,26 @@ class Account extends ImmutablePureComponent {
|
||||
if (requested) {
|
||||
buttons = <IconButton disabled icon='hourglass' title={intl.formatMessage(messages.requested)} />;
|
||||
} else if (blocking) {
|
||||
buttons = <IconButton active icon='lock-open-simple' title={intl.formatMessage(messages.unblock, { name: account.get('username') })} onClick={this.handleBlock} />;
|
||||
buttons = <IconButton active icon='lock-open-simple' title={intl.formatMessage(messages.unblock, { name: account.get("username") })} onClick={this.handleBlock} />;
|
||||
} else if (muting) {
|
||||
let hidingNotificationsButton;
|
||||
if (account.getIn(['relationship', 'muting_notifications'])) {
|
||||
hidingNotificationsButton = <IconButton active icon='bell' title={intl.formatMessage(messages.unmute_notifications, { name: account.get('username') })} onClick={this.handleUnmuteNotifications} />;
|
||||
if (account.getIn(["relationship", "muting_notifications"])) {
|
||||
hidingNotificationsButton = <IconButton active icon='bell' title={intl.formatMessage(messages.unmute_notifications, { name: account.get("username") })} onClick={this.handleUnmuteNotifications} />;
|
||||
} else {
|
||||
hidingNotificationsButton = <IconButton active icon='bell-slash' title={intl.formatMessage(messages.mute_notifications, { name: account.get('username') })} onClick={this.handleMuteNotifications} />;
|
||||
hidingNotificationsButton = <IconButton active icon='bell-slash' title={intl.formatMessage(messages.mute_notifications, { name: account.get("username") })} onClick={this.handleMuteNotifications} />;
|
||||
}
|
||||
buttons = (
|
||||
<>
|
||||
<IconButton active icon='speaker-high' title={intl.formatMessage(messages.unmute, { name: account.get('username') })} onClick={this.handleMute} />
|
||||
<IconButton active icon='speaker-high' title={intl.formatMessage(messages.unmute, { name: account.get("username") })} onClick={this.handleMute} />
|
||||
{hidingNotificationsButton}
|
||||
</>
|
||||
);
|
||||
} else if (defaultAction === 'mute') {
|
||||
buttons = <IconButton icon='speaker-slash' title={intl.formatMessage(messages.mute, { name: account.get('username') })} onClick={this.handleMute} />;
|
||||
} else if (defaultAction === 'block') {
|
||||
buttons = <IconButton icon='lock-simple' title={intl.formatMessage(messages.block, { name: account.get('username') })} onClick={this.handleBlock} />;
|
||||
} else if (!account.get('moved') || following) {
|
||||
buttons = <IconButton icon={following ? 'user-minus' : 'user-plus'} title={intl.formatMessage(following ? messages.unfollow : messages.follow)} onClick={this.handleFollow} className={following ? 'destructive' : ''} active={following} />;
|
||||
} else if (defaultAction === "mute") {
|
||||
buttons = <IconButton icon='speaker-slash' title={intl.formatMessage(messages.mute, { name: account.get("username") })} onClick={this.handleMute} />;
|
||||
} else if (defaultAction === "block") {
|
||||
buttons = <IconButton icon='lock-simple' title={intl.formatMessage(messages.block, { name: account.get("username") })} onClick={this.handleBlock} />;
|
||||
} else if (!account.get("moved") || following) {
|
||||
buttons = <IconButton icon={following ? "user-minus" : "user-plus"} title={intl.formatMessage(following ? messages.unfollow : messages.follow)} onClick={this.handleFollow} className={following ? "destructive" : ""} active={following} />;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -37,7 +37,7 @@ export default class AttachmentList extends ImmutablePureComponent {
|
||||
<li key={attachment.get("id")}>
|
||||
<a href={displayUrl} target='_blank' rel='noopener noreferrer'>
|
||||
{compact && <Icon id='link' />}
|
||||
{compact && ' ' }
|
||||
{compact && " " }
|
||||
{displayUrl ? filename(displayUrl) : <FormattedMessage id='attachments_list.unprocessed' defaultMessage='(unprocessed)' />}
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@@ -7,7 +7,7 @@ import { FormattedMessage, injectIntl, defineMessages } from "react-intl";
|
||||
import classNames from "classnames";
|
||||
|
||||
import { Icon } from "flavours/glitch/components/icon";
|
||||
import { IconButton } from 'flavours/glitch/components/icon_svg_button';
|
||||
import { IconButton } from "flavours/glitch/components/icon_svg_button";
|
||||
|
||||
const messages = defineMessages({
|
||||
show: { id: "column_header.show_settings", defaultMessage: "Show settings" },
|
||||
|
||||
@@ -66,7 +66,7 @@ class EditedTimestamp extends PureComponent {
|
||||
return (
|
||||
<DropdownMenu statusId={statusId} renderItem={this.renderItem} scrollable renderHeader={this.renderHeader} onItemClick={this.handleItemClick}>
|
||||
<button className='dropdown-menu__text-button'>
|
||||
<FormattedMessage id='status.edited' defaultMessage='Edited {date}' values={{ date: intl.formatDate(timestamp, { hourCycle: 'h23', month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit' }) }} /> <Icon id='caret-down' />
|
||||
<FormattedMessage id='status.edited' defaultMessage='Edited {date}' values={{ date: intl.formatDate(timestamp, { hourCycle: "h23", month: "short", day: "2-digit", hour: "2-digit", minute: "2-digit" }) }} /> <Icon id='caret-down' />
|
||||
</button>
|
||||
</DropdownMenu>
|
||||
);
|
||||
|
||||
@@ -15,7 +15,7 @@ export const Icon: React.FC<Props> = ({
|
||||
fixedWidth,
|
||||
...other
|
||||
}) => (
|
||||
<svg className={classNames('gts-icon', className)} {...other}>
|
||||
<svg className={classNames("gts-icon", className)} {...other}>
|
||||
<use href={`/icons.svg#${id}`} />
|
||||
</svg>
|
||||
);
|
||||
|
||||
@@ -121,8 +121,8 @@ export class IconButton extends React.PureComponent<Props, States> {
|
||||
|
||||
let contents = (
|
||||
<>
|
||||
<Icon id={icon} fixedWidth aria-hidden='true' />{' '}
|
||||
{typeof counter !== 'undefined' && (
|
||||
<Icon id={icon} fixedWidth aria-hidden='true' />{" "}
|
||||
{typeof counter !== "undefined" && (
|
||||
<span className='icon-button__counter'>
|
||||
<AnimatedNumber value={counter} obfuscate={obfuscateCount} />
|
||||
</span>
|
||||
|
||||
@@ -17,10 +17,10 @@ import ImmutablePureComponent from "react-immutable-pure-component";
|
||||
import { Icon } from "flavours/glitch/components/icon";
|
||||
|
||||
const messages = defineMessages({
|
||||
btnAll : { id: 'notification_purge.btn_all', defaultMessage: 'All' },
|
||||
btnNone : { id: 'notification_purge.btn_none', defaultMessage: 'None' },
|
||||
btnInvert : { id: 'notification_purge.btn_invert', defaultMessage: 'Invert' },
|
||||
btnApply : { id: 'notification_purge.btn_apply', defaultMessage: 'Remove' },
|
||||
btnAll : { id: "notification_purge.btn_all", defaultMessage: "All" },
|
||||
btnNone : { id: "notification_purge.btn_none", defaultMessage: "None" },
|
||||
btnInvert : { id: "notification_purge.btn_invert", defaultMessage: "Invert" },
|
||||
btnApply : { id: "notification_purge.btn_apply", defaultMessage: "Remove" },
|
||||
});
|
||||
|
||||
class NotificationPurgeButtons extends ImmutablePureComponent {
|
||||
@@ -39,11 +39,11 @@ class NotificationPurgeButtons extends ImmutablePureComponent {
|
||||
|
||||
return (
|
||||
<div className='column-header__notif-cleaning-buttons'>
|
||||
<button onClick={this.props.onMarkAll} className={classNames('column-header__button')}>
|
||||
<button onClick={this.props.onMarkAll} className={classNames("column-header__button")}>
|
||||
{intl.formatMessage(messages.btnAll)}
|
||||
</button>
|
||||
|
||||
<button onClick={this.props.onMarkNone} className={classNames('column-header__button')}>
|
||||
<button onClick={this.props.onMarkNone} className={classNames("column-header__button")}>
|
||||
{intl.formatMessage(messages.btnNone)}
|
||||
</button>
|
||||
|
||||
|
||||
@@ -648,7 +648,7 @@ class Status extends ImmutablePureComponent {
|
||||
|
||||
if (pictureInPicture.get("inUse")) {
|
||||
media.push(<PictureInPicturePlaceholder />);
|
||||
mediaIcons.push('film-strip');
|
||||
mediaIcons.push("film-strip");
|
||||
} else if (attachments.size > 0) {
|
||||
const language = status.getIn(["translation", "language"]) || status.get("language");
|
||||
|
||||
@@ -688,10 +688,10 @@ class Status extends ImmutablePureComponent {
|
||||
)}
|
||||
</Bundle>,
|
||||
);
|
||||
mediaIcons.push('music-note');
|
||||
} else if (attachments.getIn([0, 'type']) === 'video') {
|
||||
const attachment = status.getIn(['media_attachments', 0]);
|
||||
const description = attachment.getIn(['translation', 'description']) || attachment.get('description');
|
||||
mediaIcons.push("music-note");
|
||||
} else if (attachments.getIn([0, "type"]) === "video") {
|
||||
const attachment = status.getIn(["media_attachments", 0]);
|
||||
const description = attachment.getIn(["translation", "description"]) || attachment.get("description");
|
||||
|
||||
media.push(
|
||||
<Bundle fetchComponent={Video} loading={this.renderLoadingVideoPlayer} >
|
||||
@@ -715,7 +715,7 @@ class Status extends ImmutablePureComponent {
|
||||
/>)}
|
||||
</Bundle>,
|
||||
);
|
||||
mediaIcons.push('film-strip');
|
||||
mediaIcons.push("film-strip");
|
||||
} else { // Media type is 'image' or 'gifv'
|
||||
media.push(
|
||||
<Bundle fetchComponent={MediaGallery} loading={this.renderLoadingMediaGallery}>
|
||||
@@ -737,7 +737,7 @@ class Status extends ImmutablePureComponent {
|
||||
)}
|
||||
</Bundle>,
|
||||
);
|
||||
mediaIcons.push('image');
|
||||
mediaIcons.push("image");
|
||||
}
|
||||
|
||||
if (!status.get("sensitive") && !(status.get("spoiler_text").length > 0) && settings.getIn(["collapsed", "backgrounds", "preview_images"])) {
|
||||
@@ -756,10 +756,10 @@ class Status extends ImmutablePureComponent {
|
||||
mediaIcons.push("link");
|
||||
}
|
||||
|
||||
if (status.get('poll')) {
|
||||
const language = status.getIn(['translation', 'language']) || status.get('language');
|
||||
contentMedia.push(<PollContainer pollId={status.get('poll')} lang={language} />);
|
||||
contentMediaIcons.push('chart-bar-horizontal');
|
||||
if (status.get("poll")) {
|
||||
const language = status.getIn(["translation", "language"]) || status.get("language");
|
||||
contentMedia.push(<PollContainer pollId={status.get("poll")} lang={language} />);
|
||||
contentMediaIcons.push("chart-bar-horizontal");
|
||||
}
|
||||
|
||||
// Here we prepare extra data-* attributes for CSS selectors.
|
||||
|
||||
@@ -276,11 +276,11 @@ class StatusActionBar extends ImmutablePureComponent {
|
||||
}
|
||||
}
|
||||
|
||||
if (status.get('in_reply_to_id', null) === null) {
|
||||
replyIcon = 'arrow-bend-up-left';
|
||||
if (status.get("in_reply_to_id", null) === null) {
|
||||
replyIcon = "arrow-bend-up-left";
|
||||
replyTitle = intl.formatMessage(messages.reply);
|
||||
} else {
|
||||
replyIcon = 'arrow-bend-double-up-left';
|
||||
replyIcon = "arrow-bend-double-up-left";
|
||||
replyTitle = intl.formatMessage(messages.replyAll);
|
||||
}
|
||||
|
||||
@@ -311,9 +311,9 @@ class StatusActionBar extends ImmutablePureComponent {
|
||||
counter={showReplyCount ? status.get("replies_count") : undefined}
|
||||
obfuscateCount
|
||||
/>
|
||||
<IconButton className={classNames('status__action-bar-button status-boost', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon={status.get('reblogged') ? 'rocket-launch-filled' : 'rocket-launch'} onClick={this.handleReblogClick} counter={withCounters ? status.get('reblogs_count') : undefined} />
|
||||
<IconButton className='status__action-bar-button star-icon status-favourite' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon={status.get('favourited') ? 'star-filled' : 'star'} onClick={this.handleFavouriteClick} counter={withCounters ? status.get('favourites_count') : undefined} />
|
||||
<IconButton className='status__action-bar-button bookmark-icon status-bookmark' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon={status.get('bookmarked') ? 'bookmark-filled' : 'bookmark'} onClick={this.handleBookmarkClick} />
|
||||
<IconButton className={classNames("status__action-bar-button status-boost", { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get("reblogged")} title={reblogTitle} icon={status.get("reblogged") ? "rocket-launch-filled" : "rocket-launch"} onClick={this.handleReblogClick} counter={withCounters ? status.get("reblogs_count") : undefined} />
|
||||
<IconButton className='status__action-bar-button star-icon status-favourite' animate active={status.get("favourited")} title={intl.formatMessage(messages.favourite)} icon={status.get("favourited") ? "star-filled" : "star"} onClick={this.handleFavouriteClick} counter={withCounters ? status.get("favourites_count") : undefined} />
|
||||
<IconButton className='status__action-bar-button bookmark-icon status-bookmark' disabled={!signedIn} active={status.get("bookmarked")} title={intl.formatMessage(messages.bookmark)} icon={status.get("bookmarked") ? "bookmark-filled" : "bookmark"} onClick={this.handleBookmarkClick} />
|
||||
|
||||
{filterButton}
|
||||
|
||||
|
||||
@@ -360,7 +360,7 @@ class StatusContent extends PureComponent {
|
||||
<span dangerouslySetInnerHTML={spoilerContent} className='translate' lang={language} />
|
||||
{" "}
|
||||
<button type='button' className='status__content__spoiler-link' onClick={this.handleSpoilerClick} aria-expanded={!hidden}>
|
||||
<Icon id={hidden ? 'eye-closed' : 'eye'} />
|
||||
<Icon id={hidden ? "eye-closed" : "eye"} />
|
||||
{toggleText}
|
||||
</button>
|
||||
</p>
|
||||
|
||||
@@ -109,8 +109,8 @@ class StatusIcons extends PureComponent {
|
||||
|
||||
return (
|
||||
<div className='status__info__icons'>
|
||||
{settings.get('language') && status.get('language') && <LanguageIcon language={status.get('language')} />}
|
||||
{settings.get('reply') && status.get('in_reply_to_id', null) !== null ? (
|
||||
{settings.get("language") && status.get("language") && <LanguageIcon language={status.get("language")} />}
|
||||
{settings.get("reply") && status.get("in_reply_to_id", null) !== null ? (
|
||||
<Icon
|
||||
className='status__reply-icon'
|
||||
fixedWidth
|
||||
@@ -119,7 +119,7 @@ class StatusIcons extends PureComponent {
|
||||
title={intl.formatMessage(messages.inReplyTo)}
|
||||
/>
|
||||
) : null}
|
||||
{settings.get('local_only') && status.get('local_only') &&
|
||||
{settings.get("local_only") && status.get("local_only") &&
|
||||
<Icon
|
||||
fixedWidth
|
||||
id='house-line'
|
||||
|
||||
@@ -28,7 +28,7 @@ export default class StatusPrepend extends PureComponent {
|
||||
let link = (
|
||||
<a
|
||||
onClick={this.handleClick}
|
||||
href={account.get('url')}
|
||||
href={account.get("url")}
|
||||
className='status__prepend-display-name'
|
||||
>
|
||||
<span
|
||||
@@ -110,32 +110,32 @@ export default class StatusPrepend extends PureComponent {
|
||||
let iconId;
|
||||
|
||||
switch(type) {
|
||||
case 'favourite':
|
||||
iconId = 'star';
|
||||
break;
|
||||
case 'featured':
|
||||
iconId = 'push-pin';
|
||||
break;
|
||||
case 'poll':
|
||||
iconId = 'chart-bar-horizontal';
|
||||
break;
|
||||
case 'reblog':
|
||||
case 'reblogged_by':
|
||||
iconId = 'rocket-launch';
|
||||
break;
|
||||
case 'status':
|
||||
iconId = 'bell';
|
||||
break;
|
||||
case 'update':
|
||||
iconId = 'pencil-simple-line';
|
||||
break;
|
||||
case "favourite":
|
||||
iconId = "star";
|
||||
break;
|
||||
case "featured":
|
||||
iconId = "push-pin";
|
||||
break;
|
||||
case "poll":
|
||||
iconId = "chart-bar-horizontal";
|
||||
break;
|
||||
case "reblog":
|
||||
case "reblogged_by":
|
||||
iconId = "rocket-launch";
|
||||
break;
|
||||
case "status":
|
||||
iconId = "bell";
|
||||
break;
|
||||
case "update":
|
||||
iconId = "pencil-simple-line";
|
||||
break;
|
||||
}
|
||||
|
||||
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'}>
|
||||
<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"}>
|
||||
<Icon
|
||||
className={`status__prepend-icon ${type === 'favourite' ? 'star-icon' : ''}`}
|
||||
className={`status__prepend-icon ${type === "favourite" ? "star-icon" : ""}`}
|
||||
id={iconId}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -26,10 +26,10 @@ class VisibilityIcon extends ImmutablePureComponent {
|
||||
const { withLabel, visibility, intl } = this.props;
|
||||
|
||||
const visibilityIcon = {
|
||||
public: 'planet',
|
||||
unlisted: 'lock-open-simple',
|
||||
private: 'lock-simple',
|
||||
direct: 'at',
|
||||
public: "planet",
|
||||
unlisted: "lock-open-simple",
|
||||
private: "lock-simple",
|
||||
direct: "at",
|
||||
}[visibility];
|
||||
|
||||
const label = intl.formatMessage(messages[visibility]);
|
||||
|
||||
@@ -72,7 +72,7 @@ class Section extends PureComponent {
|
||||
return (
|
||||
<div className={classNames("about__section", { active: !collapsed })}>
|
||||
<div className='about__section__title' role='button' tabIndex={0} onClick={this.handleClick}>
|
||||
<Icon id={collapsed ? 'caret-right' : 'caret-down'} fixedWidth /> {title}
|
||||
<Icon id={collapsed ? "caret-right" : "caret-down"} fixedWidth /> {title}
|
||||
</div>
|
||||
|
||||
{!collapsed && (
|
||||
|
||||
@@ -190,8 +190,8 @@ class Header extends ImmutablePureComponent {
|
||||
info.push(<span className='relationship-tag'><FormattedMessage id='account.domain_blocked' defaultMessage='Domain blocked' /></span>);
|
||||
}
|
||||
|
||||
if (account.getIn(['relationship', 'requested']) || account.getIn(['relationship', 'following'])) {
|
||||
bellBtn = <IconButton icon={account.getIn(['relationship', 'notifying']) ? 'bell-ringing' : 'bell'} size={24} active={account.getIn(['relationship', 'notifying'])} title={intl.formatMessage(account.getIn(['relationship', 'notifying']) ? messages.disableNotifications : messages.enableNotifications, { name: account.get('username') })} onClick={this.props.onNotifyToggle} />;
|
||||
if (account.getIn(["relationship", "requested"]) || account.getIn(["relationship", "following"])) {
|
||||
bellBtn = <IconButton icon={account.getIn(["relationship", "notifying"]) ? "bell-ringing" : "bell"} size={24} active={account.getIn(["relationship", "notifying"])} title={intl.formatMessage(account.getIn(["relationship", "notifying"]) ? messages.disableNotifications : messages.enableNotifications, { name: account.get("username") })} onClick={this.props.onNotifyToggle} />;
|
||||
}
|
||||
|
||||
if (me !== account.get("id")) {
|
||||
@@ -216,7 +216,7 @@ class Header extends ImmutablePureComponent {
|
||||
actionBtn = "";
|
||||
}
|
||||
|
||||
if (account.get('locked')) {
|
||||
if (account.get("locked")) {
|
||||
lockedIcon = <Icon id='lock-simple' title={intl.formatMessage(messages.account_locked)} />;
|
||||
}
|
||||
|
||||
@@ -385,8 +385,8 @@ class Header extends ImmutablePureComponent {
|
||||
<dl key={i}>
|
||||
<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) })}><Icon id='check' className='verified__mark' /></span>} <span dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }} className='translate' />
|
||||
<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) })}><Icon id='check' className='verified__mark' /></span>} <span dangerouslySetInnerHTML={{ __html: pair.get("value_emojified") }} className='translate' />
|
||||
</dd>
|
||||
</dl>
|
||||
))}
|
||||
|
||||
@@ -84,7 +84,7 @@ export default class MediaItem extends ImmutablePureComponent {
|
||||
/>
|
||||
);
|
||||
|
||||
if (attachment.get('type') === 'audio') {
|
||||
if (attachment.get("type") === "audio") {
|
||||
label = <Icon id='music-note' />;
|
||||
} else {
|
||||
label = <Icon id='play' />;
|
||||
|
||||
@@ -564,8 +564,8 @@ class Audio extends PureComponent {
|
||||
<div className='video-player__controls active'>
|
||||
<div className='video-player__buttons-bar'>
|
||||
<div className='video-player__buttons left'>
|
||||
<button type='button' title={intl.formatMessage(paused ? messages.play : messages.pause)} aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} className='player-button' onClick={this.togglePlay}><Icon id={paused ? 'play' : 'pause'} fixedWidth /></button>
|
||||
<button type='button' title={intl.formatMessage(muted ? messages.unmute : messages.mute)} aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} className='player-button' onClick={this.toggleMute}><Icon id={muted ? 'speaker-slash' : 'speaker-high'} fixedWidth /></button>
|
||||
<button type='button' title={intl.formatMessage(paused ? messages.play : messages.pause)} aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} className='player-button' onClick={this.togglePlay}><Icon id={paused ? "play" : "pause"} fixedWidth /></button>
|
||||
<button type='button' title={intl.formatMessage(muted ? messages.unmute : messages.mute)} aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} className='player-button' onClick={this.toggleMute}><Icon id={muted ? "speaker-slash" : "speaker-high"} fixedWidth /></button>
|
||||
|
||||
<div className={classNames("video-player__volume", { active: this.state.hovered })} ref={this.setVolumeRef} onMouseDown={this.handleVolumeMouseDown}>
|
||||
<div className='video-player__volume__current' style={{ width: `${muted ? 0 : volume * 100}%`, backgroundColor: this._getAccentColor() }} />
|
||||
@@ -587,7 +587,7 @@ class Audio extends PureComponent {
|
||||
<div className='video-player__buttons right'>
|
||||
{!editable && <button type='button' title={intl.formatMessage(messages.hide)} aria-label={intl.formatMessage(messages.hide)} className='player-button' onClick={this.toggleReveal}><Icon id='eye-slash' fixedWidth /></button>}
|
||||
<a title={intl.formatMessage(messages.download)} aria-label={intl.formatMessage(messages.download)} className='video-player__download__icon player-button' href={this.props.src} download>
|
||||
<Icon id={'file-arrow-down'} fixedWidth />
|
||||
<Icon id={"file-arrow-down"} fixedWidth />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -193,7 +193,7 @@ export default class ComposerOptionsDropdown extends PureComponent {
|
||||
onKeyDown={this.handleKeyDown}
|
||||
ref={this.setTargetRef}
|
||||
>
|
||||
<div className={classNames('privacy-dropdown__value', { active })}>
|
||||
<div className={classNames("privacy-dropdown__value", { active })}>
|
||||
<IconButton
|
||||
active={open}
|
||||
className='privacy-dropdown__value-icon'
|
||||
|
||||
+1
-1
@@ -394,7 +394,7 @@ class EmojiPickerDropdown extends PureComponent {
|
||||
fixedWidth
|
||||
id='smiley'
|
||||
aria-hidden='true'
|
||||
className={classNames('emojione', { 'pulse-loading': active && loading })}
|
||||
className={classNames("emojione", { "pulse-loading": active && loading })}
|
||||
/>}
|
||||
</button>
|
||||
|
||||
|
||||
@@ -81,7 +81,7 @@ class Header extends ImmutablePureComponent {
|
||||
to='/getting-started'
|
||||
className='drawer__tab'
|
||||
><Icon id='asterisk' /></Link>
|
||||
{renderForColumn('HOME', (
|
||||
{renderForColumn("HOME", (
|
||||
<Link
|
||||
aria-label={intl.formatMessage(messages.home_timeline)}
|
||||
title={intl.formatMessage(messages.home_timeline)}
|
||||
|
||||
@@ -214,8 +214,8 @@ class ComposerOptions extends ImmutablePureComponent {
|
||||
text: formatMessage(messages.plain),
|
||||
},
|
||||
markdown: {
|
||||
icon: 'markdown-logo',
|
||||
name: 'text/markdown',
|
||||
icon: "markdown-logo",
|
||||
name: "text/markdown",
|
||||
text: formatMessage(messages.markdown),
|
||||
},
|
||||
};
|
||||
@@ -238,8 +238,8 @@ class ComposerOptions extends ImmutablePureComponent {
|
||||
icon='paperclip'
|
||||
items={[
|
||||
{
|
||||
icon: 'file-arrow-up',
|
||||
name: 'upload',
|
||||
icon: "file-arrow-up",
|
||||
name: "upload",
|
||||
text: formatMessage(messages.upload),
|
||||
},
|
||||
{
|
||||
|
||||
@@ -142,7 +142,7 @@ class PollForm extends ImmutablePureComponent {
|
||||
{options.map((title, i) => <Option title={title} lang={lang} key={i} index={i} onChange={onChangeOption} onRemove={onRemoveOption} isPollMultiple={isMultiple} autoFocus={i === autoFocusIndex} {...other} />)}
|
||||
{options.size < pollLimits.max_options && (
|
||||
<label className='poll__text editable'>
|
||||
<span className={classNames('poll__input')} style={{ opacity: 0 }} />
|
||||
<span className={classNames("poll__input")} style={{ opacity: 0 }} />
|
||||
<button className='button button-secondary' onClick={this.handleAddOption}><Icon id='plus' /> <FormattedMessage {...messages.add_option} /></button>
|
||||
</label>
|
||||
)}
|
||||
|
||||
@@ -38,25 +38,25 @@ class PrivacyDropdown extends PureComponent {
|
||||
// dropdown icon later.
|
||||
const privacyItems = {
|
||||
direct: {
|
||||
icon: 'at',
|
||||
icon: "at",
|
||||
meta: formatMessage(messages.direct_long),
|
||||
name: "direct",
|
||||
text: formatMessage(messages.direct_short),
|
||||
},
|
||||
private: {
|
||||
icon: 'lock-simple',
|
||||
icon: "lock-simple",
|
||||
meta: formatMessage(messages.private_long),
|
||||
name: "private",
|
||||
text: formatMessage(messages.private_short),
|
||||
},
|
||||
public: {
|
||||
icon: 'planet',
|
||||
icon: "planet",
|
||||
meta: formatMessage(messages.public_long),
|
||||
name: "public",
|
||||
text: formatMessage(messages.public_short),
|
||||
},
|
||||
unlisted: {
|
||||
icon: 'lock-open-simple',
|
||||
icon: "lock-open-simple",
|
||||
meta: formatMessage(messages.unlisted_long),
|
||||
name: "unlisted",
|
||||
text: formatMessage(messages.unlisted_short),
|
||||
|
||||
@@ -54,7 +54,7 @@ class Publisher extends ImmutablePureComponent {
|
||||
over: diff < 0,
|
||||
});
|
||||
|
||||
const privacyIcons = { direct: 'at', private: 'lock-simple', public: 'planet', unlisted: 'lock-open-simple' };
|
||||
const privacyIcons = { direct: "at", private: "lock-simple", public: "planet", unlisted: "lock-open-simple" };
|
||||
|
||||
let publishText;
|
||||
if (isEditing) {
|
||||
|
||||
@@ -346,7 +346,7 @@ class Search extends PureComponent {
|
||||
const hasValue = value.length > 0 || submitted;
|
||||
|
||||
return (
|
||||
<div className={classNames('search', { active: expanded })}>
|
||||
<div className={classNames("search", { active: expanded })}>
|
||||
<Icon id='magnifying-glass' className='search__icon' />
|
||||
<input
|
||||
ref={this.setRef}
|
||||
@@ -360,7 +360,7 @@ class Search extends PureComponent {
|
||||
onFocus={this.handleFocus}
|
||||
onBlur={this.handleBlur}
|
||||
/>
|
||||
<button type='button' className={hasValue ? 'search__button active' : 'search__button'} onClick={this.handleClear}>
|
||||
<button type='button' className={hasValue ? "search__button active" : "search__button"} onClick={this.handleClear}>
|
||||
<Icon id='x' />
|
||||
</button>
|
||||
<div className='search__popout'>
|
||||
|
||||
@@ -44,8 +44,8 @@ class SearchResults extends ImmutablePureComponent {
|
||||
if (results.get("accounts") && results.get("accounts").size > 0) {
|
||||
accounts = (
|
||||
<SearchSection title={<><Icon id='users' fixedWidth /><FormattedMessage id='search_results.accounts' defaultMessage='Profiles' /></>}>
|
||||
{withoutLastResult(results.get('accounts')).map(accountId => <AccountContainer key={accountId} id={accountId} />)}
|
||||
{(results.get('accounts').size > INITIAL_PAGE_LIMIT && results.get('accounts').size % INITIAL_PAGE_LIMIT === 1) && <LoadMore visible onClick={this.handleLoadMoreAccounts} />}
|
||||
{withoutLastResult(results.get("accounts")).map(accountId => <AccountContainer key={accountId} id={accountId} />)}
|
||||
{(results.get("accounts").size > INITIAL_PAGE_LIMIT && results.get("accounts").size % INITIAL_PAGE_LIMIT === 1) && <LoadMore visible onClick={this.handleLoadMoreAccounts} />}
|
||||
</SearchSection>
|
||||
);
|
||||
}
|
||||
@@ -53,8 +53,8 @@ class SearchResults extends ImmutablePureComponent {
|
||||
if (results.get("hashtags") && results.get("hashtags").size > 0) {
|
||||
hashtags = (
|
||||
<SearchSection title={<><Icon id='tag' fixedWidth /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></>}>
|
||||
{withoutLastResult(results.get('hashtags')).map(hashtag => <Hashtag key={hashtag.get('name')} hashtag={hashtag} />)}
|
||||
{(results.get('hashtags').size > INITIAL_PAGE_LIMIT && results.get('hashtags').size % INITIAL_PAGE_LIMIT === 1) && <LoadMore visible onClick={this.handleLoadMoreHashtags} />}
|
||||
{withoutLastResult(results.get("hashtags")).map(hashtag => <Hashtag key={hashtag.get("name")} hashtag={hashtag} />)}
|
||||
{(results.get("hashtags").size > INITIAL_PAGE_LIMIT && results.get("hashtags").size % INITIAL_PAGE_LIMIT === 1) && <LoadMore visible onClick={this.handleLoadMoreHashtags} />}
|
||||
</SearchSection>
|
||||
);
|
||||
}
|
||||
@@ -62,8 +62,8 @@ class SearchResults extends ImmutablePureComponent {
|
||||
if (results.get("statuses") && results.get("statuses").size > 0) {
|
||||
statuses = (
|
||||
<SearchSection title={<><Icon id='chat-circle-dots' fixedWidth /><FormattedMessage id='search_results.statuses' defaultMessage='Posts' /></>}>
|
||||
{withoutLastResult(results.get('statuses')).map(statusId => <StatusContainer key={statusId} id={statusId} />)}
|
||||
{(results.get('statuses').size > INITIAL_PAGE_LIMIT && results.get('statuses').size % INITIAL_PAGE_LIMIT === 1) && <LoadMore visible onClick={this.handleLoadMoreStatuses} />}
|
||||
{withoutLastResult(results.get("statuses")).map(statusId => <StatusContainer key={statusId} id={statusId} />)}
|
||||
{(results.get("statuses").size > INITIAL_PAGE_LIMIT && results.get("statuses").size % INITIAL_PAGE_LIMIT === 1) && <LoadMore visible onClick={this.handleLoadMoreStatuses} />}
|
||||
</SearchSection>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -161,38 +161,38 @@ class Results extends PureComponent {
|
||||
const statuses = results.get("statuses", ImmutableList());
|
||||
|
||||
switch(type) {
|
||||
case 'all':
|
||||
filteredResults = (accounts.size + hashtags.size + statuses.size) > 0 ? (
|
||||
<>
|
||||
{accounts.size > 0 && (
|
||||
<SearchSection key='accounts' title={<><Icon id='users' fixedWidth /><FormattedMessage id='search_results.accounts' defaultMessage='Profiles' /></>} onClickMore={this.handleLoadMoreAccounts}>
|
||||
{accounts.take(INITIAL_DISPLAY).map(id => <Account key={id} id={id} />)}
|
||||
</SearchSection>
|
||||
)}
|
||||
case "all":
|
||||
filteredResults = (accounts.size + hashtags.size + statuses.size) > 0 ? (
|
||||
<>
|
||||
{accounts.size > 0 && (
|
||||
<SearchSection key='accounts' title={<><Icon id='users' fixedWidth /><FormattedMessage id='search_results.accounts' defaultMessage='Profiles' /></>} onClickMore={this.handleLoadMoreAccounts}>
|
||||
{accounts.take(INITIAL_DISPLAY).map(id => <Account key={id} id={id} />)}
|
||||
</SearchSection>
|
||||
)}
|
||||
|
||||
{hashtags.size > 0 && (
|
||||
<SearchSection key='hashtags' title={<><Icon id='tag' fixedWidth /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></>} onClickMore={this.handleLoadMoreHashtags}>
|
||||
{hashtags.take(INITIAL_DISPLAY).map(hashtag => <Hashtag key={hashtag.get('name')} hashtag={hashtag} />)}
|
||||
</SearchSection>
|
||||
)}
|
||||
{hashtags.size > 0 && (
|
||||
<SearchSection key='hashtags' title={<><Icon id='tag' fixedWidth /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></>} onClickMore={this.handleLoadMoreHashtags}>
|
||||
{hashtags.take(INITIAL_DISPLAY).map(hashtag => <Hashtag key={hashtag.get("name")} hashtag={hashtag} />)}
|
||||
</SearchSection>
|
||||
)}
|
||||
|
||||
{statuses.size > 0 && (
|
||||
<SearchSection key='statuses' title={<><Icon id='chat-circle-dots' fixedWidth /><FormattedMessage id='search_results.statuses' defaultMessage='Posts' /></>} onClickMore={this.handleLoadMoreStatuses}>
|
||||
{statuses.take(INITIAL_DISPLAY).map(id => <Status key={id} id={id} />)}
|
||||
</SearchSection>
|
||||
)}
|
||||
</>
|
||||
) : [];
|
||||
break;
|
||||
case 'accounts':
|
||||
filteredResults = renderAccounts(accounts);
|
||||
break;
|
||||
case 'hashtags':
|
||||
filteredResults = renderHashtags(hashtags);
|
||||
break;
|
||||
case 'statuses':
|
||||
filteredResults = renderStatuses(statuses);
|
||||
break;
|
||||
{statuses.size > 0 && (
|
||||
<SearchSection key='statuses' title={<><Icon id='chat-circle-dots' fixedWidth /><FormattedMessage id='search_results.statuses' defaultMessage='Posts' /></>} onClickMore={this.handleLoadMoreStatuses}>
|
||||
{statuses.take(INITIAL_DISPLAY).map(id => <Status key={id} id={id} />)}
|
||||
</SearchSection>
|
||||
)}
|
||||
</>
|
||||
) : [];
|
||||
break;
|
||||
case "accounts":
|
||||
filteredResults = renderAccounts(accounts);
|
||||
break;
|
||||
case "hashtags":
|
||||
filteredResults = renderHashtags(hashtags);
|
||||
break;
|
||||
case "statuses":
|
||||
filteredResults = renderStatuses(statuses);
|
||||
break;
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
+1
-1
@@ -57,7 +57,7 @@ class Account extends ImmutablePureComponent {
|
||||
|
||||
let button;
|
||||
|
||||
if (account.getIn(['relationship', 'following'])) {
|
||||
if (account.getIn(["relationship", "following"])) {
|
||||
button = <IconButton icon='check' title={intl.formatMessage(messages.unfollow)} active onClick={this.handleFollow} />;
|
||||
} else {
|
||||
button = <IconButton icon='user-plus' title={intl.formatMessage(messages.follow)} onClick={this.handleFollow} />;
|
||||
|
||||
@@ -140,7 +140,7 @@ class GettingStarted extends ImmutablePureComponent {
|
||||
navItems.push(<ColumnLink key='community_timeline' icon='users' text={intl.formatMessage(messages.community_timeline)} to='/public/local' />);
|
||||
}
|
||||
|
||||
if (!columns.find(item => item.get('id') === 'PUBLIC')) {
|
||||
if (!columns.find(item => item.get("id") === "PUBLIC")) {
|
||||
navItems.push(<ColumnLink key='public_timeline' icon='planet' text={intl.formatMessage(messages.public_timeline)} to='/public' />);
|
||||
}
|
||||
}
|
||||
@@ -150,11 +150,11 @@ class GettingStarted extends ImmutablePureComponent {
|
||||
}
|
||||
|
||||
if (signedIn) {
|
||||
if (!multiColumn || !columns.find(item => item.get('id') === 'DIRECT')) {
|
||||
if (!multiColumn || !columns.find(item => item.get("id") === "DIRECT")) {
|
||||
navItems.push(<ColumnLink key='conversations' icon='at' text={intl.formatMessage(messages.direct)} to='/conversations' />);
|
||||
}
|
||||
|
||||
if (!multiColumn || !columns.find(item => item.get('id') === 'BOOKMARKS')) {
|
||||
if (!multiColumn || !columns.find(item => item.get("id") === "BOOKMARKS")) {
|
||||
navItems.push(<ColumnLink key='bookmarks' icon='bookmarks' text={intl.formatMessage(messages.bookmarks)} to='/bookmarks' />);
|
||||
}
|
||||
|
||||
@@ -167,8 +167,8 @@ class GettingStarted extends ImmutablePureComponent {
|
||||
listItems = listItems.concat([
|
||||
<div key='9'>
|
||||
<ColumnLink key='lists' icon='list' text={intl.formatMessage(messages.lists)} to='/lists' />
|
||||
{lists.filter(list => !columns.find(item => item.get('id') === 'LIST' && item.getIn(['params', 'id']) === list.get('id'))).map(list =>
|
||||
<ColumnLink key={`list-${list.get('id')}`} to={`/lists/${list.get('id')}`} icon='dot' text={list.get('title')} />,
|
||||
{lists.filter(list => !columns.find(item => item.get("id") === "LIST" && item.getIn(["params", "id"]) === list.get("id"))).map(list =>
|
||||
<ColumnLink key={`list-${list.get("id")}`} to={`/lists/${list.get("id")}`} icon='dot' text={list.get("title")} />,
|
||||
)}
|
||||
</div>,
|
||||
]);
|
||||
|
||||
@@ -353,26 +353,26 @@ class InteractionModal extends React.PureComponent {
|
||||
let title, actionDescription, icon;
|
||||
|
||||
switch(type) {
|
||||
case 'reply':
|
||||
icon = <Icon id='arrow-bend-up-left' />;
|
||||
title = <FormattedMessage id='interaction_modal.title.reply' defaultMessage="Reply to {name}'s post" values={{ name }} />;
|
||||
actionDescription = <FormattedMessage id='interaction_modal.description.reply' defaultMessage='With an account on Mastodon, you can respond to this post.' />;
|
||||
break;
|
||||
case 'reblog':
|
||||
icon = <Icon id='rocket-launch' />;
|
||||
title = <FormattedMessage id='interaction_modal.title.reblog' defaultMessage="Boost {name}'s post" values={{ name }} />;
|
||||
actionDescription = <FormattedMessage id='interaction_modal.description.reblog' defaultMessage='With an account on Mastodon, you can boost this post to share it with your own followers.' />;
|
||||
break;
|
||||
case 'favourite':
|
||||
icon = <Icon id='star' />;
|
||||
title = <FormattedMessage id='interaction_modal.title.favourite' defaultMessage="Favorite {name}'s post" values={{ name }} />;
|
||||
actionDescription = <FormattedMessage id='interaction_modal.description.favourite' defaultMessage='With an account on Mastodon, you can favorite this post to let the author know you appreciate it and save it for later.' />;
|
||||
break;
|
||||
case 'follow':
|
||||
icon = <Icon id='user-plus' />;
|
||||
title = <FormattedMessage id='interaction_modal.title.follow' defaultMessage='Follow {name}' values={{ name }} />;
|
||||
actionDescription = <FormattedMessage id='interaction_modal.description.follow' defaultMessage='With an account on Mastodon, you can follow {name} to receive their posts in your home feed.' values={{ name }} />;
|
||||
break;
|
||||
case "reply":
|
||||
icon = <Icon id='arrow-bend-up-left' />;
|
||||
title = <FormattedMessage id='interaction_modal.title.reply' defaultMessage="Reply to {name}'s post" values={{ name }} />;
|
||||
actionDescription = <FormattedMessage id='interaction_modal.description.reply' defaultMessage='With an account on Mastodon, you can respond to this post.' />;
|
||||
break;
|
||||
case "reblog":
|
||||
icon = <Icon id='rocket-launch' />;
|
||||
title = <FormattedMessage id='interaction_modal.title.reblog' defaultMessage="Boost {name}'s post" values={{ name }} />;
|
||||
actionDescription = <FormattedMessage id='interaction_modal.description.reblog' defaultMessage='With an account on Mastodon, you can boost this post to share it with your own followers.' />;
|
||||
break;
|
||||
case "favourite":
|
||||
icon = <Icon id='star' />;
|
||||
title = <FormattedMessage id='interaction_modal.title.favourite' defaultMessage="Favorite {name}'s post" values={{ name }} />;
|
||||
actionDescription = <FormattedMessage id='interaction_modal.description.favourite' defaultMessage='With an account on Mastodon, you can favorite this post to let the author know you appreciate it and save it for later.' />;
|
||||
break;
|
||||
case "follow":
|
||||
icon = <Icon id='user-plus' />;
|
||||
title = <FormattedMessage id='interaction_modal.title.follow' defaultMessage='Follow {name}' values={{ name }} />;
|
||||
actionDescription = <FormattedMessage id='interaction_modal.description.follow' defaultMessage='With an account on Mastodon, you can follow {name} to receive their posts in your home feed.' values={{ name }} />;
|
||||
break;
|
||||
}
|
||||
|
||||
let signupButton;
|
||||
|
||||
@@ -56,7 +56,7 @@ class List extends ImmutablePureComponent {
|
||||
<div className='list__wrapper'>
|
||||
<div className='list__display-name'>
|
||||
<Icon id='dot' className='column-link__icon' fixedWidth />
|
||||
{list.get('title')}
|
||||
{list.get("title")}
|
||||
</div>
|
||||
|
||||
<div className='account__relationship'>
|
||||
|
||||
@@ -76,7 +76,7 @@ class Lists extends ImmutablePureComponent {
|
||||
bindToDocument={!multiColumn}
|
||||
>
|
||||
{lists.map(list =>
|
||||
<ColumnLink key={list.get('id')} to={`/lists/${list.get('id')}`} icon='dot' text={list.get('title')} />,
|
||||
<ColumnLink key={list.get("id")} to={`/lists/${list.get("id")}`} icon='dot' text={list.get("title")} />,
|
||||
)}
|
||||
</ScrollableList>
|
||||
|
||||
|
||||
@@ -66,42 +66,42 @@ class FilterBar extends PureComponent {
|
||||
onClick={this.onClick("mention")}
|
||||
title={intl.formatMessage(tooltips.mentions)}
|
||||
>
|
||||
<Icon id={selectedFilter === 'mention' ? 'arrow-bend-double-up-left-filled' : 'arrow-bend-double-up-left'} fixedWidth />
|
||||
<Icon id={selectedFilter === "mention" ? "arrow-bend-double-up-left-filled" : "arrow-bend-double-up-left"} fixedWidth />
|
||||
</button>
|
||||
<button
|
||||
className={selectedFilter === "favourite" ? "active" : ""}
|
||||
onClick={this.onClick("favourite")}
|
||||
title={intl.formatMessage(tooltips.favourites)}
|
||||
>
|
||||
<Icon id={selectedFilter === 'favourite' ? 'star-filled' : 'star'} fixedWidth />
|
||||
<Icon id={selectedFilter === "favourite" ? "star-filled" : "star"} fixedWidth />
|
||||
</button>
|
||||
<button
|
||||
className={selectedFilter === "reblog" ? "active" : ""}
|
||||
onClick={this.onClick("reblog")}
|
||||
title={intl.formatMessage(tooltips.boosts)}
|
||||
>
|
||||
<Icon id={selectedFilter === 'reblog' ? 'rocket-launch-filled' : 'rocket-launch'} fixedWidth />
|
||||
<Icon id={selectedFilter === "reblog" ? "rocket-launch-filled" : "rocket-launch"} fixedWidth />
|
||||
</button>
|
||||
<button
|
||||
className={selectedFilter === "poll" ? "active" : ""}
|
||||
onClick={this.onClick("poll")}
|
||||
title={intl.formatMessage(tooltips.polls)}
|
||||
>
|
||||
<Icon id={selectedFilter === 'poll' ? 'chart-bar-horizontal-filled' : 'chart-bar-horizontal'} fixedWidth />
|
||||
<Icon id={selectedFilter === "poll" ? "chart-bar-horizontal-filled" : "chart-bar-horizontal"} fixedWidth />
|
||||
</button>
|
||||
<button
|
||||
className={selectedFilter === "status" ? "active" : ""}
|
||||
onClick={this.onClick("status")}
|
||||
title={intl.formatMessage(tooltips.statuses)}
|
||||
>
|
||||
<Icon id={selectedFilter === 'status' ? 'chat-circle-dots-filled' : 'chat-circle-dots'} fixedWidth />
|
||||
<Icon id={selectedFilter === "status" ? "chat-circle-dots-filled" : "chat-circle-dots"} fixedWidth />
|
||||
</button>
|
||||
<button
|
||||
className={selectedFilter === "follow" ? "active" : ""}
|
||||
onClick={this.onClick("follow")}
|
||||
title={intl.formatMessage(tooltips.follows)}
|
||||
>
|
||||
<Icon id={selectedFilter === 'follow' ? 'user-plus-filled' : 'user-plus'} fixedWidth />
|
||||
<Icon id={selectedFilter === "follow" ? "user-plus-filled" : "user-plus"} fixedWidth />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -49,7 +49,7 @@ class NotificationOverlay extends ImmutablePureComponent {
|
||||
>
|
||||
<div className='wrappy'>
|
||||
<div className='ckbox' aria-hidden='true' title={label}>
|
||||
{active ? (<Icon id='check' />) : ''}
|
||||
{active ? (<Icon id='check' />) : ""}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -174,11 +174,11 @@ class Footer extends ImmutablePureComponent {
|
||||
|
||||
let replyIcon, replyTitle;
|
||||
|
||||
if (status.get('in_reply_to_id', null) === null) {
|
||||
replyIcon = 'arrow-bend-up-left';
|
||||
if (status.get("in_reply_to_id", null) === null) {
|
||||
replyIcon = "arrow-bend-up-left";
|
||||
replyTitle = intl.formatMessage(messages.reply);
|
||||
} else {
|
||||
replyIcon = 'arrow-bend-double-up-left';
|
||||
replyIcon = "arrow-bend-double-up-left";
|
||||
replyTitle = intl.formatMessage(messages.replyAll);
|
||||
}
|
||||
|
||||
@@ -220,9 +220,9 @@ class Footer extends ImmutablePureComponent {
|
||||
return (
|
||||
<div className='picture-in-picture__footer'>
|
||||
{replyButton}
|
||||
<IconButton className={classNames('status__action-bar-button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon='rocket-launch' onClick={this.handleReblogClick} counter={status.get('reblogs_count')} />
|
||||
<IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} counter={status.get('favourites_count')} />
|
||||
{withOpenButton && <IconButton className='status__action-bar-button' title={intl.formatMessage(messages.open)} icon='arrow-square-out' onClick={this.handleOpenClick} href={status.get('url')} />}
|
||||
<IconButton className={classNames("status__action-bar-button", { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get("reblogged")} title={reblogTitle} icon='rocket-launch' onClick={this.handleReblogClick} counter={status.get("reblogs_count")} />
|
||||
<IconButton className='status__action-bar-button star-icon' animate active={status.get("favourited")} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} counter={status.get("favourites_count")} />
|
||||
{withOpenButton && <IconButton className='status__action-bar-button' title={intl.formatMessage(messages.open)} icon='arrow-square-out' onClick={this.handleOpenClick} href={status.get("url")} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -221,16 +221,16 @@ class ActionBar extends PureComponent {
|
||||
return (
|
||||
<div className='status__action-bar detailed-status__action-bar'>
|
||||
<div className='detailed-status__button'>
|
||||
<IconButton title={intl.formatMessage(messages.reply)} icon={status.get('in_reply_to_id', null) === null ? 'arrow-bend-up-left' : 'arrow-double-bend-up-left'} onClick={this.handleReplyClick} />
|
||||
<IconButton title={intl.formatMessage(messages.reply)} icon={status.get("in_reply_to_id", null) === null ? "arrow-bend-up-left" : "arrow-double-bend-up-left"} onClick={this.handleReplyClick} />
|
||||
</div>
|
||||
<div className='detailed-status__button'>
|
||||
<IconButton className={classNames({ reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon={status.get('reblogged') ? 'rocket-launch-filled' : 'rocket-launch'} onClick={this.handleReblogClick} />
|
||||
<IconButton className={classNames({ reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get("reblogged")} title={reblogTitle} icon={status.get("reblogged") ? "rocket-launch-filled" : "rocket-launch"} onClick={this.handleReblogClick} />
|
||||
</div>
|
||||
<div className='detailed-status__button'>
|
||||
<IconButton className='star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon={status.get('favourited') ? 'star-filled' : 'star'} onClick={this.handleFavouriteClick} />
|
||||
<IconButton className='star-icon' animate active={status.get("favourited")} title={intl.formatMessage(messages.favourite)} icon={status.get("favourited") ? "star-filled" : "star"} onClick={this.handleFavouriteClick} />
|
||||
</div>
|
||||
<div className='detailed-status__button'>
|
||||
<IconButton className='bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon={status.get('bookmarked') ? 'bookmark-filled' : 'bookmark'} onClick={this.handleBookmarkClick} />
|
||||
<IconButton className='bookmark-icon' disabled={!signedIn} active={status.get("bookmarked")} title={intl.formatMessage(messages.bookmark)} icon={status.get("bookmarked") ? "bookmark-filled" : "bookmark"} onClick={this.handleBookmarkClick} />
|
||||
</div>
|
||||
|
||||
<div className='detailed-status__action-bar-dropdown'>
|
||||
|
||||
@@ -213,7 +213,7 @@ export default class Card extends PureComponent {
|
||||
<div className='status-card__actions'>
|
||||
<div>
|
||||
<button onClick={this.handleEmbedClick}><Icon id={iconVariant} /></button>
|
||||
{horizontal && <a href={card.get('url')} target='_blank' rel='noopener noreferrer'><Icon id='arrow-square-out' /></a>}
|
||||
{horizontal && <a href={card.get("url")} target='_blank' rel='noopener noreferrer'><Icon id='arrow-square-out' /></a>}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -133,11 +133,11 @@ class DetailedStatus extends ImmutablePureComponent {
|
||||
return null;
|
||||
}
|
||||
|
||||
let applicationLink = '';
|
||||
let reblogLink = '';
|
||||
let reblogIcon = 'rocket-launch';
|
||||
let favouriteLink = '';
|
||||
let edited = '';
|
||||
let applicationLink = "";
|
||||
let reblogLink = "";
|
||||
let reblogIcon = "rocket-launch";
|
||||
let favouriteLink = "";
|
||||
let edited = "";
|
||||
|
||||
// Depending on user settings, some media are considered as parts of the
|
||||
// contents (affected by CW) while other will be displayed outside of the
|
||||
@@ -254,10 +254,10 @@ class DetailedStatus extends ImmutablePureComponent {
|
||||
|
||||
const visibilityLink = <> · <VisibilityIcon visibility={status.get("visibility")} /></>;
|
||||
|
||||
if (status.get('visibility') === 'direct') {
|
||||
reblogIcon = 'at';
|
||||
} else if (status.get('visibility') === 'private') {
|
||||
reblogIcon = 'lock-simple';
|
||||
if (status.get("visibility") === "direct") {
|
||||
reblogIcon = "at";
|
||||
} else if (status.get("visibility") === "private") {
|
||||
reblogIcon = "lock-simple";
|
||||
}
|
||||
|
||||
if (!["unlisted", "public"].includes(status.get("visibility"))) {
|
||||
@@ -265,8 +265,8 @@ class DetailedStatus extends ImmutablePureComponent {
|
||||
} else if (this.context.router) {
|
||||
reblogLink = (
|
||||
<>
|
||||
{' · '}
|
||||
<Link to={`/@${status.getIn(['account', 'acct'])}/${status.get('id')}/reblogs`} className='detailed-status__link'>
|
||||
{" · "}
|
||||
<Link to={`/@${status.getIn(["account", "acct"])}/${status.get("id")}/reblogs`} className='detailed-status__link'>
|
||||
<Icon id={reblogIcon} />
|
||||
<span className='detailed-status__reblogs'>
|
||||
<AnimatedNumber value={status.get("reblogs_count")} />
|
||||
@@ -277,8 +277,8 @@ class DetailedStatus extends ImmutablePureComponent {
|
||||
} else {
|
||||
reblogLink = (
|
||||
<>
|
||||
{' · '}
|
||||
<a href={`/interact/${status.get('id')}?type=reblog`} className='detailed-status__link' onClick={this.handleModalLink}>
|
||||
{" · "}
|
||||
<a href={`/interact/${status.get("id")}?type=reblog`} className='detailed-status__link' onClick={this.handleModalLink}>
|
||||
<Icon id={reblogIcon} />
|
||||
<span className='detailed-status__reblogs'>
|
||||
<AnimatedNumber value={status.get("reblogs_count")} />
|
||||
@@ -290,7 +290,7 @@ class DetailedStatus extends ImmutablePureComponent {
|
||||
|
||||
if (this.context.router) {
|
||||
favouriteLink = (
|
||||
<Link to={`/@${status.getIn(['account', 'acct'])}/${status.get('id')}/favourites`} className='detailed-status__link'>
|
||||
<Link to={`/@${status.getIn(["account", "acct"])}/${status.get("id")}/favourites`} className='detailed-status__link'>
|
||||
<Icon id='star' />
|
||||
<span className='detailed-status__favorites'>
|
||||
<AnimatedNumber value={status.get("favourites_count")} />
|
||||
@@ -299,7 +299,7 @@ class DetailedStatus extends ImmutablePureComponent {
|
||||
);
|
||||
} else {
|
||||
favouriteLink = (
|
||||
<a href={`/interact/${status.get('id')}?type=favourite`} className='detailed-status__link' onClick={this.handleModalLink}>
|
||||
<a href={`/interact/${status.get("id")}?type=favourite`} className='detailed-status__link' onClick={this.handleModalLink}>
|
||||
<Icon id='star' />
|
||||
<span className='detailed-status__favorites'>
|
||||
<AnimatedNumber value={status.get("favourites_count")} />
|
||||
|
||||
@@ -727,7 +727,7 @@ class Status extends ImmutablePureComponent {
|
||||
showBackButton
|
||||
multiColumn={multiColumn}
|
||||
extraButton={(
|
||||
<button type='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}><Icon id={!isExpanded ? 'eye-slash' : 'eye'} /></button>
|
||||
<button type='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}><Icon id={!isExpanded ? "eye-slash" : "eye"} /></button>
|
||||
)}
|
||||
/>
|
||||
|
||||
|
||||
@@ -3,12 +3,12 @@ import PropTypes from "prop-types";
|
||||
import classNames from "classnames";
|
||||
import { NavLink } from "react-router-dom";
|
||||
|
||||
import { Icon } from 'flavours/glitch/components/icon';
|
||||
import { Icon } from "flavours/glitch/components/icon";
|
||||
|
||||
const ColumnLink = ({ icon, text, to, onClick, href, method, badge, transparent, ...other }) => {
|
||||
const className = classNames('column-link', { 'column-link--transparent': transparent });
|
||||
const badgeElement = typeof badge !== 'undefined' ? <span className='column-link__badge'>{badge}</span> : null;
|
||||
const iconElement = typeof icon === 'string' ? <Icon id={icon} fixedWidth className='column-link__icon' /> : icon;
|
||||
const className = classNames("column-link", { "column-link--transparent": transparent });
|
||||
const badgeElement = typeof badge !== "undefined" ? <span className='column-link__badge'>{badge}</span> : null;
|
||||
const iconElement = typeof icon === "string" ? <Icon id={icon} fixedWidth className='column-link__icon' /> : icon;
|
||||
|
||||
if (href) {
|
||||
return (
|
||||
|
||||
@@ -596,8 +596,8 @@ class DoodleModal extends ImmutablePureComponent {
|
||||
</div>
|
||||
</div>
|
||||
<div className='doodle-toolbar'>
|
||||
<IconButton icon='pencil-simple-line' title='Draw' label='Draw' onClick={this.setModeDraw} size={18} active={this.mode === 'draw'} inverted />
|
||||
<IconButton icon='paint-bucket' title='Fill' label='Fill' onClick={this.setModeFill} size={18} active={this.mode === 'fill'} inverted />
|
||||
<IconButton icon='pencil-simple-line' title='Draw' label='Draw' onClick={this.setModeDraw} size={18} active={this.mode === "draw"} inverted />
|
||||
<IconButton icon='paint-bucket' title='Fill' label='Fill' onClick={this.setModeFill} size={18} active={this.mode === "fill"} inverted />
|
||||
<IconButton icon='arrow-counter-clockwise' title='Undo' label='Undo' onClick={this.undo} size={18} inverted />
|
||||
<IconButton icon='trash' title='Clear' label='Clear' onClick={this.handleClearBtn} size={18} inverted />
|
||||
</div>
|
||||
|
||||
@@ -68,8 +68,8 @@ class Header extends PureComponent {
|
||||
if (signedIn) {
|
||||
content = (
|
||||
<>
|
||||
{location.pathname !== '/search' && <Link to='/search' className='button button-secondary' aria-label={intl.formatMessage(messages.search)}><Icon id='magnifying-glass' /></Link>}
|
||||
{location.pathname !== '/publish' && <Link to='/publish' className='button button-secondary'><FormattedMessage id='compose_form.publish_form' defaultMessage='New post' /></Link>}
|
||||
{location.pathname !== "/search" && <Link to='/search' className='button button-secondary' aria-label={intl.formatMessage(messages.search)}><Icon id='magnifying-glass' /></Link>}
|
||||
{location.pathname !== "/publish" && <Link to='/publish' className='button button-secondary'><FormattedMessage id='compose_form.publish_form' defaultMessage='New post' /></Link>}
|
||||
<Account />
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -47,7 +47,7 @@ class ListPanel extends ImmutablePureComponent {
|
||||
<hr />
|
||||
|
||||
{lists.map(list => (
|
||||
<ColumnLink icon='dot' key={list.get('id')} strict text={list.get('title')} to={`/lists/${list.get('id')}`} transparent />
|
||||
<ColumnLink icon='dot' key={list.get("id")} strict text={list.get("title")} to={`/lists/${list.get("id")}`} transparent />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -212,7 +212,7 @@ class ReportModal extends ImmutablePureComponent {
|
||||
<div className='modal-root__modal report-dialog-modal'>
|
||||
<div className='report-modal__target'>
|
||||
<IconButton className='report-modal__close' title={intl.formatMessage(messages.close)} icon='x' onClick={onClose} size={20} />
|
||||
<FormattedMessage id='report.target' defaultMessage='Report {target}' values={{ target: <strong>{account.get('acct')}</strong> }} />
|
||||
<FormattedMessage id='report.target' defaultMessage='Report {target}' values={{ target: <strong>{account.get("acct")}</strong> }} />
|
||||
</div>
|
||||
|
||||
<div className='report-dialog-modal__container'>
|
||||
|
||||
@@ -420,7 +420,7 @@ class ZoomableImage extends PureComponent {
|
||||
const zoomButtonShouldHide = this.state.navigationHidden || this.props.zoomButtonHidden || this.state.zoomMatrix.rate <= MIN_SCALE ? "media-modal__zoom-button--hidden" : "";
|
||||
const zoomButtonTitle = this.state.zoomState === "compress" ? intl.formatMessage(messages.compress) : intl.formatMessage(messages.expand);
|
||||
|
||||
const zoomButtonIcon = this.state.zoomState === 'compress' ? 'arrows-in-simple' : 'arrows-out-simple';
|
||||
const zoomButtonIcon = this.state.zoomState === "compress" ? "arrows-in-simple" : "arrows-out-simple";
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
@@ -640,11 +640,11 @@ class Video extends PureComponent {
|
||||
<div className='video-player__buttons-bar'>
|
||||
<div className='video-player__buttons left'>
|
||||
<button type='button' title={intl.formatMessage(paused ? messages.play : messages.pause)} aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} className='player-button' onClick={this.togglePlay} autoFocus={autoFocus}>
|
||||
<Icon id={paused ? 'play' : 'pause'} fixedWidth />
|
||||
<Icon id={paused ? "play" : "pause"} fixedWidth />
|
||||
</button>
|
||||
|
||||
<button type='button' title={intl.formatMessage(muted ? messages.unmute : messages.mute)} aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} className='player-button' onClick={this.toggleMute}>
|
||||
<Icon id={muted ? 'speaker-slash' : 'speaker-high'} fixedWidth />
|
||||
<Icon id={muted ? "speaker-slash" : "speaker-high"} fixedWidth />
|
||||
</button>
|
||||
|
||||
<div className={classNames("video-player__volume", { active: this.state.hovered })} onMouseDown={this.handleVolumeMouseDown} ref={this.setVolumeRef}>
|
||||
@@ -670,7 +670,7 @@ class Video extends PureComponent {
|
||||
{(!onCloseVideo && !editable && !fullscreen && !this.props.alwaysVisible) && <button type='button' title={intl.formatMessage(messages.hide)} aria-label={intl.formatMessage(messages.hide)} className='player-button' onClick={this.toggleReveal}><Icon id='eye-slash-filled' fixedWidth /></button>}
|
||||
{(!fullscreen && onOpenVideo) && <button type='button' title={intl.formatMessage(messages.expand)} aria-label={intl.formatMessage(messages.expand)} className='player-button' onClick={this.handleOpenVideo}><Icon id='arrows-out-simple' fixedWidth /></button>}
|
||||
{onCloseVideo && <button type='button' title={intl.formatMessage(messages.close)} aria-label={intl.formatMessage(messages.close)} className='player-button' onClick={this.handleCloseVideo}><Icon id='arrows-in-simple' fixedWidth /></button>}
|
||||
<button type='button' title={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} aria-label={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} className='player-button' onClick={this.toggleFullscreen}><Icon id={fullscreen ? 'arrows-in-simple' : 'frame-corners'} fixedWidth /></button>
|
||||
<button type='button' title={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} aria-label={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} className='player-button' onClick={this.toggleFullscreen}><Icon id={fullscreen ? "arrows-in-simple" : "frame-corners"} fixedWidth /></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+3
-3
@@ -23,10 +23,10 @@ module.exports = {
|
||||
"except": [
|
||||
"after-custom-property",
|
||||
"first-nested",
|
||||
"after-comment"
|
||||
]
|
||||
"after-comment",
|
||||
],
|
||||
}],
|
||||
'custom-property-pattern': '(([a-z]+)(-[a-z]+)*([-]{2}[a-z]+(-[a-z]+)?)?)', // allows kebab-case and kebab-case--state
|
||||
"custom-property-pattern": "(([a-z]+)(-[a-z]+)*([-]{2}[a-z]+(-[a-z]+)?)?)", // allows kebab-case and kebab-case--state
|
||||
"declaration-block-no-redundant-longhand-properties": null,
|
||||
"no-descending-specificity": null,
|
||||
"no-duplicate-selectors": null,
|
||||
|
||||
Reference in New Issue
Block a user