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

enhance(client/friendly): 一部のページを除いてフローティングボタンを表示しない

Browse source
This commit is contained in:
NoriDev 2023-06-13 19:02:13 +09:00
parent acccc705b9
commit 5b937c1d02
2 changed files with 17 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG_CHERRYPICK.md
View file

@ -40,6 +40,7 @@
- 스크롤이 최상단일 때 헤더를 누르면 새로고침 메뉴를 표시하도록 - 스크롤이 최상단일 때 헤더를 누르면 새로고침 메뉴를 표시하도록
### Client ### Client
- (Friendly) 일부 페이지를 제외하고 플로팅 버튼을 표시하지 않음
- 모바일에서 UI 흐림 효과를 껐을 때 가독성 향상 - 모바일에서 UI 흐림 효과를 껐을 때 가독성 향상
- 토스트 알림의 배경이 불투명하게 표시되도록 - 토스트 알림의 배경이 불투명하게 표시되도록
- 헤더의 배경이 불투명하게 표시되도록 - 헤더의 배경이 불투명하게 표시되도록

18
packages/frontend/src/ui/friendly.vue
View file

@ -16,9 +16,9 @@
<XWidgets/> <XWidgets/>
</div> </div>
<button v-if="isMobile && !(mainRouter.currentRoute.value.name === 'messaging-room' || mainRouter.currentRoute.value.name === 'messaging-room-group')" :class="[$style.floatNavButton, { [$style.reduceAnimation]: !defaultStore.state.animation, [$style.showEl]: showEl }]" class="_button" @click="drawerMenuShowing = true"><CPAvatar :class="$style.floatNavButtonAvatar" :user="$i"/></button> <button v-if="isMobile && enableNavButton.includes(<string>mainRouter.currentRoute.value.name)" :class="[$style.floatNavButton, { [$style.reduceAnimation]: !defaultStore.state.animation, [$style.showEl]: showEl }]" class="_button" @click="drawerMenuShowing = true"><CPAvatar :class="$style.floatNavButtonAvatar" :user="$i"/></button>
<button v-if="isMobile && !(mainRouter.currentRoute.value.name === 'messaging' || mainRouter.currentRoute.value.name === 'messaging-room' || mainRouter.currentRoute.value.name === 'messaging-room-group')" :class="[$style.floatPostButton, { [$style.reduceAnimation]: !defaultStore.state.animation, [$style.showEl]: showEl }]" class="_button" @click="os.post()"><span :class="[$style.floatPostButtonBg, { [$style.reduceBlurEffect]: !defaultStore.state.useBlurEffect }]"></span><i class="ti ti-pencil"></i></button> <button v-if="isMobile && enablePostButton.includes(<string>mainRouter.currentRoute.value.name)" :class="[$style.floatPostButton, { [$style.reduceAnimation]: !defaultStore.state.animation, [$style.showEl]: showEl }]" class="_button" @click="os.post()"><span :class="[$style.floatPostButtonBg, { [$style.reduceBlurEffect]: !defaultStore.state.useBlurEffect }]"></span><i class="ti ti-pencil"></i></button>
<button v-if="isMobile && mainRouter.currentRoute.value.name === 'messaging' && !(mainRouter.currentRoute.value.name === 'messaging-room' || mainRouter.currentRoute.value.name === 'messaging-room-group')" :class="[$style.floatPostButton, { [$style.reduceAnimation]: !defaultStore.state.animation, [$style.showEl]: showEl }]" class="_button" @click="openMessage"><span :class="[$style.floatPostButtonBg, { [$style.reduceBlurEffect]: !defaultStore.state.useBlurEffect }]"></span><i class="ti ti-plus"></i></button> <button v-if="isMobile && mainRouter.currentRoute.value.name === 'messaging' && !(mainRouter.currentRoute.value.name === 'messaging-room' || mainRouter.currentRoute.value.name === 'messaging-room-group')" :class="[$style.floatPostButton, { [$style.reduceAnimation]: !defaultStore.state.animation, [$style.showEl]: showEl }]" class="_button" @click="openMessage"><span :class="[$style.floatPostButtonBg, { [$style.reduceBlurEffect]: !defaultStore.state.useBlurEffect }]"></span><i class="ti ti-plus"></i></button>
<button v-if="!isDesktop && !isMobile" :class="[$style.widgetButton, { [$style.showEl]: showEl }]" class="_button" @click="widgetsShowing = true"><i class="ti ti-apps"></i></button> <button v-if="!isDesktop && !isMobile" :class="[$style.widgetButton, { [$style.showEl]: showEl }]" class="_button" @click="widgetsShowing = true"><i class="ti ti-apps"></i></button>
@ -126,6 +126,20 @@ window.addEventListener('resize', () => {
isMobile.value = deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD; isMobile.value = deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD;
}); });
const enableNavButton = [
'index',
'explore',
'my-notifications',
'messaging',
];
const enablePostButton = [
'index',
'explore',
'my-notifications',
'user',
];
let showEl = $ref(false); let showEl = $ref(false);
let lastScrollPosition = $ref(0); let lastScrollPosition = $ref(0);