worldcone/cherrypick
2
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

fix: 新しいノート通知がプロフィールアイコンを押し出す問題

Browse source
This commit is contained in:
NoriDev 2023-05-30 01:59:09 +09:00
parent daff447465
commit 36753b4d5d
2 changed files with 32 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG_CHERRYPICK.md
View file

@ -45,6 +45,7 @@
- Fix: 일부 옵션 변경 시 페이지를 새로 고치도록
- Fix: 위젯 추가 영역의 위치가 오른쪽으로 치우쳐 있음
- Fix: 노트 작성 폼의 프로필 아이콘 여백 조정
- Fix: 새 노트 알림이 프로필 아이콘을 밀어내는 문제
---

49
packages/frontend/src/pages/timeline.vue
View file

@ -2,27 +2,28 @@
<MkStickyContainer>
<template #header>
<MkPageHeader v-model:tab="src" style="position: relative; z-index: 1001" :actions="headerActions" :tabs="$i ? headerTabs : headerTabsWhenNotLogin" :displayMyAvatar="true"/>
<transition
:enter-active-class="defaultStore.state.animation ? $style.transition_new_enterActive : ''"
:leave-active-class="defaultStore.state.animation ? $style.transition_new_leaveActive : ''"
:enter-from-class="defaultStore.state.animation ? $style.transition_new_enterFrom : ''"
:leave-to-class="defaultStore.state.animation ? $style.transition_new_leaveTo : ''"
>
<div v-if="queue > 0 && defaultStore.state.newNoteRecivedNotificationBehavior === 'default'" :class="[$style.new, {[$style.reduceAnimation]: !defaultStore.state.animation }]"><button class="_buttonPrimary" :class="$style.newButton" @click="top()"><i class="ti ti-arrow-up"></i>{{ i18n.ts.newNoteRecived }}</button></div>
</transition>
<transition
:enter-active-class="defaultStore.state.animation ? $style.transition_new_enterActive : ''"
:leave-active-class="defaultStore.state.animation ? $style.transition_new_leaveActive : ''"
:enter-from-class="defaultStore.state.animation ? $style.transition_new_enterFrom : ''"
:leave-to-class="defaultStore.state.animation ? $style.transition_new_leaveTo : ''"
>
<div v-if="queue > 0 && defaultStore.state.newNoteRecivedNotificationBehavior === 'count'" :class="[$style.new, {[$style.reduceAnimation]: !defaultStore.state.animation }]"><button class="_buttonPrimary" :class="$style.newButton" @click="top()"><i class="ti ti-arrow-up"></i><I18n :src="i18n.ts.newNoteRecivedCount" text-tag="span"><template #n>{{ queue }}</template></I18n></button></div>
</transition>
</template>
<MkSpacer :contentMax="800">
<div ref="rootEl" v-hotkey.global="keymap">
<XTutorial v-if="$i && defaultStore.reactiveState.timelineTutorial.value != -1" class="_panel" style="margin-bottom: var(--margin);"/>
<MkPostForm v-if="defaultStore.reactiveState.showFixedPostForm.value" :class="$style.postForm" class="post-form _panel" fixed style="margin-bottom: var(--margin);"/>
<transition
:enterActiveClass="defaultStore.state.animation ? $style.transition_new_enterActive : ''"
:leaveActiveClass="defaultStore.state.animation ? $style.transition_new_leaveActive : ''"
:enterFromClass="defaultStore.state.animation ? $style.transition_new_enterFrom : ''"
:leaveToClass="defaultStore.state.animation ? $style.transition_new_leaveTo : ''"
>
<div v-if="queue > 0 && defaultStore.state.newNoteRecivedNotificationBehavior === 'default'" :class="[$style.new, { [$style.showEl]: showEl && isMobile, [$style.reduceAnimation]: !defaultStore.state.animation }]"><button class="_buttonPrimary" :class="$style.newButton" @click="top()"><i class="ti ti-arrow-up"></i>{{ i18n.ts.newNoteRecived }}</button></div>
</transition>
<transition
:enterActiveClass="defaultStore.state.animation ? $style.transition_new_enterActive : ''"
:leaveActiveClass="defaultStore.state.animation ? $style.transition_new_leaveActive : ''"
:enterFromClass="defaultStore.state.animation ? $style.transition_new_enterFrom : ''"
:leaveToClass="defaultStore.state.animation ? $style.transition_new_leaveTo : ''"
>
<div v-if="queue > 0 && defaultStore.state.newNoteRecivedNotificationBehavior === 'count'" :class="[$style.new, { [$style.showEl]: showEl && isMobile, [$style.reduceAnimation]: !defaultStore.state.animation }]"><button class="_buttonPrimary" :class="$style.newButton" @click="top()"><i class="ti ti-arrow-up"></i><I18n :src="i18n.ts.newNoteRecivedCount" textTag="span"><template #n>{{ queue }}</template></I18n></button></div>
</transition>
<div :class="$style.tl">
<MkTimeline
ref="tlComponent"
@ -38,7 +39,7 @@
</template>
<script lang="ts" setup>
import { defineAsyncComponent, computed, watch, ref, onMounted, provide } from 'vue';
import { defineAsyncComponent, computed, watch, ref, provide, onMounted } from 'vue';
import type { Tab } from '@/components/global/MkPageHeader.tabs.vue';
import MkTimeline from '@/components/MkTimeline.vue';
import MkPostForm from '@/components/MkPostForm.vue';
@ -53,6 +54,7 @@ import { eventBus } from '@/scripts/cherrypick/eventBus';
import { miLocalStorage } from '@/local-storage';
import { deviceKind } from '@/scripts/device-kind';
let showEl = $ref(false);
const isFriendly = ref(miLocalStorage.getItem('ui') === 'friendly');
if (!isFriendly.value) provide('shouldOmitHeaderTitle', true);
@ -81,6 +83,12 @@ const src = $computed({ get: () => ($i ? defaultStore.reactiveState.tl.value.src
watch ($$(src), () => queue = 0);
onMounted(() => {
eventBus.on('showEl', (showEl_receive) => {
showEl = showEl_receive;
});
});
function queueUpdated(q: number): void {
queue = q;
eventBus.emit('queueUpdated', q);
@ -217,15 +225,20 @@ definePageMetadata(computed(() => ({
.new {
position: sticky;
top: 64px;
top: calc(var(--stickyTop, 0px) + 16px);
z-index: 1000;
width: 100%;
margin: calc(-0.675em - 8px) 0;
transition: opacity 0.5s, transform 0.5s;
&:first-child {
margin-top: calc(-0.675em - 8px - var(--margin));
}
&.showEl {
transform: translateY(calc(var(--stickyTop, 0px) - 189px))
}
&.reduceAnimation {
transition: opacity 0s, transform 0s;
}