feat(core): adjust open tab shortcut and add shortcut for multi selec…

…t docs
toeverything · Mar 26, 2024 · 79a3586 · 79a3586
1 parent 669ca32
commit 79a3586
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 32 deletions.
diff --git a/packages/frontend/core/src/components/page-list/collections/collection-list-item.tsx b/packages/frontend/core/src/components/page-list/collections/collection-list-item.tsx
@@ -172,15 +172,7 @@ function CollectionListItemWrapper({
   children,
   draggable,
 }: collectionListWrapperProps) {
-  const handleClick = useCallback(
-    (e: React.MouseEvent) => {
-      if (onClick) {
-        stopPropagation(e);
-        onClick();
-      }
-    },
-    [onClick]
-  );
+  const handleClick = useCallback(() => onClick?.(), [onClick]);
 
   const commonProps = useMemo(
     () => ({

diff --git a/packages/frontend/core/src/components/page-list/docs/page-list-item.tsx b/packages/frontend/core/src/components/page-list/docs/page-list-item.tsx
@@ -237,15 +237,7 @@ function PageListItemWrapper({
   children,
   draggable,
 }: PageListWrapperProps) {
-  const handleClick = useCallback(
-    (e: React.MouseEvent) => {
-      if (onClick) {
-        stopPropagation(e);
-        onClick();
-      }
-    },
-    [onClick]
-  );
+  const handleClick = useCallback(() => onClick?.(), [onClick]);
 
   const commonProps = useMemo(
     () => ({

diff --git a/packages/frontend/core/src/components/page-list/group-definitions.css.ts b/packages/frontend/core/src/components/page-list/group-definitions.css.ts
@@ -25,6 +25,7 @@ export const pageCount = style({
   fontSize: cssVar('fontBase'),
   lineHeight: '1.6em',
   color: cssVar('textSecondaryColor'),
+  marginRight: '12px',
 });
 
 export const favouritedIcon = style({

diff --git a/packages/frontend/core/src/components/page-list/list.tsx b/packages/frontend/core/src/components/page-list/list.tsx
@@ -67,6 +67,7 @@ const useItemSelectionStateEffect = () => {
           return;
         }
         setSelectionActive(false);
+        selectionState.onSelectedIdsChange?.([]);
       };
 
       const escHandler = (e: KeyboardEvent) => {
@@ -75,6 +76,7 @@ const useItemSelectionStateEffect = () => {
         }
         if (e.key === 'Escape') {
           setSelectionActive(false);
+          selectionState.onSelectedIdsChange?.([]);
         }
       };
 
@@ -87,6 +89,31 @@ const useItemSelectionStateEffect = () => {
       };
     }
     return;
+  }, [
+    selectionState,
+    selectionState.selectable,
+    selectionState.selectionActive,
+    setSelectionActive,
+  ]);
+
+  useEffect(() => {
+    if (
+      selectionState.selectable === 'toggle' &&
+      !selectionState.selectionActive
+    ) {
+      const clickHandler = (e: MouseEvent) => {
+        if (!(e.ctrlKey || e.metaKey)) {
+          return;
+        }
+        setSelectionActive(true);
+        e.preventDefault();
+      };
+      document.addEventListener('click', clickHandler);
+      return () => {
+        document.removeEventListener('click', clickHandler);
+      };
+    }
+    return;
   }, [
     selectionState.selectable,
     selectionState.selectionActive,

diff --git a/packages/frontend/core/src/components/page-list/page-group.tsx b/packages/frontend/core/src/components/page-list/page-group.tsx
@@ -329,7 +329,7 @@ function pageMetaToListItemProp(
     createDate: new Date(item.createDate),
     updatedDate: item.updatedDate ? new Date(item.updatedDate) : undefined,
     to: props.rowAsLink && !props.selectable ? `/${item.id}` : undefined,
-    onClick: props.selectable ? toggleSelection : undefined,
+    onClick: toggleSelection,
     icon: (
       <UnifiedPageIcon
         id={item.id}
@@ -378,7 +378,7 @@ function collectionMetaToListItemProp(
       props.rowAsLink && !props.selectable
         ? `/collection/${item.id}`
         : undefined,
-    onClick: props.selectable ? toggleSelection : undefined,
+    onClick: toggleSelection,
     icon: <ViewLayersIcon />,
     operations: props.operationsRenderer?.(item),
     selectable: props.selectable,
@@ -412,7 +412,7 @@ function tagMetaToListItemProp(
     tagId: item.id,
     title: item.title,
     to: props.rowAsLink && !props.selectable ? `/tag/${item.id}` : undefined,
-    onClick: props.selectable ? toggleSelection : undefined,
+    onClick: toggleSelection,
     color: item.color,
     pageCount: item.pageCount,
     operations: props.operationsRenderer?.(item),

diff --git a/packages/frontend/core/src/components/page-list/tags/tag-list-item.tsx b/packages/frontend/core/src/components/page-list/tags/tag-list-item.tsx
@@ -165,15 +165,7 @@ function TagListItemWrapper({
   children,
   draggable,
 }: TagListWrapperProps) {
-  const handleClick = useCallback(
-    (e: React.MouseEvent) => {
-      if (onClick) {
-        stopPropagation(e);
-        onClick();
-      }
-    },
-    [onClick]
-  );
+  const handleClick = useCallback(() => onClick?.(), [onClick]);
 
   const commonProps = useMemo(
     () => ({

diff --git a/packages/frontend/core/src/modules/workbench/view/workbench-link.tsx b/packages/frontend/core/src/modules/workbench/view/workbench-link.tsx
@@ -19,9 +19,13 @@ export const WorkbenchLink = ({
   const handleClick = useCallback(
     (event: React.MouseEvent<HTMLAnchorElement>) => {
       event.preventDefault();
-      event.stopPropagation();
 
-      if (event.ctrlKey || event.metaKey) {
+      // use ctrl or shift key to multi select page items in page list
+      if (event.ctrlKey || event.metaKey || event.shiftKey) {
+        return onClick?.(event);
+      }
+
+      if (event.altKey) {
         if (appSettings.enableMultiView && environment.isDesktop) {
           workbench.open(to, { at: 'beside' });
         } else if (!environment.isDesktop) {
@@ -38,6 +42,7 @@ export const WorkbenchLink = ({
     },
     [appSettings.enableMultiView, basename, onClick, to, workbench]
   );
+
   return (
     <a {...other} href="#" onClick={handleClick}>
       {children}