FoundKeyGang/FoundKey
FoundKeyGang
/
FoundKey
7
19
Fork 22
Code Issues 37 Pull Requests 4 Releases Activity

ぼかし効果の切り替え機能

This commit is contained in:
syuilo 2021-08-11 22:34:45 +09:00
parent aeb24b96eb
commit 0f55e65701
21 changed files with 56 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -3,6 +3,7 @@
### Improvements
- ドキュメントの更新
- ドキュメントにchangelogを追加
- ぼかし効果のオプションを追加
- Vueを3.2.1に更新
- UIの調整

1
locales/ja-JP.yml
View File

@ -771,6 +771,7 @@ received: "受信"
searchResult: "検索結果"
hashtags: "ハッシュタグ"
troubleshooting: "トラブルシューティング"
useBlurEffect: "UIにぼかし効果を使用"
_docs:
continueReading: "続きを読む"

4
src/client/components/form/form.scss
View File

@ -32,8 +32,8 @@
margin: -8px calc(var(--formXPadding) * -1) 0 calc(var(--formXPadding) * -1);
padding: 8px calc(var(--formContentHMargin) + var(--formXPadding)) 8px calc(var(--formContentHMargin) + var(--formXPadding));
background: var(--X17);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: var(--blur, blur(10px));
backdrop-filter: var(--blur, blur(10px));
}
._themeChanging_ ._formLabel {

4
src/client/components/ui/folder.vue
View File

@ -102,8 +102,8 @@ export default defineComponent({
background: var(--panel);
/* TODO panelの半透明バージョンをプログラマティックに作りたい
background: var(--X17);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: var(--blur, blur(20px));
*/
> .title {

8
src/client/init.ts
View File

@ -243,6 +243,14 @@ watch(defaultStore.reactiveState.useBlurEffectForModal, v => {
document.documentElement.style.setProperty('--modalBgFilter', v ? 'blur(4px)' : 'none');
}, { immediate: true });
watch(defaultStore.reactiveState.useBlurEffect, v => {
if (v) {
document.documentElement.style.removeProperty('--blur');
} else {
document.documentElement.style.setProperty('--blur', 'none');
}
}, { immediate: true });
let reloadDialogShowing = false;
stream.on('_disconnected_', async () => {
if (defaultStore.state.serverDisconnectedBehavior === 'reload') {

4
src/client/pages/channel.vue
View File

@ -152,8 +152,8 @@ export default defineComponent({
left: 0;
width: 100%;
height: 100%;
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: var(--blur, blur(16px));
backdrop-filter: var(--blur, blur(16px));
background: rgba(0, 0, 0, 0.3);
}

4
src/client/pages/mfm-cheat-sheet.vue
View File

@ -333,8 +333,8 @@ export default defineComponent({
top: var(--stickyTop, 0px);
padding: 16px;
font-weight: bold;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: var(--blur, blur(10px));
backdrop-filter: var(--blur, blur(10px));
background-color: var(--X16);
}

2
src/client/pages/settings/general.vue
View File

@ -33,6 +33,7 @@
<template #label>{{ $ts.appearance }}</template>
<FormSwitch v-model:value="disableAnimatedMfm">{{ $ts.disableAnimatedMfm }}</FormSwitch>
<FormSwitch v-model:value="reduceAnimation">{{ $ts.reduceUiAnimation }}</FormSwitch>
<FormSwitch v-model:value="useBlurEffect">{{ $ts.useBlurEffect }}</FormSwitch>
<FormSwitch v-model:value="useBlurEffectForModal">{{ $ts.useBlurEffectForModal }}</FormSwitch>
<FormSwitch v-model:value="showGapBetweenNotesInTimeline">{{ $ts.showGapBetweenNotesInTimeline }}</FormSwitch>
<FormSwitch v-model:value="loadRawImages">{{ $ts.loadRawImages }}</FormSwitch>
@ -132,6 +133,7 @@ export default defineComponent({
serverDisconnectedBehavior: defaultStore.makeGetterSetter('serverDisconnectedBehavior'),
reduceAnimation: defaultStore.makeGetterSetter('animation', v => !v, v => !v),
useBlurEffectForModal: defaultStore.makeGetterSetter('useBlurEffectForModal'),
useBlurEffect: defaultStore.makeGetterSetter('useBlurEffect'),
showGapBetweenNotesInTimeline: defaultStore.makeGetterSetter('showGapBetweenNotesInTimeline'),
disableAnimatedMfm: defaultStore.makeGetterSetter('animatedMfm', v => !v, v => !v),
useOsNativeEmojis: defaultStore.makeGetterSetter('useOsNativeEmojis'),

4
src/client/pages/user/index.vue
View File

@ -613,8 +613,8 @@ export default defineComponent({
position: absolute;
top: 12px;
right: 12px;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: var(--blur, blur(8px));
background: rgba(0, 0, 0, 0.2);
padding: 8px;
border-radius: 24px;

4
src/client/store.ts
View File

@ -142,6 +142,10 @@ export const defaultStore = markRaw(new Storage('base', {
where: 'device',
default: true
},
useBlurEffect: {
where: 'device',
default: false
},
showFixedPostForm: {
where: 'device',
default: false

4
src/client/style.scss
View File

@ -404,8 +404,8 @@ hr {
._acrylic {
background: var(--acrylicPanel);
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
}
._inputSplit {

4
src/client/ui/_common_/sidebar.vue
View File

@ -374,8 +374,8 @@ export default defineComponent({
padding-top: 8px;
padding-bottom: 8px;
background: var(--X14);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: var(--blur, blur(8px));
}
&:first-child {

4
src/client/ui/chat/index.vue
View File

@ -373,8 +373,8 @@ export default defineComponent({
position: sticky;
top: 0;
background: var(--X17);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: var(--blur, blur(8px));
z-index: 1;
color: var(--fgTransparentWeak);

4
src/client/ui/chat/side.vue
View File

@ -130,8 +130,8 @@ export default defineComponent({
width: 100%;
font-weight: bold;
//background-color: var(--panel);
-webkit-backdrop-filter: blur(32px);
backdrop-filter: blur(32px);
-webkit-backdrop-filter: var(--blur, blur(32px));
backdrop-filter: var(--blur, blur(32px));
background-color: var(--header);
border-bottom: solid 0.5px var(--divider);
box-sizing: border-box;

4
src/client/ui/deck/column.vue
View File

@ -305,8 +305,8 @@ export default defineComponent({
&.naked {
background: var(--acrylicBg) !important;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: var(--blur, blur(10px));
backdrop-filter: var(--blur, blur(10px));
> header {
background: transparent;

4
src/client/ui/default.side.vue
View File

@ -138,8 +138,8 @@ export default defineComponent({
text-align: center;
font-weight: bold;
//background-color: var(--panel);
-webkit-backdrop-filter: blur(32px);
backdrop-filter: blur(32px);
-webkit-backdrop-filter: var(--blur, blur(32px));
backdrop-filter: var(--blur, blur(32px));
background-color: var(--header);
> ._button {

10
src/client/ui/default.vue
View File

@ -240,7 +240,7 @@ export default defineComponent({
&.wallpaper {
background: var(--wallpaperOverlay);
//backdrop-filter: blur(4px);
//backdrop-filter: var(--blur, blur(4px));
}
&.isMobile {
@ -303,8 +303,8 @@ export default defineComponent({
z-index: 1000;
top: var(--globalHeaderHeight, 0px);
height: $header-height;
-webkit-backdrop-filter: blur(32px);
backdrop-filter: blur(32px);
-webkit-backdrop-filter: var(--blur, blur(32px));
backdrop-filter: var(--blur, blur(32px));
background-color: var(--header);
border-bottom: solid 0.5px var(--divider);
}
@ -380,8 +380,8 @@ export default defineComponent({
display: flex;
width: 100%;
box-sizing: border-box;
-webkit-backdrop-filter: blur(32px);
backdrop-filter: blur(32px);
-webkit-backdrop-filter: var(--blur, blur(32px));
backdrop-filter: var(--blur, blur(32px));
background-color: var(--header);
border-top: solid 0.5px var(--divider);

10
src/client/ui/universal.vue
View File

@ -250,7 +250,7 @@ export default defineComponent({
&.wallpaper {
background: var(--wallpaperOverlay);
//backdrop-filter: blur(4px);
//backdrop-filter: var(--blur, blur(4px));
}
> .contents {
@ -269,8 +269,8 @@ export default defineComponent({
text-align: center;
font-weight: bold;
//background-color: var(--panel);
-webkit-backdrop-filter: blur(32px);
backdrop-filter: blur(32px);
-webkit-backdrop-filter: var(--blur, blur(32px));
backdrop-filter: var(--blur, blur(32px));
background-color: var(--header);
//border-bottom: solid 0.5px var(--divider);
user-select: none;
@ -341,8 +341,8 @@ export default defineComponent({
display: flex;
width: 100%;
box-sizing: border-box;
-webkit-backdrop-filter: blur(32px);
backdrop-filter: blur(32px);
-webkit-backdrop-filter: var(--blur, blur(32px));
backdrop-filter: var(--blur, blur(32px));
background-color: var(--header);
&:not(.navHidden) {

4
src/client/ui/visitor/header.vue
View File

@ -90,8 +90,8 @@ export default defineComponent({
left: 0;
z-index: 1000;
line-height: $height;
-webkit-backdrop-filter: blur(32px);
backdrop-filter: blur(32px);
-webkit-backdrop-filter: var(--blur, blur(32px));
backdrop-filter: var(--blur, blur(32px));
background-color: var(--X16);
> .wide {

8
src/client/ui/visitor/kanban.vue
View File

@ -122,8 +122,8 @@ export default defineComponent({
background: rgba(0, 0, 0, 0.3);
&.transparent {
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: var(--blur, blur(12px));
backdrop-filter: var(--blur, blur(12px));
}
}
@ -140,8 +140,8 @@ export default defineComponent({
margin: 0 auto;
> .panel {
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: var(--blur, blur(8px));
background: rgba(0, 0, 0, 0.5);
border-radius: var(--radius);

4
src/client/ui/zen.vue
View File

@ -89,8 +89,8 @@ export default defineComponent({
line-height: $header-height;
text-align: center;
//background-color: var(--panel);
-webkit-backdrop-filter: blur(32px);
backdrop-filter: blur(32px);
-webkit-backdrop-filter: var(--blur, blur(32px));
backdrop-filter: var(--blur, blur(32px));
background-color: var(--header);
border-bottom: solid 0.5px var(--divider);
}