Replace "Always show content warning" option with Mastodon-styled content warning button #293

Closed
s0ulf3re wants to merge 12 commits from s0ulf3re/akkoma-fe:s0ulf3re/contentWarningRework into develop
4 changed files with 42 additions and 10 deletions

View file

@ -203,6 +203,9 @@ const EmojiInput = {
const pickerInput = pickerEl.querySelector('input')
if (pickerInput) pickerInput.focus()
},
triggerShowContentWarning () {
this.triggerShowContentWarning()
},
triggerShowPicker () {
this.showPicker = true
this.$nextTick(() => {

View file

@ -100,6 +100,7 @@ const PostStatusForm = {
'isRedraft'
],
emits: [
'contentWarningFieldVisible',
Review

i don't think you're actually emitting this event anywhere, so you can probably remove this

i don't think you're actually emitting this event anywhere, so you can probably remove this
'posted',
'resize',
'mediaplay',
@ -198,6 +199,7 @@ const PostStatusForm = {
}
return {
showingContentWarning: false,
dropFiles: [],
uploadingFiles: false,
error: null,
@ -244,6 +246,9 @@ const PostStatusForm = {
customEmoji () {
return this.$store.state.instance.customEmoji || []
},
contentWarningFieldVisible () {
return this.$store.state.instance.showingContentWarning
},
statusLength () {
return this.newStatus.status.length
},
@ -345,6 +350,12 @@ const PostStatusForm = {
if (this.preview) this.previewStatus()
},
async postStatus (event, newStatus, opts = {}) {
// If the Content warning Field is not visible, then do not post a content warning
if (this.showingContentWarning === false) {
this.newStatus.spoilerText = ''
}
if (this.posting && !this.optimisticPosting) { return }
if (this.disableSubmit) { return }
if (this.emojiInputShown) { return }
@ -675,6 +686,14 @@ const PostStatusForm = {
this.$refs['textarea'].focus()
this.$refs['emoji-input'].triggerShowPicker()
},
showContentWarningField() {
if (this.showingContentWarning === true) {
console.log(this.showingContentWarning)
this.$refs['contentWarningField'].focus()
Review

due to the field being hidden under a v-if, we'll need to wait for the next rendering tick for focus to do anything

also, because you check the show condition before switching it, it'll try and focus when it's not visible

this.showingContentWarning = !this.showingContentWarning
if (this.showingContentWarning) {
  this.$nextTick(() => this.$refs['contentWarningField'].focus())
}

should solve this i think

due to the field being hidden under a v-if, we'll need to wait for the next rendering tick for `focus` to do anything also, because you check the show condition _before_ switching it, it'll try and focus when it's not visible ```javascript this.showingContentWarning = !this.showingContentWarning if (this.showingContentWarning) { this.$nextTick(() => this.$refs['contentWarningField'].focus()) } ``` should solve this i think
}
console.log('button clicked')
this.showingContentWarning = !this.showingContentWarning
},
clearError () {
this.error = null
},

View file

@ -117,14 +117,19 @@
class="preview-status"
/>
</div>
<!-- Content warning -->
<EmojiInput
v-if="!disableSubject && (newStatus.spoilerText || alwaysShowSubject)"
ref="contentWarning"
v-if="showingContentWarning && (newStatus.spoilerText || alwaysShowSubject)"
v-model="newStatus.spoilerText"
enable-emoji-picker
:suggest="emojiSuggestor"
class="form-control"
>
<input
ref="contentWarningField"
v-if="showingContentWarning"
v-model="newStatus.spoilerText"
type="text"
:placeholder="$t('post_status.content_warning')"
@ -133,6 +138,8 @@
class="form-post-subject"
@input="onSubjectInput"
>
<!-- Post Field -->
</EmojiInput>
<i18n-t
v-if="newStatus.files.length !== 0 && newStatus.nsfw === false && newStatus.spoilerText !== ''"
@ -186,6 +193,8 @@
v-if="!disableScopeSelector"
class="visibility-tray"
>
<!-- Scope selector - Allows determining the privacy level of a post -->
<scope-selector
v-if="!disableVisibilitySelector"
:user-default="userDefaultScope"
@ -260,6 +269,14 @@
@upload-failed="uploadFailed"
@all-uploaded="finishedUploadingFiles"
/>
<!-- Content Warning Button -->
<button
class="emoji-icon button-unstyled"
:title="$t('Add content warning')"
Review

translated strings are done via keys into the i18n json - see src/i18n/en.json

so you'd probably want this to be $('post_status.add_content_warning_button') or similar

translated strings are done via keys into the i18n json - see src/i18n/en.json so you'd probably want this to be `$('post_status.add_content_warning_button')` or similar
@click="showContentWarningField"
>
<FAIcon icon="eye" />
</button>
<button
class="emoji-icon button-unstyled"
:title="$t('emoji.add_emoji')"

View file

@ -562,14 +562,7 @@
{{ $t('settings.sensitive_if_subject') }}
</BooleanSetting>
</li>
<li>
<BooleanSetting
path="alwaysShowSubjectInput"
expert="1"
>
{{ $t('settings.subject_input_always_show') }}
</BooleanSetting>
</li>
<li>
<ChoiceSetting
id="subjectLineBehavior"