From 33fc00f8c7edfbc85b87db333b6b203cfe46ace7 Mon Sep 17 00:00:00 2001 From: L-Sun Date: Thu, 1 Aug 2024 05:22:49 +0000 Subject: [PATCH] chore(core): set read-only mode on mobile device (#7651) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Close [BS-795](https://linear.app/affine-design/issue/BS-795/affine-mobile-设置只读模式) - Set read-only mode on mobile device - Add mobile only support read-only warning toast - remove `user-select: none` so that user can select text in read-only mode --- .../src/components/affine-banner/index.css.ts | 2 +- packages/frontend/core/src/components/top-tip.tsx | 12 ++++++++++-- .../pages/workspace/detail-page/detail-page.css.ts | 1 - .../src/pages/workspace/detail-page/detail-page.tsx | 8 ++++++++ packages/frontend/i18n/src/resources/en.json | 1 + packages/frontend/i18n/src/resources/zh-Hans.json | 1 + 6 files changed, 21 insertions(+), 4 deletions(-) diff --git a/packages/frontend/component/src/components/affine-banner/index.css.ts b/packages/frontend/component/src/components/affine-banner/index.css.ts index bcadb24869..8e4b2c3ea6 100644 --- a/packages/frontend/component/src/components/affine-banner/index.css.ts +++ b/packages/frontend/component/src/components/affine-banner/index.css.ts @@ -3,8 +3,8 @@ import { style } from '@vanilla-extract/css'; export const browserWarningStyle = style({ backgroundColor: cssVar('backgroundWarningColor'), color: cssVar('warningColor'), - height: '36px', width: '100%', + padding: '8px 16px', fontSize: cssVar('fontSm'), display: 'flex', justifyContent: 'center', diff --git a/packages/frontend/core/src/components/top-tip.tsx b/packages/frontend/core/src/components/top-tip.tsx index d77be25c9b..9a9231a438 100644 --- a/packages/frontend/core/src/components/top-tip.tsx +++ b/packages/frontend/core/src/components/top-tip.tsx @@ -21,11 +21,13 @@ const shouldShowWarning = (() => { // disable in SSR return false; } + if (environment.isMobile) { + return true; + } if (environment.isChrome) { return environment.chromeVersion < minimumChromeVersion; - } else { - return !environment.isMobile; } + return false; })(); const OSWarningMessage = () => { @@ -36,6 +38,11 @@ const OSWarningMessage = () => { environment.isChrome && environment.chromeVersion < minimumChromeVersion; + // TODO(@L-Sun): remove this message when mobile version is able to edit. + if ('isMobile' in environment && environment.isMobile) { + return {t['com.affine.top-tip.mobile']()}; + } + if (notChrome) { return ( @@ -48,6 +55,7 @@ const OSWarningMessage = () => { } else if (notGoodVersion) { return {t['upgradeBrowser']()}; } + return null; }; diff --git a/packages/frontend/core/src/pages/workspace/detail-page/detail-page.css.ts b/packages/frontend/core/src/pages/workspace/detail-page/detail-page.css.ts index 4b5007f7ae..24a179cc88 100644 --- a/packages/frontend/core/src/pages/workspace/detail-page/detail-page.css.ts +++ b/packages/frontend/core/src/pages/workspace/detail-page/detail-page.css.ts @@ -29,7 +29,6 @@ export const editorContainer = style({ export const affineDocViewport = style({ display: 'flex', flexDirection: 'column', - userSelect: 'none', containerName: 'viewport', containerType: 'inline-size', background: cssVar('backgroundPrimaryColor'), diff --git a/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx b/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx index 2ec3bf0f9d..6833cb3fe0 100644 --- a/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx +++ b/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx @@ -4,6 +4,7 @@ import type { ChatPanel } from '@affine/core/blocksuite/presets/ai'; import { AIProvider } from '@affine/core/blocksuite/presets/ai'; import { PageAIOnboarding } from '@affine/core/components/affine/ai-onboarding'; import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper'; +import { useDocMetaHelper } from '@affine/core/hooks/use-block-suite-page-meta'; import { RecentDocsService } from '@affine/core/modules/quicksearch'; import { ViewService } from '@affine/core/modules/workbench/services/view'; import type { PageRootService } from '@blocksuite/blocks'; @@ -83,6 +84,7 @@ const DetailPageImpl = memo(function DetailPageImpl() { const mode = useLiveData(doc.mode$); const { appSettings } = useAppSettingHelper(); const chatPanelRef = useRef(null); + const { setDocReadonly } = useDocMetaHelper(workspace.docCollection); const isActiveView = useIsActiveView(); // TODO(@eyhn): remove jotai here @@ -131,6 +133,12 @@ const DetailPageImpl = memo(function DetailPageImpl() { return; }, [doc, globalContext, isActiveView, mode]); + useEffect(() => { + if ('isMobile' in environment && environment.isMobile) { + setDocReadonly(doc.id, true); + } + }, [doc.id, setDocReadonly]); + const isInTrash = useLiveData(doc.meta$.map(meta => meta.trash)); useRegisterBlocksuiteEditorCommands(); const title = useLiveData(doc.title$); diff --git a/packages/frontend/i18n/src/resources/en.json b/packages/frontend/i18n/src/resources/en.json index a4d8e66ec9..a21ba485ba 100644 --- a/packages/frontend/i18n/src/resources/en.json +++ b/packages/frontend/i18n/src/resources/en.json @@ -1325,6 +1325,7 @@ "com.affine.toastMessage.successfullyDeleted": "Successfully deleted", "com.affine.today": "Today", "com.affine.tomorrow": "Tomorrow", + "com.affine.top-tip.mobile": "Limited to view-only on mobile.", "com.affine.trashOperation.delete": "Delete", "com.affine.trashOperation.delete.description": "Once deleted, you can't undo this action. Do you confirm?", "com.affine.trashOperation.delete.title": "Permanently delete", diff --git a/packages/frontend/i18n/src/resources/zh-Hans.json b/packages/frontend/i18n/src/resources/zh-Hans.json index 2ca5ce103c..a78c5e1333 100644 --- a/packages/frontend/i18n/src/resources/zh-Hans.json +++ b/packages/frontend/i18n/src/resources/zh-Hans.json @@ -1254,6 +1254,7 @@ "com.affine.toastMessage.successfullyDeleted": "删除成功", "com.affine.today": "今天", "com.affine.tomorrow": "明日", + "com.affine.top-tip.mobile": "在移动设备上仅限于查看。", "com.affine.trashOperation.delete": "删除", "com.affine.trashOperation.delete.description": "一旦删除，您将无法撤销此操作。您确定吗？", "com.affine.trashOperation.delete.title": "永久删除",