Surround mid-text display names with bdi tags (#6257)

* Fix #1095 - Surround mid-text display names with bdi tags

* Update jest snapshot
This commit is contained in:
Eugen Rochko 2018-01-15 18:55:10 +01:00 committed by GitHub
parent 3987bd18a4
commit 7861c5f108
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 13 additions and 11 deletions

View File

@ -4,14 +4,16 @@ exports[`<DisplayName /> renders display name + account name 1`] = `
<span <span
className="display-name" className="display-name"
> >
<strong <bdi>
className="display-name__html" <strong
dangerouslySetInnerHTML={ className="display-name__html"
Object { dangerouslySetInnerHTML={
"__html": "<p>Foo</p>", Object {
"__html": "<p>Foo</p>",
}
} }
} />
/> </bdi>
<span <span
className="display-name__account" className="display-name__account"

View File

@ -12,7 +12,7 @@ export default class DisplayName extends React.PureComponent {
return ( return (
<span className='display-name'> <span className='display-name'>
<strong className='display-name__html' dangerouslySetInnerHTML={displayNameHtml} /> <span className='display-name__account'>@{this.props.account.get('acct')}</span> <bdi><strong className='display-name__html' dangerouslySetInnerHTML={displayNameHtml} /></bdi> <span className='display-name__account'>@{this.props.account.get('acct')}</span>
</span> </span>
); );
} }

View File

@ -162,7 +162,7 @@ export default class Status extends ImmutablePureComponent {
prepend = ( prepend = (
<div className='status__prepend'> <div className='status__prepend'>
<div className='status__prepend-icon-wrapper'><i className='fa fa-fw fa-retweet status__prepend-icon' /></div> <div className='status__prepend-icon-wrapper'><i className='fa fa-fw fa-retweet status__prepend-icon' /></div>
<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={display_name_html} /></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'><bdi><strong dangerouslySetInnerHTML={display_name_html} /></bdi></a> }} />
</div> </div>
); );

View File

@ -34,7 +34,7 @@ export default class MovedNote extends ImmutablePureComponent {
<div className='account__moved-note'> <div className='account__moved-note'>
<div className='account__moved-note__message'> <div className='account__moved-note__message'>
<div className='account__moved-note__icon-wrapper'><i className='fa fa-fw fa-suitcase account__moved-note__icon' /></div> <div className='account__moved-note__icon-wrapper'><i className='fa fa-fw fa-suitcase account__moved-note__icon' /></div>
<FormattedMessage id='account.moved_to' defaultMessage='{name} has moved to:' values={{ name: <strong dangerouslySetInnerHTML={displayNameHtml} /> }} /> <FormattedMessage id='account.moved_to' defaultMessage='{name} has moved to:' values={{ name: <bdi><strong dangerouslySetInnerHTML={displayNameHtml} /></bdi> }} />
</div> </div>
<a href={to.get('url')} onClick={this.handleAccountClick} className='detailed-status__display-name'> <a href={to.get('url')} onClick={this.handleAccountClick} className='detailed-status__display-name'>

View File

@ -133,7 +133,7 @@ export default class Notification extends ImmutablePureComponent {
const { notification } = this.props; const { notification } = this.props;
const account = notification.get('account'); const account = notification.get('account');
const displayNameHtml = { __html: account.get('display_name_html') }; const displayNameHtml = { __html: account.get('display_name_html') };
const link = <Permalink className='notification__display-name' href={account.get('url')} title={account.get('acct')} to={`/accounts/${account.get('id')}`} dangerouslySetInnerHTML={displayNameHtml} />; const link = <bdi><Permalink className='notification__display-name' href={account.get('url')} title={account.get('acct')} to={`/accounts/${account.get('id')}`} dangerouslySetInnerHTML={displayNameHtml} /></bdi>;
switch(notification.get('type')) { switch(notification.get('type')) {
case 'follow': case 'follow':