feat(asri): implement parallax scrolling for cover images and full-wi…

…dth images - Add parallax scrolling effect for cover images and full-width images - Improve smoothness of transitions between light and dark modes - Introduce animations for text editing toolbar - Optimize document tree item expansion animations - Enhance right-to-left UI layout mode support - Refine block icon appearance animations - Improve button click animations - Center align inactive tab content - Adjust blockquote styles - Fine-tune settings panel styles - Disable auto-hide functionality for sidebar panel space on mobile devices - Fix emoji edge clipping issues - Resolve style compatibility issues with "Typewriter Mode" plugin - Fix flickering animations in sidebar panel controls - Correct incomplete display of filter input box in backlink panel - Fix render process crashes when opening code snippet dialog
mustakshif · Jan 5, 2025 · fbb691b · fbb691b
1 parent bf13ee9
commit fbb691b
Show file tree

Hide file tree

Showing 14 changed files with 142 additions and 23 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,45 @@
+### v3.2.1
+
+* 大幅提升亮暗色模式间平滑切换流畅度
+* 更新题头图样式，新增视差滚动效果
+* 全宽显示图片新增视差滚动效果
+* 新增文字编辑工具条动画
+* 优化文档树条目展开动画卡顿的问题
+* 从右至左 UI 布局模式适配更多对话框
+* 优化块标出现时的动画曲线
+* 优化按钮点击动画
+* 未激活页签内容改为居中显示
+* 调整引述块样式
+* 微调设置面板样式
+* 移动端禁用侧栏面板空间自动隐藏
+* 修复 emoji 边缘裁切的问题
+* 修复「打字机模式」插件样式适配问题
+* 修复侧栏面板控件动画闪烁的问题
+* 修复反链面板筛选输入框显示不全的问题
+* 修复打开代码片段对话框时渲染进程崩溃的问题
+
+<br />
+
+* Significantly improved the smoothness of transitions between light and dark modes
+* Updated header image style, added parallax scrolling effect
+* Added parallax scrolling effect for full-width displayed images
+* Added animations for text editing toolbar
+* Optimized laggy document tree item expansion animations
+* Adapted more dialogs for right-to-left UI layout mode
+* Optimized animation curves for block icon appearances
+* Optimized button click animations
+* Changed inactive tab content to center alignment
+* Adjusted blockquote styles
+* Fine-tuned settings panel styles
+* Disabled auto-hide functionality for sidebar panel space on mobile devices
+* Fixed emoji edge clipping issues
+* Fixed style compatibility issues with the "Typewriter Mode" plugin
+* Fixed flickering animations in sidebar panel controls
+* Fixed incomplete display of filter input box in backlink panel
+* Fixed render process crashes when opening code snippet dialog
+
+---
+
 ### v3.2.0
 
 * 新增从右至左 UI 布局模式，应用语言为阿拉伯语等从右至左语言时自动适配

