diff --git a/packages/frontend/mobile/src/components/app-tabs/index.tsx b/packages/frontend/mobile/src/components/app-tabs/index.tsx index a77d389c17..bb93d56e67 100644 --- a/packages/frontend/mobile/src/components/app-tabs/index.tsx +++ b/packages/frontend/mobile/src/components/app-tabs/index.tsx @@ -55,6 +55,7 @@ export const AppTabs = () => { className={styles.tabItem} role="tab" aria-label={route.to.slice(1)} + replaceHistory >
  • 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 92ab2dbc96..b516800e38 100644 --- a/packages/frontend/mobile/src/components/app-tabs/styles.css.ts +++ b/packages/frontend/mobile/src/components/app-tabs/styles.css.ts @@ -11,7 +11,7 @@ export const appTabs = style({ backgroundColor: cssVarV2('layer/background/secondary'), borderTop: `1px solid ${cssVarV2('layer/insideBorder/border')}`, - width: '100vw', + width: '100dvw', height: globalVars.appTabHeight, padding: 16, gap: 15.5, diff --git a/packages/frontend/mobile/src/components/doc-card/tag.css.ts b/packages/frontend/mobile/src/components/doc-card/tag.css.ts index cce1ed0926..ee154b40e1 100644 --- a/packages/frontend/mobile/src/components/doc-card/tag.css.ts +++ b/packages/frontend/mobile/src/components/doc-card/tag.css.ts @@ -7,18 +7,12 @@ export const tags = style({ width: '100%', display: 'flex', flexWrap: 'wrap', - alignItems: 'flex-start', + alignItems: 'center', position: 'relative', - - transition: 'height 0.23s', - overflow: 'hidden', + gap: 4, }); export const tag = style({ - visibility: 'hidden', - position: 'absolute', - // transition: 'all 0.23s', - padding: '0px 8px', borderRadius: 10, alignItems: 'center', @@ -43,3 +37,8 @@ export const tag = style({ marginRight: 4, }, }); + +export const more = style({ + fontSize: 16, + color: cssVarV2('icon/primary'), +}); diff --git a/packages/frontend/mobile/src/components/doc-card/tag.tsx b/packages/frontend/mobile/src/components/doc-card/tag.tsx index faf06a69cb..401f165ed0 100644 --- a/packages/frontend/mobile/src/components/doc-card/tag.tsx +++ b/packages/frontend/mobile/src/components/doc-card/tag.tsx @@ -1,9 +1,8 @@ -import { observeResize } from '@affine/component'; import type { Tag } from '@affine/core/modules/tag'; import { TagService } from '@affine/core/modules/tag'; +import { MoreHorizontalIcon } from '@blocksuite/icons/rc'; import { useLiveData, useService } from '@toeverything/infra'; import { assignInlineVars } from '@vanilla-extract/dynamic'; -import { useCallback, useEffect, useRef } from 'react'; import * as styles from './tag.css'; @@ -23,121 +22,21 @@ const DocCardTag = ({ tag }: { tag: Tag }) => { ); }; -const GAP = 4; -const MIN_WIDTH = 32; - -const DocCardTagsRenderer = ({ tags, rows }: { tags: Tag[]; rows: number }) => { - const ulRef = useRef(null); - - // A strategy to layout tags - const layoutTags = useCallback( - (entry: ResizeObserverEntry) => { - const availableWidth = entry.contentRect.width; - const lis = Array.from(ulRef.current?.querySelectorAll('li') ?? []); - - const tagGrid: Array<{ - x: number; - y: number; - w: number; - el: HTMLLIElement; - }> = []; - - for (let i = 0; i < rows; i++) { - let width = 0; - let restSpace = availableWidth - width; - while (restSpace >= MIN_WIDTH) { - const li = lis.shift(); - if (!li) break; - const liWidth = li.scrollWidth + 2; // 2 is for border - let liDisplayWidth = Math.min(liWidth, restSpace); - - restSpace = restSpace - liDisplayWidth - GAP; - if (restSpace < MIN_WIDTH) { - liDisplayWidth += restSpace; - } - - tagGrid.push({ - x: width, - y: i * (22 + GAP), - w: liDisplayWidth, - el: li, - }); - - width += liDisplayWidth + GAP; - } - } - - const lastItem = tagGrid[tagGrid.length - 1]; - - tagGrid.forEach(({ el, x, y, w }) => { - Object.assign(el.style, { - width: `${w}px`, - transform: `translate(${x}px, ${y}px)`, - visibility: 'visible', - }); - }); - - // hide rest - lis.forEach(li => - Object.assign(li.style, { - visibility: 'hidden', - width: '0px', - transform: `translate(0px, ${lastItem.y + 22 + GAP}px)`, - }) - ); - - // update ul height - // to avoid trigger resize immediately - setTimeout(() => { - if (ulRef.current) { - ulRef.current.style.height = `${lastItem.y + 22}px`; - } - }); - }, - [rows] - ); - - const prevEntryRef = useRef(null); - useEffect(() => { - tags; // make sure tags is in deps - const ul = ulRef.current; - if (!ul) return; - - const dispose = observeResize(ul, entry => { - if (entry.contentRect.width === prevEntryRef.current?.contentRect.width) { - return; - } - - layoutTags(entry); - prevEntryRef.current = entry; - }); - return () => { - dispose(); - prevEntryRef.current = null; - }; - }, [layoutTags, tags]); - +const DocCardTagsRenderer = ({ tags }: { tags: Tag[] }) => { return ( -
      - {tags.map(tag => ( +
        + {tags.slice(0, 2).map(tag => ( ))} - {/* TODO(@CatsJuice): more icon */} - {/* */} + {tags.length > 2 ? : null}
      ); }; -export const DocCardTags = ({ - docId, - rows = 2, -}: { - docId: string; - rows?: number; -}) => { +export const DocCardTags = ({ docId }: { docId: string; rows?: number }) => { const tagService = useService(TagService); const tags = useLiveData(tagService.tagList.tagsByPageId$(docId)); if (!tags.length) return null; - return ; + return ; }; diff --git a/packages/frontend/mobile/src/views/all-docs/header.tsx b/packages/frontend/mobile/src/views/all-docs/header.tsx index f8a2127b29..32547d95c5 100644 --- a/packages/frontend/mobile/src/views/all-docs/header.tsx +++ b/packages/frontend/mobile/src/views/all-docs/header.tsx @@ -1,7 +1,7 @@ import { IconButton, MobileMenu } from '@affine/component'; import { MoreHorizontalIcon } from '@blocksuite/icons/rc'; -import { header } from './style.css'; +import { header, headerSpace } from './style.css'; import { AllDocsTabs } from './tabs'; export interface AllDocsHeaderProps { @@ -10,15 +10,18 @@ export interface AllDocsHeaderProps { export const AllDocsHeader = ({ operations }: AllDocsHeaderProps) => { return ( -
      - -
      - {operations ? ( - - } /> - - ) : null} -
      -
      + <> +
      + +
      + {operations ? ( + + } /> + + ) : null} +
      +
      +
      + ); }; diff --git a/packages/frontend/mobile/src/views/all-docs/style.css.ts b/packages/frontend/mobile/src/views/all-docs/style.css.ts index 2bd0997ba5..b9b33cc71a 100644 --- a/packages/frontend/mobile/src/views/all-docs/style.css.ts +++ b/packages/frontend/mobile/src/views/all-docs/style.css.ts @@ -1,20 +1,32 @@ import { cssVarV2 } from '@toeverything/theme/v2'; import { style } from '@vanilla-extract/css'; -export const header = style({ - display: 'flex', - alignItems: 'center', - justifyContent: 'space-between', - gap: 16, - padding: '16px 16px 0px 16px', +const headerContentHeight = 56; +const headerPaddingTop = 16; - position: 'sticky', - top: 0, - backgroundColor: cssVarV2('layer/background/secondary'), - zIndex: 1, +const basicHeader = style({ + width: '100%', + height: headerContentHeight + headerPaddingTop, }); +export const header = style([ + basicHeader, + { + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', + gap: 16, + padding: `${headerPaddingTop}px 16px 0px 16px`, + + position: 'fixed', + top: 0, + backgroundColor: cssVarV2('layer/background/secondary'), + zIndex: 1, + }, +]); +export const headerSpace = style([basicHeader]); + export const tabs = style({ - height: 56, + height: headerContentHeight, gap: 16, display: 'flex', alignItems: 'center',