feat(styles): add selected block indicator and optimize animations

- Add selected block indicator styles and animations - Implement outline ripple effect for selected blocks - Optimize cover image parallax scrolling animation - Adjust typewriter focus animation - Improve tab bar item hover and focus states
mustakshif · Jan 4, 2025 · a051f0e · a051f0e
1 parent 542b78f
commit a051f0e
Show file tree

Hide file tree

Showing 11 changed files with 129 additions and 56 deletions.
diff --git a/src/modules/index.ts b/src/modules/index.ts
@@ -110,9 +110,11 @@ function selectionChangeCallback(e: Event) {
     if (!range) return;
 
     const curNode = range.commonAncestorContainer;
-    const curBlock = curNode.parentElement ? curNode.parentElement.closest('[data-node-id]') : null;
+    const curParent = curNode.parentElement;
+    const curBlock = curParent ? curNode.parentElement.closest('[data-node-id]') : null;
     if (!curBlock) return;
 
+    curParent && curParent.dir && curParent.dir === 'auto';
     const curBlockType = curBlock.getAttribute('data-type');
     document.querySelectorAll('.asri-selected-block').forEach(block => block.classList.remove('asri-selected-block'));
     if (curBlockType === 'NodeAttributeView' || !curBlockType || curBlockType === 'NodeCodeBlock') return;

diff --git a/styles/_base.scss b/styles/_base.scss
@@ -268,6 +268,10 @@
                 color: var(--b3-theme-on-background);
             }
         }
+
+        .item__text {
+            transform: none;
+        }
     }
 
     .item:not(.item--focus, .fn__none)+.item:not(.item--focus):not(:first-child)::before {

diff --git a/styles/components/dialog.scss b/styles/components/dialog.scss
@@ -343,7 +343,9 @@
         // border-radius: 12px 0 0 12px;
 
         .config__tab-hr {
-            background-color: var(--b3-border-color-trans);
+            // background-color: var(--b3-border-color-trans);
+            background-color: transparent;
+            margin: 4px 0;
         }
 
         .b3-list-item {
@@ -432,6 +434,10 @@
             .b3-label {
                 box-shadow: none;
 
+                &__text {
+                    margin-top: 8px;
+                }
+
                 // 表单元素溢出显示
                 >.fn__flex-1 {
                     overflow: visible;
@@ -831,11 +837,13 @@
 
                 .b3-card {
                     &::after {
-                        box-shadow: 0 0 0 1.5px inset var(--b3-theme-primary-light);
+                        // box-shadow: 0 0 0 1px inset var(--b3-theme-primary-light);
 
-                        @include darkmode-counterpart {
-                            box-shadow: 0 0 0 1.5px inset var(--b3-theme-primary);
-                        }
+                        // @include darkmode-counterpart {
+                        //     box-shadow: 0 0 0 1px inset var(--b3-theme-primary);
+                        // }
+
+                        box-shadow: none;
                     }
                 }
             }
@@ -942,22 +950,19 @@
         .b3-card {
             border-radius: $border-rd-card;
             background-color: var(--b3-theme-background);
-            // outline: 1.5px solid var(--b3-border-color-trans);
             border: none;
-            box-shadow: 0 0 0 1.5px inset var(--b3-border-color-trans);
+            box-shadow: none;
+            // box-shadow: 0 0 0 1px inset var(--b3-border-color-trans);
+            outline: 1.5px solid var(--b3-border-color-trans);
+            outline-offset: -1.5px;
             margin: 0;
             transition-property: outline, transform, box-shadow;
             transition-duration: .2s;
             overflow: visible;
 
             &--current {
                 background-color: rgb(from var(--b3-theme-primary) r g b / .1);
-                box-shadow: 0 0 0 1.5px inset var(--b3-theme-primary-lighter);
-                // outline: 3px solid var(--b3-theme-primary-lighter);
-
-                // @include darkmode-counterpart {
-                //     outline-color: var(--b3-theme-primary-light);
-                // }
+                // box-shadow: 0 0 0 1px inset var(--b3-theme-primary-lighter);
             }
 
             &__img {
@@ -987,10 +992,6 @@
                 // outline: 2px solid var(--b3-theme-primary-light);
                 z-index: 1;
                 box-shadow: none;
-
-                // @include darkmode-counterpart {
-                //     outline: 2px solid var(--b3-theme-primary);
-                // }
             }
 
             &::after {
@@ -1004,11 +1005,20 @@
                 transition: opacity .2s;
                 pointer-events: none;
                 // @include menu-shadow(var(--b3-theme-primary), $opacity-light: .2);
+                // outline-color: transparent;
 
-                box-shadow: 0 0 0 1.5px inset var(--b3-theme-primary-light), 0 0 0 1px rgb(from var(--b3-theme-primary) r g b/0.1), 0px 13px 25px -2px rgb(from var(--b3-theme-primary) r g b/0.1), 0px 0px 10px 0px rgb(from var(--b3-theme-primary) r g b/0.1);
+                box-shadow: 0px 13px 25px -2px rgb(from var(--b3-theme-primary) r g b/0.1), 0px 0px 10px 0px rgb(from var(--b3-theme-primary) r g b/0.1);
 
                 @include darkmode-counterpart {
-                    box-shadow: 0 0 0 1.5px inset var(--b3-theme-primary), 0 0 0 .5px rgb(from var(--b3-theme-primary) r g b/1), 0px 13px 25px -2px rgb(from var(--b3-theme-primary) r g b/0.3), 0px 0px 10px 0px rgb(from var(--b3-theme-primary) r g b/0.15);
+                    box-shadow: 0px 13px 25px -2px rgb(from var(--b3-theme-primary) r g b/0.3), 0px 0px 10px 0px rgb(from var(--b3-theme-primary) r g b/0.15);
+                }
+            }
+
+            &--current, &:hover, &::after {
+                outline-color: var(--b3-theme-primary-lighter);
+
+                @include darkmode-counterpart {
+                    outline-color: var(--b3-theme-primary);
                 }
             }
 
@@ -1085,6 +1095,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);
+                }
+            }
+
+            @keyframes preview-cover-fade-out {
+
+                0%,
+                60% {
+                    opacity: 1;
+                }
+
+                90%,
+                100% {
+                    opacity: 0;
+                }
+            }
         }
 
         .b3-typography {

diff --git a/styles/features/cover-image-parallax-scrolling.scss b/styles/features/cover-image-parallax-scrolling.scss
@@ -22,14 +22,16 @@
         // view-timeline-axis: y;
         animation-range: calc(100vh - var(--bgimg-top-space, 84px)) normal;
         animation-fill-mode: both;
-        animation-name: parallax, cover-img-fade-out;
+        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;
         }
     }
 
