toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-09-11 11:47:00 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: icon of page reference node (#7255)

Browse Source 
- Use `EdgelessIcon` if linked document mode is edgeless
- Update reference icon when document mode changes

https://github.com/toeverything/AFFiNE/assets/12724894/40db8930-dd7f-4154-ad0a-b1eea97d23db
This commit is contained in:
akumatus 2024-06-19 06:28:50 +00:00
parent fa1e7c6be0
commit bbf796faaf
1 changed files with 25 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
packages/frontend/core/src/components/affine/reference-link/index.tsx
View File

@ -6,14 +6,25 @@ import {
} from '@affine/core/modules/peek-view';
import { WorkbenchLink } from '@affine/core/modules/workbench';
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import { LinkedPageIcon, TodayIcon } from '@blocksuite/icons/rc';
import {
LinkedEdgelessIcon,
LinkedPageIcon,
TodayIcon,
} from '@blocksuite/icons/rc';
import type { DocCollection } from '@blocksuite/store';
import { useService } from '@toeverything/infra';
import {
type DocMode,
DocsService,
LiveData,
useLiveData,
useService,
} from '@toeverything/infra';
import { type PropsWithChildren, useCallback, useRef } from 'react';
import * as styles from './styles.css';
export interface PageReferenceRendererOptions {
docMode: DocMode | null;
pageId: string;
docCollection: DocCollection;
pageMetaHelper: ReturnType<typeof useDocMetaHelper>;
@ -22,6 +33,7 @@ export interface PageReferenceRendererOptions {
}
// use a function to be rendered in the lit renderer
export function pageReferenceRenderer({
docMode,
pageId,
pageMetaHelper,
journalHelper,
@ -31,7 +43,12 @@ export function pageReferenceRenderer({
const referencedPage = pageMetaHelper.getDocMeta(pageId);
let title =
referencedPage?.title ?? t['com.affine.editor.reference-not-found']();
let icon = <LinkedPageIcon className={styles.pageReferenceIcon} />;
let icon =
docMode === 'page' ? (
<LinkedPageIcon className={styles.pageReferenceIcon} />
) : (
<LinkedEdgelessIcon className={styles.pageReferenceIcon} />
);
const isJournal = isPageJournal(pageId);
const localizedJournalDate = getLocalizedJournalDateString(pageId);
if (isJournal && localizedJournalDate) {
@ -61,7 +78,12 @@ export function AffinePageReference({
const pageMetaHelper = useDocMetaHelper(docCollection);
const journalHelper = useJournalHelper(docCollection);
const t = useAFFiNEI18N();
const docsService = useService(DocsService);
const mode$ = LiveData.from(docsService.list.observeMode(pageId), null);
const docMode = useLiveData(mode$);
const el = pageReferenceRenderer({
docMode,
pageId,
pageMetaHelper,
journalHelper,