From 1d339c682b4607383456ebdd2eabcb850989b72b Mon Sep 17 00:00:00 2001 From: JimmFly Date: Thu, 20 Feb 2025 04:10:52 +0000 Subject: [PATCH] fix(core): adjust share menu and upgrade-to-team page style (#10299) close PD-2330 PD-2331 AF-2238 --- .../invite-team-modal/styles.css.ts | 1 + .../workspace-card/index.tsx | 14 ++++- .../members/confirm-assign-modal.tsx | 52 ++++++++++++------- .../workspace-setting/members/member-list.tsx | 1 + .../workspace-setting/members/styles.css.ts | 19 +++++++ .../desktop/pages/upgrade-to-team/index.tsx | 24 ++++++++- .../pages/upgrade-to-team/styles.css.ts | 11 ++++ .../view/share-menu/copy-link-button.css.ts | 1 + .../general-access/members-permission.tsx | 5 +- .../general-access/public-page-button.tsx | 9 ++-- .../share-menu/general-access/styles.css.ts | 14 +++-- .../share-menu/view/share-menu/index.css.ts | 14 ++++- .../invite-member-editor/styles.css.ts | 1 - .../share-menu/view/share-menu/share-page.tsx | 10 ++-- 14 files changed, 142 insertions(+), 34 deletions(-) diff --git a/packages/frontend/component/src/components/member-components/invite-team-modal/styles.css.ts b/packages/frontend/component/src/components/member-components/invite-team-modal/styles.css.ts index 3946f8fb90..e3ddb5a764 100644 --- a/packages/frontend/component/src/components/member-components/invite-team-modal/styles.css.ts +++ b/packages/frontend/component/src/components/member-components/invite-team-modal/styles.css.ts @@ -100,6 +100,7 @@ export const errorHint = style({ export const contentStyle = style({ paddingLeft: '0', paddingRight: '0', + overflowY: 'visible', }); export const invitationLinkContent = style({ diff --git a/packages/frontend/core/src/components/workspace-selector/workspace-card/index.tsx b/packages/frontend/core/src/components/workspace-selector/workspace-card/index.tsx index f64b265169..1b93385120 100644 --- a/packages/frontend/core/src/components/workspace-selector/workspace-card/index.tsx +++ b/packages/frontend/core/src/components/workspace-selector/workspace-card/index.tsx @@ -8,6 +8,7 @@ import type { WorkspaceProfileInfo, } from '@affine/core/modules/workspace'; import { UNTITLED_WORKSPACE_NAME } from '@affine/env/constant'; +import { useI18n } from '@affine/i18n'; import { ArrowDownSmallIcon, CloudWorkspaceIcon, @@ -269,6 +270,7 @@ export const WorkspaceCard = forwardRef< }, ref ) => { + const t = useI18n(); const information = useWorkspaceInfo(workspaceMetadata); const name = information?.name ?? UNTITLED_WORKSPACE_NAME; @@ -331,10 +333,18 @@ export const WorkspaceCard = forwardRef< ) : null} {hideCollaborationIcon || information?.isOwner ? null : ( - + + + )} {hideTeamWorkspaceIcon || !information?.isTeam ? null : ( - + + + )} {onClickOpenSettings && (
diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/confirm-assign-modal.tsx b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/confirm-assign-modal.tsx index d841d6e179..6e8e65d970 100644 --- a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/confirm-assign-modal.tsx +++ b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/confirm-assign-modal.tsx @@ -10,6 +10,7 @@ export const ConfirmAssignModal = ({ setOpen, member, inputValue, + placeholder, setInputValue, isEquals, onConfirm, @@ -19,6 +20,7 @@ export const ConfirmAssignModal = ({ isEquals: boolean; member: Member; inputValue: string; + placeholder?: string; onConfirm: () => void; setInputValue: (value: string) => void; }) => { @@ -35,31 +37,45 @@ export const ConfirmAssignModal = ({ confirmButtonOptions={{ disabled: !isEquals, variant: 'error' }} >
-
-

- {t['com.affine.payment.member.team.assign.confirm.description']({ - name: member.name || member.email || member.id, - })} -

-

- {t['com.affine.payment.member.team.assign.confirm.description-1']()} -

-

- {t['com.affine.payment.member.team.assign.confirm.description-2']()} -

-

- {t['com.affine.payment.member.team.assign.confirm.description-3']()} -

+

+ {t['com.affine.payment.member.team.assign.confirm.description']({ + name: member.name || member.email || member.id, + })} +

+
+
+ + + {t[ + 'com.affine.payment.member.team.assign.confirm.description-1' + ]()} + +
+
+ + + {t[ + 'com.affine.payment.member.team.assign.confirm.description-2' + ]()} + +
+
+ + + {t[ + 'com.affine.payment.member.team.assign.confirm.description-3' + ]()} + +
+
{t['com.affine.payment.member.team.assign.confirm.description-4']()}
diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/member-list.tsx b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/member-list.tsx index 8c9890c021..1385896746 100644 --- a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/member-list.tsx +++ b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/member-list.tsx @@ -247,6 +247,7 @@ const MemberItem = ({ setOpen={setOpen} member={member} inputValue={inputValue} + placeholder={workspaceName} setInputValue={setInputValue} isEquals={isEquals} onConfirm={confirmAssign} diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/styles.css.ts b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/styles.css.ts index e5a777a3ba..03b9a2734a 100644 --- a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/styles.css.ts +++ b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/styles.css.ts @@ -128,6 +128,25 @@ export const confirmAssignModalContent = style({ padding: '0', }); +export const descriptions = style({ + display: 'flex', + flexDirection: 'column', + gap: '8px', +}); + +export const description = style({ + display: 'flex', +}); + +export const prefixDot = style({ + background: cssVarV2('icon/activated'), + width: '5px', + height: '5px', + borderRadius: '50%', + marginRight: '12px', + marginTop: '10px', +}); + export const confirmInputContainer = style({ display: 'flex', flexDirection: 'column', diff --git a/packages/frontend/core/src/desktop/pages/upgrade-to-team/index.tsx b/packages/frontend/core/src/desktop/pages/upgrade-to-team/index.tsx index c254b4d9de..17d2f72446 100644 --- a/packages/frontend/core/src/desktop/pages/upgrade-to-team/index.tsx +++ b/packages/frontend/core/src/desktop/pages/upgrade-to-team/index.tsx @@ -1,6 +1,8 @@ import { + Avatar, Button, Divider, + IconButton, Input, Menu, MenuItem, @@ -10,6 +12,7 @@ import { Scrollable, } from '@affine/component'; import { AuthPageContainer } from '@affine/component/auth-components'; +import { useSignOut } from '@affine/core/components/hooks/affine/use-sign-out'; import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks'; import { useWorkspaceInfo } from '@affine/core/components/hooks/use-workspace-info'; import { PureWorkspaceCard } from '@affine/core/components/workspace-selector/workspace-card'; @@ -22,7 +25,7 @@ import { buildShowcaseWorkspace } from '@affine/core/utils/first-app-data'; import { UNTITLED_WORKSPACE_NAME } from '@affine/env/constant'; import { SubscriptionPlan, SubscriptionRecurring } from '@affine/graphql'; import { type I18nString, Trans, useI18n } from '@affine/i18n'; -import { DoneIcon, NewPageIcon } from '@blocksuite/icons/rc'; +import { DoneIcon, NewPageIcon, SignOutIcon } from '@blocksuite/icons/rc'; import { useLiveData, useService } from '@toeverything/infra'; import { useCallback, useMemo, useState } from 'react'; import { useSearchParams } from 'react-router-dom'; @@ -54,11 +57,16 @@ export const Component = () => { export const UpgradeToTeam = ({ recurring }: { recurring: string | null }) => { const t = useI18n(); + const workspacesList = useService(WorkspacesService).list; const workspaces = useLiveData(workspacesList.workspaces$); const [openUpgrade, setOpenUpgrade] = useState(false); const [openCreate, setOpenCreate] = useState(false); + const authService = useService(AuthService); + const user = useLiveData(authService.session.account$); + const onSignOut = useSignOut(); + const [selectedWorkspace, setSelectedWorkspace] = useState(null); @@ -102,7 +110,6 @@ export const UpgradeToTeam = ({ recurring }: { recurring: string | null }) => { > {menuTriggerText} @@ -144,6 +151,19 @@ export const UpgradeToTeam = ({ recurring }: { recurring: string | null }) => { onSelect={setSelectedWorkspace} />
+ {user ? ( +
+ + {user.email} + + + +
+ ) : null}
); diff --git a/packages/frontend/core/src/desktop/pages/upgrade-to-team/styles.css.ts b/packages/frontend/core/src/desktop/pages/upgrade-to-team/styles.css.ts index 70b4e3bf1d..d5149a471c 100644 --- a/packages/frontend/core/src/desktop/pages/upgrade-to-team/styles.css.ts +++ b/packages/frontend/core/src/desktop/pages/upgrade-to-team/styles.css.ts @@ -118,3 +118,14 @@ export const dialogFooter = style({ export const upgradeButtonInDialog = style({ width: 'unset', }); + +export const userContainer = style({ + display: 'flex', + alignItems: 'center', + marginTop: '28px', +}); + +export const email = style({ + marginLeft: '4px', + marginRight: '8px', +}); diff --git a/packages/frontend/core/src/modules/share-menu/view/share-menu/copy-link-button.css.ts b/packages/frontend/core/src/modules/share-menu/view/share-menu/copy-link-button.css.ts index 0df94db284..7df0fe3601 100644 --- a/packages/frontend/core/src/modules/share-menu/view/share-menu/copy-link-button.css.ts +++ b/packages/frontend/core/src/modules/share-menu/view/share-menu/copy-link-button.css.ts @@ -6,6 +6,7 @@ export const copyLinkContainerStyle = style({ alignItems: 'center', width: '100%', position: 'relative', + border: `1px solid ${cssVarV2('layer/insideBorder/blackBorder')}`, selectors: { '&.secondary': { padding: 0, diff --git a/packages/frontend/core/src/modules/share-menu/view/share-menu/general-access/members-permission.tsx b/packages/frontend/core/src/modules/share-menu/view/share-menu/general-access/members-permission.tsx index 19a9cfa5ba..f8d02efcd0 100644 --- a/packages/frontend/core/src/modules/share-menu/view/share-menu/general-access/members-permission.tsx +++ b/packages/frontend/core/src/modules/share-menu/view/share-menu/general-access/members-permission.tsx @@ -97,7 +97,9 @@ export const MembersPermission = ({ {disabled ? (
- {showTips ? : null} {currentRoleName} +
+ {showTips ? : null} {currentRoleName} +
) : ( { {disabled ? (
- {isSharedPage - ? t['com.affine.share-menu.option.link.readonly']() - : t['com.affine.share-menu.option.link.no-access']()} +
+ {isSharedPage + ? t['com.affine.share-menu.option.link.readonly']() + : t['com.affine.share-menu.option.link.no-access']()} +
) : ( { className={styles.menuTriggerStyle} data-testid="share-link-menu-trigger" variant="plain" + suffixClassName={styles.suffixClassName} contentStyle={{ width: '100%', }} diff --git a/packages/frontend/core/src/modules/share-menu/view/share-menu/general-access/styles.css.ts b/packages/frontend/core/src/modules/share-menu/view/share-menu/general-access/styles.css.ts index 8a4d2fdb9f..f5f130e3f7 100644 --- a/packages/frontend/core/src/modules/share-menu/view/share-menu/general-access/styles.css.ts +++ b/packages/frontend/core/src/modules/share-menu/view/share-menu/general-access/styles.css.ts @@ -3,27 +3,36 @@ import { cssVarV2 } from '@toeverything/theme/v2'; import { style } from '@vanilla-extract/css'; export const menuTriggerStyle = style({ - padding: '4px 10px', + padding: '4px 0px 4px 4px', borderRadius: '4px', justifyContent: 'space-between', display: 'flex', fontSize: cssVar('fontSm'), fontWeight: 400, + height: '30px', selectors: { '&.disable': { alignItems: 'center', gap: '4px', + marginRight: '4px', color: cssVarV2('text/disable'), }, }, }); +export const menuTriggerText = style({ + margin: '0px 4px', +}); +export const suffixClassName = style({ + width: '20px', + height: '20px', +}); export const rowContainerStyle = style({ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', - padding: '4px', + marginLeft: '4px', }); export const exportContainerStyle = style({ display: 'flex', @@ -32,7 +41,6 @@ export const exportContainerStyle = style({ }); export const labelStyle = style({ fontSize: cssVar('fontSm'), - fontWeight: 500, }); export const publicItemRowStyle = style({ display: 'flex', diff --git a/packages/frontend/core/src/modules/share-menu/view/share-menu/index.css.ts b/packages/frontend/core/src/modules/share-menu/view/share-menu/index.css.ts index 32617114e0..3b7c6184ff 100644 --- a/packages/frontend/core/src/modules/share-menu/view/share-menu/index.css.ts +++ b/packages/frontend/core/src/modules/share-menu/view/share-menu/index.css.ts @@ -15,6 +15,10 @@ export const content = style({ flexDirection: 'column', gap: '8px', }); +export const divider = style({ + borderColor: cssVarV2('tab/divider/divider'), + margin: '4px 0px', +}); export const menuStyle = style({ width: '390px', maxHeight: '562px', @@ -66,6 +70,13 @@ export const columnContainerStyle = style({ width: '100%', gap: '8px', }); +export const memberRowsStyle = style({ + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + gap: '8px', + margin: '6px 0px', +}); export const exportContainerStyle = style({ display: 'flex', flexDirection: 'column', @@ -127,8 +138,9 @@ export const shortcutStyle = style({ }); export const generalAccessStyle = style({ - padding: '4px', + padding: '3px 4px', fontSize: cssVar('fontSm'), color: cssVarV2('text/secondary'), fontWeight: 500, + height: '30px', }); diff --git a/packages/frontend/core/src/modules/share-menu/view/share-menu/invite-member-editor/styles.css.ts b/packages/frontend/core/src/modules/share-menu/view/share-menu/invite-member-editor/styles.css.ts index 34f173408f..edfcf35512 100644 --- a/packages/frontend/core/src/modules/share-menu/view/share-menu/invite-member-editor/styles.css.ts +++ b/packages/frontend/core/src/modules/share-menu/view/share-menu/invite-member-editor/styles.css.ts @@ -2,7 +2,6 @@ import { cssVarV2 } from '@toeverything/theme/v2'; import { style } from '@vanilla-extract/css'; export const inputStyle = style({ - marginTop: '6px', padding: '4px', gap: '4px', borderRadius: '4px', diff --git a/packages/frontend/core/src/modules/share-menu/view/share-menu/share-page.tsx b/packages/frontend/core/src/modules/share-menu/view/share-menu/share-page.tsx index b60ee4f56a..4d20ff1bec 100644 --- a/packages/frontend/core/src/modules/share-menu/view/share-menu/share-page.tsx +++ b/packages/frontend/core/src/modules/share-menu/view/share-menu/share-page.tsx @@ -1,4 +1,4 @@ -import { Skeleton } from '@affine/component'; +import { Divider, Skeleton } from '@affine/component'; import { Button } from '@affine/component/ui/button'; import { ServerService } from '@affine/core/modules/cloud'; import { DocService } from '@affine/core/modules/doc'; @@ -97,8 +97,11 @@ export const AFFiNESharePage = ( return (
- {canManageUsers && } - +
+ {canManageUsers && } + +
+
{t['com.affine.share-menu.generalAccess']()}
@@ -109,6 +112,7 @@ export const AFFiNESharePage = ( />
+
);