add button to toggle the spoiler / CW field
All checks were successful
ci/woodpecker/pr/woodpecker Pipeline was successful

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 { return {
dropFiles: [], dropFiles: [],
uploadingFiles: false, uploadingFiles: false,
@ -215,7 +219,8 @@ const PostStatusForm = {
emojiInputShown: false, emojiInputShown: false,
idempotencyKey: '', idempotencyKey: '',
activeEmojiInput: undefined, activeEmojiInput: undefined,
activeTextInput: undefined activeTextInput: undefined,
subjectVisible: showSubject
} }
}, },
computed: { computed: {
@ -690,6 +695,20 @@ const PostStatusForm = {
this.activeEmojiInput = 'subject-emoji-input' this.activeEmojiInput = 'subject-emoji-input'
this.activeTextInput = 'subject-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 () { clearError () {
this.error = null this.error = null
}, },

View file

@ -119,7 +119,7 @@
</div> </div>
<EmojiInput <EmojiInput
ref="subject-emoji-input" ref="subject-emoji-input"
v-if="!disableSubject && (newStatus.spoilerText || alwaysShowSubject)" v-if="subjectVisible"
v-model="newStatus.spoilerText" v-model="newStatus.spoilerText"
enable-emoji-picker enable-emoji-picker
hide-emoji-button hide-emoji-button
@ -281,6 +281,15 @@
> >
<FAIcon icon="poll-h" /> <FAIcon icon="poll-h" />
</button> </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> </div>
<button <button
v-if="posting" 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; font-size: 1.85em;
line-height: 1.1; line-height: 1.1;
flex: 1; flex: 1;
@ -504,6 +513,11 @@
.poll-icon { .poll-icon {
order: 3; order: 3;
justify-content: center;
}
.spoiler-icon {
order: 4;
justify-content: right; justify-content: right;
} }

View file

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