feat: support quick open task panel

ahonn · Jun 6, 2022 · c648e2f · c648e2f
1 parent 7e32df3
commit c648e2f
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 18 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,5 @@
 import 'virtual:windi.css';
-import React, { useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
 import dayjs from 'dayjs';
 import advancedFormat from 'dayjs/plugin/advancedFormat';
@@ -35,6 +35,16 @@ function App() {
     if (visible) {
       refresh();
       inputRef.current?.focus();
+
+      const keydownHandler = (ev: KeyboardEvent) => {
+        if (ev.key === 'Escape') {
+          window.logseq.hideMainUI();
+        }
+      };
+      document.addEventListener('keydown', keydownHandler);
+      return () => {
+        document.removeEventListener('keydown', keydownHandler);
+      };
     }
   }, [visible]);
 

diff --git a/src/hooks/useTaskManager.ts b/src/hooks/useTaskManager.ts
@@ -27,7 +27,6 @@ const useTaskManager = (task: TaskEntityObject) => {
   }, [uuid]);
 
   const setMarker = useCallback(async (newMarker: TaskMarker) => {
-    console.log('setMarker', newMarker);
     const nextContent = task.rawContent.replace(new RegExp(`^${marker}`), newMarker);
     await window.logseq.Editor.updateBlock(uuid, nextContent);
     refresh();

diff --git a/src/hooks/useUserConfigs.tsx b/src/hooks/useUserConfigs.tsx
@@ -27,8 +27,6 @@ const useUserConfigs = () => {
   const visible = useAppVisible();
   const [configs, setConfigs] = useState<Partial<AppUserConfigs>>(DEFAULT_USER_CONFIGS);
 
-  console.log(configs);
-
   useEffect(() => {
     if (visible) {
       window.logseq.App.getUserConfigs().then((configs) => {

diff --git a/src/main.tsx b/src/main.tsx
@@ -4,21 +4,23 @@ import * as ReactDOM from 'react-dom/client';
 import { logseq as plugin } from '../package.json';
 import App from './App';
 
+async function openTaskPanel() {
+  const rect = await logseq.App.queryElementRect('#' + plugin.id);
+  const taskPanel = document.querySelector('#' + plugin.id)!;
+
+  // @ts-ignore
+  Object.assign(taskPanel.style, {
+    position: 'fixed',
+    top: `${rect.top + 40}px`,
+    left: rect.left + 'px',
+  });
+
+  logseq.showMainUI();
+}
+
 function createModel() {
   return {
-    openTaskPanel: (e: any) => {
-      const { rect } = e;
-      const taskPanel = document.querySelector('#' + plugin.id)!;
-
-      // @ts-ignore
-      Object.assign(taskPanel.style, {
-        position: 'fixed',
-        top: `${rect.top + 40}px`,
-        left: rect.left + 'px',
-      });
-
-      logseq.showMainUI();
-    },
+    openTaskPanel,
   };
 }
 
@@ -32,12 +34,29 @@ function main() {
     logseq.App.registerUIItem('toolbar', {
       key: plugin.id,
       template: `
-        <a data-on-click="openTaskPanel" data-rect class="button">
+        <a id="${plugin.id}" data-on-click="openTaskPanel" data-rect class="button">
           <i class="ti ti-checkbox" style="font-size: 20px"></i>
         </a>
       `,
     });
 
+    logseq.App.registerCommandPalette(
+      {
+        key: 'logseq-plugin-todo',
+        label: 'Quick open task panel',
+        keybinding: {
+          binding: "mod+shift+t",
+        },
+      },
+      () => {
+        if (logseq.isMainUIVisible) {
+          logseq.hideMainUI();
+        } else {
+          openTaskPanel();
+        }
+      },
+    );
+
     const root = ReactDOM.createRoot(document.getElementById('app')!);
     root.render(
       <React.StrictMode>