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

Improve UX of subject / Content Warning field #362

Merged
floatingghost merged 3 commits from hazelnoot/akkoma-fe:develop into develop 2023-12-20 18:49:40 +00:00
Conversation 3 Commits 3 Files changed 3 +58 -6
3 changed files with 58 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -138,7 +138,7 @@ const PostStatusForm = {
statusText = buildMentionsString({ user: this.repliedUser, attentions: this.attentions }, currentUser)
}
const { postContentType: contentType, sensitiveByDefault, sensitiveIfSubject, interfaceLanguage } = this.$store.getters.mergedConfig
const { postContentType: contentType, sensitiveByDefault, sensitiveIfSubject, interfaceLanguage, alwaysShowSubjectInput } = this.$store.getters.mergedConfig
let statusParams = {
spoilerText: this.subject || '',
@ -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 "alwaysShowSubjectInput".
const showSubject = !this.disableSubject && (statusParams.spoilerText || alwaysShowSubjectInput)
hazelnoot marked this conversation as resolved Outdated
floatingghost commented 2023-12-20 17:07:24 +00:00
Outdated
Review
Copy link

this doesn't quite work due to the technicalities of how vue generates component data

this is in data(), which runs to generate a bunch of initial data for a component

you're relying on computed values here, which have not actually run at this point, meaning that alwaysShowSubject will always be undefined at this point in the lifecycle!

if you were to use this.$store.getters.mergedConfig.alwaysShowSubjectInput instead, this would resolve correctly

this doesn't quite work due to the technicalities of how vue generates component data this is in `data()`, which runs to generate a bunch of initial data for a component you're relying on `computed` values here, which have not actually run at this point, meaning that `alwaysShowSubject` will always be undefined at this point in the lifecycle! if you were to use `this.$store.getters.mergedConfig.alwaysShowSubjectInput` instead, this would resolve correctly
hazelnoot commented 2023-12-20 17:30:38 +00:00
Outdated
Review
Copy link

good catch, thank you! I'll push a fix for that.

good catch, thank you! I'll push a fix for that.
return {
dropFiles: [],
uploadingFiles: false,
@ -213,7 +217,10 @@ const PostStatusForm = {
preview: null,
previewLoading: false,
emojiInputShown: false,
idempotencyKey: ''
idempotencyKey: '',
activeEmojiInput: undefined,
activeTextInput: undefined,
subjectVisible: showSubject
}
},
computed: {
@ -674,8 +681,33 @@ const PostStatusForm = {
this.$refs['emoji-input'].resize()
},
showEmojiPicker () {
this.$refs['textarea'].focus()
this.$refs['emoji-input'].triggerShowPicker()
if (!this.activeEmojiInput || !this.activeTextInput)
this.focusStatusInput()
this.$refs[this.activeTextInput].focus()
this.$refs[this.activeEmojiInput].triggerShowPicker()
},
focusStatusInput() {
this.activeEmojiInput = 'emoji-input'
this.activeTextInput = 'textarea'
},
focusSubjectInput() {
this.activeEmojiInput = 'subject-emoji-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 () {
this.error = null

23
src/components/post_status_form/post_status_form.vue
View file

@ -118,13 +118,16 @@
/>
</div>
<EmojiInput
v-if="!disableSubject && (newStatus.spoilerText || alwaysShowSubject)"
ref="subject-emoji-input"
v-if="subjectVisible"
v-model="newStatus.spoilerText"
enable-emoji-picker
hide-emoji-button
:suggest="emojiSuggestor"
class="form-control"
>
<input
ref="subject-input"
v-model="newStatus.spoilerText"
type="text"
:placeholder="$t('post_status.content_warning')"
@ -132,6 +135,7 @@
size="1"
class="form-post-subject"
@input="onSubjectInput"
@focus="focusSubjectInput()"
>
</EmojiInput>
<i18n-t
@ -173,6 +177,7 @@
@input="resize"
@compositionupdate="resize"
@paste="paste"
@focus="focusStatusInput()"
/>
<p
v-if="hasStatusLengthLimit"
@ -276,6 +281,15 @@
>
<FAIcon icon="poll-h" />
</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>
<button
v-if="posting"
@ -456,7 +470,7 @@
}
}
.media-upload-icon, .poll-icon, .emoji-icon {
.media-upload-icon, .poll-icon, .emoji-icon, .spoiler-icon {
font-size: 1.85em;
line-height: 1.1;
flex: 1;
@ -499,6 +513,11 @@
.poll-icon {
order: 3;
justify-content: center;
}
.spoiler-icon {
order: 4;
justify-content: right;
}

1
src/i18n/en.json
View file

@ -380,6 +380,7 @@
"text/x.misskeymarkdown": "MFM"
},
"content_warning": "Content Warning (optional)",
"toggle_content_warning": "Toggle content warning",
"default": "Just arrived at Luna Nova Academy",
"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.",