AkkomaGang/akkoma-fe
5
13
Fork 64
Code Issues 81 Pull requests 19 Projects Releases 1 Wiki Activity

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
pull from: s0ulf3re/akkoma-fe:s0ulf3re/contentWarningRework
merge into: AkkomaGang:develop
Conversation 2 Commits 12 Files changed 4 +42 -10
4 changed files with 42 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/components/emoji_input/emoji_input.js
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(() => {

19
src/components/post_status_form/post_status_form.js
View file

@ -100,6 +100,7 @@ const PostStatusForm = {
'isRedraft'
],
emits: [
'contentWarningFieldVisible',
floatingghost commented 2023-03-30 10:09:38 +00:00
Review
Copy link

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()
floatingghost commented 2023-03-30 10:06:55 +00:00
Review
Copy link

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
},

19
src/components/post_status_form/post_status_form.vue
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')"
floatingghost commented 2023-03-30 10:00:02 +00:00
Review
Copy link

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')"

9
src/components/settings_modal/tabs/general_tab.vue
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"