This commit is contained in:
Zoë Bijl
2025-10-14 01:46:50 +02:00
parent 373b756e8a
commit cda2a62ee5
47 changed files with 211 additions and 211 deletions
@@ -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'
@@ -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 (
@@ -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
View File
@@ -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,