mirror of https://github.com/mastodon/mastodon.git
Change label and design of sensitive and unavailable media in web UI (#25712)
parent
d6b387a0c4
commit
338a0e70cc
|
@ -321,7 +321,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) {
|
||||||
|
@ -329,7 +332,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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -618,6 +618,8 @@
|
||||||
"status.history.created": "{name} created {date}",
|
"status.history.created": "{name} created {date}",
|
||||||
"status.history.edited": "{name} edited {date}",
|
"status.history.edited": "{name} edited {date}",
|
||||||
"status.load_more": "Load more",
|
"status.load_more": "Load more",
|
||||||
|
"status.media.open": "Click to open",
|
||||||
|
"status.media.show": "Click to show",
|
||||||
"status.media_hidden": "Media hidden",
|
"status.media_hidden": "Media hidden",
|
||||||
"status.mention": "Mention @{name}",
|
"status.mention": "Mention @{name}",
|
||||||
"status.more": "More",
|
"status.more": "More",
|
||||||
|
@ -648,7 +650,7 @@
|
||||||
"status.title.with_attachments": "{user} posted {attachmentCount, plural, one {an attachment} other {{attachmentCount} attachments}}",
|
"status.title.with_attachments": "{user} posted {attachmentCount, plural, one {an attachment} other {{attachmentCount} attachments}}",
|
||||||
"status.translate": "Translate",
|
"status.translate": "Translate",
|
||||||
"status.translated_from_with": "Translated from {lang} using {provider}",
|
"status.translated_from_with": "Translated from {lang} using {provider}",
|
||||||
"status.uncached_media_warning": "Not available",
|
"status.uncached_media_warning": "Preview not available",
|
||||||
"status.unmute_conversation": "Unmute conversation",
|
"status.unmute_conversation": "Unmute conversation",
|
||||||
"status.unpin": "Unpin from profile",
|
"status.unpin": "Unpin from profile",
|
||||||
"subscribed_languages.lead": "Only posts in selected languages will appear on your home and list timelines after the change. Select none to receive posts in all languages.",
|
"subscribed_languages.lead": "Only posts in selected languages will appear on your home and list timelines after the change. Select none to receive posts in all languages.",
|
||||||
|
|
|
@ -4213,34 +4213,31 @@ a.status-card.compact:hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
&__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);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue