{!isJournal ? (
) : (
diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-editor/styles.css.ts b/packages/frontend/core/src/components/blocksuite/block-suite-editor/styles.css.ts
index 137973bb3..97289d4e3 100644
--- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/styles.css.ts
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-editor/styles.css.ts
@@ -2,8 +2,6 @@ import { cssVar } from '@toeverything/theme';
import { style } from '@vanilla-extract/css';
export const docEditorRoot = style({
display: 'block',
- height: '100%',
- overflow: 'hidden',
background: cssVar('backgroundPrimaryColor'),
});
@@ -11,9 +9,6 @@ export const docEditorRoot = style({
export const affineDocViewport = style({
display: 'flex',
flexDirection: 'column',
- height: '100%',
- overflowX: 'hidden',
- overflowY: 'auto',
userSelect: 'none',
containerName: 'viewport',
// todo: find out what this does in bs
@@ -25,6 +20,13 @@ export const affineDocViewport = style({
zIndex: -1,
},
},
+ selectors: {
+ '&[data-doc-viewport="true"]': {
+ overflowX: 'visible',
+ overflowY: 'visible',
+ height: 'auto',
+ },
+ },
});
export const docContainer = style({
diff --git a/packages/frontend/core/src/components/cloud/share-header-left-item/index.tsx b/packages/frontend/core/src/components/cloud/share-header-left-item/index.tsx
deleted file mode 100644
index 7a674c2ff..000000000
--- a/packages/frontend/core/src/components/cloud/share-header-left-item/index.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Logo1Icon } from '@blocksuite/icons';
-
-import { useCurrentLoginStatus } from '../../../hooks/affine/use-current-login-status';
-import * as styles from './styles.css';
-import { PublishPageUserAvatar } from './user-avatar';
-
-const ShareHeaderLeftItem = () => {
- const loginStatus = useCurrentLoginStatus();
- if (loginStatus === 'authenticated') {
- return
;
- }
-
- return (
-
-
-
- );
-};
-
-export default ShareHeaderLeftItem;
diff --git a/packages/frontend/core/src/components/cloud/share-header-left-item/styles.css.ts b/packages/frontend/core/src/components/cloud/share-header-left-item/styles.css.ts
deleted file mode 100644
index 8ee4c1a64..000000000
--- a/packages/frontend/core/src/components/cloud/share-header-left-item/styles.css.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { cssVar } from '@toeverything/theme';
-import { style } from '@vanilla-extract/css';
-export const iconWrapper = style({
- display: 'flex',
- justifyContent: 'center',
- alignItems: 'center',
- fontSize: '24px',
- cursor: 'pointer',
- color: cssVar('textPrimaryColor'),
- selectors: {
- '&:visited': {
- color: cssVar('textPrimaryColor'),
- },
- },
-});
diff --git a/packages/frontend/core/src/components/cloud/share-header-left-item/user-avatar.tsx b/packages/frontend/core/src/components/cloud/share-header-left-item/user-avatar.tsx
deleted file mode 100644
index 7b6716aae..000000000
--- a/packages/frontend/core/src/components/cloud/share-header-left-item/user-avatar.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Avatar } from '@affine/component/ui/avatar';
-import { Menu, MenuIcon, MenuItem } from '@affine/component/ui/menu';
-import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { SignOutIcon } from '@blocksuite/icons';
-import { useMemo } from 'react';
-import { useLocation } from 'react-router-dom';
-
-import { useCurrentUser } from '../../../hooks/affine/use-current-user';
-import { signOutCloud } from '../../../utils/cloud-utils';
-import * as styles from './styles.css';
-
-export const PublishPageUserAvatar = () => {
- const user = useCurrentUser();
- const t = useAFFiNEI18N();
- const location = useLocation();
-
- const handleSignOut = useAsyncCallback(async () => {
- await signOutCloud({ callbackUrl: location.pathname });
- }, [location.pathname]);
-
- const menuItem = useMemo(() => {
- return (
-
- );
- }, [handleSignOut, t]);
-
- return (
-
- );
-};
diff --git a/packages/frontend/core/src/components/cloud/share-header-right-item/authenticated-item.tsx b/packages/frontend/core/src/components/cloud/share-header-right-item/authenticated-item.tsx
index 0ec6d87d8..bd777ce81 100644
--- a/packages/frontend/core/src/components/cloud/share-header-right-item/authenticated-item.tsx
+++ b/packages/frontend/core/src/components/cloud/share-header-right-item/authenticated-item.tsx
@@ -1,12 +1,17 @@
import { Button } from '@affine/component/ui/button';
+import { useCurrentUser } from '@affine/core/hooks/affine/use-current-user';
+import { useMembers } from '@affine/core/hooks/affine/use-members';
+import { useNavigateHelper } from '@affine/core/hooks/use-navigate-helper';
import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useCallback, useEffect } from 'react';
-import { useCurrentUser } from '../../../hooks/affine/use-current-user';
-import { useMembers } from '../../../hooks/affine/use-members';
-import { useNavigateHelper } from '../../../hooks/use-navigate-helper';
import type { ShareHeaderRightItemProps } from './index';
+import * as styles from './styles.css';
-export const AuthenticatedItem = ({ ...props }: ShareHeaderRightItemProps) => {
+export const AuthenticatedItem = ({
+ setIsMember,
+ ...props
+}: { setIsMember: (value: boolean) => void } & ShareHeaderRightItemProps) => {
const { workspaceId, pageId } = props;
const user = useCurrentUser();
const members = useMembers(workspaceId, 0);
@@ -14,11 +19,21 @@ export const AuthenticatedItem = ({ ...props }: ShareHeaderRightItemProps) => {
const t = useAFFiNEI18N();
const { jumpToPage } = useNavigateHelper();
+ const handleEdit = useCallback(() => {
+ jumpToPage(workspaceId, pageId);
+ }, [workspaceId, pageId, jumpToPage]);
+
+ useEffect(() => {
+ if (isMember) {
+ setIsMember(true);
+ }
+ }, [isMember, setIsMember]);
+
if (isMember) {
return (
diff --git a/packages/frontend/core/src/components/cloud/share-header-right-item/styles.css.ts b/packages/frontend/core/src/components/cloud/share-header-right-item/styles.css.ts
index b359def28..bd5526111 100644
--- a/packages/frontend/core/src/components/cloud/share-header-right-item/styles.css.ts
+++ b/packages/frontend/core/src/components/cloud/share-header-right-item/styles.css.ts
@@ -1,5 +1,6 @@
import { cssVar } from '@toeverything/theme';
-import { style } from '@vanilla-extract/css';
+import { globalStyle, style } from '@vanilla-extract/css';
+
export const iconWrapper = style({
display: 'flex',
justifyContent: 'center',
@@ -16,9 +17,117 @@ export const iconWrapper = style({
export const rightItemContainer = style({
display: 'flex',
alignItems: 'center',
- gap: '8px',
+ gap: '16px',
padding: '0 8px',
});
+
+export const headerDivider = style({
+ width: '1px',
+ height: '20px',
+ background: cssVar('borderColor'),
+ display: 'none',
+ selectors: {
+ '&[data-is-member="true"]': {
+ display: 'block',
+ },
+ '&[data-is-edgeless="true"]': {
+ display: 'block',
+ },
+ },
+ '@media': {
+ 'screen and (max-width: 640px)': {
+ selectors: {
+ '&[data-is-member="false"][data-is-edgeless="true"]': {
+ display: 'none',
+ },
+ },
+ },
+ },
+});
+
export const presentButton = style({
gap: '4px',
+ background: cssVar('black'),
+ color: cssVar('white'),
+ borderColor: cssVar('pureBlack10'),
+ boxShadow: cssVar('buttonInnerShadow'),
+
+ '@media': {
+ 'screen and (max-width: 640px)': {
+ display: 'none',
+ },
+ },
+});
+
+globalStyle(`${presentButton} svg`, {
+ color: cssVar('white'),
+});
+
+export const editButton = style({
+ padding: '4px 8px',
+});
+
+export const userPlanButton = style({
+ display: 'flex',
+ fontSize: cssVar('fontXs'),
+ height: 20,
+ fontWeight: 500,
+ color: cssVar('pureWhite'),
+ backgroundColor: cssVar('brandColor'),
+ padding: '0 4px',
+ borderRadius: 4,
+ justifyContent: 'center',
+ alignItems: 'center',
+});
+
+export const accountCard = style({
+ padding: '4px 8px',
+ borderRadius: '8px',
+ userSelect: 'none',
+ display: 'flex',
+ columnGap: '10px',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+});
+export const avatar = style({
+ width: '28px',
+ height: '28px',
+ borderRadius: '50%',
+ fontSize: '20px',
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ flexShrink: 0,
+});
+
+export const content = style({
+ flexGrow: '1',
+ minWidth: 0,
+});
+
+export const nameContainer = style({
+ display: 'flex',
+ justifyContent: 'flex-start',
+ alignItems: 'center',
+ width: '100%',
+ gap: '4px',
+ height: '22px',
+});
+export const userName = style({
+ fontSize: cssVar('fontSm'),
+ fontWeight: 600,
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ whiteSpace: 'nowrap',
+ height: '22px',
+});
+
+export const userEmail = style({
+ fontSize: cssVar('fontXs'),
+ color: cssVar('textSecondaryColor'),
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ whiteSpace: 'nowrap',
+ flexGrow: 1,
+ height: '20px',
});
diff --git a/packages/frontend/core/src/components/cloud/share-header-right-item/user-avatar.tsx b/packages/frontend/core/src/components/cloud/share-header-right-item/user-avatar.tsx
new file mode 100644
index 000000000..b9ad39090
--- /dev/null
+++ b/packages/frontend/core/src/components/cloud/share-header-right-item/user-avatar.tsx
@@ -0,0 +1,91 @@
+import { Avatar } from '@affine/component/ui/avatar';
+import {
+ Menu,
+ MenuIcon,
+ MenuItem,
+ MenuSeparator,
+} from '@affine/component/ui/menu';
+import { useCurrentUser } from '@affine/core/hooks/affine/use-current-user';
+import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
+import { useUserSubscription } from '@affine/core/hooks/use-subscription';
+import { signOutCloud } from '@affine/core/utils/cloud-utils';
+import { SubscriptionPlan } from '@affine/graphql';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { SignOutIcon } from '@blocksuite/icons';
+import { useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+
+import * as styles from './styles.css';
+
+const UserInfo = () => {
+ const user = useCurrentUser();
+ const [subscription] = useUserSubscription();
+ const plan = subscription?.plan ?? SubscriptionPlan.Free;
+ return (
+
+
+
+
+
+
+ {user.name}
+
+
{plan}
+
+
+ {user.email}
+
+
+
+ );
+};
+
+export const PublishPageUserAvatar = () => {
+ const user = useCurrentUser();
+ const t = useAFFiNEI18N();
+ const location = useLocation();
+
+ const handleSignOut = useAsyncCallback(async () => {
+ await signOutCloud({ callbackUrl: location.pathname });
+ }, [location.pathname]);
+
+ const menuItem = useMemo(() => {
+ return (
+ <>
+
+
+
+
+ );
+ }, [handleSignOut, t]);
+
+ return (
+
+ );
+};
diff --git a/packages/frontend/core/src/components/page-detail-editor.css.ts b/packages/frontend/core/src/components/page-detail-editor.css.ts
index 97ef90e52..664319998 100644
--- a/packages/frontend/core/src/components/page-detail-editor.css.ts
+++ b/packages/frontend/core/src/components/page-detail-editor.css.ts
@@ -1,7 +1,6 @@
import { globalStyle, style } from '@vanilla-extract/css';
export const editor = style({
flex: 1,
- overflow: 'auto',
selectors: {
'&.full-screen': {
vars: {
@@ -9,16 +8,11 @@ export const editor = style({
'--affine-editor-side-padding': '15px',
},
},
- '&.is-public-page': {
- height: '100%',
- },
},
});
globalStyle(
`${editor} .affine-doc-viewport:not(.affine-embed-synced-doc-editor)`,
{
paddingBottom: '150px',
- paddingLeft: '20px',
- scrollbarGutter: 'stable',
}
);
diff --git a/packages/frontend/core/src/components/page-detail-editor.tsx b/packages/frontend/core/src/components/page-detail-editor.tsx
index 1217e36bf..af9a7ebba 100644
--- a/packages/frontend/core/src/components/page-detail-editor.tsx
+++ b/packages/frontend/core/src/components/page-detail-editor.tsx
@@ -108,7 +108,6 @@ const PageDetailEditorMain = memo(function PageDetailEditorMain({
{
const workspaceManager = useService(WorkspaceManager);
const currentWorkspace = useService(CurrentWorkspaceService);
+ const t = useAFFiNEI18N();
useEffect(() => {
// create a workspace for share page
@@ -181,7 +188,7 @@ export const Component = () => {
const page = useServiceOptional(Page);
usePageDocumentTitle(page?.meta);
-
+ const loginStatus = useCurrentLoginStatus();
if (!page) {
return;
}
@@ -189,18 +196,41 @@ export const Component = () => {
return (
-
- noop}
- />
+
);
diff --git a/packages/frontend/core/src/pages/share/share-footer.css.ts b/packages/frontend/core/src/pages/share/share-footer.css.ts
new file mode 100644
index 000000000..f8b5248c9
--- /dev/null
+++ b/packages/frontend/core/src/pages/share/share-footer.css.ts
@@ -0,0 +1,47 @@
+import { cssVar } from '@toeverything/theme';
+import { style } from '@vanilla-extract/css';
+
+export const footerContainer = style({
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ zIndex: 1,
+ width: '100%',
+ maxWidth: cssVar('editorWidth'),
+ marginLeft: 'auto',
+ marginRight: 'auto',
+ paddingLeft: cssVar('editorSidePadding'),
+ paddingRight: cssVar('editorSidePadding'),
+ marginBottom: '200px',
+});
+export const footer = style({
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ gap: '8px',
+ width: '100%',
+ padding: '12px',
+ background: cssVar('backgroundOverlayPanelColor'),
+});
+
+export const description = style({
+ fontSize: cssVar('fontSm'),
+ color: cssVar('textSecondaryColor'),
+ textAlign: 'center',
+});
+
+export const getStartLink = style({
+ display: 'flex',
+ padding: '0px 4px',
+ justifyContent: 'center',
+ alignItems: 'center',
+ gap: '4px',
+ color: cssVar('black'),
+ selectors: {
+ '&:visited': {
+ color: cssVar('black'),
+ },
+ },
+});
diff --git a/packages/frontend/core/src/pages/share/share-footer.tsx b/packages/frontend/core/src/pages/share/share-footer.tsx
new file mode 100644
index 000000000..39a0a86ec
--- /dev/null
+++ b/packages/frontend/core/src/pages/share/share-footer.tsx
@@ -0,0 +1,26 @@
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { ArrowRightBigIcon } from '@blocksuite/icons';
+
+import * as styles from './share-footer.css';
+
+export const ShareFooter = () => {
+ const t = useAFFiNEI18N();
+ return (
+
+ );
+};
diff --git a/packages/frontend/core/src/pages/share/share-header.css.ts b/packages/frontend/core/src/pages/share/share-header.css.ts
new file mode 100644
index 000000000..ef8edbdf5
--- /dev/null
+++ b/packages/frontend/core/src/pages/share/share-header.css.ts
@@ -0,0 +1,18 @@
+import { cssVar } from '@toeverything/theme';
+import { style } from '@vanilla-extract/css';
+
+export const header = style({
+ display: 'flex',
+ height: '52px',
+ width: '100%',
+ alignItems: 'center',
+ flexShrink: 0,
+ background: cssVar('backgroundPrimaryColor'),
+ borderBottom: `1px solid ${cssVar('borderColor')}`,
+ padding: '0 16px',
+});
+
+export const spacer = style({
+ flexGrow: 1,
+ minWidth: 12,
+});
diff --git a/packages/frontend/core/src/pages/share/share-header.tsx b/packages/frontend/core/src/pages/share/share-header.tsx
index 9ca199f1a..e69768624 100644
--- a/packages/frontend/core/src/pages/share/share-header.tsx
+++ b/packages/frontend/core/src/pages/share/share-header.tsx
@@ -1,11 +1,10 @@
import { EditorModeSwitch } from '@affine/core/components/blocksuite/block-suite-mode-switch';
+import ShareHeaderRightItem from '@affine/core/components/cloud/share-header-right-item';
import type { Workspace as BlockSuiteWorkspace } from '@blocksuite/store';
import type { PageMode } from '../../atoms';
import { BlocksuiteHeaderTitle } from '../../components/blocksuite/block-suite-header/title/index';
-import ShareHeaderLeftItem from '../../components/cloud/share-header-left-item';
-import ShareHeaderRightItem from '../../components/cloud/share-header-right-item';
-import { Header } from '../../components/pure/header';
+import * as styles from './share-header.css';
export function ShareHeader({
pageId,
@@ -17,32 +16,24 @@ export function ShareHeader({
blockSuiteWorkspace: BlockSuiteWorkspace;
}) {
return (
- }
- center={
- <>
-
-
-
- }
- right={
-
- }
- bottomBorder
- />
+
);
}
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 fa7377f99..1d085e0df 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
@@ -26,7 +26,6 @@ export const editorContainer = style({
display: 'flex',
flexDirection: 'column',
flex: 1,
- overflow: 'hidden',
zIndex: 0,
});
export const sidebarContainer = style({
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 eb15a1021..70320f003 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
@@ -1,3 +1,4 @@
+import { Scrollable } from '@affine/component';
import { PageDetailSkeleton } from '@affine/component/page-detail-skeleton';
import { ResizePanel } from '@affine/component/resize-panel';
import { useBlockSuitePageMeta } from '@affine/core/hooks/use-block-suite-page-meta';
@@ -230,14 +231,17 @@ const DetailPageImpl = memo(function DetailPageImpl() {
main={
// Add a key to force rerender when page changed, to avoid error boundary persisting.
-
+
+
+
+
+
+
+
}
footer={isInTrash ? : null}
diff --git a/packages/frontend/i18n/src/resources/en.json b/packages/frontend/i18n/src/resources/en.json
index 3ef4402a2..ccdfe239c 100644
--- a/packages/frontend/i18n/src/resources/en.json
+++ b/packages/frontend/i18n/src/resources/en.json
@@ -1138,5 +1138,9 @@
"unnamed": "unnamed",
"upgradeBrowser": "Please upgrade to the latest version of Chrome for the best experience.",
"will be moved to Trash": "{{title}} will be moved to Trash",
- "will delete member": "will delete member"
+ "will delete member": "will delete member",
+ "com.affine.share-page.footer.create-with": "Create with",
+ "com.affine.share-page.footer.built-with": "Built with",
+ "com.affine.share-page.footer.description": "Empower your sharing with AffiNE Cloud: One-click doc sharing",
+ "com.affine.share-page.footer.get-started": "Get started for free"
}
diff --git a/tests/affine-cloud/e2e/collaboration.spec.ts b/tests/affine-cloud/e2e/collaboration.spec.ts
index d8ceb8966..99a426cec 100644
--- a/tests/affine-cloud/e2e/collaboration.spec.ts
+++ b/tests/affine-cloud/e2e/collaboration.spec.ts
@@ -112,10 +112,8 @@ test('share page with default edgeless', async ({ page, browser }) => {
expect(await page2.textContent('affine-paragraph')).toContain(
'TEST CONTENT'
);
- const logo = page2.getByTestId('share-page-logo');
const editButton = page2.getByTestId('share-page-edit-button');
await expect(editButton).not.toBeVisible();
- await expect(logo).toBeVisible();
}
});