mirrors
/
vt-social
mirror of https://github.com/nullptr-live/vt-social.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[Glitch] Change label and design of sensitive and unavailable media in web UI 

Port 338a0e70cc to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
main
Eugen Rochko 2023-07-08 20:05:33 +02:00 committed by Claire
parent dd0002e1fe
commit 71f8c45c18
2 changed files with 23 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/javascript/flavours/glitch/components/media_gallery.jsx
View File

@ -354,7 +354,10 @@ class MediaGallery extends PureComponent {
if (uncached) { if (uncached) {
spoilerButton = ( spoilerButton = (
<button type='button' disabled className='spoiler-button__overlay'> <button type='button' disabled className='spoiler-button__overlay'>
<span className='spoiler-button__overlay__label'><FormattedMessage id='status.uncached_media_warning' defaultMessage='Not available' /></span> <span className='spoiler-button__overlay__label'>
<FormattedMessage id='status.uncached_media_warning' defaultMessage='Preview not available' />
<span className='spoiler-button__overlay__action'><FormattedMessage id='status.media.open' defaultMessage='Click to open' /></span>
</span>
</button> </button>
); );
} else if (visible) { } else if (visible) {
@ -362,7 +365,10 @@ class MediaGallery extends PureComponent {
} else { } else {
spoilerButton = ( spoilerButton = (
<button type='button' onClick={this.handleOpen} className='spoiler-button__overlay'> <button type='button' onClick={this.handleOpen} className='spoiler-button__overlay'>
<span className='spoiler-button__overlay__label'>{sensitive ? <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /> : <FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' />}</span> <span className='spoiler-button__overlay__label'>
{sensitive ? <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /> : <FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' />}
<span className='spoiler-button__overlay__action'><FormattedMessage id='status.media.show' defaultMessage='Click to show' /></span>
</span>
</button> </button>
); );
} }

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

@ -1343,34 +1343,31 @@ button.icon-button.active i.fa-retweet {
} }
&__overlay { &__overlay {
display: block; display: flex;
background: transparent; align-items: center;
justify-content: center;
background: rgba($black, 0.5);
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 0;
margin: 0;
border: 0; border: 0;
border-radius: 4px;
&__label { &__label {
display: inline-block; display: flex;
background: rgba($base-overlay-background, 0.5); align-items: center;
border-radius: 8px; justify-content: center;
padding: 8px 12px; gap: 8px;
flex-direction: column;
color: $primary-text-color; color: $primary-text-color;
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
} }
&:hover, &__action {
&:focus, font-weight: 400;
&:active { font-size: 13px;
.spoiler-button__overlay__label {
background: rgba($base-overlay-background, 0.8);
}
}
&:disabled {
.spoiler-button__overlay__label {
background: rgba($base-overlay-background, 0.5);
}
} }
} }
} }