OpenSource/misskey
OpenSource/misskey
1
0
Fork 0
mirror of https://github.com/misskey-dev/misskey.git synced 2024-12-27 08:10:24 +01:00
Code Issues Projects Releases Packages Wiki Activity

enhance: CW注釈の文字数表示

Browse source
This commit is contained in:
claustra01 2024-11-28 17:13:30 +09:00
parent 8076f78d06
commit 0ef6f3fdde
1 changed files with 35 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
packages/frontend/src/components/MkPostForm.vue
View file

@ -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"/>
@ -241,6 +244,14 @@ const maxTextLength = computed((): number => {
return instance ? instance.maxNoteTextLength : 1000;
});
const cwTextLength = computed((): number => {
return cw.value?.length ?? 0;
});
const maxCwTextLength = computed((): number => {
return 100;
});
const canPost = computed((): boolean => {
return !props.mock && !posting.value && !posted.value &&
(
@ -251,6 +262,7 @@ const canPost = computed((): boolean => {
quoteId.value != null
) &&
(textLength.value <= maxTextLength.value) &&
(cwTextLength.value <= maxCwTextLength.value) &&
(!poll.value || poll.value.choices.length >= 2);
});
@ -1265,12 +1277,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;