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

refactor(frontend/friendly): ぼかしコードをフローティングボタンにもマージ

Browse source
This commit is contained in:
NoriDev 2023-08-04 16:33:59 +09:00
parent 13534588d4
commit 11f3e3b7a1
1 changed files with 43 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -23,7 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<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.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="isMobile && enablePostButton.includes(<string>mainRouter.currentRoute.value.name)" :class="[$style.floatPostButton, { [$style.reduceBlurEffect]: !defaultStore.state.useBlurEffect, [$style.reduceAnimation]: !defaultStore.state.animation, [$style.showEl]: showEl }]" :style="{ background: PostBg }" 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>
@ -151,6 +151,7 @@ let lastScrollPosition = $ref(0);
let queue = $ref(0);
let longTouchNavHome = $ref(false);
const bg = ref<string | undefined>(undefined);
const PostBg = ref<string | undefined>(undefined);
let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
const widgetsShowing = $ref(false);
@ -204,10 +205,19 @@ defaultStore.loaded.then(() => {
const calcBg = () => {
const rawBg = 'var(--panel)';
const rawPostBg = 'var(--accent)';
const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
if (defaultStore.state.useBlurEffect) tinyBg.setAlpha(0.7);
else tinyBg.setAlpha(1);
const tinyPostBg = tinycolor(rawPostBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawPostBg.slice(4, -1)) : rawPostBg);
if (defaultStore.state.useBlurEffect) {
tinyBg.setAlpha(0.7);
tinyPostBg.setAlpha(0.7);
}
else {
tinyBg.setAlpha(1);
tinyPostBg.setAlpha(1);
}
bg.value = tinyBg.toRgbString();
PostBg.value = tinyPostBg.toRgbString();
};
onMounted(() => {
@ -433,17 +443,14 @@ $float-button-size: 65px;
padding: initial;
}
.floatNavButton {
.floatButton {
display: block;
position: fixed;
z-index: 1000;
bottom: calc(65px + env(safe-area-inset-bottom));
left: 15px;
width: $float-button-size;
height: $float-button-size;
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);
// background: var(--panel);
// opacity: 0.7;
border-radius: 28px;
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
@ -463,6 +470,15 @@ $float-button-size: 65px;
}
}
.floatNavButton {
composes: floatButton;
left: 15px;
&.showEl {
transform: translateX(-250px);
}
}
.floatNavButtonAvatar {
width: 100%;
height: 100%;
@ -470,30 +486,9 @@ $float-button-size: 65px;
}
.floatPostButton {
display: block;
position: fixed;
z-index: 1000;
bottom: calc(65px + env(safe-area-inset-bottom));
composes: floatButton;
right: 15px;
width: $float-button-size;
height: $float-button-size;
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: 18px;
// background: var(--accent);
// opacity: 0.7;
border-radius: 28px;
-webkit-backdrop-filter: var(--blur, blur(15px));
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;
}
&.showEl {
transform: translateX(250px);
@ -511,13 +506,7 @@ $float-button-size: 65px;
height: 100%;
right: 0;
bottom: 0;
background: var(--accent);
opacity: .7;
border-radius: 28px;
&.reduceBlurEffect {
opacity: 1;
}
}
.widgetButton {
@ -568,8 +557,6 @@ $float-button-size: 65px;
position: fixed;
z-index: 1000;
bottom: 0;
// left: 0;
// padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 16px) 16px;
display: flex;
width: 100%;
box-sizing: border-box;
@ -587,20 +574,11 @@ $float-button-size: 65px;
.navButton {
position: relative;
flex: 1;
// padding: 0;
margin: auto;
height: 50px;
// border-radius: 8px;
// background: var(--panel);
color: var(--fg);
padding: 15px 0 calc(env(safe-area-inset-bottom) + 30px);
/*
&:not(:last-child) {
margin-right: 12px;
}
*/
@media (max-width: 300px) {
height: 60px;
@ -609,10 +587,6 @@ $float-button-size: 65px;
}
}
&:hover {
// background: var(--X2);
}
&:active {
color: var(--accent);
}