HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

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

Browse source
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 ### Improvements
- ドキュメントの更新 - ドキュメントの更新
- ドキュメントにchangelogを追加 - ドキュメントにchangelogを追加
- ぼかし効果のオプションを追加
- Vueを3.2.1に更新 - Vueを3.2.1に更新
- UIの調整 - UIの調整

1
locales/ja-JP.yml
View file

@ -771,6 +771,7 @@ received: "受信"
searchResult: "検索結果" searchResult: "検索結果"
hashtags: "ハッシュタグ" hashtags: "ハッシュタグ"
troubleshooting: "トラブルシューティング" troubleshooting: "トラブルシューティング"
useBlurEffect: "UIにぼかし効果を使用"
_docs: _docs:
continueReading: "続きを読む" 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); margin: -8px calc(var(--formXPadding) * -1) 0 calc(var(--formXPadding) * -1);
padding: 8px calc(var(--formContentHMargin) + var(--formXPadding)) 8px calc(var(--formContentHMargin) + var(--formXPadding)); padding: 8px calc(var(--formContentHMargin) + var(--formXPadding)) 8px calc(var(--formContentHMargin) + var(--formXPadding));
background: var(--X17); background: var(--X17);
-webkit-backdrop-filter: blur(10px); -webkit-backdrop-filter: var(--blur, blur(10px));
backdrop-filter: blur(10px); backdrop-filter: var(--blur, blur(10px));
} }
._themeChanging_ ._formLabel { ._themeChanging_ ._formLabel {

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

@ -102,8 +102,8 @@ export default defineComponent({
background: var(--panel); background: var(--panel);
/* TODO panelの半透明バージョンをプログラマティックに作りたい /* TODO panelの半透明バージョンをプログラマティックに作りたい
background: var(--X17); background: var(--X17);
-webkit-backdrop-filter: blur(8px); -webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: blur(20px); backdrop-filter: var(--blur, blur(20px));
*/ */
> .title { > .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'); document.documentElement.style.setProperty('--modalBgFilter', v ? 'blur(4px)' : 'none');
}, { immediate: true }); }, { 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; let reloadDialogShowing = false;
stream.on('_disconnected_', async () => { stream.on('_disconnected_', async () => {
if (defaultStore.state.serverDisconnectedBehavior === 'reload') { if (defaultStore.state.serverDisconnectedBehavior === 'reload') {

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

@ -152,8 +152,8 @@ export default defineComponent({
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
-webkit-backdrop-filter: blur(16px); -webkit-backdrop-filter: var(--blur, blur(16px));
backdrop-filter: blur(16px); backdrop-filter: var(--blur, blur(16px));
background: rgba(0, 0, 0, 0.3); 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); top: var(--stickyTop, 0px);
padding: 16px; padding: 16px;
font-weight: bold; font-weight: bold;
-webkit-backdrop-filter: blur(10px); -webkit-backdrop-filter: var(--blur, blur(10px));
backdrop-filter: blur(10px); backdrop-filter: var(--blur, blur(10px));
background-color: var(--X16); background-color: var(--X16);
} }

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

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

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

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

4
src/client/store.ts
View file

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

4
src/client/style.scss
View file

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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