Move spoiler text to inside the button

This commit is contained in:
Stefano Pigozzi 2024-09-23 04:39:07 +02:00
parent 1a73e32211
commit e116d164e8
No known key found for this signature in database
GPG key ID: 5ADA3868646C3FC0

View file

@ -1889,21 +1889,12 @@ function Status({
<> <>
{(!!spoilerText || !!sensitive) && !readingExpandSpoilers && ( {(!!spoilerText || !!sensitive) && !readingExpandSpoilers && (
<> <>
{!!spoilerText && (
<span
class="spoiler-content media-first-spoiler-content"
lang={language}
dir="auto"
ref={spoilerContentRef}
data-read-more={_(readMoreText)}
>
<EmojiText text={spoilerText} emojis={emojis} />{' '}
</span>
)}
<button <button
class={`light spoiler-button media-first-spoiler-button ${ class={`light spoiler-button media-first-spoiler-button ${
showSpoiler ? 'spoiling' : '' showSpoiler ? 'spoiling' : ''
}`} }`}
lang={language}
dir="auto"
type="button" type="button"
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
@ -1922,7 +1913,7 @@ function Status({
}} }}
> >
<Icon icon={showSpoiler ? 'eye-open' : 'eye-close'} />{' '} <Icon icon={showSpoiler ? 'eye-open' : 'eye-close'} />{' '}
{showSpoiler ? t`Show less` : t`Show content`} {spoilerText ? <EmojiText text={spoilerText} emojis={emojis} /> : showSpoiler ? t`Show less` : t`Show content`}
</button> </button>
</> </>
)} )}
@ -1946,17 +1937,6 @@ function Status({
<> <>
{!!spoilerText && ( {!!spoilerText && (
<> <>
<div
class="content spoiler-content"
lang={language}
dir="auto"
ref={spoilerContentRef}
data-read-more={_(readMoreText)}
>
<p>
<EmojiText text={spoilerText} emojis={emojis} />
</p>
</div>
{readingExpandSpoilers || previewMode ? ( {readingExpandSpoilers || previewMode ? (
<div class="spoiler-divider"> <div class="spoiler-divider">
<Icon icon="eye-open" /> <Trans>Content warning</Trans> <Icon icon="eye-open" /> <Trans>Content warning</Trans>
@ -1984,7 +1964,7 @@ function Status({
}} }}
> >
<Icon icon={showSpoiler ? 'eye-open' : 'eye-close'} />{' '} <Icon icon={showSpoiler ? 'eye-open' : 'eye-close'} />{' '}
{showSpoiler ? t`Show less` : t`Show content`} {!!spoilerText ? <EmojiText text={spoilerText} emojis={emojis} /> : showSpoiler ? t`Show less` : t`Show content`}
</button> </button>
)} )}
</> </>