feat(Modal): Show file changes before performing sync.

Author: walkthunder

src/loadingModal.ts

@@ -0,0 +1,65 @@
+import { App, Modal } from "obsidian";
+import type InvioPlugin from "./main"; // unavoidable
+import type { TransItemType } from "./i18n";
+import svg from './utils/svg';
+
+export class LoadingModal extends Modal {
+  readonly plugin: InvioPlugin;
+  constructor(app: App, plugin: InvioPlugin) {
+    super(app);
+    this.plugin = plugin;
+  }
+
+  onOpen() {
+    let { contentEl } = this;
+    const t = (x: TransItemType, vars?: any) => {
+      return this.plugin.i18n.t(x, vars);
+    };
+
+    contentEl.createEl("h2", {
+      text: 'Checking Sync Files'
+    });
+
+    const loadingContainer = contentEl.createDiv('loading-container');
+
+    const loadingSVG = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+      width="36px" height="45px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
+      <rect x="0" y="13" width="4" height="5" fill="currentColor">
+        <animate attributeName="height" attributeType="XML"
+          values="5;21;5" 
+          begin="0s" dur="0.6s" repeatCount="indefinite" />
+        <animate attributeName="y" attributeType="XML"
+          values="13; 5; 13"
+          begin="0s" dur="0.6s" repeatCount="indefinite" />
+      </rect>
+      <rect x="10" y="13" width="4" height="5" fill="currentColor">
+        <animate attributeName="height" attributeType="XML"
+          values="5;21;5" 
+          begin="0.15s" dur="0.6s" repeatCount="indefinite" />
+        <animate attributeName="y" attributeType="XML"
+          values="13; 5; 13"
+          begin="0.15s" dur="0.6s" repeatCount="indefinite" />
+      </rect>
+      <rect x="20" y="13" width="4" height="5" fill="currentColor">
+        <animate attributeName="height" attributeType="XML"
+          values="5;21;5" 
+          begin="0.3s" dur="0.6s" repeatCount="indefinite" />
+        <animate attributeName="y" attributeType="XML"
+          values="13; 5; 13"
+          begin="0.3s" dur="0.6s" repeatCount="indefinite" />
+      </rect>
+    </svg>`;
+    let content = loadingSVG;
+    content = content.replace(/(\r\n|\n|\r)/gm, '');
+    content = content.replace(/>\s+</gm, '><');
+    content = svg.extract(content);
+    content = svg.setFontSize(content, 28);
+
+    loadingContainer.innerHTML = content;
+  }
+
+  onClose() {
+    let { contentEl } = this;
+    contentEl.empty();
+  }
+}

src/main.ts

@@ -47,6 +47,7 @@ import type { LangType, LangTypeAndAuto, TransItemType } from "./i18n";
 import { DeletionOnRemote, MetadataOnRemote } from "./metadataOnRemote";
 import { SyncAlgoV2Modal } from "./syncAlgoV2Notice";
 import { TouchedPlanModel } from './touchedPlanModel';
+import { LoadingModal } from './loadingModal';
 
 import { applyLogWriterInplace, log } from "./moreOnLog";
 import AggregateError from "aggregate-error";
@@ -183,6 +184,11 @@ export default class InvioPlugin extends Plugin {
           maxSteps: `${MAX_STEPS}`,
         })
       );
+
+
+      const loading = new LoadingModal(this.app, this);
+      loading.open();
+
       this.syncStatus = "getting_remote_files_list";
       const self = this;
       const client = new RemoteClient(
@@ -285,6 +291,8 @@ export default class InvioPlugin extends Plugin {
       log.info('plan.mixedStates: ', plan.mixedStates, touchedFileMap); // for debugging
 
       try {
+        loading.close();
+
         await new Promise((resolve, reject) => {
           const touchedPlanModel = new TouchedPlanModel(this.app, this, touchedFileMap, (pub: boolean) => {
             log.info('user confirmed: ', pub);

src/touchedPlanModel.ts

@@ -1,15 +1,16 @@
 import { App, Modal, Notice, PluginSettingTab, Setting } from "obsidian";
 import type InvioPlugin from "./main"; // unavoidable
 import type { TransItemType } from "./i18n";
+import { createElement, FilePlus2, Trash } from "lucide";
 
 import { log } from "./moreOnLog";
 import { FileOrFolderMixedState } from "./baseTypes";
 
 export class TouchedPlanModel extends Modal {
   agree: boolean;
   readonly plugin: InvioPlugin;
-  hook: (agree: boolean) => void;
   readonly files: Record<string, FileOrFolderMixedState>;
+  hook: (agree: boolean) => void;
   constructor(app: App, plugin: InvioPlugin, fileMap: Record<string, FileOrFolderMixedState>, cb: (agree: boolean) => void) {
     super(app);
     this.plugin = plugin;
@@ -51,17 +52,28 @@ export class TouchedPlanModel extends Modal {
     });
 
     new Setting(contentEl)
-      .setDesc('在做同步操作之前，请检查文件变更列表，确认所有变更是否符合预期')
+      .setDesc('Please check the file changes list to confirm that all changes are as expected.')
 
     if (toRemoteFiles?.length > 0) {
       contentEl.createEl("h4", {
         text: 'Remote files to be modifed'
       });
       const ulRemote = contentEl.createEl("ul");
       toRemoteFiles.forEach((val) => {
-        ulRemote.createEl("li", {
-            text: val.key + ' - ' + (val.decision === 'uploadLocalToRemote' ? '➕' : '➖'),
+        const li = ulRemote.createEl("li", {
+            text: val.key,
+            cls: 'file-item-action'
           });
+          if (val.decision === 'uploadLocalToRemote') {
+            const iconSvgSyncPending = createElement(FilePlus2);
+            iconSvgSyncPending.addClass('file-item-action-icon')
+            li.appendChild(iconSvgSyncPending)
+          } else {
+            Trash
+            const iconSvgTrash = createElement(Trash);
+            iconSvgTrash.addClass('file-item-action-icon')
+            li.appendChild(iconSvgTrash)
+          }
         });
     }
 

styles.css

@@ -122,4 +122,30 @@
 .settings-pub-header {
   display: block;
   margin-bottom: 15px;
+}
+
+.loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 68px;
+  width: 100%;
+}
+
+.hide-loading-container {
+  display: none;
+}
+
+.file-item-action {
+  margin: 8px auto;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.file-item-action-icon {
+  font-size: var(--font-text-size);
+  width: var(--font-text-size);
+  height: var(--font-text-size);
+  margin: 0 8px;
 }