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 index 225f3e3aaa..829eb4992b 100644 --- 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,7 +173,13 @@ export const DayPicker = memo(function DayPicker( {/* weekDays */}
{weekDays.split(',').map(day => ( -
+
{day}
))} @@ -178,10 +187,13 @@ export const DayPicker = memo(function DayPicker( {/* Weeks in month */} {matrix.map((week, i) => { return ( -
+
{week.map((cell, j) => (
onChange?.(cell.date.format(format))} > @@ -197,7 +209,15 @@ export const DayPicker = memo(function DayPicker( })} ), - [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 index 895205d6d7..5e1416f4ca 100644 --- 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 index 813d2d669a..06cf5403a1 100644 --- a/packages/frontend/component/src/ui/menu/menu.types.ts +++ b/packages/frontend/component/src/ui/menu/menu.types.ts @@ -20,8 +20,6 @@ export interface MenuProps { export interface MenuItemProps extends Omit { type?: 'default' | 'warning' | 'danger'; - // preFix?: React.ReactNode; - // endFix?: React.ReactNode; prefix?: ReactNode; suffix?: ReactNode; prefixIcon?: ReactNode; @@ -29,6 +27,11 @@ export interface MenuItemProps 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 index 1d74c09360..f211f5172d 100644 --- 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 index edbd45ccfa..64a57bc54f 100644 --- 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 index fabddbafd5..4bdce37636 100644 --- 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 index 8b8dffc60f..2a6396505f 100644 --- 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,7 +144,7 @@ export const EditorJournalPanel = () => { return (
-
+
{ customDayRenderer={customDayRenderer} value={date} onChange={onDateSelect} + monthHeaderCellClassName={styles.journalDateCellWrapper} + monthBodyCellClassName={styles.journalDateCellWrapper} />
diff --git a/packages/frontend/mobile/src/components/app-tabs/home-icon.tsx b/packages/frontend/mobile/src/components/app-tabs/home-icon.tsx deleted file mode 100644 index d2f1239e89..0000000000 --- a/packages/frontend/mobile/src/components/app-tabs/home-icon.tsx +++ /dev/null @@ -1,21 +0,0 @@ -/** - * TODO(@CatsJuice): replace with `@blocksuite/icons/rc` when ready - */ -export const HomeIcon = () => { - return ( - - - - ); -}; diff --git a/packages/frontend/mobile/src/components/app-tabs/index.tsx b/packages/frontend/mobile/src/components/app-tabs/index.tsx index bb93d56e67..552d7e5b1a 100644 --- 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 index b516800e38..c464b73e8f 100644 --- 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 index 9006254880..121d770dbd 100644 --- 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} /> +
(