forked from Mirrors/elk
feat: improve personal notes (#1978)
This commit is contained in:
parent
bda18e7ac5
commit
dbbbe8aa01
1 changed files with 36 additions and 6 deletions
|
@ -81,6 +81,8 @@ watchEffect(() => {
|
||||||
iconFields.value = icons
|
iconFields.value = icons
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const personalNoteDraft = ref(relationship?.note ?? '')
|
||||||
|
|
||||||
async function editNote(event: Event) {
|
async function editNote(event: Event) {
|
||||||
if (!event.target || !('value' in event.target) || !relationship)
|
if (!event.target || !('value' in event.target) || !relationship)
|
||||||
return
|
return
|
||||||
|
@ -92,10 +94,13 @@ async function editNote(event: Event) {
|
||||||
|
|
||||||
const newNoteApiResult = await client.v1.accounts.createNote(account.id, { comment: newNote })
|
const newNoteApiResult = await client.v1.accounts.createNote(account.id, { comment: newNote })
|
||||||
relationship.note = newNoteApiResult.note
|
relationship.note = newNoteApiResult.note
|
||||||
|
personalNoteDraft.value = relationship.note ?? ''
|
||||||
}
|
}
|
||||||
|
|
||||||
const isSelf = $(useSelfAccount(() => account))
|
const isSelf = $(useSelfAccount(() => account))
|
||||||
const isNotifiedOnPost = $computed(() => !!relationship?.notifying)
|
const isNotifiedOnPost = $computed(() => !!relationship?.notifying)
|
||||||
|
|
||||||
|
const personalNoteMaxLength = 2000
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
@ -124,7 +129,7 @@ const isNotifiedOnPost = $computed(() => !!relationship?.notifying)
|
||||||
<AccountMoreButton
|
<AccountMoreButton
|
||||||
:account="account" :command="command"
|
:account="account" :command="command"
|
||||||
@add-note="isEditingPersonalNote = true"
|
@add-note="isEditingPersonalNote = true"
|
||||||
@remove-note="isEditingPersonalNote = false"
|
@remove-note="() => { isEditingPersonalNote = false; personalNoteDraft = '' }"
|
||||||
/>
|
/>
|
||||||
<CommonTooltip v-if="!isSelf && relationship?.following" :content="getNotificationIconTitle()">
|
<CommonTooltip v-if="!isSelf && relationship?.following" :content="getNotificationIconTitle()">
|
||||||
<button
|
<button
|
||||||
|
@ -175,12 +180,31 @@ const isNotifiedOnPost = $computed(() => !!relationship?.notifying)
|
||||||
<p font-medium>
|
<p font-medium>
|
||||||
{{ $t('account.profile_personal_note') }}
|
{{ $t('account.profile_personal_note') }}
|
||||||
</p>
|
</p>
|
||||||
|
<p text-secondary text-sm :class="{ 'text-orange': personalNoteDraft.length > (personalNoteMaxLength - 100) }">
|
||||||
|
{{ personalNoteDraft.length }} / {{ personalNoteMaxLength }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div position-relative>
|
||||||
|
<div
|
||||||
|
input-base
|
||||||
|
min-h-10ex
|
||||||
|
whitespace-pre-wrap
|
||||||
|
opacity-0
|
||||||
|
:class="{ 'trailing-newline': personalNoteDraft.endsWith('\n') }"
|
||||||
|
>
|
||||||
|
{{ personalNoteDraft }}
|
||||||
</div>
|
</div>
|
||||||
<textarea
|
<textarea
|
||||||
|
v-model="personalNoteDraft"
|
||||||
input-base
|
input-base
|
||||||
:value="relationship?.note ?? ''"
|
position-absolute
|
||||||
|
style="height: 100%"
|
||||||
|
top-0
|
||||||
|
resize-none
|
||||||
|
:maxlength="personalNoteMaxLength"
|
||||||
@change="editNote"
|
@change="editNote"
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
</label>
|
</label>
|
||||||
<div v-if="account.note" max-h-100 overflow-y-auto>
|
<div v-if="account.note" max-h-100 overflow-y-auto>
|
||||||
<ContentRich text-4 text-base :content="account.note" :emojis="account.emojis" />
|
<ContentRich text-4 text-base :content="account.note" :emojis="account.emojis" />
|
||||||
|
@ -206,3 +230,9 @@ const isNotifiedOnPost = $computed(() => !!relationship?.notifying)
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.trailing-newline::after {
|
||||||
|
content: '\a';
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue