enhance(frontend): チャットページのデザイン改善

This commit is contained in:
NoriDev 2023-08-22 16:56:50 +09:00
parent 142799d70a
commit f8d6f49964
2 changed files with 62 additions and 46 deletions

View file

@ -39,6 +39,7 @@
- 기본 다크 테마를 'Rosé Pine Moon'으로 변경
- Enhance: '제어판 - 신고' 페이지의 버튼 가독성 향상
- Enhance: '모달에 흐림 효과 사용' 옵션이 비활성화된 경우, 이미지를 탭하여 표시할 때 표시되는 배경을 어둡게 조정
- Enhance: 대화 페이지 디자인 개선
- Fix: (Friendly) 흐림 효과를 사용할 때 하단 내비게이션 바의 가독성이 매우 떨어지는 문제
- Fix: (Friendly) 위젯 버튼에서 'UI 애니메이션 줄이기' 옵션이 적용되지 않는 문제
- Fix: (Friendly) 스크롤을 해도 위젯 버튼이 숨겨지지 않는 문제

View file

@ -5,57 +5,59 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<MkStickyContainer>
<template #header>
<MkPageHeader/>
</template>
<template #header><MkPageHeader/></template>
<div
ref="rootEl"
:class="$style.root"
@dragover.prevent.stop="onDragover"
@drop.prevent.stop="onDrop"
>
<div :class="$style.body">
<MkPagination v-if="pagination" ref="pagingComponent" :key="userAcct || groupId" :pagination="pagination">
<template #empty>
<div class="_fullinfo">
<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
<div>{{ i18n.ts.noMessagesYet }}</div>
</div>
</template>
<template #default="{ items: messages, fetching: pFetching }">
<MkDateSeparatedList
v-if="messages.length > 0"
v-slot="{ item: message }"
:class="{ [$style.messages]: true, 'deny-move-transition': pFetching }"
:items="messages"
direction="up"
reversed
>
<XMessage :key="message.id" :message="message" :isGroup="group != null"/>
</MkDateSeparatedList>
</template>
</MkPagination>
</div>
<MkSpacer :contentMax="800">
<div :class="$style.body">
<MkPagination v-if="pagination" ref="pagingComponent" :key="userAcct || groupId" :pagination="pagination">
<template #empty>
<div class="_fullinfo">
<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
<div>{{ i18n.ts.noMessagesYet }}</div>
</div>
</template>
<template #default="{ items: messages, fetching: pFetching }">
<MkDateSeparatedList
v-if="messages.length > 0"
v-slot="{ item: message }"
:class="{ [$style.messages]: true, 'deny-move-transition': pFetching }"
:items="messages"
direction="up"
reversed
>
<XMessage :key="message.id" :message="message" :isGroup="group != null"/>
</MkDateSeparatedList>
</template>
</MkPagination>
</div>
</MkSpacer>
</div>
<template #footer>
<div :class="$style.footer">
<div v-if="typers.length > 0" :class="$style.typers">
<I18n :src="i18n.ts.typingUsers" textTag="span">
<template #users>
<b v-for="typer in typers" :key="typer.id" :class="$style.user">{{ typer.username }}</b>
</template>
</I18n>
<MkEllipsis/>
</div>
<Transition :name="animation ? 'fade' : ''">
<div v-show="showIndicator" :class="$style.newMessage">
<button class="_buttonPrimary" :class="$style.newMessageButton" @click="onIndicatorClick">
<i class="ti ti-circle-arrow-down-filled" :class="$style.newMessageIcon"></i>{{ i18n.ts.newMessageExists }}
</button>
</div>
</Transition>
<XForm v-if="!fetching" ref="formEl" :user="user" :group="group" :class="$style.form"/>
</div>
<div :class="$style.footerSpacer">
<div :class="$style.footer">
<div v-if="typers.length > 0" :class="$style.typers">
<I18n :src="i18n.ts.typingUsers" textTag="span">
<template #users>
<b v-for="typer in typers" :key="typer.id" :class="$style.user">{{ typer.username }}</b>
</template>
</I18n>
<MkEllipsis/>
</div>
<Transition :name="animation ? 'fade' : ''">
<div v-show="showIndicator" :class="$style.newMessage">
<button class="_buttonPrimary" :class="$style.newMessageButton" @click="onIndicatorClick">
<i class="ti ti-circle-arrow-down-filled" :class="$style.newMessageIcon"></i>{{ i18n.ts.newMessageExists }}
</button>
</div>
</Transition>
<XForm v-if="!fetching" ref="formEl" :user="user" :group="group" :class="$style.form"/>
</div>
</div>
</template>
</MkStickyContainer>
</template>
@ -368,6 +370,10 @@ definePageMetadata(computed(() => !fetching ? user ? {
}
}
.footerSpacer {
padding: 20px;
}
.footer {
width: 100%;
position: sticky;
@ -415,14 +421,23 @@ definePageMetadata(computed(() => !fetching ? user ? {
.form {
max-height: 12em;
overflow-y: scroll;
border-top: solid 0.5px var(--divider);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
// border-top: solid 0.5px var(--divider);
// border-bottom-left-radius: 0;
// border-bottom-right-radius: 0;
border-radius: 15px;
}
@container (max-width: 500px) {
.footerSpacer {
padding: initial;
}
.footer {
margin-top: calc(50px + env(safe-area-inset-bottom));
}
.form {
border-radius: 0;
}
}
</style>