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

enhance(client): モバイルでUIにぼかし効果をオフにすると、トースト通知の背景が不透明に表示されるように

Browse source
This commit is contained in:
NoriDev 2023-06-07 16:55:43 +09:00
parent fedd12c168
commit 9aecfe5ed9
3 changed files with 16 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG_CHERRYPICK.md
View file

@ -29,6 +29,7 @@
- 타임라인에 노트의 답글을 표시하는 옵션의 기본값을 켜짐으로 설정
### Client
- 모바일에서 UI 흐림 효과를 끄면 토스트 알림의 배경이 불투명하게 표시되도록
- Fix: (Friendly) 플로팅 메뉴를 길게 눌렀을 때 프로필 이미지를 드래그 할 수 있는 문제
- Fix: 네트워크 트래픽이 10MB/s를 초과하면 네트워크 통계 위젯의 그래프가 잘못 출력되는 문제

11
packages/frontend/src/components/MkToast.vue
View file

@ -7,7 +7,7 @@
:leaveToClass="defaultStore.state.animation ? $style.transition_toast_leaveTo : ''"
appear @afterLeave="emit('closed')"
>
<div v-if="showing" class="_acrylic" :class="$style.root" :style="{ zIndex }">
<div v-if="showing" class="_acrylic" :class="[$style.root, { [$style.reduceBlurEffect]: !defaultStore.state.useBlurEffect }]" :style="{ zIndex }">
<div style="padding: 16px 24px;">
{{ message }}
</div>
@ -55,8 +55,7 @@ onMounted(() => {
left: 0;
right: 0;
top: 50px;
margin: 0 auto;
margin-top: 16px;
margin: 16px auto 0;
min-width: 300px;
max-width: calc(100% - 32px);
width: min-content;
@ -65,5 +64,11 @@ onMounted(() => {
overflow: clip;
text-align: center;
pointer-events: none;
@media (max-width: 500px) {
&.reduceBlurEffect {
background: var(--panel);
}
}
}
</style>

12
packages/frontend/src/components/MkWelcomeToast.vue
View file

@ -7,7 +7,7 @@
:leaveToClass="defaultStore.state.animation ? $style.transition_toast_leaveTo : ''"
appear @afterLeave="emit('closed')"
>
<div v-if="showing" class="_acrylic" :class="$style.root" :style="{ zIndex }">
<div v-if="showing" class="_acrylic" :class="[$style.root, { [$style.reduceBlurEffect]: !defaultStore.state.useBlurEffect }]" :style="{ zIndex }">
<CPAvatar :class="$style.avatar" :user="$i"/>
<div style="padding: 16px 24px;">
{{ message }}
@ -58,8 +58,7 @@ onMounted(() => {
left: 0;
right: 0;
top: 50px;
margin: 0 auto;
margin-top: 16px;
margin: 16px auto 0;
min-width: 300px;
max-width: calc(100% - 32px);
width: min-content;
@ -68,11 +67,14 @@ onMounted(() => {
overflow: clip;
text-align: center;
pointer-events: none;
transition: opacity 0.5s, transform 0.5s;
@media (max-width: 500px) {
width: 100%;
top: 0px;
top: 0;
&.reduceBlurEffect {
background: var(--panel);
}
}
}