feat(core): mobile renderer for explorer

toeverything · Aug 27, 2024 · 85ec7a1 · 85ec7a1
1 parent 10a066a
commit 85ec7a1
Show file tree

Hide file tree

Showing 8 changed files with 207 additions and 79 deletions.
diff --git a/packages/frontend/core/src/components/app-sidebar/category-divider/index.css.ts b/packages/frontend/core/src/components/app-sidebar/category-divider/index.css.ts
@@ -64,3 +64,30 @@ export const collapseIcon = style({
     },
   },
 });
+
+//  ------------- mobile -------------
+export const mobileRoot = style([
+  root,
+  {
+    height: 25,
+    padding: '0 16px',
+    selectors: {
+      '&[data-collapsible="true"]:hover': {
+        backgroundColor: 'transparent',
+      },
+      '&[data-collapsible="true"]:active': {
+        backgroundColor: cssVarV2('layer/background/hoverOverlay'),
+      },
+    },
+  },
+]);
+export const mobileLabel = style([
+  label,
+  {
+    color: cssVarV2('text/primary'),
+    fontSize: 20,
+    lineHeight: '25px',
+    letterSpacing: -0.45,
+    fontWeight: 400,
+  },
+]);
diff --git a/packages/frontend/core/src/components/app-sidebar/category-divider/index.tsx b/packages/frontend/core/src/components/app-sidebar/category-divider/index.tsx
@@ -9,6 +9,7 @@ export type CategoryDividerProps = PropsWithChildren<
     label: string;
     className?: string;
     collapsed?: boolean;
