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

2024-12-22 20:41:53 +03:00 · 2023-10-12 13:49:39 +08:00 · 2023-10-12 13:49:39 +08:00 · daa976ca62
commit daa976ca62
parent d05897b724
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>
--- a/packages/component/package.json
+++ b/packages/component/package.json
@ -38,7 +38,7 @@
    "@radix-ui/react-toast": "^1.1.5",
    "@toeverything/hooks": "workspace:*",
    "@toeverything/infra": "workspace:*",
-    "@toeverything/theme": "^0.7.18",
+    "@toeverything/theme": "^0.7.20",
    "@vanilla-extract/dynamic": "^2.0.3",
    "check-password-strength": "^2.0.7",
    "clsx": "^2.0.0",
--- a/packages/component/src/components/member-components/invite-modal.tsx
+++ b/packages/component/src/components/member-components/invite-modal.tsx
@ -48,7 +48,6 @@ export const InviteModal = ({
    <ConfirmModal
      open={open}
      onOpenChange={setOpen}
-      width={480}
      title={t['Invite Members']()}
      description={t['Invite Members Message']()}
      cancelText={t['com.affine.inviteModal.button.cancel']()}
--- a/packages/component/src/components/page-list/view/create-collection.tsx
+++ b/packages/component/src/components/page-list/view/create-collection.tsx
@ -226,10 +226,12 @@ export const EditCollection = ({
        </div>
        <div style={{ marginTop: 20 }}>
          <Input
+            size="large"
            data-testid="input-collection-title"
            placeholder={t['com.affine.editCollection.untitledCollection']()}
            defaultValue={value.name}
            onChange={name => onChange({ ...value, name })}
+            onEnter={onSaveCollection}
          />
        </div>
      </ScrollableContainer>
--- a/packages/component/src/components/share-menu/disable-public-link/index.tsx
+++ b/packages/component/src/components/share-menu/disable-public-link/index.tsx
@ -9,7 +9,6 @@ export const PublicLinkDisableModal = (props: ConfirmModalProps) => {

  return (
    <ConfirmModal
-      width={480}
      title={t['com.affine.publicLinkDisableModal.title']()}
      description={t['com.affine.publicLinkDisableModal.description']()}
      cancelText={t['com.affine.publicLinkDisableModal.button.cancel']()}
--- a/packages/component/src/ui/input/input.tsx
+++ b/packages/component/src/ui/input/input.tsx
@ -79,7 +79,10 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
    >
      {preFix}
      <input
-        className={clsx(input)}
+        className={clsx(input, {
+          large: size === 'large',
+          'extra-large': size === 'extraLarge',
+        })}
        ref={ref}
        disabled={disabled}
        style={inputStyle}
--- a/packages/component/src/ui/input/style.css.ts
+++ b/packages/component/src/ui/input/style.css.ts
@ -8,16 +8,17 @@ export const inputWrapper = style({
  },
  width: widthVar,
  height: 28,
-  lineHeight: '22px',
-  padding: '0 10px',
-  color: 'var(--affine-text-primary-color)',
-  border: '1px solid',
-  backgroundColor: 'var(--affine-white)',
+  padding: '4px 10px',
+  color: 'var(--affine-icon-color)',
+  border: '1px solid var(--affine-border-color)',
+  backgroundColor: 'var(--affine-white-10)',
  borderRadius: 8,
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
-  fontSize: 'var(--affine-font-base)',
+  gap: 8,
+  // icon size
+  fontSize: '16px',

  selectors: {
    '&.no-border': {
@ -26,10 +27,14 @@ export const inputWrapper = style({
    // size
    '&.large': {
      height: 32,
+      // icon size
+      fontSize: '20px',
    },
    '&.extra-large': {
      height: 40,
-      fontWeight: 600,
+      padding: '8px 10px',
+      // icon size
+      fontSize: '20px',
    },
    // color
    '&.disabled': {
@ -44,20 +49,20 @@ export const inputWrapper = style({
    '&.warning': {
      borderColor: 'var(--affine-warning-color)',
    },
-    '&.default': {
-      borderColor: 'var(--affine-border-color)',
-    },
    '&.default.focus': {
      borderColor: 'var(--affine-primary-color)',
-      boxShadow: '0px 0px 0px 2px rgba(30, 150, 235, 0.30);',
+      boxShadow: 'var(--affine-active-shadow)',
    },
  },
 });

 export const input = style({
-  height: '100%',
  width: '0',
  flex: 1,
+  fontSize: 'var(--affine-font-xs)',
+  lineHeight: '20px',
+  fontWeight: '500',
+  color: 'var(--affine-text-primary-color)',
  boxSizing: 'border-box',
  // prevent default style
  WebkitAppearance: 'none',
@ -72,5 +77,9 @@ export const input = style({
    '&:disabled': {
      color: 'var(--affine-text-disable-color)',
    },
+    '&.large, &.extra-large': {
+      fontSize: 'var(--affine-font-base)',
+      lineHeight: '24px',
+    },
  },
 });
--- a/plugins/copilot/package.json
+++ b/plugins/copilot/package.json
@ -17,7 +17,7 @@
    "@affine/component": "workspace:*",
    "@affine/sdk": "workspace:*",
    "@blocksuite/icons": "2.1.34",
-    "@toeverything/components": "^0.0.43",
+    "@toeverything/components": "^0.0.45",
    "@vanilla-extract/css": "^1.13.0",
    "clsx": "^2.0.0",
    "idb": "^7.1.1",
--- a/plugins/hello-world/package.json
+++ b/plugins/hello-world/package.json
@ -18,7 +18,7 @@
    "@affine/component": "workspace:*",
    "@affine/sdk": "workspace:*",
    "@blocksuite/icons": "2.1.34",
-    "@toeverything/components": "^0.0.43"
+    "@toeverything/components": "^0.0.45"
  },
  "devDependencies": {
    "@affine/plugin-cli": "workspace:*"
--- a/plugins/image-preview/package.json
+++ b/plugins/image-preview/package.json
@ -17,8 +17,8 @@
    "@affine/component": "workspace:*",
    "@affine/sdk": "workspace:*",
    "@blocksuite/icons": "2.1.34",
-    "@toeverything/components": "^0.0.43",
-    "@toeverything/theme": "^0.7.18",
+    "@toeverything/components": "^0.0.45",
+    "@toeverything/theme": "^0.7.20",
    "clsx": "^2.0.0",
    "foxact": "^0.2.20",
    "react-error-boundary": "^4.0.11",
--- a/plugins/outline/package.json
+++ b/plugins/outline/package.json
@ -18,7 +18,7 @@
    "@affine/component": "workspace:*",
    "@affine/sdk": "workspace:*",
    "@blocksuite/icons": "2.1.34",
-    "@toeverything/components": "^0.0.43"
+    "@toeverything/components": "^0.0.45"
  },
  "devDependencies": {
    "@affine/plugin-cli": "workspace:*",
--- a/yarn.lock
+++ b/yarn.lock
@ -208,7 +208,7 @@ __metadata:
    "@testing-library/react": ^14.0.0
    "@toeverything/hooks": "workspace:*"
    "@toeverything/infra": "workspace:*"
-    "@toeverything/theme": ^0.7.18
+    "@toeverything/theme": ^0.7.20
    "@types/react": ^18.2.22
    "@types/react-datepicker": ^4.15.0
    "@types/react-dnd": ^3.0.2
@ -258,7 +258,7 @@ __metadata:
    "@affine/plugin-cli": "workspace:*"
    "@affine/sdk": "workspace:*"
    "@blocksuite/icons": 2.1.34
-    "@toeverything/components": ^0.0.43
+    "@toeverything/components": ^0.0.45
    "@types/marked": ^5.0.1
    "@vanilla-extract/css": ^1.13.0
    clsx: ^2.0.0
@ -311,7 +311,7 @@ __metadata:
    "@sentry/webpack-plugin": ^2.7.1
    "@svgr/webpack": ^8.1.0
    "@swc/core": ^1.3.87
-    "@toeverything/components": ^0.0.43
+    "@toeverything/components": ^0.0.45
    "@types/lodash-es": ^4.17.9
    "@types/webpack-env": ^1.18.1
    async-call-rpc: ^6.3.1
@ -471,7 +471,7 @@ __metadata:
    "@affine/plugin-cli": "workspace:*"
    "@affine/sdk": "workspace:*"
    "@blocksuite/icons": 2.1.34
-    "@toeverything/components": ^0.0.43
+    "@toeverything/components": ^0.0.45
  languageName: unknown
  linkType: soft

@ -497,8 +497,8 @@ __metadata:
    "@affine/plugin-cli": "workspace:*"
    "@affine/sdk": "workspace:*"
    "@blocksuite/icons": 2.1.34
-    "@toeverything/components": ^0.0.43
-    "@toeverything/theme": ^0.7.18
+    "@toeverything/components": ^0.0.45
+    "@toeverything/theme": ^0.7.20
    clsx: ^2.0.0
    foxact: ^0.2.20
    react-error-boundary: ^4.0.11
@ -596,7 +596,7 @@ __metadata:
    "@affine/plugin-cli": "workspace:*"
    "@affine/sdk": "workspace:*"
    "@blocksuite/icons": 2.1.34
-    "@toeverything/components": ^0.0.43
+    "@toeverything/components": ^0.0.45
    jotai: ^2.4.3
    react: 18.2.0
    react-dom: 18.2.0
@ -12413,9 +12413,9 @@ __metadata:
  languageName: node
  linkType: hard

-"@toeverything/components@npm:^0.0.43":
-  version: 0.0.43
-  resolution: "@toeverything/components@npm:0.0.43"
+"@toeverything/components@npm:^0.0.45":
+  version: 0.0.45
+  resolution: "@toeverything/components@npm:0.0.45"
  dependencies:
    "@blocksuite/icons": ^2.1.33
    "@radix-ui/react-dialog": ^1.0.4
@ -12427,7 +12427,7 @@ __metadata:
    clsx: ^2
    react: ^18
    react-dom: ^18
-  checksum: 37e59ca10be31be25464a8445fbb0e4c74abe4208d0484541986fb63b3b777d63015be0a3b2dea7e8be5fd1456f3dabc0fc1df232d3e7fbcbc6f8aff4fcbab5a
+  checksum: 79d81a2cd31ed3bac11204d62967846eda39ff3809f6ecb40fa1c4cf5ec6dae1cfd31f7568193feaaf199b04b1125af30f06034903ec4cfe282bb13af701db64
  languageName: node
  linkType: hard

@ -12530,10 +12530,10 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@toeverything/theme@npm:^0.7.18":
-  version: 0.7.18
-  resolution: "@toeverything/theme@npm:0.7.18"
-  checksum: 61e7e2d6f6eab6c09feabea6466aa69faa5e440f5cd2b85f6e264424dc0d88368a8c4f1c8df05309dca7bd27f1cd2566c83e66c3e83ace7dfa2ac61e598da92b
+"@toeverything/theme@npm:^0.7.20":
+  version: 0.7.20
+  resolution: "@toeverything/theme@npm:0.7.20"
+  checksum: 04fa54b180a0a486f6266578dac15b64ce615754426e2a836a43bc942292df687ab7582a3d4ebcc1629b20f92ad1ae65da60b742525ba39099a217f4c6db4ea1
  languageName: node
  linkType: hard