mirrors/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2024-11-24 05:25:08 +01:00
Code Issues Projects Releases Wiki Activity

Improve ESLint rules for JSX (#3608)

Browse Source 
* Add react/no-string-refs ESLint rule

* Add react/jsx-boolean-value ESLint rule

* Add react/jsx-closing-bracket-location ESLint rule

* Add react/jsx-indent ESLint rule

* Add react/jsx-curly-spacing ESLint rule

* Add react/jsx-equals-spacing ESLint rule

* Add react/jsx-first-prop-new-line ESLint rule

* Add react/jsx-no-duplicate-props ESLint rule

* Add react/jsx-tag-spacing ESLint rule
This commit is contained in:
Yamagishi Kazutoshi 2017-06-06 20:20:07 +09:00 committed by Eugen Rochko
parent cd81a1c52a
commit d8ae3efec3
25 changed files with 65 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
.eslintrc.yml
View File

@ -64,9 +64,24 @@ rules:
strict: off strict: off
valid-typeof: error valid-typeof: error
react/jsx-boolean-value: error
react/jsx-closing-bracket-location:
- error
- line-aligned
react/jsx-curly-spacing: error
react/jsx-equals-spacing: error
react/jsx-first-prop-new-line:
- error
- multiline-multiprop
react/jsx-indent:
- error
- 2
react/jsx-no-bind: error react/jsx-no-bind: error
react/jsx-no-duplicate-props: error
react/jsx-tag-spacing: error
react/jsx-wrap-multilines: error react/jsx-wrap-multilines: error
react/no-multi-comp: off react/no-multi-comp: off
react/no-string-refs: error
react/prop-types: error react/prop-types: error
react/self-closing-comp: error react/self-closing-comp: error

6
app/javascript/mastodon/components/account.js
View File

@ -55,11 +55,11 @@ class Account extends ImmutablePureComponent {
const muting = account.getIn(['relationship', 'muting']); const muting = account.getIn(['relationship', 'muting']);
if (requested) { if (requested) {
buttons = <IconButton disabled={true} icon='hourglass' title={intl.formatMessage(messages.requested)} />; buttons = <IconButton disabled icon='hourglass' title={intl.formatMessage(messages.requested)} />;
} else if (blocking) { } else if (blocking) {
buttons = <IconButton active={true} icon='unlock-alt' title={intl.formatMessage(messages.unblock, { name: account.get('username') })} onClick={this.handleBlock} />; buttons = <IconButton active icon='unlock-alt' title={intl.formatMessage(messages.unblock, { name: account.get('username') })} onClick={this.handleBlock} />;
} else if (muting) { } else if (muting) {
buttons = <IconButton active={true} icon='volume-up' title={intl.formatMessage(messages.unmute, { name: account.get('username') })} onClick={this.handleMute} />; buttons = <IconButton active icon='volume-up' title={intl.formatMessage(messages.unmute, { name: account.get('username') })} onClick={this.handleMute} />;
} else { } else {
buttons = <IconButton icon={following ? 'user-times' : 'user-plus'} title={intl.formatMessage(following ? messages.unfollow : messages.follow)} onClick={this.handleFollow} active={following} />; buttons = <IconButton icon={following ? 'user-times' : 'user-plus'} title={intl.formatMessage(following ? messages.unfollow : messages.follow)} onClick={this.handleFollow} active={following} />;
} }

3
app/javascript/mastodon/components/autosuggest_textarea.js
View File

@ -191,7 +191,8 @@ class AutosuggestTextarea extends ImmutablePureComponent {
key={suggestion} key={suggestion}
data-index={suggestion} data-index={suggestion}
className={`autosuggest-textarea__suggestions__item ${i === selectedSuggestion ? 'selected' : ''}`} className={`autosuggest-textarea__suggestions__item ${i === selectedSuggestion ? 'selected' : ''}`}
onClick={this.onSuggestionClick}> onClick={this.onSuggestionClick}
>
<AutosuggestAccountContainer id={suggestion} /> <AutosuggestAccountContainer id={suggestion} />
</div> </div>
))} ))}

2
app/javascript/mastodon/components/column_back_button.js
View File