@@ -39,21 +41,21 @@
     // }
 }
 
-@keyframes parallax {
+@keyframes parallax-object {
     100% {
         // filter: saturate(0);
         // margin: 0;
         // width: 100%;
         // border-radius: 0;
         // height: 0vh;
-        object-position: center calc(var(--obj-position-offset-y, 50%) + min(calc(30vh - 50px), 100px)); // 30vh 正好保持相对静止
+        object-position: center calc(var(--obj-position-offset-y, 50%) + min(calc(30vh - 40px), 120px)); // 30vh 正好保持相对静止
     }
 }
 
 @keyframes cover-img-fade-out {
 
     0%,
-    60% {
+    50% {
         opacity: 1;
     }
 

diff --git a/styles/features/index.scss b/styles/features/index.scss
@@ -3,7 +3,7 @@
 // @use 'mode-transition';
 // @use 'hide-toolbar';
 // @use 'cover-image-fading';
-@use './cover-image-parallax-scrolling';
+@use 'cover-image-parallax-scrolling';
 @use 'blur';
 @use 'filetree-indents-indicator';
 @use 'topbar-fusion';

diff --git a/styles/features/selected-block-indicator.scss b/styles/features/selected-block-indicator.scss
@@ -46,4 +46,26 @@
         transform: scaleY(1);
         opacity: 1;
     }
+}
+
+@keyframes outline-ripple-outer-boundary {
+
+    0%,
+    100% {
+        outline-width: 0px;
+    }
+
+    50% {
+        outline-width: 4px;
+    }
+}
+
+@keyframes outline-ripple-inner-boundary {
+    0% {
+        outline-offset: 0px;
+    }
+
+    100% {
+        outline-offset: 12px;
+    }
 }
diff --git a/styles/layout/breadcrumb.scss b/styles/layout/breadcrumb.scss
@@ -6,6 +6,14 @@
     color: var(--b3-theme-on-surface);
     // background-color: transparent; //全屏视图下是透明的
 
+    // 面包屑居中
+    // &::before {
+    //     content: '';
+    //     // display: block;
+    //     // height: 100%;
+    //     flex-grow: 1;
+    // }
+
     .block__icon:hover:not([disabled]):not(.ft__primary) {
         background-color: transparent;
     }

diff --git a/styles/layout/tab-bar.scss b/styles/layout/tab-bar.scss
@@ -60,6 +60,7 @@
         &__text {
             padding: 2px 6px 2px 6px;
             mask-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0, #000 8px);
+            transition-timing-function: $timing-function-decelerate;
         }
 
         &__close {
@@ -106,7 +107,7 @@
         &--focus {
             max-width: 21rem;
             // font-weight: 500;
-            transition: 0.2s;
+            transition: .2s;
             // border-radius: 7px;
             @include theme-variant-color(background-color, list-hover, 0.12, 0.15);
             // box-shadow: 0 0 0 1.2px var(--tab-border-clr) inset;
@@ -119,6 +120,30 @@
             }
         }
 
+        &:not(.item--pin,.item--focus) {
+            .item__icon,
+            .item__text {
+                transform: translateX(12px);
+            }
+        }
+
+        &:hover {
+            .item__icon,
+            .item__text {
+                transform: translateX(0);
+            }
+        }
+
+        &__icon {
+            transition-duration: .2s;
+            transition-property: transform;
+            transition-timing-function: $timing-function-decelerate;
+        }
+
+        // &__icon, &__text {
+        //     transition-delay: .125s;
+        // }
+
         // --tab-border-clr: var(--b3-border-color-trans);
         // @include darkmode-counterpart {
         //     --tab-border-clr: rgba(from var(--b3-theme-on-background) r g b / .3);

diff --git a/styles/plugins/typewriter.scss b/styles/plugins/typewriter.scss
@@ -50,31 +50,4 @@
 .protyle .protyle-wysiwyg [data-node-id].av .av__row .av__cell#plugin-focus-unique-id,
 .protyle .protyle-wysiwyg [data-node-id].av .av__row .av__cell[data-plugin-focus=true] {
     box-shadow: none;
-}
-
-// @keyframes typewriter-focus {
-//     0% {
-//         outline-width: 0;
-//         outline-offset: -4px;
-//     }
-
-//     20% {
-//         outline-width: 2px;
-//         outline-offset: 0px;
-//     }
-
-//     50% {
-//         outline-width: 4px;
-//         outline-offset: 4px;
-//     }
-
-//     80% {
-//         outline-width: 2px;
-//         outline-offset: 6px;
-//     }
-
-//     100% {
-//         outline-width: 0;
-//         outline-offset: 7px;
-//     }
-// }
+}
diff --git a/theme.css b/theme.css
diff --git a/theme.js b/theme.js