add button to toggle the spoiler / CW field

This commit is contained in:
Hazel Koehler 2023-12-16 14:44:26 -05:00
parent 3d65eccf04
commit 34e2800f59
3 changed files with 37 additions and 3 deletions

View file

@ -199,6 +199,10 @@ const PostStatusForm = {
}
}
// When first loading the form, hide the subject (CW) field if it's disabled or doesn't have a starting value.
// "disableSubject" seems to take priority over "alwaysShowSubject"
const showSubject = !this.disableSubject && (statusParams.spoilerText || this.alwaysShowSubject)
return {
dropFiles: [],
uploadingFiles: false,
@ -215,7 +219,8 @@ const PostStatusForm = {
emojiInputShown: false,
idempotencyKey: '',
activeEmojiInput: undefined,
activeTextInput: undefined
activeTextInput: undefined,
subjectVisible: showSubject
}
},
computed: {
@ -690,6 +695,20 @@ const PostStatusForm = {
this.activeEmojiInput = 'subject-emoji-input'
this.activeTextInput = 'subject-input'
},
toggleSubjectVisible() {
// If hiding CW, then we need to clear the subject and reset focus
if (this.subjectVisible)
{
this.focusStatusInput()
// "nsfw" property is normally set by the @change listener, but this bypasses it.
// We need to clear it manually instead.
this.newStatus.spoilerText = ''
this.newStatus.nsfw = false
}
this.subjectVisible = !this.subjectVisible
},
clearError () {
this.error = null
},

View file

@ -119,7 +119,7 @@
</div>
<EmojiInput
ref="subject-emoji-input"
v-if="!disableSubject && (newStatus.spoilerText || alwaysShowSubject)"
v-if="subjectVisible"
v-model="newStatus.spoilerText"
enable-emoji-picker
hide-emoji-button
@ -281,6 +281,15 @@
>
<FAIcon icon="poll-h" />
</button>
<button
v-if="!disableSubject"
class="spoiler-icon button-unstyled"
:class="{ selected: subjectVisible }"
:title="$t('post_status.toggle_content_warning')"
@click="toggleSubjectVisible"
>
<FAIcon icon="eye-slash" />
</button>
</div>
<button
v-if="posting"
@ -461,7 +470,7 @@
}
}
.media-upload-icon, .poll-icon, .emoji-icon {
.media-upload-icon, .poll-icon, .emoji-icon, .spoiler-icon {
font-size: 1.85em;
line-height: 1.1;
flex: 1;
@ -504,6 +513,11 @@
.poll-icon {
order: 3;
justify-content: center;
}
.spoiler-icon {
order: 4;
justify-content: right;
}

View file

@ -380,6 +380,7 @@
"text/x.misskeymarkdown": "MFM"
},
"content_warning": "Content Warning (optional)",
"toggle_content_warning": "Toggle content warning",
"default": "Just arrived at Luna Nova Academy",
"direct_warning_to_all": "This post will be visible to all the mentioned users.",
"direct_warning_to_first_only": "This post will only be visible to the mentioned users at the beginning of the message.",