diff options
Diffstat (limited to 'packages/frontend/src/components/MkPostForm.vue')
| -rw-r--r-- | packages/frontend/src/components/MkPostForm.vue | 34 |
1 files changed, 33 insertions, 1 deletions
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue index 49ed4197de..ad0a332f99 100644 --- a/packages/frontend/src/components/MkPostForm.vue +++ b/packages/frontend/src/components/MkPostForm.vue @@ -65,7 +65,10 @@ 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"> + <div v-show="useCw" :class="$style.cwOuter"> + <input ref="cwInputEl" v-model="cw" :class="$style.cw" :placeholder="i18n.ts.annotation" @keydown="onKeydown" @keyup="onKeyup" @compositionend="onCompositionEnd"> + <div v-if="maxCwTextLength - cwTextLength < 20" :class="['_acrylic', $style.cwTextCount, { [$style.cwTextOver]: cwTextLength > maxCwTextLength }]">{{ maxCwTextLength - cwTextLength }}</div> + </div> <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"/> @@ -244,6 +247,12 @@ const maxTextLength = computed((): number => { return instance ? instance.maxNoteTextLength : 1000; }); +const cwTextLength = computed((): number => { + return cw.value?.length ?? 0; +}); + +const maxCwTextLength = 100; + const canPost = computed((): boolean => { return !props.mock && !posting.value && !posted.value && ( @@ -254,6 +263,7 @@ const canPost = computed((): boolean => { quoteId.value != null ) && (textLength.value <= maxTextLength.value) && + (cwTextLength.value <= maxCwTextLength) && (files.value.length <= 16) && (!poll.value || poll.value.choices.length >= 2); }); @@ -1273,12 +1283,34 @@ html[data-color-scheme=light] .preview { } } +.cwOuter { + width: 100%; + position: relative; +} + .cw { z-index: 1; padding-bottom: 8px; border-bottom: solid 0.5px var(--MI_THEME-divider); } +.cwTextCount { + position: absolute; + top: 0; + right: 2px; + padding: 2px 6px; + font-size: .9em; + color: var(--MI_THEME-warn); + border-radius: 6px; + max-width: 100%; + min-width: 1.6em; + text-align: center; + + &.cwTextOver { + color: #ff2a2a; + } +} + .hashtags { z-index: 1; padding-top: 8px; |