forked from fedi/mastodon
Fix design issues with sensitive preview cards (#14126)
* Fix design issues with sensitive preview cards * Center “sensitive” label on preview image for interactive cards * Add “button” role to sensitive preview card text
This commit is contained in:
parent
8ed2f9409c
commit
1d2b0d2121
|
@ -191,7 +191,9 @@ export default class Card extends React.PureComponent {
|
||||||
this.setState({ previewLoaded: true });
|
this.setState({ previewLoaded: true });
|
||||||
}
|
}
|
||||||
|
|
||||||
handleReveal = () => {
|
handleReveal = e => {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
this.setState({ revealed: true });
|
this.setState({ revealed: true });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -279,7 +281,7 @@ export default class Card extends React.PureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={className} ref={this.setRef}>
|
<div className={className} ref={this.setRef} onClick={revealed ? null : this.handleReveal} role={revealed ? 'button' : null}>
|
||||||
{embed}
|
{embed}
|
||||||
{!compact && description}
|
{!compact && description}
|
||||||
</div>
|
</div>
|
||||||
|
@ -289,14 +291,12 @@ export default class Card extends React.PureComponent {
|
||||||
<div className='status-card__image'>
|
<div className='status-card__image'>
|
||||||
{canvas}
|
{canvas}
|
||||||
{thumbnail}
|
{thumbnail}
|
||||||
{!revealed && spoilerButton}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
embed = (
|
embed = (
|
||||||
<div className='status-card__image'>
|
<div className='status-card__image'>
|
||||||
<Icon id='file-text' />
|
<Icon id='file-text' />
|
||||||
{!revealed && spoilerButton}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -305,6 +305,7 @@ export default class Card extends React.PureComponent {
|
||||||
<a href={card.get('url')} className={className} target='_blank' rel='noopener noreferrer' ref={this.setRef}>
|
<a href={card.get('url')} className={className} target='_blank' rel='noopener noreferrer' ref={this.setRef}>
|
||||||
{embed}
|
{embed}
|
||||||
{description}
|
{description}
|
||||||
|
{!revealed && spoilerButton}
|
||||||
</a>
|
</a>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -3003,6 +3003,7 @@ a.account__display-name {
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-card {
|
.status-card {
|
||||||
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
border: 1px solid lighten($ui-base-color, 8%);
|
border: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
|
Loading…
Reference in a new issue