usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

tweak design

This commit is contained in:
kakkokari-gtyih 2024-05-21 19:47:21 +09:00
parent 4e84285324
commit 1aa41cb770
1 changed files with 18 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
packages/frontend/src/components/MkPostForm.vue
View File

@ -66,8 +66,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> <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"> <input 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 :class="[$style.textOuter, { [$style.withCw]: useCw }]" :style="postChannel && postChannel.color ? `--channel-color: ${postChannel.color}` : undefined">
<div v-if="postChannel" :class="$style.colorBar" :style="{ background: postChannel.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" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/> <textarea ref="textareaEl" v-model="text" :class="[$style.text]" :disabled="posting || posted" :readonly="textAreaReadOnly" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
<div v-if="maxTextLength - textLength < 100" :class="['_acrylic', $style.textCount, { [$style.textOver]: textLength > maxTextLength }]">{{ maxTextLength - textLength }}</div> <div v-if="maxTextLength - textLength < 100" :class="['_acrylic', $style.textCount, { [$style.textOver]: textLength > maxTextLength }]">{{ maxTextLength - textLength }}</div>
</div> </div>
@ -1098,16 +1097,6 @@ defineExpose({
} }
} }
.colorBar {
position: absolute;
top: 0px;
left: 12px;
width: 5px;
height: 100% ;
border-radius: 999px;
pointer-events: none;
}
.submitInner { .submitInner {
padding: 0 12px; padding: 0 12px;
line-height: 34px; line-height: 34px;
@ -1236,6 +1225,18 @@ defineExpose({
width: 100%; width: 100%;
position: relative; position: relative;
&::before {
content: '';
position: absolute;
top: 0;
left: 10px; // 10px + 4px + 10px = 24px
width: 4px;
height: 100%;
background: var(--channel-color, transparent);
border-radius: 2px;
pointer-events: none;
}
&.withCw { &.withCw {
padding-top: 8px; padding-top: 8px;
} }
@ -1341,6 +1342,11 @@ defineExpose({
padding: 0 16px; padding: 0 16px;
} }
.textOuter::before {
left: 0;
border-radius: 0 4px 4px 0;
}
.text { .text {
min-height: 80px; min-height: 80px;
} }