+    mobile?: boolean;
     setCollapsed?: (collapsed: boolean) => void;
   } & {
     [key: `data-${string}`]: unknown;
@@ -22,6 +23,7 @@ export const CategoryDivider = forwardRef(
       children,
       className,
       collapsed,
+      mobile,
       setCollapsed,
       ...otherProps
     }: CategoryDividerProps,
@@ -31,14 +33,15 @@ export const CategoryDivider = forwardRef(
 
     return (
       <div
-        className={clsx([styles.root, className])}
+        className={clsx(mobile ? styles.mobileRoot : styles.root, className)}
         ref={ref}
         onClick={() => setCollapsed?.(!collapsed)}
+        data-mobile={mobile}
         data-collapsed={collapsed}
         data-collapsible={collapsible}
         {...otherProps}
       >
-        <div className={styles.label}>
+        <div className={mobile ? styles.mobileLabel : styles.label}>
           {label}
           {collapsible ? (
             <ToggleCollapseIcon

diff --git a/packages/frontend/core/src/modules/explorer/index.ts b/packages/frontend/core/src/modules/explorer/index.ts
@@ -8,6 +8,7 @@ import { ExplorerSection } from './entities/explore-section';
 import { ExplorerService } from './services/explorer';
 export { ExplorerService } from './services/explorer';
 export type { CollapsibleSectionName } from './types';
+export { ExplorerMobileContext } from './views/mobile.context';
 export { ExplorerCollections } from './views/sections/collections';
 export { ExplorerFavorites } from './views/sections/favorites';
 export { ExplorerMigrationFavorites } from './views/sections/migration-favorites';

diff --git a/packages/frontend/core/src/modules/explorer/views/layouts/collapsible-section.css.ts b/packages/frontend/core/src/modules/explorer/views/layouts/collapsible-section.css.ts
@@ -13,3 +13,8 @@ export const header = style({
     },
   },
 });
+
+// mobile
+export const mobileContent = style({
+  paddingTop: 8,
+});
diff --git a/packages/frontend/core/src/modules/explorer/views/layouts/collapsible-section.tsx b/packages/frontend/core/src/modules/explorer/views/layouts/collapsible-section.tsx
@@ -7,11 +7,18 @@ import {
   type ReactNode,
   type RefObject,
   useCallback,
+  useContext,
 } from 'react';
 
 import { ExplorerService } from '../../services/explorer';
 import type { CollapsibleSectionName } from '../../types';
-import { content, header, root } from './collapsible-section.css';
+import { ExplorerMobileContext } from '../mobile.context';
+import {
+  content,
+  header,
+  mobileContent,
+  root,
+} from './collapsible-section.css';
 
 interface CollapsibleSectionProps extends PropsWithChildren {
   name: CollapsibleSectionName;
@@ -43,6 +50,7 @@ export const CollapsibleSection = ({
 
   contentClassName,
 }: CollapsibleSectionProps) => {
+  const mobile = useContext(ExplorerMobileContext);
   const section = useService(ExplorerService).sections[name];
 
   const collapsed = useLiveData(section.collapsed$);
@@ -62,16 +70,19 @@ export const CollapsibleSection = ({
       data-testid={testId}
     >
       <CategoryDivider
+        mobile={mobile}
         data-testid={headerTestId}
         label={title}
         setCollapsed={setCollapsed}
         collapsed={collapsed}
         ref={headerRef}
         className={clsx(header, headerClassName)}
       >
-        {actions}
+        {mobile ? null : actions}
       </CategoryDivider>
-      <Collapsible.Content className={clsx(content, contentClassName)}>
+      <Collapsible.Content
+        className={clsx(mobile ? mobileContent : content, contentClassName)}
+      >
         {children}
       </Collapsible.Content>
     </Collapsible.Root>

diff --git a/packages/frontend/core/src/modules/explorer/views/mobile.context.ts b/packages/frontend/core/src/modules/explorer/views/mobile.context.ts
@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+
+/**
+ * To enable mobile manually
+ * > Using `environment.isMobile` directly will affect current web entry on mobile
+ * > So we control it manually for now
+ */
+export const ExplorerMobileContext = createContext(false);
diff --git a/packages/frontend/core/src/modules/explorer/views/tree/node.css.ts b/packages/frontend/core/src/modules/explorer/views/tree/node.css.ts
@@ -36,6 +36,14 @@ export const itemRoot = style({
     },
   },
 });
+export const itemMain = style({
+  display: 'flex',
+  alignItems: 'center',
+  width: 0,
+  flex: 1,
+  position: 'relative',
+  gap: 12,
+});
 export const itemRenameAnchor = style({
   pointerEvents: 'none',
   position: 'absolute',
@@ -55,31 +63,26 @@ export const itemContent = style({
 export const postfix = style({
   display: 'flex',
   alignItems: 'center',
-  right: '4px',
+  right: 0,
   position: 'absolute',
   opacity: 0,
   pointerEvents: 'none',
   selectors: {
     [`${itemRoot}:hover &`]: {
-      justifySelf: 'flex-end',
-      position: 'initial',
       opacity: 1,
-      pointerEvents: 'all',
+      pointerEvents: 'initial',
+      position: 'initial',
     },
   },
 });
-export const icon = style({
-  color: cssVarV2('icon/primary'),
-  fontSize: '20px',
-});
-export const emojiIcon = style({
-  width: '20px',
-  height: '20px',
+export const iconContainer = style({
   display: 'flex',
-  justifyContent: 'center',
+  alignContent: 'center',
   alignItems: 'center',
+  width: 20,
+  height: 20,
   color: cssVarV2('icon/primary'),
-  fontSize: cssVar('--affine-font-sm'),
+  fontSize: 20,
 });
 export const collapsedIconContainer = style({
   width: '16px',
@@ -103,13 +106,6 @@ export const collapsedIconContainer = style({
     },
   },
 });
-export const iconsContainer = style({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'flex-start',
-  width: '44px',
-  flexShrink: 0,
-});
 export const collapsedIcon = style({
   transition: 'transform 0.2s ease-in-out',
   selectors: {
@@ -182,3 +178,67 @@ export const draggedOverEffect = style({
       },
   },
 });
+
+// ---------- mobile ----------
+export const mobileItemRoot = style([
+  itemRoot,
+  {
+    padding: '8px',
+    borderRadius: 0,
+    flexDirection: 'row-reverse',
+    gap: 12,
+    selectors: {
+      '&:hover': {
+        background: 'transparent',
+      },
+      '&:active': {
+        background: cssVar('hoverColor'),
+      },
+      '&[data-active="true"]': {
+        background: 'transparent',
+      },
+    },
+
+    ':after': {
+      content: '',
+      width: `calc(100% + ${levelIndent})`,
+      height: 0.5,
+      background: cssVar('borderColor'),
+      bottom: 0,
+      position: 'absolute',
+      right: 0,
+    },
+  },
+]);
+export const mobileItemMain = style([itemMain, {}]);
+
+export const mobileIconContainer = style([
+  iconContainer,
+  {
+    width: 32,
+    height: 32,
+    fontSize: 24,
+  },
+]);
+
+export const mobileCollapsedIconContainer = style([
+  collapsedIconContainer,
+  {
+    fontSize: 16,
+  },
+]);
+export const mobileItemContent = style([
+  itemContent,
+  {
+    fontSize: 17,
+    lineHeight: '22px',
+    letterSpacing: -0.43,
+    fontWeight: 400,
+  },
+]);
+export const mobileContentContainer = style([
+  contentContainer,
+  {
+    marginTop: 0,
+  },
+]);