📱 fix dashboard UI

volatile-static · Apr 4, 2024 · ed7ef03 · ed7ef03
1 parent 970fea8
commit ed7ef03
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 57 deletions.
diff --git a/src/bootstrap/modules/sidebar.ts b/src/bootstrap/modules/sidebar.ts
@@ -1,4 +1,5 @@
 import { config } from "../../../package.json";
+import { G } from "./global";
 
 const dashboards: { [id: number]: HTMLIFrameElement } = {};
 
@@ -23,7 +24,7 @@ export function registerPanels() {
                 (target as Document).defaultView!.postMessage(message, '*'), true);
         addon.log(message, iframe.contentDocument?.readyState);
     }
-    const tabs = ['progress', 'page', 'date', 'group', 'relation', 'timeline'];
+    const tabs = ['progress', 'page', 'date', 'group', /*'relation',*/ 'timeline'];
 
     if (!Zotero.ItemPaneManager?.registerSection)
         addon.log(new Error('ItemPaneManager not found'));
@@ -55,11 +56,22 @@ export function registerPanels() {
                 attributes: { src: 'chrome://chartero/content/dashboard/index.html' },
                 styles: { height: '100%', width: '100%' },
                 enableElementRecord: false,
-            }, args.body) as HTMLIFrameElement;
+            }, args.body) as HTMLIFrameElement,
+                ResizeObserver = G('ResizeObserver'),
+                observer = new ResizeObserver(
+                    ([entry]) => args.body.style.height = `${entry.contentRect.height}px`
+                );
             (iframe.contentWindow as any).wrappedJSObject.addon = addon;
-            args.body.style.height = '600px';
+            iframe.addEventListener('load', ({target}) => {
+                observer.observe((target as Document).documentElement);
+            }, true);
+        },
+        onRender: args => {
+            post(args.body, 'render');
+            if (args.item.libraryID == Zotero.Libraries.userLibraryID)
+                args.setSectionButtonStatus('group', { hidden: true });
+            args.setSectionButtonStatus('progress', { disabled: true });
         },
-        onRender: args => post(args.body, 'render'),
         onItemChange: args => post(args.body, { id: args.item.id }),
     });
 }

