Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-12 04:18:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: a series of setting issues (#3032)

Browse Source 
(cherry picked from commit 87ba71e77e)
This commit is contained in:
Qi
2023-07-05 22:11:42 +08:00
committed by Alex Yang
parent 0a607e0450
commit 8f1bfa46a9
24 changed files with 235 additions and 463 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
apps/web/src/atoms/index.ts
View File

@@ -2,13 +2,21 @@ import { atom } from 'jotai';
import { atomFamily, atomWithStorage } from 'jotai/utils';
import type { CreateWorkspaceMode } from '../components/affine/create-workspace-modal';
import type { SettingProps } from '../components/affine/setting-modal';
// modal atoms
export const openWorkspacesModalAtom = atom(false);
export const openCreateWorkspaceModalAtom = atom<CreateWorkspaceMode>(false);
export const openQuickSearchModalAtom = atom(false);
export const openOnboardingModalAtom = atom(false);
export const openSettingModalAtom = atom(false);
export type SettingAtom = Pick<SettingProps, 'activeTab' | 'workspace'> & {
open: boolean;
};
export const openSettingModalAtom = atom<SettingAtom>({
open: false,
});
export const openDisableCloudAlertModalAtom = atom(false);

13
apps/web/src/components/affine/language-menu/index.tsx
View File

@@ -1,4 +1,10 @@
import { Menu, MenuItem, MenuTrigger, styled } from '@affine/component';
import {
type ButtonProps,
Menu,
MenuItem,
MenuTrigger,
styled,
} from '@affine/component';
import { LOCALES } from '@affine/i18n';
import { useI18N } from '@affine/i18n';
import type { FC, ReactElement } from 'react';
@@ -41,7 +47,9 @@ const LanguageMenuContent: FC<{
</>
);
};
export const LanguageMenu: FC = () => {
export const LanguageMenu: FC<{ triggerProps: ButtonProps }> = ({
triggerProps,
}) => {
const i18n = useI18N();
const currentLanguage = LOCALES.find(item => item.tag === i18n.language);
@@ -62,6 +70,7 @@ export const LanguageMenu: FC = () => {
<MenuTrigger
data-testid="language-menu-button"
style={{ textTransform: 'capitalize' }}
{...triggerProps}
>
{currentLanguage?.originalName}
</MenuTrigger>

35
apps/web/src/components/affine/setting-modal/general-setting/about/config.tsx Normal file
View File

@@ -0,0 +1,35 @@
import {
DiscordIcon,
GithubIcon,
RedditIcon,
TelegramIcon,
TwitterIcon,
} from './icons';
export const relatedLinks = [
{
icon: <GithubIcon />,
title: 'GitHub',
link: 'https://github.com/toeverything/AFFiNE',
},
{
icon: <RedditIcon />,
title: 'Reddit',
link: 'https://www.reddit.com/r/Affine/',
},
{
icon: <TwitterIcon />,
title: 'Twitter',
link: 'https://twitter.com/AffineOfficial',
},
{
icon: <TelegramIcon />,
title: 'Telegram',
link: 'https://t.me/affineworkos',
},
{
icon: <DiscordIcon />,
title: 'Discord',
link: 'https://discord.gg/Arn7TqJBvG',
},
];

140
apps/web/src/components/affine/setting-modal/general-setting/about/icons.tsx Normal file
View File

@@ -0,0 +1,140 @@
export const LogoIcon = () => {
return (
<svg
width="50"
height="50"
viewBox="0 0 50 50"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M21.1996 0L4 50H14.0741L25.0146 15.4186L35.96 50H46L28.7978 0H21.1996Z"
/>
</svg>
);
};
export const DocIcon = () => {
return (
<svg
width="50"
height="50"
viewBox="0 0 50 50"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M2 40.5353V9.46462C2 6.95444 2.99716 4.54708 4.77212 2.77212C6.54708 0.997163 8.95444 0 11.4646 0H37.7552C39.0224 0 40.0497 1.02726 40.0497 2.29445V33.3652C40.0497 33.4357 40.0465 33.5055 40.0403 33.5744C39.9882 34.1502 39.7234 34.6646 39.3251 35.0385C38.9147 35.4237 38.3625 35.6597 37.7552 35.6597H11.4646C11.0129 35.6597 10.5676 35.7224 10.1404 35.8429C8.60419 36.2781 7.37011 37.4505 6.85245 38.9541C6.67955 39.4584 6.58891 39.9922 6.58891 40.5354C6.58891 41.8285 7.1026 43.0687 8.01697 43.983C8.93134 44.8974 10.1715 45.4111 11.4646 45.4111H42.6309V4.68456C42.6309 3.41736 43.6582 2.3901 44.9254 2.3901C46.1926 2.3901 47.2198 3.41736 47.2198 4.68456V47.7055C47.2198 48.9727 46.1926 50 44.9254 50H11.4646C8.95445 50 6.54708 49.0028 4.77212 47.2279C2.99716 45.4529 2 43.0456 2 40.5353ZM12.6596 38.2409C11.3925 38.2409 10.3652 39.2682 10.3652 40.5354C10.3652 41.8026 11.3925 42.8298 12.6596 42.8298H36.5602C37.8274 42.8298 38.8546 41.8026 38.8546 40.5354C38.8546 39.2682 37.8274 38.2409 36.5602 38.2409H12.6596Z"
/>
</svg>
);
};
export const TwitterIcon = () => {
return (
<svg
width="22"
height="22"
viewBox="0 0 22 22"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M21.6725 4.5259C20.9071 4.86507 20.0848 5.09423 19.2204 5.19782C20.1123 4.66413 20.7796 3.82416 21.0977 2.83465C20.2598 3.33239 19.3426 3.68274 18.3862 3.87048C17.7431 3.18378 16.8912 2.72861 15.9629 2.57567C15.0345 2.42272 14.0816 2.58054 13.2522 3.02463C12.4227 3.46872 11.7631 4.17423 11.3757 5.03163C10.9883 5.88902 10.8948 6.85034 11.1097 7.76632C9.41177 7.68106 7.75072 7.23974 6.23436 6.47098C4.71801 5.70222 3.38025 4.62321 2.30789 3.30398C1.94123 3.93648 1.73039 4.66982 1.73039 5.45082C1.72998 6.1539 1.90312 6.8462 2.23445 7.46632C2.56577 8.08644 3.04504 8.61518 3.62973 9.00565C2.95165 8.98407 2.28853 8.80085 1.69556 8.47123V8.52623C1.69549 9.51233 2.03659 10.4681 2.66098 11.2313C3.28536 11.9945 4.15458 12.5183 5.12114 12.7136C4.49211 12.8838 3.83262 12.9089 3.19248 12.7869C3.46518 13.6354 3.99639 14.3773 4.71173 14.9089C5.42707 15.4405 6.29073 15.7351 7.18181 15.7514C5.66916 16.9389 3.80104 17.583 1.87798 17.5801C1.53733 17.5802 1.19696 17.5603 0.858643 17.5206C2.81066 18.7756 5.08295 19.4417 7.40364 19.4391C15.2595 19.4391 19.5541 12.9326 19.5541 7.28965C19.5541 7.10632 19.5495 6.92115 19.5412 6.73782C20.3766 6.13371 21.0976 5.38564 21.6706 4.52865L21.6725 4.5259V4.5259Z" />
</svg>
);
};
export const GithubIcon = () => {
return (
<svg
width="22"
height="22"
viewBox="0 0 22 22"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_3073_4801)">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M10.9999 0.000812531C4.92238 0.000812531 -0.00012207 4.92331 -0.00012207 11.0008C-0.00012207 15.8683 3.14863 19.9796 7.52113 21.4371C8.07113 21.5333 8.27738 21.2033 8.27738 20.9146C8.27738 20.6533 8.26363 19.7871 8.26363 18.8658C5.49988 19.3746 4.78488 18.1921 4.56488 17.5733C4.44113 17.2571 3.90488 16.2808 3.43738 16.0196C3.05238 15.8133 2.50238 15.3046 3.42363 15.2908C4.28988 15.2771 4.90863 16.0883 5.11488 16.4183C6.10488 18.0821 7.68613 17.6146 8.31863 17.3258C8.41488 16.6108 8.70363 16.1296 9.01988 15.8546C6.57238 15.5796 4.01488 14.6308 4.01488 10.4233C4.01488 9.22706 4.44113 8.23706 5.14238 7.46706C5.03238 7.19206 4.64738 6.06456 5.25238 4.55206C5.25238 4.55206 6.17363 4.26331 8.27738 5.67956C9.15738 5.43206 10.0924 5.30831 11.0274 5.30831C11.9624 5.30831 12.8974 5.43206 13.7774 5.67956C15.8811 4.24956 16.8024 4.55206 16.8024 4.55206C17.4074 6.06456 17.0224 7.19206 16.9124 7.46706C17.6136 8.23706 18.0399 9.21331 18.0399 10.4233C18.0399 14.6446 15.4686 15.5796 13.0211 15.8546C13.4199 16.1983 13.7636 16.8583 13.7636 17.8896C13.7636 19.3608 13.7499 20.5433 13.7499 20.9146C13.7499 21.2033 13.9561 21.5471 14.5061 21.4371C16.6898 20.6998 18.5873 19.2964 19.9316 17.4242C21.2758 15.5521 21.9992 13.3056 21.9999 11.0008C21.9999 4.92331 17.0774 0.000812531 10.9999 0.000812531Z"
/>
</g>
<defs>
<clipPath id="clip0_3073_4801">
<rect width="22" height="22" fill="white" />
</clipPath>
</defs>
</svg>
);
};
export const DiscordIcon = () => {
return (
<svg
width="22"
height="22"
viewBox="0 0 22 22"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_3073_4817)">
<path d="M18.6239 4.11773C17.2214 3.48523 15.718 3.01773 14.146 2.7519C14.132 2.74921 14.1175 2.75094 14.1045 2.75685C14.0915 2.76276 14.0807 2.77256 14.0735 2.7849C13.881 3.12315 13.6665 3.56406 13.5162 3.9124C11.8489 3.66328 10.1538 3.66328 8.48645 3.9124C8.31901 3.52635 8.13019 3.14993 7.92087 2.7849C7.91377 2.77241 7.90304 2.76239 7.8901 2.75617C7.87716 2.74994 7.86263 2.74781 7.84845 2.75006C6.27729 3.0159 4.77395 3.4834 3.37054 4.11681C3.35846 4.12188 3.34823 4.13051 3.3412 4.14156C0.488536 8.33531 -0.293381 12.4255 0.0907023 16.4643C0.0917711 16.4742 0.0948415 16.4838 0.0997268 16.4924C0.104612 16.5011 0.11121 16.5087 0.119119 16.5147C1.78415 17.727 3.64126 18.6504 5.6127 19.2464C5.62645 19.2506 5.64114 19.2506 5.65488 19.2464C5.66862 19.2421 5.68075 19.2338 5.6897 19.2226C6.11393 18.6552 6.48986 18.0533 6.81354 17.4231C6.81803 17.4145 6.82062 17.4051 6.82113 17.3953C6.82164 17.3856 6.82006 17.3759 6.81649 17.3669C6.81293 17.3579 6.80747 17.3497 6.80047 17.343C6.79348 17.3362 6.78512 17.331 6.77595 17.3278C6.18379 17.1048 5.61003 16.8357 5.05995 16.523C5.05007 16.5173 5.04174 16.5093 5.03571 16.4997C5.02969 16.49 5.02615 16.479 5.02542 16.4677C5.0247 16.4563 5.0268 16.4449 5.03155 16.4346C5.03629 16.4243 5.04353 16.4153 5.05262 16.4084C5.16812 16.3231 5.28362 16.2342 5.39362 16.1453C5.40352 16.1373 5.41545 16.1322 5.42807 16.1306C5.4407 16.129 5.45352 16.1309 5.46512 16.1361C9.06487 17.7531 12.9635 17.7531 16.521 16.1361C16.5327 16.1306 16.5456 16.1284 16.5584 16.1299C16.5712 16.1313 16.5834 16.1364 16.5935 16.1444C16.7035 16.2342 16.818 16.3231 16.9345 16.4084C16.9436 16.4151 16.951 16.424 16.9559 16.4342C16.9608 16.4445 16.9631 16.4558 16.9625 16.4672C16.962 16.4785 16.9586 16.4896 16.9528 16.4993C16.9469 16.509 16.9387 16.5172 16.929 16.523C16.3808 16.8383 15.8106 17.1051 15.212 17.3269C15.2028 17.3302 15.1945 17.3355 15.1875 17.3423C15.1805 17.3492 15.175 17.3574 15.1715 17.3665C15.1679 17.3756 15.1663 17.3854 15.1668 17.3952C15.1674 17.4049 15.17 17.4145 15.1745 17.4231C15.5045 18.0529 15.8821 18.6524 16.2974 19.2216C16.306 19.2333 16.318 19.2421 16.3318 19.2467C16.3456 19.2512 16.3605 19.2515 16.3744 19.2473C18.3492 18.653 20.2093 17.7291 21.8762 16.5147C21.8843 16.509 21.8912 16.5017 21.8962 16.4931C21.9013 16.4846 21.9045 16.4751 21.9055 16.4652C22.3639 11.7957 21.1374 7.73856 18.6523 4.1434C18.6462 4.13171 18.6361 4.1226 18.6239 4.11773ZM7.35162 14.0049C6.26812 14.0049 5.37437 13.025 5.37437 11.8232C5.37437 10.6206 6.2507 9.64156 7.35162 9.64156C8.46079 9.64156 9.34629 10.6288 9.32887 11.8232C9.32887 13.0259 8.45254 14.0049 7.35162 14.0049V14.0049ZM14.662 14.0049C13.5776 14.0049 12.6848 13.025 12.6848 11.8232C12.6848 10.6206 13.5602 9.64156 14.662 9.64156C15.7712 9.64156 16.6567 10.6288 16.6393 11.8232C16.6393 13.0259 15.7721 14.0049 14.662 14.0049V14.0049Z" />
</g>
<defs>
<clipPath id="clip0_3073_4817">
<rect width="22" height="22" fill="white" />
</clipPath>
</defs>
</svg>
);
};
export const TelegramIcon = () => {
return (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM14.64 6.8C14.49 8.38 13.84 12.22 13.51 13.99C13.37 14.74 13.09 14.99 12.83 15.02C12.25 15.07 11.81 14.64 11.25 14.27C10.37 13.69 9.87 13.33 9.02 12.77C8.03 12.12 8.67 11.76 9.24 11.18C9.39 11.03 11.95 8.7 12 8.49C12.0069 8.45819 12.006 8.42517 11.9973 8.3938C11.9886 8.36244 11.9724 8.33367 11.95 8.31C11.89 8.26 11.81 8.28 11.74 8.29C11.65 8.31 10.25 9.24 7.52 11.08C7.12 11.35 6.76 11.49 6.44 11.48C6.08 11.47 5.4 11.28 4.89 11.11C4.26 10.91 3.77 10.8 3.81 10.45C3.83 10.27 4.08 10.09 4.55 9.9C7.47 8.63 9.41 7.79 10.38 7.39C13.16 6.23 13.73 6.03 14.11 6.03C14.19 6.03 14.38 6.05 14.5 6.15C14.6 6.23 14.63 6.34 14.64 6.42C14.63 6.48 14.65 6.66 14.64 6.8Z" />
</svg>
);
};
export const RedditIcon = () => {
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M10.75 13.04C10.75 12.47 10.28 12 9.71 12C9.14 12 8.67 12.47 8.67 13.04C8.67 13.3158 8.77957 13.5804 8.97461 13.7754C9.16965 13.9704 9.43418 14.08 9.71 14.08C9.98583 14.08 10.2504 13.9704 10.4454 13.7754C10.6404 13.5804 10.75 13.3158 10.75 13.04ZM14.09 15.41C13.64 15.86 12.68 16.02 12 16.02C11.32 16.02 10.36 15.86 9.91 15.41C9.88567 15.384 9.85626 15.3632 9.82357 15.349C9.79089 15.3348 9.75563 15.3275 9.72 15.3275C9.68437 15.3275 9.64911 15.3348 9.61643 15.349C9.58374 15.3632 9.55432 15.384 9.53 15.41C9.50396 15.4343 9.4832 15.4637 9.469 15.4964C9.45481 15.5291 9.44748 15.5644 9.44748 15.6C9.44748 15.6356 9.45481 15.6709 9.469 15.7036C9.4832 15.7363 9.50396 15.7657 9.53 15.79C10.24 16.5 11.6 16.56 12 16.56C12.4 16.56 13.76 16.5 14.47 15.79C14.496 15.7657 14.5168 15.7363 14.531 15.7036C14.5452 15.6709 14.5525 15.6356 14.5525 15.6C14.5525 15.5644 14.5452 15.5291 14.531 15.4964C14.5168 15.4637 14.496 15.4343 14.47 15.41C14.37 15.31 14.2 15.31 14.09 15.41ZM14.29 12C13.72 12 13.25 12.47 13.25 13.04C13.25 13.61 13.72 14.08 14.29 14.08C14.86 14.08 15.33 13.61 15.33 13.04C15.33 12.47 14.87 12 14.29 12Z" />
<path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM17.8 13.33C17.82 13.47 17.83 13.62 17.83 13.77C17.83 16.01 15.22 17.83 12 17.83C8.78 17.83 6.17 16.01 6.17 13.77C6.17 13.62 6.18 13.47 6.2 13.33C5.69 13.1 5.34 12.59 5.34 12C5.33852 11.7132 5.4218 11.4324 5.57939 11.1929C5.73698 10.9533 5.96185 10.7656 6.22576 10.6534C6.48966 10.5413 6.78083 10.5096 7.06269 10.5623C7.34456 10.6151 7.60454 10.75 7.81 10.95C8.82 10.22 10.22 9.76 11.77 9.71L12.51 6.22C12.52 6.15 12.56 6.09 12.62 6.06C12.68 6.02 12.75 6.01 12.82 6.02L15.24 6.54C15.3221 6.37358 15.4472 6.23215 15.6023 6.13038C15.7575 6.02861 15.9371 5.9702 16.1224 5.96122C16.3077 5.95224 16.4921 5.99301 16.6564 6.07931C16.8207 6.1656 16.9589 6.29428 17.0566 6.45199C17.1544 6.60969 17.2082 6.79069 17.2125 6.9762C17.2167 7.16171 17.1712 7.34498 17.0808 7.507C16.9903 7.66901 16.8582 7.80388 16.698 7.8976C16.5379 7.99132 16.3556 8.04049 16.17 8.04C15.61 8.04 15.16 7.6 15.13 7.05L12.96 6.59L12.3 9.71C13.83 9.76 15.2 10.23 16.2 10.95C16.3533 10.8036 16.5367 10.6925 16.7375 10.6244C16.9382 10.5563 17.1514 10.5329 17.3621 10.5558C17.5728 10.5787 17.776 10.6474 17.9574 10.757C18.1388 10.8667 18.2941 11.0146 18.4123 11.1905C18.5306 11.3664 18.609 11.5661 18.642 11.7754C18.6751 11.9848 18.662 12.1989 18.6037 12.4027C18.5454 12.6064 18.4432 12.795 18.3044 12.9552C18.1656 13.1154 17.9934 13.2433 17.8 13.33Z" />
</svg>
);
};
export const LinkIcon = () => {
return (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M10.2917 1.33334C10.2917 0.988166 10.5715 0.708344 10.9167 0.708344H14.6667C15.0118 0.708344 15.2917 0.988166 15.2917 1.33334V5.08334C15.2917 5.42852 15.0118 5.70834 14.6667 5.70834C14.3215 5.70834 14.0417 5.42852 14.0417 5.08334V2.84223L8.44194 8.44195C8.19787 8.68603 7.80214 8.68603 7.55806 8.44195C7.31398 8.19787 7.31398 7.80215 7.55806 7.55807L13.1578 1.95834H10.9167C10.5715 1.95834 10.2917 1.67852 10.2917 1.33334ZM3.97464 1.54168L7.58334 1.54168C7.92851 1.54168 8.20834 1.8215 8.20834 2.16668C8.20834 2.51185 7.92851 2.79168 7.58334 2.79168H4C3.52298 2.79168 3.2028 2.79216 2.95623 2.81231C2.71697 2.83186 2.60256 2.86676 2.5271 2.90521C2.33109 3.00508 2.17174 3.16443 2.07187 3.36044C2.03342 3.4359 1.99852 3.55031 1.97897 3.78957C1.95882 4.03614 1.95834 4.35632 1.95834 4.83334V12C1.95834 12.477 1.95882 12.7972 1.97897 13.0438C1.99852 13.283 2.03342 13.3974 2.07187 13.4729C2.17174 13.6689 2.33109 13.8283 2.5271 13.9281C2.60256 13.9666 2.71697 14.0015 2.95623 14.021C3.2028 14.0412 3.52298 14.0417 4 14.0417H11.1667C11.6437 14.0417 11.9639 14.0412 12.2104 14.021C12.4497 14.0015 12.5641 13.9666 12.6396 13.9281C12.8356 13.8283 12.9949 13.6689 13.0948 13.4729C13.1333 13.3974 13.1682 13.283 13.1877 13.0438C13.2079 12.7972 13.2083 12.477 13.2083 12V8.41668C13.2083 8.0715 13.4882 7.79168 13.8333 7.79168C14.1785 7.79168 14.4583 8.0715 14.4583 8.41668V12.0254C14.4583 12.4705 14.4584 12.842 14.4336 13.1456C14.4077 13.4621 14.3518 13.7594 14.2086 14.0404C13.9888 14.4716 13.6383 14.8222 13.2071 15.0419C12.926 15.1851 12.6288 15.241 12.3122 15.2669C12.0087 15.2917 11.6372 15.2917 11.192 15.2917H3.97463C3.5295 15.2917 3.15797 15.2917 2.85444 15.2669C2.53787 15.241 2.24066 15.1851 1.95961 15.0419C1.5284 14.8222 1.17782 14.4716 0.958113 14.0404C0.81491 13.7594 0.758984 13.4621 0.733119 13.1456C0.70832 12.842 0.708327 12.4705 0.708336 12.0254V4.80798C0.708327 4.36285 0.70832 3.99131 0.733119 3.68779C0.758984 3.37121 0.81491 3.074 0.958113 2.79295C1.17782 2.36174 1.5284 2.01116 1.95961 1.79145C2.24066 1.64825 2.53787 1.59232 2.85444 1.56646C3.15797 1.54166 3.52951 1.54167 3.97464 1.54168Z"
/>
</svg>
);
};