diff --git a/README.md b/README.md
@@ -13,6 +13,26 @@ An ultra-modern theme for [SiYuan Note](https://github.com/siyuan-note/siyuan),
 
 ## Latest Updates
 
+### v3.2.1
+
+* Significantly improved the smoothness of transitions between light and dark modes
+* Updated header image style, added parallax scrolling effect
+* Added parallax scrolling effect for full-width displayed images
+* Added animations for text editing toolbar
+* Optimized laggy document tree item expansion animations
+* Adapted more dialogs for right-to-left UI layout mode
+* Optimized animation curves for block icon appearances
+* Optimized button click animations
+* Changed inactive tab content to center alignment
+* Adjusted blockquote styles
+* Fine-tuned settings panel styles
+* Disabled auto-hide functionality for sidebar panel space on mobile devices
+* Fixed emoji edge clipping issues
+* Fixed style compatibility issues with the "Typewriter Mode" plugin
+* Fixed flickering animations in sidebar panel controls
+* Fixed incomplete display of filter input box in backlink panel
+* Fixed render process crashes when opening code snippet dialog
+
 ### v3.2.0
 
 * Added right-to-left UI layout mode, which automatically adapts when the application language is set to Arabic or other right-to-left languages

diff --git a/README_zh_CN.md b/README_zh_CN.md
@@ -13,6 +13,26 @@ Asri 是一款极富现代感的[思源笔记](https://github.com/siyuan-note/si
 
 ## 最近更新
 
+### v3.2.1
+
+* 大幅提升亮暗色模式间平滑切换流畅度
+* 更新题头图样式，新增视差滚动效果
+* 全宽显示图片新增视差滚动效果
+* 新增文字编辑工具条动画
+* 优化文档树条目展开动画卡顿的问题
+* 从右至左 UI 布局模式适配更多对话框
+* 优化块标出现时的动画曲线
+* 优化按钮点击动画
+* 未激活页签内容改为居中显示
+* 调整引述块样式
+* 微调设置面板样式
+* 移动端禁用侧栏面板空间自动隐藏
+* 修复 emoji 边缘裁切的问题
+* 修复「打字机模式」插件样式适配问题
+* 修复侧栏面板控件动画闪烁的问题
+* 修复反链面板筛选输入框显示不全的问题
+* 修复打开代码片段对话框时渲染进程崩溃的问题
+
 ### v3.2.0
 
 * 新增从右至左 UI 布局模式，应用语言为阿拉伯语等从右至左语言时自动适配

diff --git a/styles/components/misc.scss b/styles/components/misc.scss
@@ -111,13 +111,15 @@
         left: 2px;
         top: 2px;
         @include theme-variant-color(background-color, light-components);
-        box-shadow: 0 1px 4px -1px #0003;
+        // box-shadow: 0 1px 4px -1px #0003;
         border: none;
         z-index: auto;
         transform: none;
         transition-property: transform;
         transition-duration: .2s;
         transition-timing-function: $timing-function-decelerate;
+
+        box-shadow: 0px 6px 10px -3px rgba(0,0,0,0.1),0px 15px 16px -3px rgba(0,0,0,0.1);
     }
 
     &::after,

diff --git a/styles/features/cover-image-parallax-scrolling.scss b/styles/features/cover-image-parallax-scrolling.scss
@@ -26,14 +26,14 @@
         overflow: hidden;
 
         img {
-            --offset-y: 120px;
+            --offset-y: 150px;
             // 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-name: parallax-cover-img,
+                // cover-img-fade-out,
                 // cover-img-blur
             ;
             animation-timing-function: linear;
@@ -60,15 +60,15 @@
     // }
 }
 
-@keyframes parallax-object {
+@keyframes parallax-cover-img {
     100% {
         // filter: saturate(0);
         // margin: 0;
         // width: 100%;
         // border-radius: 0;
         // height: 0vh;
         // min-width: calc(100%);
-        transform: translateY(var(--offset-y)) scale(1);
+        transform: translateY(max(calc(30vh - var(--offset-y)), 80px)) scale(1);
         // filter: blur(20px);
         // object-position: center calc(var(--obj-position-offset-y, 50%) + min(calc(30vh - 40px), 120px)); // 30vh 正好保持相对静止
     }

diff --git a/styles/features/custom-attributes.scss b/styles/features/custom-attributes.scss
@@ -72,6 +72,34 @@
                 width: auto;
                 padding: .5em var(--protyle-spacing-compatible) 0;
             }
+
+            --img-bottom-offset: 1.5em;
+
+            margin-bottom: calc(var(--img-bottom-offset) * -1);
+
+            .protyle-action__title {
+                position: relative;
+
+                >span {
+
+                    &:not(:empty) {
+                        // --stroke-width: .5px;
+                        // --stroke-clr: rgba(from var(--b3-theme-background) r g b / .8);
+                        background-color: var(--b3-theme-background);
+                        padding: .5em;
+                        max-width: fit-content;
+                        margin: auto auto var(--img-bottom-offset);
+                        border-radius: 8px;
+                        // mix-blend-mode: luminosity;
+                        // text-shadow:
+                        //     // var(--stroke-width) var(--stroke-width) 0 var(--stroke-clr),
+                        //     // calc(var(--stroke-width) * -1) calc(var(--stroke-width) * -1) 0 var(--stroke-clr),
+                        //     // calc(var(--stroke-width) * -1) var(--stroke-width) 0 var(--stroke-clr),
+                        //     // var(--stroke-width) calc(var(--stroke-width) * -1) 0 var(--stroke-clr),
+                        //     0 0 12px var(--b3-theme-background);
+                    }
+                }
+            }
         }
     }
 

