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')
|
||||
if (pickerInput) pickerInput.focus()
|
||||
},
|
||||
triggerShowContentWarning () {
|
||||
this.triggerShowContentWarning()
|
||||
},
|
||||
triggerShowPicker () {
|
||||
this.showPicker = true
|
||||
this.$nextTick(() => {
|
||||
|
|
|
|||
|
|
@ -100,6 +100,7 @@ const PostStatusForm = {
|
|||
'isRedraft'
|
||||
],
|
||||
emits: [
|
||||
'contentWarningFieldVisible',
|
||||
|
|
||||
'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,7 +686,15 @@ const PostStatusForm = {
|
|||
this.$refs['textarea'].focus()
|
||||
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
|
||||
},
|
||||
changeVis (visibility) {
|
||||
|
|
|
|||
|
|
@ -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')"
|
||||
|
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
|
||||
class="emoji-icon button-unstyled"
|
||||
:title="$t('emoji.add_emoji')"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in a new issue
i don't think you're actually emitting this event anywhere, so you can probably remove this