2
apps/web/src/components/affine/setting-modal/general-setting/about/index.tsx
View File

@@ -1,5 +1,4 @@
import { Switch } from '@affine/component';
import { relatedLinks } from '@affine/component/contact-modal';
import { SettingHeader } from '@affine/component/setting-components';
import { SettingRow } from '@affine/component/setting-components';
import { SettingWrapper } from '@affine/component/setting-components';
@@ -8,6 +7,7 @@ import { ArrowRightSmallIcon, OpenInNewIcon } from '@blocksuite/icons';
import { useCallback } from 'react';
import { type AppSetting, useAppSetting } from '../../../../../atoms/settings';
import { relatedLinks } from './config';
import { communityItem, communityWrapper, link } from './style.css';
export const AboutAffine = () => {

14
apps/web/src/components/affine/setting-modal/general-setting/appearance/index.tsx
View File

@@ -21,6 +21,7 @@ export const ThemeSettings = () => {
return (
<RadioButtonGroup
width={250}
className={settingWrapper}
defaultValue={theme}
onValueChange={useCallback(
@@ -30,13 +31,17 @@ export const ThemeSettings = () => {
[setTheme]
)}
>
<RadioButton value="system" data-testid="system-theme-trigger">
<RadioButton
bold={true}
value="system"
data-testid="system-theme-trigger"
>
{t['system']()}
</RadioButton>
<RadioButton value="light" data-testid="light-theme-trigger">
<RadioButton bold={true} value="light" data-testid="light-theme-trigger">
{t['light']()}
</RadioButton>
<RadioButton value="dark" data-testid="dark-theme-trigger">
<RadioButton bold={true} value="dark" data-testid="dark-theme-trigger">
{t['dark']()}
</RadioButton>
</RadioButtonGroup>
@@ -72,7 +77,7 @@ export const AppearanceSettings = () => {
desc={t['Select the language for the interface.']()}
>
<div className={settingWrapper}>
<LanguageMenu />
<LanguageMenu triggerProps={{ size: 'small' }} />
</div>
</SettingRow>
{runtimeConfig.enableNewSettingUnstableApi && environment.isDesktop ? (
@@ -104,6 +109,7 @@ export const AppearanceSettings = () => {
>
<RadioButtonGroup
className={settingWrapper}
width={250}
defaultValue={appSettings.windowFrameStyle}
onValueChange={(value: AppSetting['windowFrameStyle']) => {
setAppSettings({ windowFrameStyle: value });

92
apps/web/src/components/affine/setting-modal/index.tsx
View File

@@ -2,18 +2,15 @@ import {
SettingModal as SettingModalBase,
type SettingModalProps,
} from '@affine/component/setting-components';
import type {
AffineCloudWorkspace,
LocalWorkspace,
} from '@affine/env/workspace';
import { WorkspaceFlavour } from '@affine/env/workspace';
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import { ContactWithUsIcon } from '@blocksuite/icons';
import type React from 'react';
import { useCallback, useMemo, useState } from 'react';
import { useCallback, useMemo } from 'react';
import { useCurrentWorkspace } from '../../../hooks/current/use-current-workspace';
import { useWorkspaces } from '../../../hooks/use-workspaces';
import type { AllWorkspace } from '../../../shared';
import { AccountSetting } from './account-setting';
import {
GeneralSetting,
@@ -22,80 +19,79 @@ import {
} from './general-setting';
import { SettingSidebar } from './setting-sidebar';
import { settingContent } from './style.css';
import type { Workspace } from './type';
import { WorkSpaceSetting } from './workspace-setting';
export const SettingModal: React.FC<SettingModalProps> = ({
type ActiveTab = GeneralSettingKeys | 'workspace' | 'account';
export type SettingProps = {
activeTab?: ActiveTab;
workspace?: AllWorkspace;
onSettingClick: (params: {
activeTab: ActiveTab;
workspace?: AllWorkspace;
}) => void;
};
export const SettingModal: React.FC<SettingModalProps & SettingProps> = ({
open,
setOpen,
activeTab = 'appearance',
workspace = null,
onSettingClick,
}) => {
const t = useAFFiNEI18N();
const workspaces = useWorkspaces();
const [currentWorkspace] = useCurrentWorkspace();
const generalSettingList = useGeneralSettingList();
const workspaceList = useMemo(() => {
return workspaces.filter(
({ flavour }) => flavour !== WorkspaceFlavour.PUBLIC
) as Workspace[];
) as AllWorkspace[];
}, [workspaces]);
const [currentRef, setCurrentRef] = useState<{
workspace: Workspace | null;
generalKey: GeneralSettingKeys | null;
isAccount: boolean;
}>({
workspace: null,
generalKey: generalSettingList[0].key,
isAccount: false,
});
const onGeneralSettingClick = useCallback((key: GeneralSettingKeys) => {
setCurrentRef({
workspace: null,
generalKey: key,
isAccount: false,
});
}, []);
const onWorkspaceSettingClick = useCallback((workspace: Workspace) => {
setCurrentRef({
workspace: workspace,
generalKey: null,
isAccount: false,
});
}, []);
const onGeneralSettingClick = useCallback(
(key: GeneralSettingKeys) => {
onSettingClick({
activeTab: key,
});
},
[onSettingClick]
);
const onWorkspaceSettingClick = useCallback(
(workspace: AllWorkspace) => {
onSettingClick({
activeTab: 'workspace',
workspace,
});
},
[onSettingClick]
);
const onAccountSettingClick = useCallback(() => {
setCurrentRef({
workspace: null,
generalKey: null,
isAccount: true,
});
}, []);
onSettingClick({ activeTab: 'account' });
}, [onSettingClick]);
return (
<SettingModalBase open={open} setOpen={setOpen}>
<SettingSidebar
generalSettingList={generalSettingList}
onGeneralSettingClick={onGeneralSettingClick}
currentWorkspace={
currentWorkspace as AffineCloudWorkspace | LocalWorkspace
}
currentWorkspace={currentWorkspace as AllWorkspace}
workspaceList={workspaceList}
onWorkspaceSettingClick={onWorkspaceSettingClick}
selectedGeneralKey={currentRef.generalKey}
selectedWorkspace={currentRef.workspace}
selectedGeneralKey={activeTab}
selectedWorkspace={workspace}
onAccountSettingClick={onAccountSettingClick}
/>
<div className={settingContent}>
<div className="wrapper">
<div className="content">
{currentRef.workspace ? (
<WorkSpaceSetting workspace={currentRef.workspace} />
{activeTab === 'workspace' && workspace ? (
<WorkSpaceSetting workspace={workspace} />
) : null}
{currentRef.generalKey ? (
<GeneralSetting generalKey={currentRef.generalKey} />
{generalSettingList.find(v => v.key === activeTab) ? (
<GeneralSetting generalKey={activeTab as GeneralSettingKeys} />
) : null}
{currentRef.isAccount ? <AccountSetting /> : null}
{activeTab === 'account' ? <AccountSetting /> : null}
</div>
<div className="footer">
<ContactWithUsIcon />

18
apps/web/src/components/affine/setting-modal/setting-sidebar/index.tsx
View File

@@ -1,18 +1,14 @@
import { UserAvatar } from '@affine/component/user-avatar';
import { WorkspaceAvatar } from '@affine/component/workspace-avatar';
import type {
AffineCloudWorkspace,
LocalWorkspace,
} from '@affine/env/workspace';
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
import clsx from 'clsx';
import type { AllWorkspace } from '../../../../shared';
import type {
GeneralSettingKeys,
GeneralSettingList,
} from '../general-setting';
import type { Workspace } from '../type';
import {
accountButton,
settingSlideBar,
@@ -34,13 +30,11 @@ export const SettingSidebar = ({
}: {
generalSettingList: GeneralSettingList;
onGeneralSettingClick: (key: GeneralSettingKeys) => void;
currentWorkspace: Workspace;
workspaceList: Workspace[];
onWorkspaceSettingClick: (
workspace: AffineCloudWorkspace | LocalWorkspace
) => void;
currentWorkspace: AllWorkspace;
workspaceList: AllWorkspace[];
onWorkspaceSettingClick: (workspace: AllWorkspace) => void;
selectedWorkspace: Workspace | null;
selectedWorkspace: AllWorkspace | null;
selectedGeneralKey: string | null;
onAccountSettingClick: () => void;
}) => {
@@ -118,7 +112,7 @@ const WorkspaceListItem = ({
isCurrent,
isActive,
}: {
workspace: AffineCloudWorkspace | LocalWorkspace;
workspace: AllWorkspace;
onClick: () => void;
isCurrent: boolean;
isActive: boolean;

1
apps/web/src/components/affine/setting-modal/setting-sidebar/style.css.ts
View File

@@ -34,6 +34,7 @@ export const sidebarItemsWrapper = style({
selectors: {
'&.scroll': {
flexGrow: 1,
overflowY: 'auto',
},
},
});

6
apps/web/src/components/affine/setting-modal/type.ts
View File

@@ -1,6 +0,0 @@
import type {
AffineCloudWorkspace,
LocalWorkspace,
} from '@affine/env/workspace';
export type Workspace = AffineCloudWorkspace | LocalWorkspace;

8
apps/web/src/components/affine/setting-modal/workspace-setting/index.tsx
View File

@@ -3,9 +3,13 @@ import { Suspense, useCallback } from 'react';
import { getUIAdapter } from '../../../../adapters/workspace';
import { useOnTransformWorkspace } from '../../../../hooks/root/use-on-transform-workspace';
import { useAppHelper } from '../../../../hooks/use-workspaces';
import type { Workspace } from '../type';
import type { AllWorkspace } from '../../../../shared';
export const WorkSpaceSetting = ({ workspace }: { workspace: Workspace }) => {
export const WorkSpaceSetting = ({
workspace,
}: {
workspace: AllWorkspace;
}) => {
const helper = useAppHelper();
const { NewSettingsDetail } = getUIAdapter(workspace.flavour);

35
apps/web/src/components/pure/help-island/index.tsx
View File

@@ -2,9 +2,9 @@ import { MuiFade, Tooltip } from '@affine/component';
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import { CloseIcon, NewIcon, UserGuideIcon } from '@blocksuite/icons';
import { useAtom } from 'jotai';
import { lazy, Suspense, useState } from 'react';
import { useCallback, useState } from 'react';
import { openOnboardingModalAtom } from '../../../atoms';
import { openOnboardingModalAtom, openSettingModalAtom } from '../../../atoms';
import { useCurrentMode } from '../../../hooks/current/use-current-mode';
import { ShortcutsModal } from '../shortcuts-modal';
import { ContactIcon, HelpIcon, KeyboardIcon } from './icons';
@@ -14,11 +14,7 @@ import {
StyledIsland,
StyledTriggerWrapper,
} from './style';
const ContactModal = lazy(() =>
import('@affine/component/contact-modal').then(({ ContactModal }) => ({
default: ContactModal,
}))
);
const DEFAULT_SHOW_LIST: IslandItemNames[] = [
'whatNew',
'contact',
@@ -33,6 +29,7 @@ export const HelpIsland = ({
}) => {
const mode = useCurrentMode();
const [, setOpenOnboarding] = useAtom(openOnboardingModalAtom);
const [, setOpenSettingModalAtom] = useAtom(openSettingModalAtom);
const [spread, setShowSpread] = useState(false);
// const { triggerShortcutsModal, triggerContactModal } = useModal();
// const blockHub = useGlobalState(store => store.blockHub);
@@ -52,8 +49,18 @@ export const HelpIsland = ({
// useEffect(() => {
// spread && blockHub?.toggleMenu(false);
// }, [blockHub, spread]);
const [open, setOpen] = useState(false);
const [openShortCut, setOpenShortCut] = useState(false);
const openAbout = useCallback(() => {
setShowSpread(false);
setOpenSettingModalAtom({
open: true,
activeTab: 'about',
});
}, [setOpenSettingModalAtom]);
return (
<>
<StyledIsland
@@ -83,10 +90,7 @@ export const HelpIsland = ({
<Tooltip content={t['Contact Us']()} placement="left-end">
<StyledIconWrapper
data-testid="right-bottom-contact-us-icon"
onClick={() => {
setShowSpread(false);
setOpen(true);
}}
onClick={openAbout}
>
<ContactIcon />
</StyledIconWrapper>
@@ -136,13 +140,6 @@ export const HelpIsland = ({
</StyledTriggerWrapper>
</MuiFade>
</StyledIsland>
<Suspense>
<ContactModal
open={open}
onClose={() => setOpen(false)}
logoSrc="/imgs/affine-text-logo.png"
/>
</Suspense>
<ShortcutsModal
open={openShortCut}
onClose={() => setOpenShortCut(false)}

1
apps/web/src/components/pure/workspace-title/index.tsx
View File

@@ -54,6 +54,7 @@ export const WorkspaceModeFilterTab = ({ ...props }: WorkspaceTitleProps) => {
<Header {...props}>
<div className={styles.allPageListTitleWrapper}>
<RadioButtonGroup
width={300}
defaultValue={value}
onValueChange={handleValueChange}
>

26
apps/web/src/layouts/workspace-layout.tsx
View File

@@ -38,6 +38,7 @@ import type { FC, PropsWithChildren, ReactElement } from 'react';
import { lazy, Suspense, useCallback, useEffect, useMemo } from 'react';
import { WorkspaceAdapters } from '../adapters/workspace';
import type { SettingAtom } from '../atoms';
import {
openQuickSearchModalAtom,
openSettingModalAtom,
@@ -100,14 +101,33 @@ export const QuickSearch: FC = () => {
};
export const Setting: FC = () => {
const [currentWorkspace] = useCurrentWorkspace();
const [openSettingModal, setOpenSettingModalAtom] =
const [{ open, workspace, activeTab }, setOpenSettingModalAtom] =
useAtom(openSettingModalAtom);
const blockSuiteWorkspace = currentWorkspace?.blockSuiteWorkspace;
const onSettingClick = useCallback(
({
activeTab,
workspace,
}: Pick<SettingAtom, 'activeTab' | 'workspace'>) => {
setOpenSettingModalAtom(prev => ({ ...prev, activeTab, workspace }));
},
[setOpenSettingModalAtom]
);
if (!blockSuiteWorkspace) {
return null;
}
return (
<SettingModal open={openSettingModal} setOpen={setOpenSettingModalAtom} />
<SettingModal
open={open}
activeTab={activeTab || 'appearance'}
workspace={workspace}
onSettingClick={onSettingClick}
setOpen={open => {
setOpenSettingModalAtom(prev => ({ ...prev, open }));
}}
/>
);
};
@@ -336,7 +356,7 @@ export const WorkspaceLayoutInner: FC<PropsWithChildren> = ({ children }) => {
const [, setOpenSettingModalAtom] = useAtom(openSettingModalAtom);
const handleOpenSettingModal = useCallback(() => {
setOpenSettingModalAtom(true);
setOpenSettingModalAtom({ activeTab: 'appearance', open: true });
}, [setOpenSettingModalAtom]);
const resizing = useAtomValue(appSidebarResizingAtom);

29
apps/web/src/providers/modal-provider.tsx
View File

@@ -13,10 +13,12 @@ import {
openCreateWorkspaceModalAtom,
openDisableCloudAlertModalAtom,
openOnboardingModalAtom,
openSettingModalAtom,
openWorkspacesModalAtom,
} from '../atoms';
import { useRouterHelper } from '../hooks/use-router-helper';
import { useWorkspaces } from '../hooks/use-workspaces';
import type { AllWorkspace } from '../shared';
const WorkspaceListModal = lazy(() =>
import('../components/pure/workspace-list-modal').then(module => ({
@@ -93,6 +95,20 @@ export const AllWorkspaceModals = (): ReactElement => {
rootCurrentWorkspaceIdAtom
);
const [transitioning, transition] = useTransition();
const [, setOpenSettingModalAtom] = useAtom(openSettingModalAtom);
const handleOpenSettingModal = useCallback(
(workspace: AllWorkspace) => {
setOpenWorkspacesModal(false);
setOpenSettingModalAtom({
open: true,
activeTab: 'workspace',
workspace,
});
},
[setOpenSettingModalAtom, setOpenWorkspacesModal]
);
return (
<>
<Suspense>
@@ -129,18 +145,7 @@ export const AllWorkspaceModals = (): ReactElement => {
},
[jumpToSubPath, setCurrentWorkspaceId, setOpenWorkspacesModal]
)}
onClickWorkspaceSetting={useCallback(
workspace => {
setOpenWorkspacesModal(false);
setCurrentWorkspaceId(workspace.id);
jumpToSubPath(workspace.id, WorkspaceSubPath.SETTING).catch(
error => {
console.error(error);
}
);
},
[jumpToSubPath, setCurrentWorkspaceId, setOpenWorkspacesModal]
)}
onClickWorkspaceSetting={handleOpenSettingModal}
onNewWorkspace={useCallback(() => {
setOpenCreateWorkspaceModal('new');
}, [setOpenCreateWorkspaceModal])}