mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2024-11-23 22:56:53 +09:00
Code

enhance(client): ナビゲーションバーのぼかし処理を追加

Browse Source
This commit is contained in:
NoriDev 2023-06-28 16:31:33 +09:00
parent 4d94cb74a9
commit e16e4b901b
2 changed files with 27 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGELOG_CHERRYPICK.md
View File

@ -47,6 +47,7 @@
- 브라우저의 최대 높이를 초과하지 않도록
- MkDialog 버튼이 3개 이상이면 정렬을 변경하도록
- 리노트 유저 팝업의 디자인 일부 개선
- 네비게이션 바의 블러 처리 추가
- Fix: 그룹 초대 알림 아이콘이 잘못 표시되는 문제
- Fix: 노트 디자인이 올바르지 않게 표시되는 문제
- Fix: 프로필 아이콘이 투명일 때 노트 답글선이 비치는 문제
@ -64,7 +65,7 @@
### General
- 타임라인에 노트의 답글을 표시하는 옵션의 기본값을 켜짐으로 설정
- 네비게이션 바의 배치를 수정
- 네비게이션 메뉴의 배치를 수정
- 프로필 아이콘의 기본값을 사각형으로 설정
- 미디어 타임라인 추가 ([kiyo4act/misskey.design＠c01be0d](https://github.com/kiyo4act/misskey.design/commit/c01be0dc7674cdf0bcac6081c63baab52c4c9abe))
- ruby 표기 지원 ([yuriha-chan/misskey@0a109d4](https://github.com/yuriha-chan/misskey/commit/0a109d4f7442f8eedc48693b09ad2fd0b61e67a5), [yuriha-chan/misskey@446f0c2](https://github.com/yuriha-chan/misskey/commit/446f0c2ea5cc9a9f7f48a75935bce550bd0b3095), [yuriha-chan/misskey@4cfd28a](https://github.com/yuriha-chan/misskey/commit/4cfd28a452be0cdcc1328d77ab0db6dca627ca23), [yuriha-chan/misskey@dc6a6dc](https://github.com/yuriha-chan/misskey/commit/dc6a6dcdc3c2ac5b836570defb14ef4d441725e8))

33
packages/frontend/src/ui/friendly.vue
View File

@ -16,13 +16,13 @@
<XWidgets/>
</div>
<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 && enableNavButton.includes(<string>mainRouter.currentRoute.value.name)" :class="[$style.floatNavButton, { [$style.reduceBlurEffect]: !defaultStore.state.useBlurEffect, [$style.reduceAnimation]: !defaultStore.state.animation, [$style.showEl]: showEl }]" class="_button" @click="drawerMenuShowing = true"><CPAvatar :class="$style.floatNavButtonAvatar" :user="$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="openMessage"><span :class="[$style.floatPostButtonBg, { [$style.reduceBlurEffect]: !defaultStore.state.useBlurEffect }]"></span><i v-if="mainRouter.currentRoute.value.name === 'messaging' && !(['messaging-room', 'messaging-room-group'].includes(<string>mainRouter.currentRoute.value.name))" class="ti ti-plus"></i><i v-else-if="enablePostButton.includes(<string>mainRouter.currentRoute.value.name)" class="ti ti-pencil"></i></button>
<button v-if="isMobile && enablePostButton.includes(<string>mainRouter.currentRoute.value.name)" :class="[$style.floatPostButton, { [$style.reduceBlurEffect]: !defaultStore.state.useBlurEffect, [$style.reduceAnimation]: !defaultStore.state.animation, [$style.showEl]: showEl }]" class="_button" @click="openMessage"><span :class="[$style.floatPostButtonBg, { [$style.reduceBlurEffect]: !defaultStore.state.useBlurEffect }]"></span><i v-if="mainRouter.currentRoute.value.name === 'messaging' && !(['messaging-room', 'messaging-room-group'].includes(<string>mainRouter.currentRoute.value.name))" class="ti ti-plus"></i><i v-else-if="enablePostButton.includes(<string>mainRouter.currentRoute.value.name)" class="ti ti-pencil"></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>
<div v-if="isMobile" ref="navFooter" :class="$style.nav">
<div v-if="isMobile" ref="navFooter" :class="[$style.nav, { [$style.reduceBlurEffect]: !defaultStore.state.useBlurEffect }]">
<!-- <button :class="$style.navButton" class="_button" @click="drawerMenuShowing = true"><i :class="$style.navButtonIcon" class="ti ti-menu-2"></i><span v-if="menuIndicated" :class="$style.navButtonIndicator"><i class="_indicatorCircle"></i></span></button> -->
<button :class="[$style.navButton, { [$style.active]: mainRouter.currentRoute.value.name === 'index' }]" class="_button" @click="mainRouter.currentRoute.value.name === 'index' ? top() : mainRouter.replace('/')" @touchstart="openAccountMenu" @touchend="closeAccountMenu"><i :class="$style.navButtonIcon" class="ti ti-home"></i><span v-if="queue > 0" :class="$style.navButtonIndicatorHome"><i class="_indicatorCircle"></i></span></button>
<button :class="[$style.navButton, { [$style.active]: mainRouter.currentRoute.value.name === 'explore' }]" class="_button" @click="mainRouter.currentRoute.value.name === 'explore' ? top() : mainRouter.replace('/explore')"><i :class="$style.navButtonIcon" class="ti ti-hash"></i></button>
@ -427,6 +427,11 @@ $float-button-size: 65px;
backdrop-filter: var(--blur, blur(15px));
transition: opacity 0.5s, transform 0.5s;
&.reduceBlurEffect {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
&.reduceAnimation {
transition: opacity 0s, transform 0s;
}
@ -459,6 +464,11 @@ $float-button-size: 65px;
backdrop-filter: var(--blur, blur(15px));
transition: opacity 0.5s, transform 0.5s;
&.reduceBlurEffect {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
&.reduceAnimation {
transition: opacity 0s, transform 0s;
}
@ -541,11 +551,16 @@ $float-button-size: 65px;
display: flex;
width: 100%;
box-sizing: border-box;
-webkit-backdrop-filter: var(--blur, blur(32px));
backdrop-filter: var(--blur, blur(32px));
background-color: var(--panel);
-webkit-backdrop-filter: var(--blur, blur(64px));
backdrop-filter: var(--blur, blur(64px));
border-top: solid 0.5px var(--divider);
padding: 0 10px;
&.reduceBlurEffect {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background-color: var(--panel);
}
}
.navButton {
@ -555,13 +570,15 @@ $float-button-size: 65px;
margin: auto;
height: 50px;
// border-radius: 8px;
background: var(--panel);
// background: var(--panel);
color: var(--fg);
padding: 15px 0 calc(env(safe-area-inset-bottom) + 30px);
/*
&:not(:last-child) {
// margin-right: 12px;
margin-right: 12px;
}
*/
@media (max-width: 300px) {
height: 60px;