feat(background): optimize background image performance and add blur …

…effect - Remove unused `formatProtyleWithBgImageOnly` function - Add blur effect to background image - Optimize parallax scrolling performance - Adjust background image styling and positioning - Improve indentation guide styles - Update tab bar and typography styles
mustakshif · Jan 5, 2025 · bf13ee9 · bf13ee9
1 parent a051f0e
commit bf13ee9
Show file tree

Hide file tree

Showing 12 changed files with 273 additions and 84 deletions.
diff --git a/src/modules/editor.ts b/src/modules/editor.ts
@@ -1,7 +1,7 @@
 import { debounce, querySelectorAllAsync } from "../util/misc";
 
 export const debouncedFormatProtyleWithBgImageOnly = debounce(formatProtyleWithBgImageOnly);
-export async function formatProtyleWithBgImageOnly() {
+async function formatProtyleWithBgImageOnly() {
     // await updateWndEls();
     let protyleBgs = await querySelectorAllAsync('.protyle-top>.protyle-background');
 

diff --git a/src/modules/index.ts b/src/modules/index.ts
@@ -7,7 +7,7 @@ import { addAfwdMenuItems, calcProtyleSpacings, debouncedCalcProtyleSpacings, re
 import { createBarModeMenuItems, followSysAccentColor, getSystemAccentColor, loadThemePalette, unloadThemePalette } from "./configsMenu/makeItems";
 import { docBodyMoCallback } from "./dialog";
 import { addDockbClassName, destroyDockBg, removeDockbClassName, updateDockLBgAndBorder } from "./docks";
-import { debouncedFormatProtyleWithBgImageOnly, removeProtyleWithBgImageOnlyClassName } from "./editor";
+import { removeProtyleWithBgImageOnlyClassName } from "./editor";
 import { addEnvClassNames, removeEnvClassNames } from "./env";
 import { darkModeMediaQuery, modeTransitionOnClick, startFadeInFadeOutTranstition } from "./modeTransition";
 import { restoreDefaultSiyuanScrollbar, useMacSysScrollbar } from "./scrollbar";
@@ -148,7 +148,7 @@ async function updateStyles(e?: Event | KeyboardEvent) {
     function lowFreqStyleUpdates() {
         setTimeout(async () => {
             updateDockLBgAndBorder();
-            debouncedFormatProtyleWithBgImageOnly();
+            // debouncedFormatProtyleWithBgImageOnly();
             debouncedStatusPosition();
             setStatusHeightVar();
             await updateWndEls();
@@ -173,7 +173,7 @@ function globalClassNameMoCallback(mutationList: MutationRecord[], observer: Mut
         // console.log(mutation.target, mutation.type, mutation.attributeName, mutation.oldValue);
         if ((mutation.target as HTMLElement).classList.contains('b3-list-item--focus')) {
             debouncedFormatIndentGuidesForFocusedItems();
-            debouncedFormatProtyleWithBgImageOnly();
+            // debouncedFormatProtyleWithBgImageOnly();
             // console.log('focus');
         }
     }

diff --git a/styles/_base.scss b/styles/_base.scss
@@ -271,6 +271,7 @@
 
         .item__text {
             transform: none;
+            transition-property: color;
         }
     }
 

diff --git a/styles/components/dialog.scss b/styles/components/dialog.scss
@@ -345,7 +345,7 @@
         .config__tab-hr {
             // background-color: var(--b3-border-color-trans);
             background-color: transparent;
-            margin: 4px 0;
+            margin: 8px 0;
         }
 
         .b3-list-item {
@@ -1096,32 +1096,33 @@
         .item__preview {
             border-radius: 0;
 
-            view-timeline-name: --preview-background;
-            animation-timeline: --preview-background;
-            // view-timeline-axis: y;
-            animation-range: 67% normal;
-            animation-fill-mode: both;
-            animation-name: parallax-background, preview-cover-fade-out;
-            animation-timing-function: linear;
-
-            @keyframes parallax-background {
-                100% {
-                    background-position: center calc(50% + 160px);
-                }
-            }
+            // 性能表现不佳
+            // view-timeline-name: --preview-background;
+            // animation-timeline: --preview-background;
+            // // view-timeline-axis: y;
+            // animation-range: 67% normal;
+            // animation-fill-mode: both;
+            // animation-name: parallax-background, preview-cover-fade-out;
+            // animation-timing-function: linear;
+
+            // @keyframes parallax-background {
+            //     100% {
+            //         background-position: center calc(50% + 160px);
+            //     }
+            // }
 
-            @keyframes preview-cover-fade-out {
+            // @keyframes preview-cover-fade-out {
 
-                0%,
-                60% {
-                    opacity: 1;
-                }
+            //     0%,
+            //     60% {
+            //         opacity: 1;
+            //     }
 
-                90%,
-                100% {
-                    opacity: 0;
-                }
-            }
+            //     90%,
+            //     100% {
+            //         opacity: 0;
+            //     }
+            // }
         }
 
         .b3-typography {

diff --git a/styles/features/blur.scss b/styles/features/blur.scss
@@ -68,6 +68,10 @@ body:not(.asri-disable-backdrop-blur) {
         //     }
         // }
 
+        &-background__action {
+            backdrop-filter: blur(20px);
+        }
+
         //文字格式工具条
         &-toolbar {
             background-color: oklch(from var(--b3-theme-surface) l c h / $medium-transparency);
@@ -100,9 +104,9 @@ body:not(.asri-disable-backdrop-blur) {
             mix-blend-mode: luminosity;
 
             // 工具条
-            &:hover {
+            // &:hover {
                 backdrop-filter: blur(20px);
-            }
+            // }
 
             .protyle-icon {
                 &--only {

diff --git a/styles/features/cover-image-parallax-scrolling.scss b/styles/features/cover-image-parallax-scrolling.scss
@@ -1,4 +1,6 @@
 .protyle {
+
+    // 滚动条方案
     // &-content {
     //     scroll-timeline-name: --protyle-content;
     //     scroll-timeline-axis: y;
@@ -16,22 +18,39 @@
     //     }
     // }
 
-    &-background__img img {
+    &-background__img {
         view-timeline-name: --protyle-background;
-        animation-timeline: --protyle-background;
-        // view-timeline-axis: y;
-        animation-range: calc(100vh - var(--bgimg-top-space, 84px)) normal;
-        animation-fill-mode: both;
-        animation-name: parallax-object, cover-img-fade-out;
-        animation-timing-function: linear;
-        // margin: 0 12px 0;
-        // width: calc(100% - 24px);
-        // border-radius: 16px;
-
-        // 临时解决方案，待优化
-        &[style^="object-position"] {
-            animation-name: cover-img-fade-out;
-            // animation: none;
+    }
+
+    &-background__img {
+        overflow: hidden;
+
+        img {
+            --offset-y: 120px;
+            // view-timeline-name: --protyle-background;
+            animation-timeline: --protyle-background;
+            // view-timeline-axis: y;
+            animation-range: calc(100vh - var(--bgimg-top-space, 84px)) normal;
+            animation-fill-mode: both;
+            animation-name: parallax-object,
+                cover-img-fade-out,
+                // cover-img-blur
+            ;
+            animation-timing-function: linear;
+            // margin: 0 12px 0;
+            // width: calc(100% - 24px);
+            // border-radius: 16px;
+            // min-width: calc(100% + 60px);
+            // margin: 0 -30px;
+            // transform: scale(1.2);
+            transform: translateY(0) scale(1.03);
+            transform-origin: 50% calc(50% + var(--offset-y));
+
+            //临时解决方案，待优化 
+            // &[style^="object-position"] {
+            //     animation-name: cover-img-fade-out;
+            //     // animation: none;
+            // }
         }
     }
 
@@ -48,7 +67,10 @@
         // width: 100%;
         // border-radius: 0;
         // height: 0vh;
-        object-position: center calc(var(--obj-position-offset-y, 50%) + min(calc(30vh - 40px), 120px)); // 30vh 正好保持相对静止
+        // min-width: calc(100%);
+        transform: translateY(var(--offset-y)) scale(1);
+        // filter: blur(20px);
+        // object-position: center calc(var(--obj-position-offset-y, 50%) + min(calc(30vh - 40px), 120px)); // 30vh 正好保持相对静止
     }
 }
 
@@ -65,16 +87,17 @@
     }
 }
 
-// @keyframes blur {
-//     0%,
-//     50% {
-//         filter: none;
-//     }
+@keyframes cover-img-blur {
 
-//     100% {
-//         filter: blur(10px);
-//     }
-// }
+    0%,
+    20% {
+        filter: none;
+    }
+
+    100% {
+        filter: blur(20px);
+    }
+}
 
 // @keyframes testanim {
 //     0% {

diff --git a/styles/features/custom-attributes.scss b/styles/features/custom-attributes.scss
@@ -33,6 +33,34 @@
                 .protyle-action__drag {
                     display: none;
                 }
+
+                overflow: hidden;
+                view-timeline-name: --afwd-img;
+
+                img {
+
+                    --offset-y: 120px;
+
+                    animation-timeline: --afwd-img;
+                    animation-range: 0% calc(100% + 84px);
+                    animation-fill-mode: both;
+                    animation-name: parallax-afwd-img;
+                    animation-timing-function: linear;
+
+                    @keyframes parallax-afwd-img {
+                        0% {
+                            transform: translateY(calc(var(--offset-y) * -1));
+                        }
+
+                        50% {
+                            transform: translateY(0);
+                        }
+
+                        100% {
+                            transform: translateY(var(--offset-y));
+                        }
+                    }
+                }
             }
 
             &__net {

diff --git a/styles/features/filetree-indents-indicator.scss b/styles/features/filetree-indents-indicator.scss
@@ -23,12 +23,17 @@
     // $indent-start: 22px;
     --indent-offset: 0px; // fix .sy__tag indent offset
 
+    --indent-color-inactive: rgb(from var(--b3-theme-on-background) r g b / .15);
+    --indent-color-active: rgb(from var(--b3-theme-on-background) r g b / .3);
+    --indent-color: #0000;
+
     @for $i from 1 through 7 {
         $uls: str-insert($string: $uls, $insert: '>ul', $index: 100);
 
         &#{$uls} {
             margin-inline-start: $indent;
-            box-shadow: 1px 0 transparent inset;
+            --indent-color: #0000;
+            box-shadow: 1px 0 var(--indent-color) inset;
 
             .b3-list-item {
                 margin-left: unset;
@@ -50,20 +55,12 @@
     &:hover>ul ul,
     li.b3-list-item--focus+ul,
     ul.has-focus {
-        box-shadow: 1px 0 rgb(from var(--b3-theme-on-background) r g b / .15) inset;
-
-        @include darkmode-counterpart {
-            box-shadow: 1px 0 rgb(from var(--b3-theme-on-background) r g b / .15) inset;
-        }
+        --indent-color: var(--indent-color-inactive);
     }
 
     &:hover li.b3-list-item--focus+ul,
     &:hover ul.has-focus {
-        box-shadow: 1px 0 rgb(from var(--b3-theme-on-background) r g b / .3) inset;
-
-        @include darkmode-counterpart {
-            box-shadow: 1px 0 rgb(from var(--b3-theme-on-background) r g b / .3) inset;
-        }
+        --indent-color: var(--indent-color-active);
     }
 
     &>ul {
@@ -133,4 +130,4 @@
 //         // }
 //     }
 
-// }
+// }
diff --git a/styles/layout/tab-bar.scss b/styles/layout/tab-bar.scss
@@ -52,7 +52,7 @@
                 padding-top: 0;
             }
 
-            .body-asri--mac & > img {
+            .body-asri--mac &>img {
                 transform: translateY(-1px);
             }
         }
@@ -120,16 +120,22 @@
             }
         }
 
-        &:not(.item--pin,.item--focus) {
-            .item__icon,
+        &:not(.item--pin, .item--focus) {
             .item__text {
                 transform: translateX(12px);
             }
+
+            .item__icon,
+            .item__icon+.item__text {
+                transform: translateX(10px);
+            }
         }
 
         &:hover {
+
+            .item__text,
             .item__icon,
-            .item__text {
+            .item__icon+.item__text {
                 transform: translateX(0);
             }
         }
@@ -189,10 +195,12 @@ body.body--blur .layout__wnd--active .layout-tab-bar .item--focus {
         transform: scale(1);
         opacity: 1;
     }
+
     50% {
         transform: scale(0.95);
         opacity: 0.8;
     }
+
     100% {
         transform: scale(1);
         opacity: 1;
-Original file line number
+Diff line change
@@ Expand Up / @@ -271,6 +271,7 @@ @@
             .item__text {
                 transform: none;
+                transition-property: color;
             }
         }
@@ Expand Down @@