From 32ee9466705cbc3b0d0f074a51ec84bd667f2de9 Mon Sep 17 00:00:00 2001 From: Qi <474021214@qq.com> Date: Wed, 13 Sep 2023 12:37:25 +0800 Subject: [PATCH] feat: add tooltip in user & workspace setting (#4260) --- .../new-workspace-setting-detail/profile.tsx | 69 ++++++++++++------- .../new-workspace-setting-detail/style.css.ts | 6 +- .../setting-modal/account-setting/index.tsx | 59 +++++++++------- .../account-setting/style.css.ts | 6 +- packages/i18n/src/resources/en.json | 2 + 5 files changed, 86 insertions(+), 56 deletions(-) diff --git a/apps/core/src/components/affine/new-workspace-setting-detail/profile.tsx b/apps/core/src/components/affine/new-workspace-setting-detail/profile.tsx index a27934e385..f05a7ead7b 100644 --- a/apps/core/src/components/affine/new-workspace-setting-detail/profile.tsx +++ b/apps/core/src/components/affine/new-workspace-setting-detail/profile.tsx @@ -1,12 +1,15 @@ -import { FlexWrapper, Input, toast, Wrapper } from '@affine/component'; +import { FlexWrapper, Input, Wrapper } from '@affine/component'; +import { pushNotificationAtom } from '@affine/component/notification-center'; import { WorkspaceAvatar } from '@affine/component/workspace-avatar'; import type { AffineOfficialWorkspace } from '@affine/env/workspace'; import { useAFFiNEI18N } from '@affine/i18n/hooks'; -import { CameraIcon, DoneIcon } from '@blocksuite/icons'; -import { IconButton } from '@toeverything/components/button'; +import { CameraIcon } from '@blocksuite/icons'; +import { Button } from '@toeverything/components/button'; +import { Tooltip } from '@toeverything/components/tooltip'; import { useBlockSuiteWorkspaceAvatarUrl } from '@toeverything/hooks/use-block-suite-workspace-avatar-url'; import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name'; import clsx from 'clsx'; +import { useSetAtom } from 'jotai'; import { type KeyboardEvent, startTransition, @@ -24,6 +27,7 @@ export interface ProfilePanelProps extends WorkspaceSettingDetailProps { export const ProfilePanel = ({ workspace, isOwner }: ProfilePanelProps) => { const t = useAFFiNEI18N(); + const pushNotification = useSetAtom(pushNotificationAtom); const [, update] = useBlockSuiteWorkspaceAvatarUrl( workspace.blockSuiteWorkspace @@ -34,13 +38,18 @@ export const ProfilePanel = ({ workspace, isOwner }: ProfilePanelProps) => { ); const [input, setInput] = useState(name); + const [tooltipContainer, setTooltipContainer] = + useState(null); const handleUpdateWorkspaceName = useCallback( (name: string) => { setName(name); - toast(t['Update workspace name success']()); + pushNotification({ + title: t['Update workspace name success'](), + type: 'success', + }); }, - [setName, t] + [pushNotification, setName, t] ); const handleSetInput = useCallback((value: string) => { @@ -64,23 +73,34 @@ export const ProfilePanel = ({ workspace, isOwner }: ProfilePanelProps) => { return (
-
- +
- <> -
- -
- - - -
+ + <> +
+ +
+ + + +
+ +
{t['Workspace Name']()}
@@ -97,16 +117,15 @@ export const ProfilePanel = ({ workspace, isOwner }: ProfilePanelProps) => { onKeyUp={handleKeyUp} /> {input === workspace.blockSuiteWorkspace.meta.name ? null : ( - - - + {t['com.affine.editCollection.save']()} + )} diff --git a/apps/core/src/components/affine/new-workspace-setting-detail/style.css.ts b/apps/core/src/components/affine/new-workspace-setting-detail/style.css.ts index 64f6aa1f5c..99f06825bc 100644 --- a/apps/core/src/components/affine/new-workspace-setting-detail/style.css.ts +++ b/apps/core/src/components/affine/new-workspace-setting-detail/style.css.ts @@ -26,7 +26,6 @@ export const avatarWrapper = style({ height: '56px', borderRadius: '50%', position: 'relative', - overflow: 'hidden', cursor: 'pointer', flexShrink: '0', selectors: { @@ -43,8 +42,9 @@ globalStyle(`${avatarWrapper}:hover .camera-icon-wrapper`, { display: 'flex', }); globalStyle(`${avatarWrapper} .camera-icon-wrapper`, { - width: '100%', - height: '100%', + width: '56px', + height: '56px', + borderRadius: '50%', position: 'absolute', display: 'none', justifyContent: 'center', diff --git a/apps/core/src/components/affine/setting-modal/account-setting/index.tsx b/apps/core/src/components/affine/setting-modal/account-setting/index.tsx index 68d896c3e6..d698902b26 100644 --- a/apps/core/src/components/affine/setting-modal/account-setting/index.tsx +++ b/apps/core/src/components/affine/setting-modal/account-setting/index.tsx @@ -8,8 +8,9 @@ import { UserAvatar } from '@affine/component/user-avatar'; import { allBlobSizesQuery, uploadAvatarMutation } from '@affine/graphql'; import { useAFFiNEI18N } from '@affine/i18n/hooks'; import { useMutation, useQuery } from '@affine/workspace/affine/gql'; -import { ArrowRightSmallIcon, CameraIcon, DoneIcon } from '@blocksuite/icons'; -import { Button, IconButton } from '@toeverything/components/button'; +import { ArrowRightSmallIcon, CameraIcon } from '@blocksuite/icons'; +import { Button } from '@toeverything/components/button'; +import { Tooltip } from '@toeverything/components/tooltip'; import { useSetAtom } from 'jotai'; import { type FC, Suspense, useCallback, useState } from 'react'; @@ -24,6 +25,8 @@ export const AvatarAndName = () => { const t = useAFFiNEI18N(); const user = useCurrentUser(); + const [tooltipContainer, setTooltipContainer] = + useState(null); const [input, setInput] = useState(user.name); const { trigger: avatarTrigger } = useMutation({ @@ -56,25 +59,32 @@ export const AvatarAndName = () => { spreadCol={false} > -
- - <> -
- -
- - - -
+ +
+ + <> +
+ +
+ + + +
+
@@ -90,18 +100,17 @@ export const AvatarAndName = () => { onChange={setInput} /> {input && input === user.name ? null : ( - { handleUpdateUserName(input); }} style={{ - color: 'var(--affine-primary-color)', marginLeft: '12px', }} > - - + {t['com.affine.editCollection.save']()} + )}
diff --git a/apps/core/src/components/affine/setting-modal/account-setting/style.css.ts b/apps/core/src/components/affine/setting-modal/account-setting/style.css.ts index 8c012c498b..369371e380 100644 --- a/apps/core/src/components/affine/setting-modal/account-setting/style.css.ts +++ b/apps/core/src/components/affine/setting-modal/account-setting/style.css.ts @@ -14,7 +14,6 @@ export const avatarWrapper = style({ height: '56px', borderRadius: '50%', position: 'relative', - overflow: 'hidden', cursor: 'pointer', flexShrink: '0', selectors: { @@ -28,8 +27,9 @@ globalStyle(`${avatarWrapper}:hover .camera-icon-wrapper`, { display: 'flex', }); globalStyle(`${avatarWrapper} .camera-icon-wrapper`, { - width: '100%', - height: '100%', + width: '56px', + height: '56px', + borderRadius: '50%', position: 'absolute', display: 'none', justifyContent: 'center', diff --git a/packages/i18n/src/resources/en.json b/packages/i18n/src/resources/en.json index 137641a8d6..f11eb85b12 100644 --- a/packages/i18n/src/resources/en.json +++ b/packages/i18n/src/resources/en.json @@ -571,6 +571,8 @@ "Workspace Settings with name": "{{name}}'s Settings", "Workspace Type": "Workspace Type", "You cannot delete the last workspace": "You cannot delete the last workspace", + "Click to replace photo": "Click to replace photo", + "Remove photo": "Remove photo", "Removed successfully": "Removed successfully", "Successfully enabled AFFiNE Cloud": "Successfully enabled AFFiNE Cloud" }