Revert "Improve the sticky layout of Attribute View rows (#9655)"

This reverts commit 5862811.
siyuan-note · Nov 15, 2023 · 7ded2d5 · 7ded2d5
1 parent 5862811
commit 7ded2d5
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 306 deletions.
diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss
@@ -140,12 +140,10 @@
     &--header,
     &--footer {
       background-color: var(--av-background);
-      position: relative;
-      z-index: 2;
     }
 
     &--footer {
-      display: inline-flex;
+      display: flex;
       border-top: 1px solid var(--b3-theme-surface-lighter);
       color: var(--b3-theme-on-surface);
       position: relative;

diff --git a/app/src/protyle/render/av/render.ts b/app/src/protyle/render/av/render.ts
@@ -7,7 +7,6 @@ import {unicode2Emoji} from "../../../emoji";
 import {focusBlock} from "../../util/selection";
 import {isMac} from "../../util/compatibility";
 import {hasClosestByClassName} from "../../util/hasClosest";
-import {avScroll} from "./scroll";
 
 export const avRender = (element: Element, protyle: IProtyle, cb?: () => void) => {
     let avElements: Element[] = [];
@@ -42,6 +41,8 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: () => void) =
                 e.firstElementChild.innerHTML = html;
             }
             const left = e.querySelector(".av__scroll")?.scrollLeft || 0;
+            const headerTransform = (e.querySelector(".av__row--header") as HTMLElement)?.style.transform;
+            const footerTransform = (e.querySelector(".av__row--footer") as HTMLElement)?.style.transform;
             let selectCellId = "";
             const selectCellElement = e.querySelector(".av__cell--select") as HTMLElement;
             if (selectCellElement) {
@@ -221,7 +222,7 @@ ${cell.color ? `color:${cell.color};` : ""}">${text}</div>`;
         <div class="av__counter fn__none"></div>
     </div>
     <div class="av__scroll">
-        <div class="av__body">
+        <div style="float: left;">
             ${tableHTML}
             <div class="av__row--add">
                 <div class="av__colsticky">
@@ -239,7 +240,12 @@ ${cell.color ? `color:${cell.color};` : ""}">${text}</div>`;
                     if (left) {
                         e.querySelector(".av__scroll").scrollLeft = left;
                     }
-                    avScroll(protyle.contentElement, e);
+                    if (headerTransform) {
+                        (e.querySelector(".av__row--header") as HTMLElement).style.transform = headerTransform;
+                    }
+                    if (footerTransform) {
+                        (e.querySelector(".av__row--footer") as HTMLElement).style.transform = footerTransform;
+                    }
                     if (selectCellId) {
                         const newCellElement = e.querySelector(`.av__row[data-id="${selectCellId.split(Constants.ZWSP)[0]}"] .av__cell[data-col-id="${selectCellId.split(Constants.ZWSP)[1]}"]`);
                         if (newCellElement) {

diff --git a/app/src/protyle/render/av/scroll.ts b/app/src/protyle/render/av/scroll.ts
diff --git a/app/src/protyle/scroll/event.ts b/app/src/protyle/scroll/event.ts
@@ -4,7 +4,6 @@ import {fetchPost} from "../../util/fetch";
 import {onGet} from "../util/onGet";
 import {isMobile} from "../../util/functions";
 import {hasClosestBlock, hasClosestByClassName} from "../util/hasClosest";
-import {avScroll} from "../render/av/scroll";
 
 let getIndexTimeout: number;
 export const scrollEvent = (protyle: IProtyle, element: HTMLElement) => {
@@ -22,7 +21,32 @@ export const scrollEvent = (protyle: IProtyle, element: HTMLElement) => {
         }
 
         protyle.wysiwyg.element.querySelectorAll(".av").forEach((item: HTMLElement) => {
-            avScroll(element, item);
+            if (item.dataset.render !== "true") {
+                return;
+            }
+            const scrollRect = item.querySelector(".av__scroll").getBoundingClientRect();
+            const headerElement = item.querySelector(".av__row--header") as HTMLElement;
+            if (headerElement) {
+                const distance = Math.floor(elementRect.top - scrollRect.top);
+                if (distance > 0 && distance < scrollRect.height) {
+                    headerElement.style.transform = `translateY(${distance}px)`;
+                } else {
+                    headerElement.style.transform = "";
+                }
+            }
+            const footerElement = item.querySelector(".av__row--footer") as HTMLElement;
+            if (footerElement) {
+                if (footerElement.querySelector(".av__calc--ashow")) {
+                    const distance = Math.floor(elementRect.bottom - footerElement.parentElement.getBoundingClientRect().bottom);
+                    if (distance < 0 && -distance < scrollRect.height) {
+                        footerElement.style.transform = `translateY(${distance}px)`;
+                    } else {
+                        footerElement.style.transform = "";
+                    }
+                } else {
+                    footerElement.style.transform = "";
+                }
+            }
         });
 
         if (!protyle.element.classList.contains("block__edit") && !isMobile()) {

diff --git a/app/src/protyle/scroll/stickyScroll.ts b/app/src/protyle/scroll/stickyScroll.ts