diff --git a/styles/features/immersive-tabbar.scss b/styles/features/immersive-tabbar.scss
@@ -79,7 +79,7 @@ body.asri-immersive-tabbar:not(.asri-disable-backdrop-blur) {
             }
 
             :not(#searchPreview)>.protyle-content {
-                padding-top: var(--blur-block-height);
+                padding-top: var(--blur-block-height); // 可能是导致滚动相关问题的原因
             }
 
             &>.file-tree .protyle-content {

diff --git a/styles/features/index.scss b/styles/features/index.scss
@@ -13,7 +13,7 @@
 @use 'overflow-indicator';
 @use 'list-counter-style';
 @use 'reading-mode';
-// @use 'immersive-tabbar';
+@use 'immersive-tabbar';
 @use 'rtl';
 @use 'selected-block-indicator';
 @use 'hide-side-panel-block-icons';
diff --git a/styles/features/overflow-indicator.scss b/styles/features/overflow-indicator.scss
@@ -79,17 +79,18 @@ body:not(.has-exportimg) // https://github.com/mustakshif/Asri/issues/106
     }
 }
 
-[data-key="dialog-snippets"] .b3-dialog__body>.fn__flex-1 {
-    @include overflow-indicator-fadein-bgClr($fadeout-size-m, $range: 'top bottom');
+// 可能导致打开代码片段时渲染进程崩溃
+// [data-key="dialog-snippets"] .b3-dialog__body>.fn__flex-1 {
+//     @include overflow-indicator-fadein-bgClr($fadeout-size-m, $range: 'top bottom');
 
-    &::before {
-        top: -16px;
-    }
+//     &::before {
+//         top: -16px;
+//     }
 
-    &::after {
-        bottom: -16px;
-    }
-}
+//     &::after {
+//         bottom: -16px;
+//     }
+// }
 
 [data-key="dialog-attr"] .b3-dialog__body .layout-tab-bar+.fn__flex-1 {
     @include overflow-indicator-fadein-bgClr($fadeout-size-m, $range: 'top');

diff --git a/styles/layout/dock.scss b/styles/layout/dock.scss
@@ -11,6 +11,7 @@
     .dock__item {
         // @include theme-variant-color(color, on-background, 0.6);
         color: var(--b3-theme-on-surface);
+        min-width: unset;
 
         &:not(.dock__item--activefocus, .dock--active):hover {
             color: var(--b3-theme-on-background);

diff --git a/styles/platforms/mobile.scss b/styles/platforms/mobile.scss
@@ -4,9 +4,14 @@
     // -> js
 
     //编辑区
-    .protyle-background__img {
-        --bgimg-top-space: 90px;
+    .protyle-background {
+        --cover-img-height: 200px;
+
+        &__img {
+            --bgimg-top-space: 90px;
+        }
     }
+
     .protyle-wysiwyg {
 
         padding-right: 24px !important;

diff --git a/styles/typography/protyle.scss b/styles/typography/protyle.scss
@@ -1041,11 +1041,11 @@
 
                 .protyle-background__action,
                 .b3-chips:not(.fn__none)~.protyle-background__action {
-                    --y: calc(30vh - 100% - 12px);
+                    --y: calc(var(--cover-img-height, 30vh) - 100% - 12px);
                 }
 
                 .protyle-background__icon:not(.fn__none)~.protyle-background__action {
-                    --y: calc(30vh - 100% + 40px);
+                    --y: calc(var(--cover-img-height, 30vh) - 100% + 40px);
                 }
 
                 .protyle-background__icon:not(.fn__none)~.protyle-background__action {

diff --git a/theme.css b/theme.css
diff --git a/theme.json b/theme.json
@@ -2,7 +2,7 @@
   "name": "Asri",
   "author": "MUSTAKSHIF",
   "url": "https://github.com/mustakshif/Asri",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "displayName": {
     "default": "Asri",
     "zh_CN": "Asri",