treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

[Glitch] Fix missing action label on sensitive videos and embeds in web UI 

Port 714a20697f to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
main-unfiltered
Eugen Rochko 2023-07-24 22:04:38 +02:00 committed by Claire
parent 4b26e44ef4
commit e48a6a5f2c
4 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/javascript/flavours/glitch/features/audio/index.jsx
View File

@ -477,6 +477,7 @@ class Audio extends PureComponent {
const progress = Math.min((currentTime / duration) * 100, 100); const progress = Math.min((currentTime / duration) * 100, 100);
let warning; let warning;
if (sensitive) { if (sensitive) {
warning = <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' />; warning = <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' />;
} else { } else {
@ -522,7 +523,10 @@ class Audio extends PureComponent {
<div className={classNames('spoiler-button', { 'spoiler-button--hidden': revealed || editable })}> <div className={classNames('spoiler-button', { 'spoiler-button--hidden': revealed || editable })}>
<button type='button' className='spoiler-button__overlay' onClick={this.toggleReveal}> <button type='button' className='spoiler-button__overlay' onClick={this.toggleReveal}>
<span className='spoiler-button__overlay__label'>{warning}</span> <span className='spoiler-button__overlay__label'>
{warning}
<span className='spoiler-button__overlay__action'><FormattedMessage id='status.media.show' defaultMessage='Click to show' /></span>
</span>
</button> </button>
</div> </div>

5
app/javascript/flavours/glitch/features/status/components/card.jsx
View File

@ -181,7 +181,10 @@ export default class Card extends PureComponent {
let thumbnail = <img src={card.get('image')} alt='' style={thumbnailStyle} onLoad={this.handleImageLoad} className='status-card__image-image' />; let thumbnail = <img src={card.get('image')} alt='' style={thumbnailStyle} 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'>
<span className='spoiler-button__overlay__label'><FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /></span> <span className='spoiler-button__overlay__label'>
<FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' />
<span className='spoiler-button__overlay__action'><FormattedMessage id='status.media.show' defaultMessage='Click to show' /></span>
</span>
</button> </button>
); );
spoilerButton = ( spoilerButton = (

5
app/javascript/flavours/glitch/features/video/index.jsx
View File

@ -577,7 +577,10 @@ class Video extends PureComponent {
<div className={classNames('spoiler-button', { 'spoiler-button--hidden': revealed || editable })}> <div className={classNames('spoiler-button', { 'spoiler-button--hidden': revealed || editable })}>
<button type='button' className='spoiler-button__overlay' onClick={this.toggleReveal}> <button type='button' className='spoiler-button__overlay' onClick={this.toggleReveal}>
<span className='spoiler-button__overlay__label'>{warning}</span> <span className='spoiler-button__overlay__label'>
{warning}
<span className='spoiler-button__overlay__action'><FormattedMessage id='status.media.show' defaultMessage='Click to show' /></span>
</span>
</button> </button>
</div> </div>

3
app/javascript/flavours/glitch/styles/components/misc.scss
View File

@ -1351,6 +1351,8 @@ button.icon-button.active i.fa-retweet {
padding: 0; padding: 0;
margin: 0; margin: 0;
border: 0; border: 0;
border-radius: 4px;
color: $white;
&__label { &__label {
display: flex; display: flex;
@ -1358,7 +1360,6 @@ button.icon-button.active i.fa-retweet {
justify-content: center; justify-content: center;
gap: 8px; gap: 8px;
flex-direction: column; flex-direction: column;
color: $primary-text-color;
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
} }