✨ feat: 逆序展示文档流

建议：提供向上滚动加载更多的交互 #59

Author: frostime

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sy-docs-flow",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "type": "module",
   "description": "",
   "repository": "",

plugin.json

@@ -2,7 +2,7 @@
   "name": "sy-docs-flow",
   "author": "frostime",
   "url": "https://github.com/frostime/sy-docs-flow",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "minAppVersion": "3.0.0",
   "backends": ["all"],
   "frontends": ["desktop", "desktop-window", "browser-desktop", "browser-mobile"],

src/components/docs-flow/docs-flow.svelte

@@ -3,7 +3,7 @@
  Author       : Yp Z
  Date         : 2023-07-28 20:49:27
  FilePath     : /src/components/docs-flow/docs-flow.svelte
- LastEditTime : 2024-04-28 14:19:16
+ LastEditTime : 2024-05-08 13:32:03
  Description  : 
 -->
 <script lang="ts">
@@ -156,13 +156,14 @@
         });
     }
 
-    const refresh = () => {
-        loadIdList = [];
-        onConfigChanged();
-        setTimeout(() => {
-            updateLoadIdList();
-        }, 500);
-    };
+    //For refresh button
+    // const refresh = () => {
+    //     loadIdList = [];
+    //     onConfigChanged();
+    //     setTimeout(() => {
+    //         updateLoadIdList();
+    //     }, 500);
+    // };
 
     const onCopyLink = () => {
         const prefix = "siyuan://plugins/sy-docs-flow/open-rule";
@@ -227,8 +228,10 @@
     let svgRefresh: SVGElement;
     const onClickReload = () => {
         svgRefresh.classList.add("fn__rotate");
+        svgRefresh.style.setProperty("background-color", "unset");
         setTimeout(() => {
             svgRefresh.classList.remove("fn__rotate");
+            svgRefresh.style.removeProperty("background-color");
         }, 1000);
         reInit();
         showMessage("Reload completed.");
@@ -250,19 +253,34 @@
             in:fly={{ y: -20, duration: 200 }}
             out:fly={{ y: -20, duration: 200 }}
         >
-            <div>{i18n.docsCnt}: {listDocumentIds.length}</div>
+            <div class="toolbar__item toolbar__item--active">
+                {i18n.docsCnt}: {listDocumentIds.length}
+            </div>
             <span class="fn__space" />
             <svg
                 bind:this={svgRefresh}
-                class="svg-button"
+                class="svg-button ariaLabel"
+                aria-label={i18n.button.reload}
                 on:click={onClickReload} on:keypress={() => {}}
             >
                 <use xlink:href="#iconRefresh"></use>
             </svg>
+            <span class="fn__space" />
+            <svg
+                class="svg-button ariaLabel"
+                aria-label={i18n.button.reverse}
+                on:click={() => {
+                    listDocumentIds = listDocumentIds.reverse();
+                    updateLoadIdList();
+                }}
+                on:keypress={() => {}}
+            >
+                <use xlink:href="#iconScrollVert"></use>
+            </svg>
 
             <div id="space" />
 
-            <label
+            <!-- <label
                 class="b3-label__text"
                 for="enableScroll"
                 style="margin-top: 0px;"
@@ -276,7 +294,7 @@
                 type="checkbox"
                 bind:checked={config.scroll}
                 on:change={refresh}
-            />
+            /> -->
 
             <span class="fn__space" />
 
@@ -365,7 +383,7 @@
         align-items: start;
 
         > section {
-            padding: 0.5rem;
+            padding: 4px 5px;
             width: 40rem;
 
             background-color: var(--b3-theme-surface);
@@ -386,9 +404,11 @@
 
     svg.svg-button {
         width: 1em; height: 1em;
+        padding: 2px;
         &:hover {
             cursor: pointer;
             color: var(--b3-theme-primary);
+            background-color: var(--b3-toolbar-hover);
         }
     }
 

src/i18n/en_US.json

@@ -9,6 +9,8 @@
         "offspringDocument": "Offspring document"
     },
     "button": {
+        "reload": "Reload",
+        "reverse": "Reverse",
         "alterSaved": "Alter these",
         "saved": "Saved rules",
         "openInDocFlow": "Open in docflow",
@@ -28,7 +30,7 @@
             "text": "Fixed height for a single document, scroll to load its internal content. It can save memory resources when dealing with large documents."
         },
         "displayBreadcrumb": {
-            "title": "Display Collapse Bar",
+            "title": "Collapse Bar",
             "text": "Whether to display the breadcrumb for each document target (collapsed/expanded bar)."
         },
         "protyleTitle": {
@@ -52,7 +54,7 @@
             "text": "When dynamic loading is enabled, the number of documents to load each time when scrolling to the edge (up/down)."
         }
     },
-    "docsCnt": "Docs Count",
+    "docsCnt": "Docs",
     "displayBreadcrumb": "Breadcrumb",
     "scrollMode": "Scroll Mode",
     "dynamicLoading": "Dynamic Loading",

src/i18n/zh_CN.json

@@ -9,6 +9,8 @@
         "offspringDocument": "文档树"
     },
     "button": {
+        "reload": "刷新",
+        "reverse": "逆序展示",
         "alterSaved": "更改上述规则",
         "saved": "已保存的规则",
         "openInDocFlow": "文档流中打开",
@@ -28,7 +30,7 @@
             "text": "单个文档固定高度, 滚动加载其内部内容, 在单个文档较大时, 可以节省内存资源"
         },
         "displayBreadcrumb": {
-            "title": "展示折叠栏",
+            "title": "折叠栏",
             "text": "是否展示每个文档目标的地址/折叠/展开栏"
         },
         "protyleTitle": {

src/utils.ts

@@ -3,11 +3,11 @@
  * @Author       : Yp Z
  * @Date         : 2023-07-29 15:41:15
  * @FilePath     : /src/utils.ts
- * @LastEditTime : 2024-04-23 11:54:14
+ * @LastEditTime : 2024-04-29 14:16:17
  * @Description  : 
  */
 import { Dialog, getFrontend } from "siyuan";
-import { getBlockByID, listDocsByPath, readDir } from "./api";
+import { getBlockByID, listDocsByPath } from "./api";
 import zh_CN from "./i18n/zh_CN.json";
 
 export let i18n: typeof zh_CN;
@@ -95,6 +95,6 @@ export const confirmDialog = (title: string, content: string | HTMLElement, conf
 
 export const notebooks: { [key: string]: string } = {};
 for (let notebook of window.siyuan.notebooks) {
-    console.log(notebook);
+    // console.log(notebook);
     notebooks[notebook.id] = notebook.name;
 }