tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] Change sensitive preview cards to not blur text

Browse Source 
Port a1ad2ad951 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
This commit is contained in:
ThibG
2020-06-26 14:31:13 +02:00
committed by Thibaut Girka
parent 9c3b9d5ab9
commit 934bacd05f
2 changed files with 3 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/javascript/flavours/glitch/features/status/components/card.js
View File

@@ -7,7 +7,6 @@ import punycode from 'punycode';
import classnames from 'classnames'; import classnames from 'classnames';
import { decode as decodeIDNA } from 'flavours/glitch/util/idna'; import { decode as decodeIDNA } from 'flavours/glitch/util/idna';
import Icon from 'flavours/glitch/components/icon'; import Icon from 'flavours/glitch/components/icon';
import classNames from 'classnames';
import { useBlurhash } from 'flavours/glitch/util/initial_state'; import { useBlurhash } from 'flavours/glitch/util/initial_state';
import { decode } from 'blurhash'; import { decode } from 'blurhash';
@@ -196,7 +195,7 @@ export default class Card extends React.PureComponent {
const height = (compact && !embedded) ? (width / (16 / 9)) : (width / ratio); const height = (compact && !embedded) ? (width / (16 / 9)) : (width / ratio);
const description = ( const description = (
<div className={classNames('status-card__content', { 'status-card__content--blurred': !revealed })}> <div className='status-card__content'>
{title} {title}
{!(horizontal || compact) && <p className='status-card__description'>{trim(card.get('description') || '', maxDescription)}</p>} {!(horizontal || compact) && <p className='status-card__description'>{trim(card.get('description') || '', maxDescription)}</p>}
<span className='status-card__host'>{provider}</span> <span className='status-card__host'>{provider}</span>
@@ -204,7 +203,7 @@ export default class Card extends React.PureComponent {
); );
let embed = ''; let embed = '';
let canvas = <canvas width={32} height={32} ref={this.setCanvasRef} className={classNames('status-card__image-preview', { 'status-card__image-preview--hidden' : revealed && this.state.previewLoaded })} />; let canvas = <canvas width={32} height={32} ref={this.setCanvasRef} className={classnames('status-card__image-preview', { 'status-card__image-preview--hidden' : revealed && this.state.previewLoaded })} />;
let thumbnail = <img src={card.get('image')} alt='' style={{ width: horizontal ? width : null, height: horizontal ? height : null, visibility: revealed ? null : 'hidden' }} onLoad={this.handleImageLoad} className='status-card__image-image' />; let thumbnail = <img src={card.get('image')} alt='' style={{ width: horizontal ? width : null, height: horizontal ? height : null, visibility: revealed ? null : 'hidden' }} onLoad={this.handleImageLoad} className='status-card__image-image' />;
let spoilerButton = ( let spoilerButton = (
<button type='button' onClick={this.handleReveal} className='spoiler-button__overlay'> <button type='button' onClick={this.handleReveal} className='spoiler-button__overlay'>
@@ -212,7 +211,7 @@ export default class Card extends React.PureComponent {
</button> </button>
); );
spoilerButton = ( spoilerButton = (
<div className={classNames('spoiler-button', { 'spoiler-button--minified': revealed })}> <div className={classnames('spoiler-button', { 'spoiler-button--minified': revealed })}>
{spoilerButton} {spoilerButton}
</div> </div>
); );
@@ -270,7 +269,6 @@ 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>
); );
} }

5
app/javascript/flavours/glitch/styles/components/status.scss
View File

@@ -875,11 +875,6 @@ a.status-card {
flex: 1 1 auto; flex: 1 1 auto;
overflow: hidden; overflow: hidden;
padding: 14px 14px 14px 8px; padding: 14px 14px 14px 8px;
&--blurred {
filter: blur(2px);
pointer-events: none;
}
} }
.status-card__description { .status-card__description {