diff --git a/src/vue/dashboard/components/network.vue b/src/vue/dashboard/components/network.vue
@@ -52,13 +52,12 @@ export default defineComponent({
             visitedNodes: new Set<number>(),
             cachedTree: new Tree(this.topLevel?.id),
             svgStr: Zotero.File.getResource(
-                'chrome://chartero/content/icons/star.svg'
+                'resource://chartero/icons/star.svg'
             )
         }
     },
     computed: {
         options() {
-            // addon.log('network options', JSON.parse(JSON.stringify(this.graphNodes)));
             return Highcharts.merge(this.theme, this.chartOpts);
         },
         chartOpts() {

diff --git a/src/vue/dashboard/index.html b/src/vue/dashboard/index.html
@@ -64,13 +64,6 @@
     import App from './main.vue';
     import 'tdesign-vue-next/es/style/index.css';
 
-    function switchTheme(e) {
-      document.documentElement.setAttribute('theme-mode', e.matches ? 'dark' : 'light');
-    }
-    const darkQuery = matchMedia('(prefers-color-scheme: dark)');
-    darkQuery.addListener(switchTheme);
-    switchTheme(darkQuery);
-
     function onMsg({ data }) {
       if (data == 'render')
         try {

diff --git a/src/vue/dashboard/main.vue b/src/vue/dashboard/main.vue
@@ -1,36 +1,38 @@
 <template>
-  <t-space v-show="activeTab == SectionTab.Progress" align="center" size="small" class="progress-space">
-    <t-tooltip :content="locale.readingProgressTip" :show-arrow="false">
-      <t-progress theme="circle" size="small" :percentage="readingProgress" />
-    </t-tooltip>
-    <div class="progress-info">
-      <span>{{
-        `🔖 ${locale.progressLabel.read} ${readPages} ${locale.pages} / ${locale.progressLabel.total}
-                                            ${numPages} ${locale.pages}`
-      }}</span>
-      <span>{{
-        `📚 ${numAttachment} ${locale.progressLabel.PDFs} / ${locale.progressLabel.total} ${attachmentSize}
-                        MB`
-      }}</span>
-      <span>📝 {{ noteNum }} {{ locale.progressLabel.notes }} /
-        {{ locale.progressLabel.total }} {{ noteWords }}
-        {{ locale.progressLabel.words }}</span>
-    </div>
-    <template #separator>
-      <t-divider layout="vertical" />
-    </template>
-  </t-space>
+  <div v-show="activeTab == SectionTab.Progress">
+    <t-space align="center" size="small" class="progress-space">
+      <t-tooltip :content="locale.readingProgressTip" :show-arrow="false">
+        <t-progress theme="circle" size="small" :percentage="readingProgress" />
+      </t-tooltip>
+      <div class="progress-info">
+        <span>{{
+          `🔖 ${locale.progressLabel.read} ${readPages} ${locale.pages} / ${locale.progressLabel.total}
+                    ${numPages} ${locale.pages}`
+        }}</span>
+        <span>{{
+          `📚 ${numAttachment} ${locale.progressLabel.PDFs} / ${locale.progressLabel.total} ${attachmentSize}
+                    MB`
+        }}</span>
+        <span>📝 {{ noteNum }} {{ locale.progressLabel.notes }} /
+          {{ locale.progressLabel.total }} {{ noteWords }}
+          {{ locale.progressLabel.words }}</span>
+      </div>
+      <template #separator>
+        <t-divider layout="vertical" />
+      </template>
+    </t-space>
+  </div>
 
   <PageTime v-show="activeTab == SectionTab.Page" :history="itemHistory" :theme="chartTheme" />
 
   <DateTime v-show="activeTab == SectionTab.Date" :history="itemHistory" :theme="chartTheme" />
 
   <UserPie v-show="activeTab == SectionTab.Group" :history="itemHistory" :theme="chartTheme" />
 
-  <!-- <Network
-    v-show="activeTab == SectionTab.Relation"
-    :top-level="topLevel" :theme="chartTheme" :item-i-d="topLevel?.id"
-  /> -->
+  <Network
+    v-show="activeTab == SectionTab.Relation" :top-level="topLevel" :theme="chartTheme"
+    :item-i-d="topLevel?.id"
+  />
 
   <TimeLine v-show="activeTab == SectionTab.Timeline" :history="itemHistory" />
 </template>
@@ -117,11 +119,13 @@ export default {
                     this.item && addon.history.getByAttachment(this.item);
                 // addon.log('itemHistory: ', his);
                 return his ? [his] : [];
-            
         },
     },
     mounted() {
-        addon.log('Dashboard mounted');
+        const darkMedia = matchMedia('(prefers-color-scheme: dark)');
+        darkMedia.addEventListener('change', e => this.switchTheme(e.matches));
+        this.switchTheme(darkMedia.matches);
+
         addEventListener('message', e => {
             if (typeof e.data.tab == 'string') {
                 this.activeTab = e.data.tab;
@@ -135,7 +139,6 @@ export default {
             this.item = Zotero.Items.get(e.data.id); // 获取传入的条目
             if (addon.getPref('enableRealTimeDashboard'))  // 强制刷新
                 this.realtimeUpdating = !this.realtimeUpdating;
-            this.updateTheme();
             nextTick(() => {
                 try {
                     this.updateNotes();
@@ -148,19 +151,15 @@ export default {
         });
     },
     methods: {
-        switchTheme() {
-            // this.dark = !this.dark;
-            // if (this.dark)
-            //     document.documentElement.setAttribute('theme-mode', 'dark');
-            // else
-            //     document.documentElement.removeAttribute('theme-mode');
-            // document
-            //     .querySelectorAll('div.highcharts-data-table')
-            //     .forEach(el => el.remove());
-        },
-        updateTheme() {
-            if (!window.matchMedia('(prefers-color-scheme: dark)'))
-                this.switchTheme();
+        switchTheme(dark: boolean) {
+            this.dark = dark;
+            if (dark)
+                document.documentElement.setAttribute('theme-mode', 'dark');
+            else
+                document.documentElement.removeAttribute('theme-mode');
+            document
+                .querySelectorAll('div.highcharts-data-table')
+                .forEach(el => el.remove());
         },
         // 统计笔记信息
         updateNotes() {

diff --git a/src/vue/test/dummy/Zotero.ts b/src/vue/test/dummy/Zotero.ts
@@ -83,6 +83,9 @@ export default class Zotero {
                     return fetchSync(`Zotero.File.pathToFile('${p}').${prop}`);
                 }
             });
+        },
+        getResource(path: string) {
+            return fetchSync(`Zotero.File.getResource('${path}')`);
         }
     };
     greenfrog = {};

diff --git a/src/vue/test/index.html b/src/vue/test/index.html
@@ -14,8 +14,8 @@
     import { createApp } from 'vue';
     import App from './main.vue';
     import 'tdesign-vue-next/es/style/index.css';
-    import 'highcharts/css/highcharts.css';
-    import '@highcharts/dashboards/css/dashboards.css';
+    // import 'highcharts/css/highcharts.css';
+    // import '@highcharts/dashboards/css/dashboards.css';
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     import HighchartsVue from 'highcharts-vue';
     try {

diff --git a/src/vue/test/main.vue b/src/vue/test/main.vue
@@ -15,7 +15,7 @@ export default {
     data() {
         return {
             theme: DarkUnicaTheme,
-            selectedItems: fetchSync('ZoteroPane.getCollectionTreeRow().ref.getChildItems(true)') as number[],
+            selectedItems: []//fetchSync('ZoteroPane.getCollectionTreeRow().ref.getChildItems(true)') as number[],
         };
     },
     computed: {