fix(mobile): adjust mobile ui (toeverything#8112)

close AF-1274, AF-1320, AF-1333
HMB-research · Sep 6, 2024 · 87ed358 · 87ed358
1 parent 4de9d94
commit 87ed358
Show file tree

Hide file tree

Showing 12 changed files with 84 additions and 34 deletions.
diff --git a/packages/frontend/component/src/ui/date-picker/calendar/day-picker.tsx b/packages/frontend/component/src/ui/date-picker/calendar/day-picker.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import dayjs from 'dayjs';
 import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
 
@@ -23,6 +24,8 @@ export const DayPicker = memo(function DayPicker(
     onChange,
     onCursorChange,
     onModeChange,
+    monthHeaderCellClassName,
+    monthBodyCellClassName,
   } = props;
 
   const matrix = useMemo(() => {
@@ -170,18 +173,27 @@ export const DayPicker = memo(function DayPicker(
         {/* weekDays */}
         <div className={styles.monthViewRow}>
           {weekDays.split(',').map(day => (
-            <div key={day} className={styles.monthViewHeaderCell}>
+            <div
+              key={day}
+              className={clsx(
+                styles.monthViewHeaderCell,
+                monthHeaderCellClassName
+              )}
+            >
               {day}
             </div>
           ))}
         </div>
         {/* Weeks in month */}
         {matrix.map((week, i) => {
           return (
-            <div key={i} className={styles.monthViewRow}>
+            <div key={i} className={clsx(styles.monthViewRow)}>
               {week.map((cell, j) => (
                 <div
-                  className={styles.monthViewBodyCell}
+                  className={clsx(
+                    styles.monthViewBodyCell,
+                    monthBodyCellClassName
+                  )}
                   key={j}
                   onClick={() => onChange?.(cell.date.format(format))}
                 >
@@ -197,7 +209,15 @@ export const DayPicker = memo(function DayPicker(
         })}
       </main>
     ),
-    [customDayRenderer, format, matrix, onChange, weekDays]
+    [
+      customDayRenderer,
+      format,
+      matrix,
+      monthBodyCellClassName,
+      monthHeaderCellClassName,
+      onChange,
+      weekDays,
+    ]
   );
 
   return (

diff --git a/packages/frontend/component/src/ui/date-picker/calendar/types.tsx b/packages/frontend/component/src/ui/date-picker/calendar/types.tsx
@@ -50,6 +50,10 @@ export interface DatePickerProps {
    * when date is clicked
    */
   onChange?: (value: string) => void;
+
+  // style customizations
+  monthHeaderCellClassName?: string;
+  monthBodyCellClassName?: string;
 }
 
 /**

diff --git a/packages/frontend/component/src/ui/menu/menu.types.ts b/packages/frontend/component/src/ui/menu/menu.types.ts
@@ -20,15 +20,18 @@ export interface MenuProps {
 export interface MenuItemProps
   extends Omit<MenuItemPropsPrimitive, 'asChild' | 'textValue' | 'prefix'> {
   type?: 'default' | 'warning' | 'danger';
-  // preFix?: React.ReactNode;
-  // endFix?: React.ReactNode;
   prefix?: ReactNode;
   suffix?: ReactNode;
   prefixIcon?: ReactNode;
   suffixIcon?: ReactNode;
   checked?: boolean;
   selected?: boolean;
   block?: boolean;
+  /**
+   * add divider after item (if not last one)
+   * - Mobile only for now
+   */
+  divide?: boolean;
 }
 export interface MenuSubProps {
   children: ReactNode;

diff --git a/packages/frontend/component/src/ui/menu/mobile/item.tsx b/packages/frontend/component/src/ui/menu/mobile/item.tsx
@@ -12,7 +12,7 @@ const preventDefault = () => {
 export const MobileMenuItem = (props: MenuItemProps) => {
   const { setOpen } = useContext(MobileMenuContext);
   const { className, children, otherProps } = useMenuItem(props);
-  const { onSelect, onClick, ...restProps } = otherProps;
+  const { onSelect, onClick, divide, ...restProps } = otherProps;
 
   const onItemClick = useCallback(
     (e: any) => {
@@ -32,6 +32,7 @@ export const MobileMenuItem = (props: MenuItemProps) => {
       role="menuitem"
       onClick={onItemClick}
       className={className}
+      data-divider={divide}
       {...restProps}
     >
       {children}

diff --git a/packages/frontend/component/src/ui/menu/mobile/styles.css.ts b/packages/frontend/component/src/ui/menu/mobile/styles.css.ts
@@ -43,6 +43,7 @@ export const menuContent = style({
 export const mobileMenuItem = style({
   padding: '10px 20px',
   borderRadius: 0,
+
   ':hover': {
     vars: {
       [bgColor]: 'transparent',
@@ -66,6 +67,25 @@ export const mobileMenuItem = style({
     '&.warning:active': {
       vars: { [bgColor]: cssVar('backgroundWarningColor') },
     },
+    // divider hack
+    '&[data-divider=true]': {
+      marginBottom: 16,
+      position: 'relative',
+    },
+    '&[data-divider=true]::after': {
+      content: '""',
+      position: 'absolute',
+      bottom: -8,
+      left: 0,
+      width: '100%',
+      borderBottom: `0.5px solid ${cssVarV2('layer/insideBorder/border')}`,
+    },
+    '&[data-divider=true]:last-child': {
+      marginBottom: 0,
+    },
+    '&[data-divider=true]:last-child::after': {
+      display: 'none',
+    },
   },
 });
 

diff --git a/packages/frontend/core/src/pages/workspace/detail-page/tabs/journal.css.ts b/packages/frontend/core/src/pages/workspace/detail-page/tabs/journal.css.ts
@@ -35,6 +35,11 @@ const interactive = style({
 });
 export const calendar = style({
   padding: '16px',
+  selectors: {
+    '&[data-mobile=true]': {
+      padding: '8px 16px',
+    },
+  },
 });
 export const journalPanel = style({
   width: '100%',
@@ -212,6 +217,13 @@ export const journalDateCell = style([
         fontWeight: 500,
         border: `1px solid ${cssVar('primaryColor')}`,
       },
+
+      '&[data-mobile=true]': {
+        width: 34,
+        height: 34,
+        fontSize: 15,
+        fontWeight: 400,
+      },
     },
   },
 ]);
@@ -225,3 +237,7 @@ export const journalDateCellDot = style({
   left: '50%',
   transform: 'translateX(-50%)',
 });
+
+export const journalDateCellWrapper = style({
+  height: 34,
+});
diff --git a/packages/frontend/core/src/pages/workspace/detail-page/tabs/journal.tsx b/packages/frontend/core/src/pages/workspace/detail-page/tabs/journal.tsx
@@ -90,6 +90,7 @@ interface JournalBlockProps {
   date: dayjs.Dayjs;
 }
 
+const mobile = environment.isMobile;
 export const EditorJournalPanel = () => {
   const t = useI18n();
   const doc = useService(DocService).doc;
@@ -129,6 +130,7 @@ export const EditorJournalPanel = () => {
           data-selected={cell.selected}
           data-is-journal={isJournal}
           data-has-journal={hasJournal}
+          data-mobile={mobile}
         >
           {cell.label}
           {hasJournal && !cell.selected ? (
@@ -142,14 +144,16 @@ export const EditorJournalPanel = () => {
 
   return (
     <div className={styles.journalPanel} data-is-journal={isJournal}>
-      <div className={styles.calendar}>
+      <div data-mobile={mobile} className={styles.calendar}>
         <DatePicker
           weekDays={t['com.affine.calendar-date-picker.week-days']()}
           monthNames={t['com.affine.calendar-date-picker.month-names']()}
           todayLabel={t['com.affine.calendar-date-picker.today']()}
           customDayRenderer={customDayRenderer}
           value={date}
           onChange={onDateSelect}
+          monthHeaderCellClassName={styles.journalDateCellWrapper}
+          monthBodyCellClassName={styles.journalDateCellWrapper}
         />
       </div>
       <JournalConflictBlock date={dayjs(date)} />

diff --git a/packages/frontend/mobile/src/components/app-tabs/home-icon.tsx b/packages/frontend/mobile/src/components/app-tabs/home-icon.tsx
diff --git a/packages/frontend/mobile/src/components/app-tabs/index.tsx b/packages/frontend/mobile/src/components/app-tabs/index.tsx
@@ -2,11 +2,10 @@ import {
   WorkbenchLink,
   WorkbenchService,
 } from '@affine/core/modules/workbench';
-import { AllDocsIcon, SearchIcon } from '@blocksuite/icons/rc';
+import { AllDocsIcon, MobileHomeIcon, SearchIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
 import type { Location } from 'react-router-dom';
 
-import { HomeIcon } from './home-icon';
 import * as styles from './styles.css';
 
 interface Route {
@@ -19,7 +18,7 @@ interface Route {
 const routes: Route[] = [
   {
     to: '/home',
-    Icon: HomeIcon,
+    Icon: MobileHomeIcon,
   },
   {
     to: '/all',

diff --git a/packages/frontend/mobile/src/components/app-tabs/styles.css.ts b/packages/frontend/mobile/src/components/app-tabs/styles.css.ts
@@ -12,12 +12,13 @@ export const appTabs = style({
   borderTop: `1px solid ${cssVarV2('layer/insideBorder/border')}`,
 
   width: '100dvw',
-  height: globalVars.appTabHeight,
+  height: `calc(${globalVars.appTabHeight} + 2px)`,
   padding: 16,
   gap: 15.5,
 
   position: 'fixed',
-  bottom: 0,
+  paddingBottom: 18,
+  bottom: -2,
   zIndex: 1,
 });
 export const tabItem = style({
@@ -30,6 +31,7 @@ export const tabItem = style({
   padding: 3,
   fontSize: 30,
   color: cssVarV2('icon/primary'),
+  lineHeight: 0,
 
   selectors: {
     '&[data-active="true"]': {

diff --git a/packages/frontend/mobile/src/components/workspace-selector/menu.tsx b/packages/frontend/mobile/src/components/workspace-selector/menu.tsx
@@ -117,6 +117,7 @@ export const SelectorMenu = ({ onClose }: { onClose?: () => void }) => {
           title="Cloud Sync"
           list={cloudWorkspaces}
         />
+        <div className={styles.divider} />
         <WorkspaceList
           onClose={onClose}
           title="Local Storage"

diff --git a/packages/frontend/mobile/src/views/settings/dropdown-select.tsx b/packages/frontend/mobile/src/views/settings/dropdown-select.tsx
@@ -50,6 +50,7 @@ export const SettingDropdownSelect = <
     <MobileMenu
       items={options.map(opt => (
         <MobileMenuItem
+          divide
           key={opt.value}
           selected={value === opt.value}
           data-testid={opt.testId}