@ -16,7 +16,7 @@ class ColumnBackButton extends React.PureComponent {
render () { render () {
return ( return (
<div role='button' tabIndex='0' onClick={this.handleClick} className='column-back-button'> <div role='button' tabIndex='0' onClick={this.handleClick} className='column-back-button'>
<i className='fa fa-fw fa-chevron-left column-back-button__icon'/> <i className='fa fa-fw fa-chevron-left column-back-button__icon' />
<FormattedMessage id='column_back_button.label' defaultMessage='Back' /> <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
</div> </div>
); );

6
app/javascript/mastodon/components/dropdown_menu.js
View File

@ -53,13 +53,13 @@ class DropdownMenu extends React.PureComponent {
renderItem = (item, i) => { renderItem = (item, i) => {
if (item === null) { if (item === null) {
return <li key={ 'sep' + i } className='dropdown__sep' />; return <li key={`sep-${i}`} className='dropdown__sep' />;
} }
const { text, action, href = '#' } = item; const { text, action, href = '#' } = item;
return ( return (
<li className='dropdown__content-list-item' key={ text + i }> <li className='dropdown__content-list-item' key={`${text}-${i}`}>
<a href={href} target='_blank' rel='noopener' onClick={this.handleClick} data-index={i} className='dropdown__content-list-link'> <a href={href} target='_blank' rel='noopener' onClick={this.handleClick} data-index={i} className='dropdown__content-list-link'>
{text} {text}
</a> </a>
@ -81,7 +81,7 @@ class DropdownMenu extends React.PureComponent {
return ( return (
<Dropdown ref={this.setRef} onShow={this.handleShow} onHide={this.handleHide}> <Dropdown ref={this.setRef} onShow={this.handleShow} onHide={this.handleHide}>
<DropdownTrigger className='icon-button' style={{ fontSize: `${size}px`, width: `${size}px`, lineHeight: `${size}px` }} aria-label={ariaLabel}> <DropdownTrigger className='icon-button' style={{ fontSize: `${size}px`, width: `${size}px`, lineHeight: `${size}px` }} aria-label={ariaLabel}>
<i className={ `fa fa-fw fa-${icon} dropdown__icon` } aria-hidden={true} /> <i className={`fa fa-fw fa-${icon} dropdown__icon`} aria-hidden />
</DropdownTrigger> </DropdownTrigger>
<DropdownContent className={directionClass}> <DropdownContent className={directionClass}>

3
app/javascript/mastodon/components/icon_button.js
View File

@ -76,7 +76,8 @@ class IconButton extends React.PureComponent {
title={this.props.title} title={this.props.title}
className={classes.join(' ')} className={classes.join(' ')}
onClick={this.handleClick} onClick={this.handleClick}
style={style}> style={style}
>
<i style={{ transform: `rotate(${rotate}deg)` }} className={`fa fa-fw fa-${this.props.icon}`} aria-hidden='true' /> <i style={{ transform: `rotate(${rotate}deg)` }} className={`fa fa-fw fa-${this.props.icon}`} aria-hidden='true' />
</button> </button>
} }

4
app/javascript/mastodon/components/media_gallery.js
View File

@ -105,8 +105,8 @@ class Item extends React.PureComponent {
src={attachment.get('url')} src={attachment.get('url')}
onClick={this.handleClick} onClick={this.handleClick}
autoPlay={autoPlay} autoPlay={autoPlay}
loop={true} loop
muted={true} muted
/> />
<span className='media-gallery__gifv__label'>GIF</span> <span className='media-gallery__gifv__label'>GIF</span>

4
app/javascript/mastodon/components/status.js
View File

@ -168,7 +168,7 @@ class Status extends ImmutablePureComponent {
<FormattedMessage id='status.reblogged_by' defaultMessage='{name} boosted' values={{ name: <a onClick={this.handleAccountClick} data-id={status.getIn(['account', 'id'])} href={status.getIn(['account', 'url'])} className='status__display-name muted'><strong dangerouslySetInnerHTML={displayNameHTML} /></a> }} /> <FormattedMessage id='status.reblogged_by' defaultMessage='{name} boosted' values={{ name: <a onClick={this.handleAccountClick} data-id={status.getIn(['account', 'id'])} href={status.getIn(['account', 'url'])} className='status__display-name muted'><strong dangerouslySetInnerHTML={displayNameHTML} /></a> }} />
</div> </div>
<Status {...other} wrapped={true} status={status.get('reblog')} account={status.get('account')} /> <Status {...other} wrapped status={status.get('reblog')} account={status.get('account')} />
</div> </div>
); );
} }
@ -184,7 +184,7 @@ class Status extends ImmutablePureComponent {
} }
if (account === undefined || account === null) { if (account === undefined || account === null) {
statusAvatar = <Avatar src={status.getIn(['account', 'avatar'])} staticSrc={status.getIn(['account', 'avatar_static'])} size={48}/>; statusAvatar = <Avatar src={status.getIn(['account', 'avatar'])} staticSrc={status.getIn(['account', 'avatar_static'])} size={48} />;
}else{ }else{
statusAvatar = <AvatarOverlay staticSrc={status.getIn(['account', 'avatar_static'])} overlaySrc={account.get('avatar_static')} />; statusAvatar = <AvatarOverlay staticSrc={status.getIn(['account', 'avatar_static'])} overlaySrc={account.get('avatar_static')} />;
} }

4
app/javascript/mastodon/components/status_action_bar.js
View File

@ -139,10 +139,10 @@ class StatusActionBar extends ImmutablePureComponent {
<div className='status__action-bar'> <div className='status__action-bar'>
<IconButton className='status__action-bar-button' title={replyTitle} icon={replyIcon} onClick={this.handleReplyClick} /> <IconButton className='status__action-bar-button' title={replyTitle} icon={replyIcon} onClick={this.handleReplyClick} />
<IconButton className='status__action-bar-button' disabled={reblogDisabled} active={status.get('reblogged')} title={reblogDisabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} /> <IconButton className='status__action-bar-button' disabled={reblogDisabled} active={status.get('reblogged')} title={reblogDisabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} />
<IconButton className='status__action-bar-button star-icon' animate={true} active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} /> <IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} />
<div className='status__action-bar-dropdown'> <div className='status__action-bar-dropdown'>
<DropdownMenu items={menu} icon='ellipsis-h' size={18} direction='right' ariaLabel='More'/> <DropdownMenu items={menu} icon='ellipsis-h' size={18} direction='right' ariaLabel='More' />
</div> </div>
</div> </div>
); );

2
app/javascript/mastodon/components/video_player.js
View File

@ -184,7 +184,7 @@ class VideoPlayer extends React.PureComponent {
ref={this.setRef} ref={this.setRef}
src={media.get('url')} src={media.get('url')}
autoPlay={!isIOS()} autoPlay={!isIOS()}
loop={true} loop
muted={this.state.muted} muted={this.state.muted}
onClick={this.handleVideoClick} onClick={this.handleVideoClick}
/> />

2
app/javascript/mastodon/features/account/components/header.js
View File

@ -104,7 +104,7 @@ class Header extends ImmutablePureComponent {
if (account.getIn(['relationship', 'requested'])) { if (account.getIn(['relationship', 'requested'])) {
actionBtn = ( actionBtn = (
<div className='account--action-button'> <div className='account--action-button'>
<IconButton size={26} disabled={true} icon='hourglass' title={intl.formatMessage(messages.requested)} /> <IconButton size={26} disabled icon='hourglass' title={intl.formatMessage(messages.requested)} />
</div> </div>
); );
} else if (!account.getIn(['relationship', 'blocking'])) { } else if (!account.getIn(['relationship', 'blocking'])) {

3
app/javascript/mastodon/features/account_gallery/components/media_item.js
View File

@ -28,7 +28,8 @@ class MediaItem extends ImmutablePureComponent {
<Permalink <Permalink
to={`/statuses/${status.get('id')}`} to={`/statuses/${status.get('id')}`}
href={status.get('url')} href={status.get('url')}
style={style}> style={style}
>
{content} {content}
</Permalink> </Permalink>
</div> </div>

2
app/javascript/mastodon/features/compose/components/compose_form.js
View File

@ -152,7 +152,7 @@ class ComposeForm extends ImmutablePureComponent {
<div className='compose-form'> <div className='compose-form'>
<Collapsable isVisible={this.props.spoiler} fullHeight={50}> <Collapsable isVisible={this.props.spoiler} fullHeight={50}>
<div className='spoiler-input'> <div className='spoiler-input'>
<input placeholder={intl.formatMessage(messages.spoiler_placeholder)} value={this.props.spoiler_text} onChange={this.handleChangeSpoilerText} onKeyDown={this.handleKeyDown} type='text' className='spoiler-input__input' id='cw-spoiler-input'/> <input placeholder={intl.formatMessage(messages.spoiler_placeholder)} value={this.props.spoiler_text} onChange={this.handleChangeSpoilerText} onKeyDown={this.handleKeyDown} type='text' className='spoiler-input__input' id='cw-spoiler-input' />
</div> </div>
</Collapsable> </Collapsable>

10
app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js
View File

@ -106,14 +106,16 @@ class EmojiPickerDropdown extends React.PureComponent {
return ( return (
<Dropdown ref={this.setRef} className='emoji-picker__dropdown' onShow={this.onShowDropdown} onHide={this.onHideDropdown}> <Dropdown ref={this.setRef} className='emoji-picker__dropdown' onShow={this.onShowDropdown} onHide={this.onHideDropdown}>
<DropdownTrigger className='emoji-button' title={intl.formatMessage(messages.emoji)}> <DropdownTrigger className='emoji-button' title={intl.formatMessage(messages.emoji)}>
<img draggable='false' <img
className={`emojione ${active && loading ? 'pulse-loading' : ''}`} draggable='false'
alt='🙂' src='/emoji/1f602.svg' /> className={`emojione ${active && loading ? 'pulse-loading' : ''}`}
alt='🙂' src='/emoji/1f602.svg'
/>
</DropdownTrigger> </DropdownTrigger>
<DropdownContent className='dropdown__left'> <DropdownContent className='dropdown__left'>
{ {
this.state.active && !this.state.loading && this.state.active && !this.state.loading &&
(<EmojiPicker emojione={settings} onChange={this.handleChange} searchPlaceholder={intl.formatMessage(messages.emoji_search)} categories={categories} search={true} />) (<EmojiPicker emojione={settings} onChange={this.handleChange} searchPlaceholder={intl.formatMessage(messages.emoji_search)} categories={categories} search />)
} }
</DropdownContent> </DropdownContent>
</Dropdown> </Dropdown>

2
app/javascript/mastodon/features/compose/components/privacy_dropdown.js
View File

@ -78,7 +78,7 @@ class PrivacyDropdown extends React.PureComponent {
return ( return (
<div ref={this.setRef} className={`privacy-dropdown ${open ? 'active' : ''}`}> <div ref={this.setRef} className={`privacy-dropdown ${open ? 'active' : ''}`}>
<div className='privacy-dropdown__value'><IconButton className='privacy-dropdown__value-icon' icon={valueOption.icon} title={intl.formatMessage(messages.change_privacy)} size={18} active={open} inverted onClick={this.handleToggle} style={iconStyle}/></div> <div className='privacy-dropdown__value'><IconButton className='privacy-dropdown__value-icon' icon={valueOption.icon} title={intl.formatMessage(messages.change_privacy)} size={18} active={open} inverted onClick={this.handleToggle} style={iconStyle} /></div>
<div className='privacy-dropdown__dropdown'> <div className='privacy-dropdown__dropdown'>
{open && options.map(item => {open && options.map(item =>
<div role='button' tabIndex='0' key={item.value} data-index={item.value} onClick={this.handleClick} className={`privacy-dropdown__option ${item.value === value ? 'active' : ''}`}> <div role='button' tabIndex='0' key={item.value} data-index={item.value} onClick={this.handleClick} className={`privacy-dropdown__option ${item.value === value ? 'active' : ''}`}>

4
app/javascript/mastodon/features/compose/components/upload_button.js
View File

@ -54,13 +54,13 @@ class UploadButton extends ImmutablePureComponent {
return ( return (
<div className='compose-form__upload-button'> <div className='compose-form__upload-button'>
<IconButton icon='camera' title={intl.formatMessage(messages.upload)} disabled={disabled} onClick={this.handleClick} className='compose-form__upload-button-icon' size={18} inverted style={iconStyle}/> <IconButton icon='camera' title={intl.formatMessage(messages.upload)} disabled={disabled} onClick={this.handleClick} className='compose-form__upload-button-icon' size={18} inverted style={iconStyle} />
<input <input
key={resetFileKey} key={resetFileKey}
ref={this.setRef} ref={this.setRef}
type='file' type='file'
multiple={false} multiple={false}
accept={ acceptContentTypes.toArray().join(',')} accept={acceptContentTypes.toArray().join(',')}
onChange={this.handleChange} onChange={this.handleChange}
disabled={disabled} disabled={disabled}
style={{ display: 'none' }} style={{ display: 'none' }}

6
app/javascript/mastodon/features/getting_started/index.js
View File

@ -77,11 +77,11 @@ class GettingStarted extends ImmutablePureComponent {
]); ]);
return ( return (
<Column icon='asterisk' heading={intl.formatMessage(messages.heading)} hideHeadingOnMobile={true}> <Column icon='asterisk' heading={intl.formatMessage(messages.heading)} hideHeadingOnMobile>
<div className='getting-started__wrapper'> <div className='getting-started__wrapper'>
<ColumnSubheading text={intl.formatMessage(messages.navigation_subheading)}/> <ColumnSubheading text={intl.formatMessage(messages.navigation_subheading)} />
{navItems} {navItems}
<ColumnSubheading text={intl.formatMessage(messages.settings_subheading)}/> <ColumnSubheading text={intl.formatMessage(messages.settings_subheading)} />
<ColumnLink icon='book' text={intl.formatMessage(messages.info)} href='/about/more' /> <ColumnLink icon='book' text={intl.formatMessage(messages.info)} href='/about/more' />
<ColumnLink icon='cog' text={intl.formatMessage(messages.preferences)} href='/settings/preferences' /> <ColumnLink icon='cog' text={intl.formatMessage(messages.preferences)} href='/settings/preferences' />
<ColumnLink icon='sign-out' text={intl.formatMessage(messages.sign_out)} href='/auth/sign_out' method='delete' /> <ColumnLink icon='sign-out' text={intl.formatMessage(messages.sign_out)} href='/auth/sign_out' method='delete' />

2
app/javascript/mastodon/features/hashtag_timeline/index.js
View File

@ -117,7 +117,7 @@ class HashtagTimeline extends React.PureComponent {
onClick={this.handleHeaderClick} onClick={this.handleHeaderClick}
pinned={pinned} pinned={pinned}
multiColumn={multiColumn} multiColumn={multiColumn}
showBackButton={true} showBackButton
/> />
<StatusListContainer <StatusListContainer

6
app/javascript/mastodon/features/notifications/components/notification.js
View File

@ -40,12 +40,12 @@ class Notification extends ImmutablePureComponent {
<div className='notification notification-favourite'> <div className='notification notification-favourite'>
<div className='notification__message'> <div className='notification__message'>
<div className='notification__favourite-icon-wrapper'> <div className='notification__favourite-icon-wrapper'>
<i className='fa fa-fw fa-star star-icon'/> <i className='fa fa-fw fa-star star-icon' />
</div> </div>
<FormattedMessage id='notification.favourite' defaultMessage='{name} favourited your status' values={{ name: link }} /> <FormattedMessage id='notification.favourite' defaultMessage='{name} favourited your status' values={{ name: link }} />
</div> </div>
<StatusContainer id={notification.get('status')} account={notification.get('account')} muted={true} withDismiss /> <StatusContainer id={notification.get('status')} account={notification.get('account')} muted withDismiss />
</div> </div>
); );
} }
@ -60,7 +60,7 @@ class Notification extends ImmutablePureComponent {
<FormattedMessage id='notification.reblog' defaultMessage='{name} boosted your status' values={{ name: link }} /> <FormattedMessage id='notification.reblog' defaultMessage='{name} boosted your status' values={{ name: link }} />
</div> </div>
<StatusContainer id={notification.get('status')} account={notification.get('account')} muted={true} withDismiss /> <StatusContainer id={notification.get('status')} account={notification.get('account')} muted withDismiss />
</div> </div>
); );
} }

2
app/javascript/mastodon/features/status/components/action_bar.js
View File

@ -81,7 +81,7 @@ class ActionBar extends React.PureComponent {
<div className='detailed-status__action-bar'> <div className='detailed-status__action-bar'>
<div className='detailed-status__button'><IconButton title={intl.formatMessage(messages.reply)} icon={status.get('in_reply_to_id', null) === null ? 'reply' : 'reply-all'} onClick={this.handleReplyClick} /></div> <div className='detailed-status__button'><IconButton title={intl.formatMessage(messages.reply)} icon={status.get('in_reply_to_id', null) === null ? 'reply' : 'reply-all'} onClick={this.handleReplyClick} /></div>
<div className='detailed-status__button'><IconButton disabled={reblog_disabled} active={status.get('reblogged')} title={reblog_disabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} /></div> <div className='detailed-status__button'><IconButton disabled={reblog_disabled} active={status.get('reblogged')} title={reblog_disabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} /></div>
<div className='detailed-status__button'><IconButton animate={true} active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} activeStyle={{ color: '#ca8f04' }} /></div> <div className='detailed-status__button'><IconButton animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} activeStyle={{ color: '#ca8f04' }} /></div>
<div className='detailed-status__action-bar-dropdown'> <div className='detailed-status__action-bar-dropdown'>
<DropdownMenu size={18} icon='ellipsis-h' items={menu} direction='left' ariaLabel='More' /> <DropdownMenu size={18} icon='ellipsis-h' items={menu} direction='left' ariaLabel='More' />

5
app/javascript/mastodon/features/ui/components/column.js
View File

@ -42,7 +42,7 @@ class Column extends React.PureComponent {
if (heading) { if (heading) {
columnHeaderId = heading.replace(/ /g, '-'); columnHeaderId = heading.replace(/ /g, '-');
header = <ColumnHeader icon={icon} active={active} type={heading} onClick={this.handleHeaderClick} hideOnMobile={hideHeadingOnMobile} columnHeaderId={columnHeaderId}/>; header = <ColumnHeader icon={icon} active={active} type={heading} onClick={this.handleHeaderClick} hideOnMobile={hideHeadingOnMobile} columnHeaderId={columnHeaderId} />;
} }
return ( return (
<div <div
@ -50,7 +50,8 @@ class Column extends React.PureComponent {
role='region' role='region'
aria-labelledby={columnHeaderId} aria-labelledby={columnHeaderId}
className='column' className='column'
onScroll={this.handleScroll}> onScroll={this.handleScroll}
>
{header} {header}
{children} {children}
</div> </div>

2
app/javascript/mastodon/features/ui/components/media_modal.js
View File

@ -75,7 +75,7 @@ class MediaModal extends ImmutablePureComponent {
if (attachment.get('type') === 'image') { if (attachment.get('type') === 'image') {
content = <ImageLoader src={url} />; content = <ImageLoader src={url} />;
} else if (attachment.get('type') === 'gifv') { } else if (attachment.get('type') === 'gifv') {
content = <ExtendedVideoPlayer src={url} muted={true} controls={false} />; content = <ExtendedVideoPlayer src={url} muted controls={false} />;
} }
return ( return (

3
app/javascript/mastodon/features/ui/components/modal_root.js
View File

@ -64,7 +64,8 @@ class ModalRoot extends React.PureComponent {
<TransitionMotion <TransitionMotion
styles={items} styles={items}
willEnter={this.willEnter} willEnter={this.willEnter}
willLeave={this.willLeave}> willLeave={this.willLeave}
>
{interpolatedStyles => {interpolatedStyles =>
<div className='modal-root'> <div className='modal-root'>
{interpolatedStyles.map(({ key, data: { type, props }, style }) => { {interpolatedStyles.map(({ key, data: { type, props }, style }) => {

8
app/javascript/mastodon/features/ui/components/onboarding_modal.js
View File

@ -31,7 +31,7 @@ const PageOne = ({ acct, domain }) => (
<div> <div>
<h1><FormattedMessage id='onboarding.page_one.welcome' defaultMessage='Welcome to Mastodon!' /></h1> <h1><FormattedMessage id='onboarding.page_one.welcome' defaultMessage='Welcome to Mastodon!' /></h1>
<p><FormattedMessage id='onboarding.page_one.federation' defaultMessage='Mastodon is a network of independent servers joining up to make one larger social network. We call these servers instances.' /></p> <p><FormattedMessage id='onboarding.page_one.federation' defaultMessage='Mastodon is a network of independent servers joining up to make one larger social network. We call these servers instances.' /></p>
<p><FormattedMessage id='onboarding.page_one.handle' defaultMessage='You are on {domain}, so your full handle is {handle}' values={{ domain, handle: <strong>{acct}@{domain}</strong> }}/></p> <p><FormattedMessage id='onboarding.page_one.handle' defaultMessage='You are on {domain}, so your full handle is {handle}' values={{ domain, handle: <strong>{acct}@{domain}</strong> }} /></p>
</div> </div>
</div> </div>
); );
@ -88,7 +88,7 @@ const PageThree = ({ me, domain }) => (
</div> </div>
</div> </div>
<p><FormattedMessage id='onboarding.page_three.search' defaultMessage='Use the search bar to find people and look at hashtags, such as {illustration} and {introductions}. To look for a person who is not on this instance, use their full handle.' values={{ illustration: <Permalink to='/timelines/tag/illustration' href='/tags/illustration'>#illustration</Permalink>, introductions: <Permalink to='/timelines/tag/introductions' href='/tags/introductions'>#introductions</Permalink> }}/></p> <p><FormattedMessage id='onboarding.page_three.search' defaultMessage='Use the search bar to find people and look at hashtags, such as {illustration} and {introductions}. To look for a person who is not on this instance, use their full handle.' values={{ illustration: <Permalink to='/timelines/tag/illustration' href='/tags/illustration'>#illustration</Permalink>, introductions: <Permalink to='/timelines/tag/introductions' href='/tags/introductions'>#introductions</Permalink> }} /></p>
<p><FormattedMessage id='onboarding.page_three.profile' defaultMessage='Edit your profile to change your avatar, bio, and display name. There, you will also find other preferences.' /></p> <p><FormattedMessage id='onboarding.page_three.profile' defaultMessage='Edit your profile to change your avatar, bio, and display name. There, you will also find other preferences.' /></p>
</div> </div>
); );
@ -104,7 +104,7 @@ const PageFour = ({ domain, intl }) => (
<div className='row'> <div className='row'>
<div> <div>
<div className='figure non-interactive'><ColumnHeader icon='home' type={intl.formatMessage(messages.home_title)} /></div> <div className='figure non-interactive'><ColumnHeader icon='home' type={intl.formatMessage(messages.home_title)} /></div>
<p><FormattedMessage id='onboarding.page_four.home' defaultMessage='The home timeline shows posts from people you follow.'/></p> <p><FormattedMessage id='onboarding.page_four.home' defaultMessage='The home timeline shows posts from people you follow.' /></p>
</div> </div>
<div> <div>
@ -141,7 +141,7 @@ const PageSix = ({ admin, domain }) => {
<p> <p>
<FormattedMessage id='onboarding.page_six.admin' defaultMessage="Your instance's admin is {admin}." values={{ admin: <Permalink href={admin.get('url')} to={`/accounts/${admin.get('id')}`}>@{admin.get('acct')}</Permalink> }} /> <FormattedMessage id='onboarding.page_six.admin' defaultMessage="Your instance's admin is {admin}." values={{ admin: <Permalink href={admin.get('url')} to={`/accounts/${admin.get('id')}`}>@{admin.get('acct')}</Permalink> }} />
<br /> <br />
<FormattedMessage id='onboarding.page_six.read_guidelines' defaultMessage="Please read {domain}'s {guidelines}!" values={{ domain, guidelines: <a href='/about/more' target='_blank'><FormattedMessage id='onboarding.page_six.guidelines' defaultMessage='community guidelines' /></a> }}/> <FormattedMessage id='onboarding.page_six.read_guidelines' defaultMessage="Please read {domain}'s {guidelines}!" values={{ domain, guidelines: <a href='/about/more' target='_blank'><FormattedMessage id='onboarding.page_six.guidelines' defaultMessage='community guidelines' /></a> }} />
</p> </p>
); );
} }

2
app/javascript/mastodon/features/ui/components/video_modal.js
View File

@ -29,7 +29,7 @@ class VideoModal extends ImmutablePureComponent {
<div className='modal-root__modal media-modal'> <div className='modal-root__modal media-modal'>
<div> <div>
<div className='media-modal__close'><IconButton title={intl.formatMessage(messages.close)} icon='times' overlay onClick={onClose} /></div> <div className='media-modal__close'><IconButton title={intl.formatMessage(messages.close)} icon='times' overlay onClick={onClose} /></div>
<ExtendedVideoPlayer src={url} muted={false} controls={true} time={time} /> <ExtendedVideoPlayer src={url} muted={false} controls time={time} />
</div> </div>
</div> </div>
); );