fix(component): adjust dialog and input style (#4566)

2026-02-11 20:08:37 +00:00 · 2023-10-12 13:49:39 +08:00
parent d05897b724
commit daa976ca62
18 changed files with 141 additions and 133 deletions
--- a/apps/core/package.json
+++ b/apps/core/package.json
@@ -40,7 +40,7 @@
    "@mui/material": "^5.14.13",
    "@radix-ui/react-select": "^2.0.0",
    "@react-hookz/web": "^23.1.0",
-    "@toeverything/components": "^0.0.43",
+    "@toeverything/components": "^0.0.45",
    "async-call-rpc": "^6.3.1",
    "css-spring": "^4.1.0",
    "cssnano": "^6.0.1",
--- a/apps/core/src/components/affine/create-workspace-modal/index.tsx
+++ b/apps/core/src/components/affine/create-workspace-modal/index.tsx
@@ -3,7 +3,11 @@ import { DebugLogger } from '@affine/debug';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { HelpIcon } from '@blocksuite/icons';
 import { Button } from '@toeverything/components/button';
-import { Modal } from '@toeverything/components/modal';
+import {
+  ConfirmModal,
+  type ConfirmModalProps,
+  Modal,
+} from '@toeverything/components/modal';
 import { Tooltip } from '@toeverything/components/tooltip';
 import type {
  LoadDBFileResult,
@@ -34,14 +38,13 @@ interface ModalProps {
  onCreate: (id: string) => void;
 }

-interface NameWorkspaceContentProps {
-  onClose: () => void;
+interface NameWorkspaceContentProps extends ConfirmModalProps {
  onConfirmName: (name: string) => void;
 }

 const NameWorkspaceContent = ({
  onConfirmName,
-  onClose,
+  ...props
 }: NameWorkspaceContentProps) => {
  const [workspaceName, setWorkspaceName] = useState('');

@@ -59,11 +62,23 @@ const NameWorkspaceContent = ({
  );
  const t = useAFFiNEI18N();
  return (
-    <div className={style.content}>
-      <div className={style.contentTitle}>
-        {t['com.affine.nameWorkspace.title']()}
-      </div>
-      <p>{t['com.affine.nameWorkspace.description']()}</p>
+    <ConfirmModal
+      defaultOpen={true}
+      title={t['com.affine.nameWorkspace.title']()}
+      description={t['com.affine.nameWorkspace.description']()}
+      cancelText={t['com.affine.nameWorkspace.button.cancel']()}
+      confirmButtonOptions={{
+        type: 'primary',
+        disabled: !workspaceName,
+        ['data-testid' as string]: 'create-workspace-create-button',
+        children: t['com.affine.nameWorkspace.button.create'](),
+      }}
+      closeButtonOptions={{
+        ['data-testid' as string]: 'create-workspace-close-button',
+      }}
+      onConfirm={handleCreateWorkspace}
+      {...props}
+    >
      <Input
        ref={ref => {
          if (ref) {
@@ -76,24 +91,9 @@ const NameWorkspaceContent = ({
        maxLength={64}
        minLength={0}
        onChange={setWorkspaceName}
+        size="large"
      />
-      <div className={style.buttonGroup}>
-        <Button data-testid="create-workspace-close-button" onClick={onClose}>
-          {t['com.affine.nameWorkspace.button.cancel']()}
-        </Button>
-        <Button
-          data-testid="create-workspace-create-button"
-          disabled={!workspaceName}
-          style={{
-            opacity: !workspaceName ? 0.5 : 1,
-          }}
-          type="primary"
-          onClick={handleCreateWorkspace}
-        >
-          {t['com.affine.nameWorkspace.button.create']()}
-        </Button>
-      </div>
-    </div>
+    </ConfirmModal>
  );
 };

@@ -342,15 +342,6 @@ export const CreateWorkspaceModal = ({
    [createLocalWorkspace, onCreate]
  );

-  const nameWorkspaceNode =
-    step === 'name-workspace' ? (
-      <NameWorkspaceContent
-        // go to previous step instead?
-        onClose={onClose}
-        onConfirmName={onConfirmName}
-      />
-    ) : null;
-
  const setDBLocationNode =
    step === 'set-db-location' ? (
      <SetDBLocationContent
@@ -377,6 +368,15 @@ export const CreateWorkspaceModal = ({
    },
    [onClose]
  );
+  if (step === 'name-workspace') {
+    return (
+      <NameWorkspaceContent
+        open={mode !== false && !!step}
+        onOpenChange={onOpenChange}
+        onConfirmName={onConfirmName}
+      />
+    );
+  }

  return (
    <Modal
@@ -388,7 +388,6 @@ export const CreateWorkspaceModal = ({
      }}
    >
      <div className={style.header}></div>
-      {nameWorkspaceNode}
      {setDBLocationNode}
      {setSyncingModeNode}
    </Modal>
--- a/apps/core/src/components/affine/enable-affine-cloud-modal/index.tsx
+++ b/apps/core/src/components/affine/enable-affine-cloud-modal/index.tsx
@@ -38,7 +38,6 @@ export const EnableAffineCloudModal = ({

  return (
    <ConfirmModal
-      width={480}
      title={t['Enable AFFiNE Cloud']()}
      description={t['Enable AFFiNE Cloud Description']()}
      cancelText={t['com.affine.enableAffineCloudModal.button.cancel']()}
--- a/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/delete/index.tsx
+++ b/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/delete/index.tsx
@@ -8,9 +8,9 @@ import {
  type ConfirmModalProps,
 } from '@toeverything/components/modal';
 import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
-import { useState } from 'react';
+import { useCallback, useState } from 'react';

-import { StyledInputContent, StyledWorkspaceName } from './style';
+import * as styles from './style.css';

 interface WorkspaceDeleteProps extends ConfirmModalProps {
  workspace: AffineOfficialWorkspace;
@@ -20,6 +20,7 @@ export const WorkspaceDeleteModal = ({
  workspace,
  ...props
 }: WorkspaceDeleteProps) => {
+  const { onConfirm } = props;
  const [workspaceName] = useBlockSuiteWorkspaceName(
    workspace.blockSuiteWorkspace
  );
@@ -27,6 +28,12 @@ export const WorkspaceDeleteModal = ({
  const allowDelete = deleteStr === workspaceName;
  const t = useAFFiNEI18N();

+  const handleOnEnter = useCallback(() => {
+    if (allowDelete) {
+      return onConfirm?.();
+    }
+  }, [allowDelete, onConfirm]);
+
  return (
    <ConfirmModal
      title={`${t['com.affine.workspaceDelete.title']()}?`}
@@ -42,23 +49,23 @@ export const WorkspaceDeleteModal = ({
      {workspace.flavour === WorkspaceFlavour.LOCAL ? (
        <Trans i18nKey="com.affine.workspaceDelete.description">
          Deleting (
-          <StyledWorkspaceName>
+          <span className={styles.workspaceName}>
            {{ workspace: workspaceName } as any}
-          </StyledWorkspaceName>
+          </span>
          ) cannot be undone, please proceed with caution. All contents will be
          lost.
        </Trans>
      ) : (
        <Trans i18nKey="com.affine.workspaceDelete.description2">
          Deleting (
-          <StyledWorkspaceName>
+          <span className={styles.workspaceName}>
            {{ workspace: workspaceName } as any}
-          </StyledWorkspaceName>
+          </span>
          ) will delete both local and cloud data, this operation cannot be
          undone, please proceed with caution.
        </Trans>
      )}
-      <StyledInputContent>
+      <div className={styles.inputContent}>
        <Input
          ref={ref => {
            if (ref) {
@@ -67,11 +74,11 @@ export const WorkspaceDeleteModal = ({
          }}
          onChange={setDeleteStr}
          data-testid="delete-workspace-input"
+          onEnter={handleOnEnter}
          placeholder={t['com.affine.workspaceDelete.placeholder']()}
-          width={315}
-          height={42}
+          size="large"
        />
-      </StyledInputContent>
+      </div>
    </ConfirmModal>
  );
 };
--- a/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/delete/style.css.ts
+++ b/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/delete/style.css.ts
@@ -0,0 +1,29 @@
+import { style } from '@vanilla-extract/css';
+
+export const modalWrapper = style({
+  position: 'relative',
+  padding: '0px',
+  width: '560px',
+  background: 'var(--affine-background-overlay-panel-color)',
+  borderRadius: '12px',
+});
+
+export const modalHeader = style({
+  margin: '44px 0px 12px 0px',
+  width: '560px',
+  fontWeight: '600',
+  fontSize: '20px;',
+  textAlign: 'center',
+});
+
+export const inputContent = style({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'center',
+  margin: '24px 0',
+  fontSize: 'var(--affine-font-base)',
+});
+
+export const workspaceName = style({
+  fontWeight: '600',
+});
--- a/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/delete/style.ts
+++ b/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/delete/style.ts
@@ -1,38 +0,0 @@
-import { styled } from '@affine/component';
-
-export const StyledModalWrapper = styled('div')(() => {
-  return {
-    position: 'relative',
-    padding: '0px',
-    width: '560px',
-    background: 'var(--affine-background-overlay-panel-color)',
-    borderRadius: '12px',
-    // height: '312px',
-  };
-});
-
-export const StyledModalHeader = styled('div')(() => {
-  return {
-    margin: '44px 0px 12px 0px',
-    width: '560px',
-    fontWeight: '600',
-    fontSize: '20px;',
-    textAlign: 'center',
-  };
-});
-
-export const StyledInputContent = styled('div')(() => {
-  return {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'center',
-    margin: '24px 0',
-    fontSize: 'var(--affine-font-base)',
-  };
-});
-
-export const StyledWorkspaceName = styled('span')(() => {
-  return {
-    fontWeight: '600',
-  };
-});
--- a/apps/core/src/components/affine/setting-modal/account-setting/index.tsx
+++ b/apps/core/src/components/affine/setting-modal/account-setting/index.tsx
@@ -88,12 +88,13 @@ export const AvatarAndName = () => {
  const user = useCurrentUser();
  const [input, setInput] = useState<string>(user.name);

-  const handleUpdateUserName = useCallback(
-    (newName: string) => {
-      user.update({ name: newName }).catch(console.error);
-    },
-    [user]
-  );
+  const allowUpdate = !!input && input !== user.name;
+  const handleUpdateUserName = useCallback(() => {
+    if (!allowUpdate) {
+      return;
+    }
+    user.update({ name: input }).catch(console.error);
+  }, [allowUpdate, input, user]);

  return (
    <>
@@ -119,20 +120,19 @@ export const AvatarAndName = () => {
                width={280}
                height={28}
                onChange={setInput}
+                onEnter={handleUpdateUserName}
              />
-              {input && input === user.name ? null : (
+              {allowUpdate ? (
                <Button
                  data-testid="save-user-name"
-                  onClick={() => {
-                    handleUpdateUserName(input);
-                  }}
+                  onClick={handleUpdateUserName}
                  style={{
                    marginLeft: '12px',
                  }}
                >
                  {t['com.affine.editCollection.save']()}
                </Button>
-              )}
+              ) : null}
            </FlexWrapper>
          </div>
        </FlexWrapper>