fix(frontend): チャットページのスクロールが意図しない方向に動作することがある
This commit is contained in:
NoriDev
parent
efafd36458
commit
2271affa06
|
|
@ -97,7 +97,8 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2023xx](CHANGE
|
|||
- Fix: 누락된 안테나 소스 추가
|
||||
- Fix: OffscreenCanvas undefined (MisskeyIO/misskey#165)
|
||||
- Fix: 대화 삭제가 올바르게 작동하지 않음
|
||||
- Fix: 유저 메뉴에서 '대화 시작하기'를 클릭하면 잘못된 페이지가 호출됨
|
||||
- Fix: 유저 메뉴에서 '대화 시작하기'를 클릭하면 잘못된 페이지가 호출됨화
|
||||
- Fix: 대화 페이지의 스크롤이 의도하지 않은 방향으로 작동할 수 있음
|
||||
|
||||
### Server
|
||||
- Nodeinfo의 Software 이름을 CherryPick이 아닌 다른 이름으로 변경할 때 관련 주석 추가
|
||||
|
|
|
|||
|
|
@ -36,34 +36,34 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</MkPagination>
|
||||
</div>
|
||||
</MkSpacer>
|
||||
</div>
|
||||
<template #footer>
|
||||
<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>
|
||||
<footer>
|
||||
<div :class="$style.footerSpacer">
|
||||
<div :class="[$style.footer, { [$style.friendly]: isFriendly }]">
|
||||
<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>
|
||||
<XForm v-if="!fetching" ref="formEl" :user="user" :group="group" :class="$style.form"/>
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
</footer>
|
||||
</div>
|
||||
</MkStickyContainer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, onMounted, nextTick, onBeforeUnmount, watch, shallowRef } from 'vue';
|
||||
import { computed, onMounted, nextTick, onBeforeUnmount, watch, shallowRef, ref } from 'vue';
|
||||
import * as Misskey from 'cherrypick-js';
|
||||
import XMessage from './messaging-room.message.vue';
|
||||
import XForm from './messaging-room.form.vue';
|
||||
|
|
@ -78,6 +78,9 @@ import { $i } from '@/account.js';
|
|||
import { defaultStore } from '@/store.js';
|
||||
import { definePageMetadata } from '@/scripts/page-metadata.js';
|
||||
import { vibrate } from '@/scripts/vibrate.js';
|
||||
import { miLocalStorage } from '@/local-storage.js';
|
||||
|
||||
const isFriendly = ref(miLocalStorage.getItem('ui') === 'friendly');
|
||||
|
||||
const props = defineProps<{
|
||||
userAcct?: string;
|
||||
|
|
@ -94,9 +97,7 @@ let group: Misskey.entities.UserGroup | null = $ref(null);
|
|||
let typers: Misskey.entities.User[] = $ref([]);
|
||||
let connection: Misskey.ChannelConnection<Misskey.Channels['messaging']> | null = $ref(null);
|
||||
let showIndicator = $ref(false);
|
||||
const {
|
||||
animation,
|
||||
} = defaultStore.reactiveState;
|
||||
const animation = defaultStore.reactiveState;
|
||||
|
||||
let pagination: Paging | null = $ref(null);
|
||||
|
||||
|
|
@ -217,7 +218,7 @@ function onMessage(message) {
|
|||
sound.play('chat');
|
||||
vibrate([30, 30, 30]);
|
||||
|
||||
const _isBottom = isBottomVisible(rootEl, 64);
|
||||
const _isBottom = isBottomVisible($$(rootEl).value, 64);
|
||||
|
||||
pagingComponent.value.prepend(message);
|
||||
if (message.userId !== $i?.id && !document.hidden) {
|
||||
|
|
@ -282,7 +283,7 @@ let scrollRemove: (() => void) | null = $ref(null);
|
|||
function notifyNewMessage() {
|
||||
showIndicator = true;
|
||||
|
||||
scrollRemove = onScrollBottom(rootEl, () => {
|
||||
scrollRemove = onScrollBottom($$(rootEl).value, () => {
|
||||
showIndicator = false;
|
||||
scrollRemove = null;
|
||||
});
|
||||
|
|
@ -330,10 +331,6 @@ definePageMetadata(computed(() => !fetching ? user ? {
|
|||
opacity: 0;
|
||||
}
|
||||
|
||||
.root {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.body {
|
||||
min-height: 80dvh;
|
||||
}
|
||||
|
|
@ -435,7 +432,9 @@ definePageMetadata(computed(() => !fetching ? user ? {
|
|||
}
|
||||
|
||||
.footer {
|
||||
margin-top: calc(50px + env(safe-area-inset-bottom));
|
||||
&.friendly {
|
||||
margin-bottom: calc(50px + env(safe-area-inset-bottom));
|
||||
}
|
||||
}
|
||||
|
||||
.form {
|
||||
|
|
|
|||
Loading…
Reference in a new issue