ux: change cwInput to textarea

This commit is contained in:
Lhc_fl 2024-09-18 12:45:36 +08:00 committed by fly_mc
parent b03e2ed65b
commit 943c922fc5

View file

@ -65,7 +65,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</div>
<MkInfo v-if="hasNotSpecifiedMentions" warn :class="$style.hasNotSpecifiedMentions">{{ i18n.ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ i18n.ts.add }}</button></MkInfo>
<input v-show="useCw" ref="cwInputEl" v-model="cw" :class="$style.cw" :placeholder="i18n.ts.annotation" @keydown="onKeydown" @keyup="onKeyup" @compositionend="onCompositionEnd">
<textarea v-show="useCw" ref="cwInputEl" v-model="cw" :class="$style.cw" :placeholder="i18n.ts.annotation" @keydown="onKeydown"/>
<div :class="[$style.textOuter, { [$style.withCw]: useCw }]">
<div v-if="channel" :class="$style.colorBar" :style="{ background: channel.color }"></div>
<textarea ref="textareaEl" v-model="text" :class="[$style.text]" :disabled="posting || posted" :readonly="textAreaReadOnly" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @keyup="onKeyup" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
@ -163,7 +163,7 @@ const emit = defineEmits<{
}>();
const textareaEl = shallowRef<HTMLTextAreaElement | null>(null);
const cwInputEl = shallowRef<HTMLInputElement | null>(null);
const cwInputEl = shallowRef<HTMLTextAreaElement | null>(null);
const hashtagsInputEl = shallowRef<HTMLInputElement | null>(null);
const visibilityButton = shallowRef<HTMLElement>();
@ -321,6 +321,10 @@ watch(text, () => {
checkMissingMention();
}, { immediate: true });
watch(cw, () => {
nextTick(() => cwInputEl.value && autosize.update(cwInputEl.value));
});
watch(visibility, () => {
checkMissingMention();
}, { immediate: true });
@ -1121,6 +1125,7 @@ onMounted(() => {
nextTick(() => watchForDraft());
nextTick(() => textareaEl.value && autosize(textareaEl.value));
nextTick(() => cwInputEl.value && autosize(cwInputEl.value));
});
});
@ -1355,6 +1360,8 @@ html[data-color-scheme=light] .preview {
z-index: 1;
padding-bottom: 8px;
border-bottom: solid 0.5px var(--MI_THEME-divider);
resize: vertical;
min-height: 2rem;
}
.hashtags {