Replace "Always show content warning" option with Mastodon-styled content warning button #293
4 changed files with 42 additions and 10 deletions
|
@ -203,6 +203,9 @@ const EmojiInput = {
|
||||||
const pickerInput = pickerEl.querySelector('input')
|
const pickerInput = pickerEl.querySelector('input')
|
||||||
if (pickerInput) pickerInput.focus()
|
if (pickerInput) pickerInput.focus()
|
||||||
},
|
},
|
||||||
|
triggerShowContentWarning () {
|
||||||
|
this.triggerShowContentWarning()
|
||||||
|
},
|
||||||
triggerShowPicker () {
|
triggerShowPicker () {
|
||||||
this.showPicker = true
|
this.showPicker = true
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
|
|
|
@ -100,6 +100,7 @@ const PostStatusForm = {
|
||||||
'isRedraft'
|
'isRedraft'
|
||||||
],
|
],
|
||||||
emits: [
|
emits: [
|
||||||
|
'contentWarningFieldVisible',
|
||||||
|
|||||||
'posted',
|
'posted',
|
||||||
'resize',
|
'resize',
|
||||||
'mediaplay',
|
'mediaplay',
|
||||||
|
@ -198,6 +199,7 @@ const PostStatusForm = {
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
showingContentWarning: false,
|
||||||
dropFiles: [],
|
dropFiles: [],
|
||||||
uploadingFiles: false,
|
uploadingFiles: false,
|
||||||
error: null,
|
error: null,
|
||||||
|
@ -244,6 +246,9 @@ const PostStatusForm = {
|
||||||
customEmoji () {
|
customEmoji () {
|
||||||
return this.$store.state.instance.customEmoji || []
|
return this.$store.state.instance.customEmoji || []
|
||||||
},
|
},
|
||||||
|
contentWarningFieldVisible () {
|
||||||
|
return this.$store.state.instance.showingContentWarning
|
||||||
|
},
|
||||||
statusLength () {
|
statusLength () {
|
||||||
return this.newStatus.status.length
|
return this.newStatus.status.length
|
||||||
},
|
},
|
||||||
|
@ -345,6 +350,12 @@ const PostStatusForm = {
|
||||||
if (this.preview) this.previewStatus()
|
if (this.preview) this.previewStatus()
|
||||||
},
|
},
|
||||||
async postStatus (event, newStatus, opts = {}) {
|
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.posting && !this.optimisticPosting) { return }
|
||||||
if (this.disableSubmit) { return }
|
if (this.disableSubmit) { return }
|
||||||
if (this.emojiInputShown) { return }
|
if (this.emojiInputShown) { return }
|
||||||
|
@ -675,7 +686,15 @@ const PostStatusForm = {
|
||||||
this.$refs['textarea'].focus()
|
this.$refs['textarea'].focus()
|
||||||
this.$refs['emoji-input'].triggerShowPicker()
|
this.$refs['emoji-input'].triggerShowPicker()
|
||||||
},
|
},
|
||||||
clearError () {
|
showContentWarningField() {
|
||||||
|
if (this.showingContentWarning === true) {
|
||||||
|
console.log(this.showingContentWarning)
|
||||||
|
this.$refs['contentWarningField'].focus()
|
||||||
floatingghost
commented
due to the field being hidden under a v-if, we'll need to wait for the next rendering tick for also, because you check the show condition before switching it, it'll try and focus when it's not visible
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
|
this.error = null
|
||||||
},
|
},
|
||||||
changeVis (visibility) {
|
changeVis (visibility) {
|
||||||
|
|
|
@ -117,14 +117,19 @@
|
||||||
class="preview-status"
|
class="preview-status"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Content warning -->
|
||||||
<EmojiInput
|
<EmojiInput
|
||||||
v-if="!disableSubject && (newStatus.spoilerText || alwaysShowSubject)"
|
ref="contentWarning"
|
||||||
|
v-if="showingContentWarning && (newStatus.spoilerText || alwaysShowSubject)"
|
||||||
v-model="newStatus.spoilerText"
|
v-model="newStatus.spoilerText"
|
||||||
enable-emoji-picker
|
enable-emoji-picker
|
||||||
:suggest="emojiSuggestor"
|
:suggest="emojiSuggestor"
|
||||||
class="form-control"
|
class="form-control"
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
|
ref="contentWarningField"
|
||||||
|
v-if="showingContentWarning"
|
||||||
v-model="newStatus.spoilerText"
|
v-model="newStatus.spoilerText"
|
||||||
type="text"
|
type="text"
|
||||||
:placeholder="$t('post_status.content_warning')"
|
:placeholder="$t('post_status.content_warning')"
|
||||||
|
@ -133,6 +138,8 @@
|
||||||
class="form-post-subject"
|
class="form-post-subject"
|
||||||
@input="onSubjectInput"
|
@input="onSubjectInput"
|
||||||
>
|
>
|
||||||
|
|
||||||
|
<!-- Post Field -->
|
||||||
</EmojiInput>
|
</EmojiInput>
|
||||||
<i18n-t
|
<i18n-t
|
||||||
v-if="newStatus.files.length !== 0 && newStatus.nsfw === false && newStatus.spoilerText !== ''"
|
v-if="newStatus.files.length !== 0 && newStatus.nsfw === false && newStatus.spoilerText !== ''"
|
||||||
|
@ -186,6 +193,8 @@
|
||||||
v-if="!disableScopeSelector"
|
v-if="!disableScopeSelector"
|
||||||
class="visibility-tray"
|
class="visibility-tray"
|
||||||
>
|
>
|
||||||
|
|
||||||
|
<!-- Scope selector - Allows determining the privacy level of a post -->
|
||||||
<scope-selector
|
<scope-selector
|
||||||
v-if="!disableVisibilitySelector"
|
v-if="!disableVisibilitySelector"
|
||||||
:user-default="userDefaultScope"
|
:user-default="userDefaultScope"
|
||||||
|
@ -260,6 +269,14 @@
|
||||||
@upload-failed="uploadFailed"
|
@upload-failed="uploadFailed"
|
||||||
@all-uploaded="finishedUploadingFiles"
|
@all-uploaded="finishedUploadingFiles"
|
||||||
/>
|
/>
|
||||||
|
<!-- Content Warning Button -->
|
||||||
|
<button
|
||||||
|
class="emoji-icon button-unstyled"
|
||||||
|
:title="$t('Add content warning')"
|
||||||
floatingghost
commented
translated strings are done via keys into the i18n json - see src/i18n/en.json so you'd probably want this to be 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
|
<button
|
||||||
class="emoji-icon button-unstyled"
|
class="emoji-icon button-unstyled"
|
||||||
:title="$t('emoji.add_emoji')"
|
:title="$t('emoji.add_emoji')"
|
||||||
|
|
|
@ -562,14 +562,7 @@
|
||||||
{{ $t('settings.sensitive_if_subject') }}
|
{{ $t('settings.sensitive_if_subject') }}
|
||||||
</BooleanSetting>
|
</BooleanSetting>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
|
||||||
<BooleanSetting
|
|
||||||
path="alwaysShowSubjectInput"
|
|
||||||
expert="1"
|
|
||||||
>
|
|
||||||
{{ $t('settings.subject_input_always_show') }}
|
|
||||||
</BooleanSetting>
|
|
||||||
</li>
|
|
||||||
<li>
|
<li>
|
||||||
<ChoiceSetting
|
<ChoiceSetting
|
||||||
id="subjectLineBehavior"
|
id="subjectLineBehavior"
|
||||||
|
|
Loading…
Reference in a new issue
i don't think you're actually emitting this event anywhere, so you can probably remove this