From 4cef37d9a76a4aa4cdeb5acde74e649072bad59e Mon Sep 17 00:00:00 2001 From: Kilu Date: Wed, 26 Jun 2024 19:04:17 +0800 Subject: [PATCH] fix: some style --- frontend/appflowy_web_app/index.html | 2 ++ .../src/application/publish/context.tsx | 2 +- .../services/js-services/cache/index.ts | 10 ++++--- .../application/services/js-services/index.ts | 2 ++ .../blocks/database/DatabaseBlock.tsx | 6 +++-- .../editor/components/blocks/heading/utils.ts | 8 +++--- .../src/components/publish/PublishView.tsx | 1 + .../publish/header/BreadcrumbItem.tsx | 2 +- .../publish/header/PublishViewHeader.tsx | 27 ++++++++++--------- .../src/components/publish/useViewMeta.ts | 16 ++--------- .../components/view-meta/ViewMetaPreview.tsx | 17 +++--------- frontend/appflowy_web_app/src/styles/app.scss | 5 +++- frontend/resources/translations/en.json | 3 ++- 13 files changed, 48 insertions(+), 53 deletions(-) diff --git a/frontend/appflowy_web_app/index.html b/frontend/appflowy_web_app/index.html index a71f082fc3..6c77f0b7ba 100644 --- a/frontend/appflowy_web_app/index.html +++ b/frontend/appflowy_web_app/index.html @@ -26,6 +26,8 @@ /> + +
diff --git a/frontend/appflowy_web_app/src/application/publish/context.tsx b/frontend/appflowy_web_app/src/application/publish/context.tsx index db9674f2b3..67f465ab5e 100644 --- a/frontend/appflowy_web_app/src/application/publish/context.tsx +++ b/frontend/appflowy_web_app/src/application/publish/context.tsx @@ -34,7 +34,7 @@ export const PublishProvider = ({ const name = `${namespace}_${publishName}`; return db.view_metas.get(name); - }); + }, [namespace, publishName]); const service = useContext(AFConfigContext)?.service; const navigate = useNavigate(); const toView = useCallback( diff --git a/frontend/appflowy_web_app/src/application/services/js-services/cache/index.ts b/frontend/appflowy_web_app/src/application/services/js-services/cache/index.ts index 7f49b96cca..667c5ae25f 100644 --- a/frontend/appflowy_web_app/src/application/services/js-services/cache/index.ts +++ b/frontend/appflowy_web_app/src/application/services/js-services/cache/index.ts @@ -202,6 +202,7 @@ export async function revalidatePublishView< >(name: string, fetcher: Fetcher, collab: YDoc) { const { data, meta, rows } = await fetcher(); + console.log('revalidatePublishView', name); await db.view_metas.put( { publish_name: name, @@ -211,11 +212,14 @@ export async function revalidatePublishView< }, name ); + console.log('revalidatePublishView', name, 'done'); - for (const [key, value] of Object.entries(rows ?? {})) { - const row = await openCollabDB(`${name}_${key}`); + if (rows) { + for (const [key, value] of Object.entries(rows)) { + const row = await openCollabDB(`${name}_${key}`); - applyYDoc(row, new Uint8Array(value)); + applyYDoc(row, new Uint8Array(value)); + } } const state = new Uint8Array(data); diff --git a/frontend/appflowy_web_app/src/application/services/js-services/index.ts b/frontend/appflowy_web_app/src/application/services/js-services/index.ts index 800b4da089..6e019ea9b2 100644 --- a/frontend/appflowy_web_app/src/application/services/js-services/index.ts +++ b/frontend/appflowy_web_app/src/application/services/js-services/index.ts @@ -53,6 +53,8 @@ export class AFClientService implements AFService { async getPublishView(namespace: string, publishName: string) { const name = `${namespace}_${publishName}`; + + console.log('getPublishView', name); const isLoaded = this.publishViewLoaded.has(name); const doc = await getPublishView( () => { diff --git a/frontend/appflowy_web_app/src/components/editor/components/blocks/database/DatabaseBlock.tsx b/frontend/appflowy_web_app/src/components/editor/components/blocks/database/DatabaseBlock.tsx index d454f7b9f0..e5c36eed2d 100644 --- a/frontend/appflowy_web_app/src/components/editor/components/blocks/database/DatabaseBlock.tsx +++ b/frontend/appflowy_web_app/src/components/editor/components/blocks/database/DatabaseBlock.tsx @@ -96,11 +96,13 @@ export const DatabaseBlock = memo( ) : (
{notFound ? ( <> -
{t('publish.hasNotBeenPublished')}
+
{t('publish.databaseHasNotBeenPublished')}
) : ( diff --git a/frontend/appflowy_web_app/src/components/editor/components/blocks/heading/utils.ts b/frontend/appflowy_web_app/src/components/editor/components/blocks/heading/utils.ts index 22fe53980a..52577cc4a3 100644 --- a/frontend/appflowy_web_app/src/components/editor/components/blocks/heading/utils.ts +++ b/frontend/appflowy_web_app/src/components/editor/components/blocks/heading/utils.ts @@ -1,13 +1,13 @@ export function getHeadingCssProperty(level: number) { switch (level) { case 1: - return 'text-3xl pt-[10px] max-md:pt-[1.5vw] pb-[4px] max-md:pb-[1vw] font-bold max-sm:text-[6vw]'; + return 'text-[1.75rem] pt-[10px] max-md:pt-[1.5vw] pb-[4px] max-md:pb-[1vw] font-bold max-sm:text-[6vw]'; case 2: - return 'text-2xl pt-[8px] max-md:pt-[1vw] pb-[2px] max-md:pb-[0.5vw] font-bold max-sm:text-[5vw]'; + return 'text-[1.55rem] pt-[8px] max-md:pt-[1vw] pb-[2px] max-md:pb-[0.5vw] font-bold max-sm:text-[5vw]'; case 3: - return 'text-xl pt-[4px] font-bold max-sm:text-[4vw]'; + return 'text-[1.25rem] pt-[4px] font-bold max-sm:text-[4vw]'; case 4: - return 'text-lg pt-[4px] font-bold'; + return 'text-[1rem] pt-[4px] font-bold'; case 5: return 'pt-[4px] font-bold'; case 6: diff --git a/frontend/appflowy_web_app/src/components/publish/PublishView.tsx b/frontend/appflowy_web_app/src/components/publish/PublishView.tsx index a52c2efdd9..9ac2c86349 100644 --- a/frontend/appflowy_web_app/src/components/publish/PublishView.tsx +++ b/frontend/appflowy_web_app/src/components/publish/PublishView.tsx @@ -19,6 +19,7 @@ export function PublishView({ namespace, publishName }: PublishViewProps) { let doc; setNotFound(false); + setDoc(undefined); try { doc = await service?.getPublishView(namespace, publishName); } catch (e) { diff --git a/frontend/appflowy_web_app/src/components/publish/header/BreadcrumbItem.tsx b/frontend/appflowy_web_app/src/components/publish/header/BreadcrumbItem.tsx index 888339291d..4b7f2a9231 100644 --- a/frontend/appflowy_web_app/src/components/publish/header/BreadcrumbItem.tsx +++ b/frontend/appflowy_web_app/src/components/publish/header/BreadcrumbItem.tsx @@ -53,7 +53,7 @@ function BreadcrumbItem({ crumb, disableClick = false }: { crumb: Crumb; disable } }} > - {renderCrumbIcon(icon)} + {renderCrumbIcon(icon)} diff --git a/frontend/appflowy_web_app/src/components/publish/header/PublishViewHeader.tsx b/frontend/appflowy_web_app/src/components/publish/header/PublishViewHeader.tsx index 0d58f651a4..391eba53f5 100644 --- a/frontend/appflowy_web_app/src/components/publish/header/PublishViewHeader.tsx +++ b/frontend/appflowy_web_app/src/components/publish/header/PublishViewHeader.tsx @@ -10,21 +10,24 @@ export function PublishViewHeader() { const viewMeta = usePublishContext()?.viewMeta; const crumbs = useMemo(() => { const ancestors = viewMeta?.ancestor_views || []; - let icon = viewMeta?.icon; - try { - const extra = viewMeta?.extra ? JSON.parse(viewMeta.extra) : {}; + return ancestors.map((ancestor) => { + let icon; - icon = extra.icon || icon; - } catch (e) { - // ignore - } + try { + const extra = ancestor?.extra ? JSON.parse(ancestor.extra) : {}; - return ancestors.map((ancestor) => ({ - viewId: ancestor.view_id, - name: ancestor.name, - icon: icon || String(viewMeta?.layout), - })); + icon = extra.icon?.value || JSON.parse(ancestor.icon || '')?.value; + } catch (e) { + // ignore + } + + return { + viewId: ancestor.view_id, + name: ancestor.name, + icon: icon || String(viewMeta?.layout), + }; + }); }, [viewMeta]); return ( diff --git a/frontend/appflowy_web_app/src/components/publish/useViewMeta.ts b/frontend/appflowy_web_app/src/components/publish/useViewMeta.ts index e3f37749a0..41e6d4339d 100644 --- a/frontend/appflowy_web_app/src/components/publish/useViewMeta.ts +++ b/frontend/appflowy_web_app/src/components/publish/useViewMeta.ts @@ -75,23 +75,11 @@ export function useViewMeta() { return; }, [viewMeta?.icon]); - const cover = useMemo(() => { - if (extra) { - try { - const extraObj = JSON.parse(extra); - - return extraObj.cover as ViewMetaCover; - } catch (e) { - return; - } - } - - return; - }, [extra]); + const cover = extra?.cover as ViewMetaCover; const viewId = viewMeta?.view_id; const name = viewMeta?.name; - + return { icon, cover, diff --git a/frontend/appflowy_web_app/src/components/view-meta/ViewMetaPreview.tsx b/frontend/appflowy_web_app/src/components/view-meta/ViewMetaPreview.tsx index 2fb3882b9b..f25ef5e991 100644 --- a/frontend/appflowy_web_app/src/components/view-meta/ViewMetaPreview.tsx +++ b/frontend/appflowy_web_app/src/components/view-meta/ViewMetaPreview.tsx @@ -59,21 +59,10 @@ export function ViewMetaPreview({ icon, cover, name }: ViewMetaProps) { return (
{cover && } -
-
+
+
{icon?.value}
-
-
- {name || {t('menuAppHeader.defaultNewPageName')}} -
-
+ {name || {t('menuAppHeader.defaultNewPageName')}}
diff --git a/frontend/appflowy_web_app/src/styles/app.scss b/frontend/appflowy_web_app/src/styles/app.scss index 6803bbdf47..8142d324b8 100644 --- a/frontend/appflowy_web_app/src/styles/app.scss +++ b/frontend/appflowy_web_app/src/styles/app.scss @@ -51,10 +51,13 @@ body { opacity: 60%; } +.icon { + font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', sans-serif; +} .view-icon { @apply flex w-fit leading-[1.5em] cursor-pointer rounded-lg py-2 text-[1.5em]; - font-family: "Apple Color Emoji", "Segoe UI Emoji", NotoColorEmoji, "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", EmojiSymbols; + font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', sans-serif; line-height: 1em; white-space: nowrap; } diff --git a/frontend/resources/translations/en.json b/frontend/resources/translations/en.json index 4ccb787b29..ee85356e9d 100644 --- a/frontend/resources/translations/en.json +++ b/frontend/resources/translations/en.json @@ -2030,6 +2030,7 @@ }, "publish": { "hasNotBeenPublished": "This page hasn't been published yet", - "reportPage": "Report page" + "reportPage": "Report page", + "databaseHasNotBeenPublished": "This database hasn't been published yet" } } \ No newline at end of file