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

feat(friendly): Changed to hide floating button when scrolling down in mobile environment

Browse source
This commit is contained in:
NoriDev 2022-09-08 00:32:43 +09:00
parent c3c057bde2
commit 0c16d92a07
2 changed files with 44 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG_CHERRYPICK.md
View file

@ -12,6 +12,7 @@
### Improvements
- 클라이언트: (friendly) 모바일 환경에서 서버와 연결이 끊어졌을 때 표시되는 경고창의 UI 개선
- 클라이언트: (friendly) 모바일 환경에서 스크롤을 내리면 플로팅 버튼이 감춰지도록 변경
- 클라이언트: Google Translate 서비스 추가 (thanks to @ltlapy)
- 클라이언트: DeepL과 Google Translate를 선택할 수 있는 옵션 추가
- 클라이언트: Enter 키를 눌러 보내기 옵션 추가

47
packages/client/src/ui/friendly.vue
View file

@ -16,11 +16,11 @@
<XWidgets @mounted="attachSticky"/>
</div>
<button v-if="isMobile && !(mainRouter.currentRoute.value.name === 'messaging-room' || mainRouter.currentRoute.value.name === 'messaging-room-group')" class="navButton nav _button" @click="drawerMenuShowing = true"><CPAvatar class="avatar" :user="$i" :disable-preview="true" :show-indicator="false"/></button>
<button v-if="isMobile && !(mainRouter.currentRoute.value.name === 'messaging-room' || mainRouter.currentRoute.value.name === 'messaging-room-group')" class="navButton nav _button" :class="{ 'showEl': showEl }" @click="drawerMenuShowing = true"><CPAvatar class="avatar" :user="$i" :disable-preview="true" :show-indicator="false"/></button>
<button v-if="isMobile && !(mainRouter.currentRoute.value.name === 'messaging-room' || mainRouter.currentRoute.value.name === 'messaging-room-group')" class="postButton post _button" @click="os.post()"><span class="bg"></span><i class="fas fa-pencil-alt"></i></button>
<button v-if="isMobile && !(mainRouter.currentRoute.value.name === 'messaging-room' || mainRouter.currentRoute.value.name === 'messaging-room-group')" class="postButton post _button" :class="{ 'showEl': showEl }" @click="os.post()"><span class="bg"></span><i class="fas fa-pencil-alt"></i></button>
<button v-if="!isDesktop && !isMobile" class="widgetButton _button" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button>
<button v-if="!isDesktop && !isMobile" class="widgetButton _button" :class="{ 'showEl': showEl }" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button>
<div v-if="isMobile" class="buttons">
<!-- <button class="button nav _button" @click="drawerMenuShowing = true"><i class="fas fa-bars"></i><span v-if="menuIndicated" class="indicator"><i class="fas fa-circle"></i></span></button> -->
@ -63,7 +63,7 @@
</template>
<script lang="ts" setup>
import { defineAsyncComponent, provide, onMounted, computed, ref, watch, ComputedRef } from 'vue';
import { defineAsyncComponent, provide, onMounted, onBeforeUnmount, computed, ref, watch, ComputedRef } from 'vue';
import XCommon from './_common_/common.vue';
import { instanceName } from '@/config';
import { StickySidebar } from '@/scripts/sticky-sidebar';
@ -94,6 +94,9 @@ window.addEventListener('resize', () => {
isMobile.value = deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD;
});
let showEl = $ref(false);
let lastScrollPosition = $ref(0);
let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
const widgetsEl = $ref<HTMLElement>();
const widgetsShowing = $ref(false);
@ -142,8 +145,29 @@ onMounted(() => {
if (window.innerWidth >= DESKTOP_THRESHOLD) isDesktop.value = true;
}, { passive: true });
}
window.addEventListener('scroll', onScroll);
});
onBeforeUnmount(() => {
window.removeEventListener('scroll', onScroll);
});
function onScroll () {
const currentScrollPosition = window.scrollY || document.documentElement.scrollTop;
if (currentScrollPosition < 0) {
return;
}
// Stop executing this function if the difference between
// current scroll position and last scroll position is less than some offset
if (Math.abs(currentScrollPosition - lastScrollPosition) < 60) {
return;
}
showEl = currentScrollPosition < lastScrollPosition;
lastScrollPosition = currentScrollPosition;
showEl = !showEl;
}
const onContextmenu = (ev) => {
const isLink = (el: HTMLElement) => {
if (el.tagName === 'A') return true;
@ -281,6 +305,11 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
border-radius: 28px;
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
transition: opacity 0.5s, transform 0.5s;
&.showEl {
transform: translateX(-250px);
}
> .avatar {
width: 100%;
@ -304,6 +333,11 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
border-radius: 28px;
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
transition: opacity 0.5s, transform 0.5s;
&.showEl {
transform: translateX(250px);
}
> .bg {
position: absolute;
@ -334,6 +368,11 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
font-size: 22px;
background: var(--panel);
transition: opacity 0.5s, transform 0.5s;
&.showEl {
transform: translateX(250px);
}
}
> .widgetsDrawer-back {