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

enhance(client): ヘッダーのぼかし設定を追加

Browse source
This commit is contained in:
NoriDev 2023-06-28 16:31:57 +09:00
parent e16e4b901b
commit b861976750
3 changed files with 15 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG_CHERRYPICK.md
View file

@ -48,6 +48,7 @@
- MkDialog 버튼이 3개 이상이면 정렬을 변경하도록 - MkDialog 버튼이 3개 이상이면 정렬을 변경하도록
- 리노트 유저 팝업의 디자인 일부 개선 - 리노트 유저 팝업의 디자인 일부 개선
- 네비게이션 바의 블러 처리 추가 - 네비게이션 바의 블러 처리 추가
- 헤더의 블러 설정 추가
- Fix: 그룹 초대 알림 아이콘이 잘못 표시되는 문제 - Fix: 그룹 초대 알림 아이콘이 잘못 표시되는 문제
- Fix: 노트 디자인이 올바르지 않게 표시되는 문제 - Fix: 노트 디자인이 올바르지 않게 표시되는 문제
- Fix: 프로필 아이콘이 투명일 때 노트 답글선이 비치는 문제 - Fix: 프로필 아이콘이 투명일 때 노트 답글선이 비치는 문제

8
packages/frontend/src/components/global/CPPageHeader.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div v-if="show" ref="el" :class="[$style.root, {[$style.slim]: narrow, [$style.thin]: thin_ }]" :style="{ background: bg }"> <div v-if="show" ref="el" :class="[$style.root, {[$style.slim]: narrow, [$style.thin]: thin_, [$style.reduceBlurEffect]: !defaultStore.state.useBlurEffect }]" :style="{ background: bg }">
<div v-if="!thin_ && !canBack" :class="$style.buttonsLeft"> <div v-if="!thin_ && !canBack" :class="$style.buttonsLeft">
<button class="_button" :class="[$style.button, $style.goBack]" @click.stop="goBack" @touchstart="preventDrag"><i class="ti ti-arrow-left"></i></button> <button class="_button" :class="[$style.button, $style.goBack]" @click.stop="goBack" @touchstart="preventDrag"><i class="ti ti-arrow-left"></i></button>
</div> </div>
@ -55,6 +55,7 @@ import { miLocalStorage } from '@/local-storage';
import { mainRouter } from '@/router'; import { mainRouter } from '@/router';
import * as os from '@/os'; import * as os from '@/os';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import {defaultStore} from "@/store";
const isFriendly = ref(miLocalStorage.getItem('ui') === 'friendly'); const isFriendly = ref(miLocalStorage.getItem('ui') === 'friendly');
const canBack = ref(['index', 'explore', 'my-notifications', 'messaging'].includes(<string>mainRouter.currentRoute.value.name)); const canBack = ref(['index', 'explore', 'my-notifications', 'messaging'].includes(<string>mainRouter.currentRoute.value.name));
@ -249,6 +250,11 @@ onUnmounted(() => {
} }
} }
} }
&.reduceBlurEffect {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
} }
.buttons { .buttons {

8
packages/frontend/src/components/global/MkPageHeader.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div v-if="show" ref="el" :class="[$style.root]" :style="{ background: bg }"> <div v-if="show" ref="el" :class="[$style.root, { [$style.reduceBlurEffect]: !defaultStore.state.useBlurEffect }]" :style="{ background: bg }">
<div :class="[$style.upper, { [$style.slim]: narrow || isFriendly, [$style.thin]: thin_, [$style.hideTitle]: hideTitle && isFriendly }]"> <div :class="[$style.upper, { [$style.slim]: narrow || isFriendly, [$style.thin]: thin_, [$style.hideTitle]: hideTitle && isFriendly }]">
<div v-if="!thin_ && !canBack" :class="$style.buttonsLeft"> <div v-if="!thin_ && !canBack" :class="$style.buttonsLeft">
<button class="_button" :class="[$style.button, $style.goBack]" @click.stop="goBack" @touchstart="preventDrag"><i class="ti ti-arrow-left"></i></button> <button class="_button" :class="[$style.button, $style.goBack]" @click.stop="goBack" @touchstart="preventDrag"><i class="ti ti-arrow-left"></i></button>
@ -53,6 +53,7 @@ import { miLocalStorage } from '@/local-storage';
import { mainRouter } from '@/router'; import { mainRouter } from '@/router';
import * as os from '@/os'; import * as os from '@/os';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import {defaultStore} from "@/store";
const isFriendly = ref(miLocalStorage.getItem('ui') === 'friendly'); const isFriendly = ref(miLocalStorage.getItem('ui') === 'friendly');
const canBack = ref(['index', 'explore', 'my-notifications', 'messaging'].includes(<string>mainRouter.currentRoute.value.name)); const canBack = ref(['index', 'explore', 'my-notifications', 'messaging'].includes(<string>mainRouter.currentRoute.value.name));
@ -160,6 +161,11 @@ onUnmounted(() => {
backdrop-filter: var(--blur, blur(15px)); backdrop-filter: var(--blur, blur(15px));
border-bottom: solid 0.5px var(--divider); border-bottom: solid 0.5px var(--divider);
width: 100%; width: 100%;
&.reduceBlurEffect {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
} }
.upper, .upper,