Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-15 05:37:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: modify style & add edgeless toolbar

Browse Source
This commit is contained in:
QiShaoXuan
2022-10-20 18:55:03 +08:00
parent 1c3fb798de
commit 06657596ff
17 changed files with 608 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/app/src/components/Header/styles.ts
View File

@@ -1,11 +1,9 @@
import { styled } from '@/styles';
import { displayFlex, styled } from '@/styles';
export const StyledHeader = styled('div')({
height: '60px',
width: '100vw',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
...displayFlex('space-between', 'center'),
background: 'var(--affine-page-background)',
transition: 'background-color 0.5s',
position: 'fixed',
@@ -24,9 +22,7 @@ export const StyledTitle = styled('div')({
top: 0,
margin: 'auto',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
...displayFlex('center', 'center'),
fontSize: '20px',
});
@@ -74,9 +70,7 @@ export const IconButton = styled('div')(({ theme }) => {
return {
width: '32px',
height: '32px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
...displayFlex('center', 'center'),
color: theme.colors.iconColor,
borderRadius: '5px',
':hover': {

BIN
packages/app/src/components/contact-modal/bg.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 307 KiB

After

Width:  |  Height:  |  Size: 299 KiB

144
packages/app/src/components/contact-modal/icons.tsx
View File

@@ -1,55 +1,139 @@
// export const CloseIcon = () => {
// return (
// <svg
// width="14"
// height="14"
// viewBox="0 0 14 14"
// fill="currentColor"
// xmlns="http://www.w3.org/2000/svg"
// >
// <path d="M7.94 7.00014L13.4667 1.47348C13.5759 1.34594 13.633 1.18189 13.6265 1.01411C13.62 0.846324 13.5504 0.687165 13.4317 0.568435C13.313 0.449706 13.1538 0.38015 12.986 0.37367C12.8183 0.367189 12.6542 0.42426 12.5267 0.533477L7 6.06014L1.47334 0.526811C1.3478 0.401275 1.17754 0.33075 1 0.33075C0.822468 0.33075 0.652205 0.401275 0.526669 0.526811C0.401133 0.652346 0.330608 0.82261 0.330608 1.00014C0.330608 1.17768 0.401133 1.34794 0.526669 1.47348L6.06 7.00014L0.526669 12.5268C0.456881 12.5866 0.400201 12.6601 0.360186 12.7428C0.32017 12.8255 0.297683 12.9156 0.294137 13.0074C0.290591 13.0993 0.306061 13.1908 0.339577 13.2764C0.373094 13.3619 0.423932 13.4396 0.488902 13.5046C0.553872 13.5695 0.63157 13.6204 0.71712 13.6539C0.80267 13.6874 0.894225 13.7029 0.986038 13.6993C1.07785 13.6958 1.16794 13.6733 1.25065 13.6333C1.33336 13.5933 1.4069 13.5366 1.46667 13.4668L7 7.94014L12.5267 13.4668C12.6542 13.576 12.8183 13.6331 12.986 13.6266C13.1538 13.6201 13.313 13.5506 13.4317 13.4319C13.5504 13.3131 13.62 13.154 13.6265 12.9862C13.633 12.8184 13.5759 12.6543 13.4667 12.5268L7.94 7.00014Z" />
// </svg>
// );
// };
export const LogoIcon = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
width="50"
height="50"
viewBox="0 0 50 50"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
d="M10.552 2 4 21h3.838l4.168-13.14L16.176 21H20L13.447 2h-2.895Z"
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 DiscordIcon = (props: any) => {
export const TwitterIcon = () => {
return (
<svg
{...props}
width="71"
height="55"
viewBox="0 0 71 55"
fill="currentcolor"
width="22"
height="22"
viewBox="0 0 22 22"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0)">
<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
d="M60.1045 4.8978C55.5792 2.8214 50.7265 1.2916 45.6527 0.41542C45.5603 0.39851 45.468 0.440769 45.4204 0.525289C44.7963 1.6353 44.105 3.0834 43.6209 4.2216C38.1637 3.4046 32.7345 3.4046 27.3892 4.2216C26.905 3.0581 26.1886 1.6353 25.5617 0.525289C25.5141 0.443589 25.4218 0.40133 25.3294 0.41542C20.2584 1.2888 15.4057 2.8186 10.8776 4.8978C10.8384 4.9147 10.8048 4.9429 10.7825 4.9795C1.57795 18.7309 -0.943561 32.1443 0.293408 45.3914C0.299005 45.4562 0.335386 45.5182 0.385761 45.5576C6.45866 50.0174 12.3413 52.7249 18.1147 54.5195C18.2071 54.5477 18.305 54.5139 18.3638 54.4378C19.7295 52.5728 20.9469 50.6063 21.9907 48.5383C22.0523 48.4172 21.9935 48.2735 21.8676 48.2256C19.9366 47.4931 18.0979 46.6 16.3292 45.5858C16.1893 45.5041 16.1781 45.304 16.3068 45.2082C16.679 44.9293 17.0513 44.6391 17.4067 44.3461C17.471 44.2926 17.5606 44.2813 17.6362 44.3151C29.2558 49.6202 41.8354 49.6202 53.3179 44.3151C53.3935 44.2785 53.4831 44.2898 53.5502 44.3433C53.9057 44.6363 54.2779 44.9293 54.6529 45.2082C54.7816 45.304 54.7732 45.5041 54.6333 45.5858C52.8646 46.6197 51.0259 47.4931 49.0921 48.2228C48.9662 48.2707 48.9102 48.4172 48.9718 48.5383C50.038 50.6034 51.2554 52.5699 52.5959 54.435C52.6519 54.5139 52.7526 54.5477 52.845 54.5195C58.6464 52.7249 64.529 50.0174 70.6019 45.5576C70.6551 45.5182 70.6887 45.459 70.6943 45.3942C72.1747 30.0791 68.2147 16.7757 60.1968 4.9823C60.1772 4.9429 60.1437 4.9147 60.1045 4.8978ZM23.7259 37.3253C20.2276 37.3253 17.3451 34.1136 17.3451 30.1693C17.3451 26.225 20.1717 23.0133 23.7259 23.0133C27.308 23.0133 30.1626 26.2532 30.1066 30.1693C30.1066 34.1136 27.28 37.3253 23.7259 37.3253ZM47.3178 37.3253C43.8196 37.3253 40.9371 34.1136 40.9371 30.1693C40.9371 26.225 43.7636 23.0133 47.3178 23.0133C50.9 23.0133 53.7545 26.2532 53.6986 30.1693C53.6986 34.1136 50.9 37.3253 47.3178 37.3253Z"
fill="currentcolor"
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">
<rect width="71" height="55" fill="white" />
<clipPath id="clip0_3073_4801">
<rect width="22" height="22" fill="white" />
</clipPath>
</defs>
</svg>
);
};
export const DiscordIcon = (props: any) => {
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="22"
height="22"
viewBox="0 0 22 22"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M20.1081 4.59007L17.0651 19.43C16.8356 20.4774 16.2369 20.7381 15.3861 20.2447L10.7496 16.7115L8.51231 18.9366C8.26473 19.1926 8.05766 19.4068 7.5805 19.4068L7.91361 14.5237L16.507 6.49394C16.8806 6.14947 16.4259 5.95862 15.9263 6.30309L5.30275 13.2203L0.729238 11.7401C-0.265591 11.4189 -0.283597 10.7113 0.936307 10.2179L18.8252 3.09117C19.6535 2.76998 20.3782 3.28203 20.1081 4.59007V4.59007Z" />
</svg>
);
};
export const RedditIcon = () => {
return (
<svg
width="22"
height="22"
viewBox="0 0 22 22"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M21.9987 11.3855C21.9987 11.8602 21.878 12.2919 21.6365 12.6807C21.3951 13.0694 21.0698 13.3661 20.6606 13.5707C20.7588 13.9471 20.8079 14.34 20.8079 14.7492C20.8079 16.0177 20.3721 17.1921 19.5005 18.2724C18.6289 19.3527 17.4402 20.2059 15.9343 20.832C14.4285 21.458 12.7916 21.7711 11.0239 21.7711C9.25614 21.7711 7.62138 21.458 6.11961 20.832C4.61784 20.2059 3.43116 19.3527 2.55956 18.2724C1.68796 17.1921 1.25216 16.0177 1.25216 14.7492C1.25216 14.3645 1.29717 13.9799 1.38719 13.5952C0.969808 13.3906 0.634263 13.0899 0.380558 12.6929C0.126853 12.296 0 11.8602 0 11.3855C0 10.7145 0.237337 10.1395 0.712011 9.66076C1.18669 9.18199 1.76366 8.94261 2.44293 8.94261C3.13858 8.94261 3.73192 9.2004 4.22296 9.716C6.00708 8.47203 8.11447 7.80912 10.5451 7.72728L11.9692 1.33145C11.9937 1.22506 12.0551 1.13913 12.1533 1.07366C12.2515 1.00818 12.3579 0.987724 12.4725 1.01228L17.0023 2.00664C17.1496 1.70383 17.3706 1.46035 17.6652 1.27621C17.9599 1.09207 18.2831 1 18.635 1C19.1425 1 19.5762 1.178 19.9363 1.53401C20.2964 1.89001 20.4765 2.32172 20.4765 2.82913C20.4765 3.33654 20.2964 3.7703 19.9363 4.13039C19.5762 4.49049 19.1425 4.67054 18.635 4.67054C18.1276 4.67054 17.6959 4.49254 17.3399 4.13653C16.9839 3.78053 16.8059 3.34882 16.8059 2.84141L12.7057 1.93298L11.429 7.72728C13.8842 7.80093 16.008 8.45566 17.8003 9.69145C18.275 9.19222 18.8601 8.94261 19.5558 8.94261C20.235 8.94261 20.812 9.18199 21.2867 9.66076C21.7614 10.1395 21.9987 10.7145 21.9987 11.3855ZM5.13139 13.8285C5.13139 14.3359 5.30939 14.7696 5.6654 15.1297C6.0214 15.4898 6.45311 15.6699 6.96052 15.6699C7.46793 15.6699 7.90169 15.4898 8.26178 15.1297C8.62188 14.7696 8.80193 14.3359 8.80193 13.8285C8.80193 13.3211 8.62188 12.8894 8.26178 12.5334C7.90169 12.1773 7.46793 11.9993 6.96052 11.9993C6.4613 11.9993 6.03163 12.1794 5.67154 12.5395C5.31144 12.8996 5.13139 13.3293 5.13139 13.8285ZM15.075 18.1865C15.165 18.0965 15.21 17.9901 15.21 17.8673C15.21 17.7445 15.165 17.6381 15.075 17.5481C14.9932 17.4663 14.8909 17.4254 14.7681 17.4254C14.6453 17.4254 14.5389 17.4663 14.4489 17.5481C14.1134 17.8919 13.6182 18.1456 12.9635 18.3092C12.3088 18.4729 11.6541 18.5548 10.9993 18.5548C10.3446 18.5548 9.6899 18.4729 9.03518 18.3092C8.38045 18.1456 7.88532 17.8919 7.54977 17.5481C7.45975 17.4663 7.35336 17.4254 7.2306 17.4254C7.10783 17.4254 7.00553 17.4663 6.92369 17.5481C6.83367 17.63 6.78866 17.7343 6.78866 17.8612C6.78866 17.988 6.83367 18.0965 6.92369 18.1865C7.27561 18.5384 7.76051 18.8166 8.37841 19.0212C8.9963 19.2258 9.49757 19.3466 9.88222 19.3834C10.2669 19.4202 10.6392 19.4386 10.9993 19.4386C11.3594 19.4386 11.7318 19.4202 12.1165 19.3834C12.5011 19.3466 13.0024 19.2258 13.6203 19.0212C14.2382 18.8166 14.7231 18.5384 15.075 18.1865ZM15.0382 15.6699C15.5456 15.6699 15.9773 15.4898 16.3333 15.1297C16.6893 14.7696 16.8673 14.3359 16.8673 13.8285C16.8673 13.3293 16.6872 12.8996 16.3272 12.5395C15.9671 12.1794 15.5374 11.9993 15.0382 11.9993C14.5308 11.9993 14.097 12.1773 13.7369 12.5334C13.3768 12.8894 13.1968 13.3211 13.1968 13.8285C13.1968 14.3359 13.3768 14.7696 13.7369 15.1297C14.097 15.4898 14.5308 15.6699 15.0382 15.6699Z" />
</svg>
);
};
export const LinkIcon = () => {
return (
<svg
width="14"
height="15"
viewBox="0 0 14 15"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M9 2.19999C8.6134 2.19999 8.3 1.88659 8.3 1.49999C8.3 1.11339 8.6134 0.799988 9 0.799988H13C13.0949 0.799988 13.1854 0.818878 13.268 0.853103C13.3499 0.887011 13.4267 0.937153 13.4935 1.00353C13.494 1.00402 13.4945 1.00452 13.495 1.00501C13.4955 1.00551 13.496 1.006 13.4965 1.0065C13.5628 1.07327 13.613 1.15009 13.6469 1.23204C13.6811 1.31457 13.7 1.40507 13.7 1.49999V5.49999C13.7 5.88659 13.3866 6.19999 13 6.19999C12.6134 6.19999 12.3 5.88659 12.3 5.49999V3.18994L6.16164 9.3283C5.88828 9.60166 5.44506 9.60166 5.17169 9.3283C4.89833 9.05493 4.89833 8.61171 5.17169 8.33835L11.3101 2.19999H9ZM2.33334 4.19999C2.16537 4.19999 2.00428 4.26671 1.8855 4.38549C1.76673 4.50426 1.7 4.66535 1.7 4.83332V12.1667C1.7 12.3346 1.76673 12.4957 1.8855 12.6145C2.00428 12.7333 2.16537 12.8 2.33334 12.8H9.66667C9.83464 12.8 9.99573 12.7333 10.1145 12.6145C10.2333 12.4957 10.3 12.3346 10.3 12.1667V8.16665C10.3 7.78006 10.6134 7.46665 11 7.46665C11.3866 7.46665 11.7 7.78006 11.7 8.16665V12.1667C11.7 12.7059 11.4858 13.2231 11.1045 13.6044C10.7231 13.9858 10.2059 14.2 9.66667 14.2H2.33334C1.79406 14.2 1.27688 13.9858 0.895553 13.6044C0.514229 13.2231 0.300003 12.7059 0.300003 12.1667V4.83332C0.300003 4.29405 0.514228 3.77686 0.895553 3.39554C1.27688 3.01421 1.79406 2.79999 2.33334 2.79999H6.33334C6.71994 2.79999 7.03334 3.11339 7.03334 3.49999C7.03334 3.88659 6.71994 4.19999 6.33334 4.19999H2.33334Z"
/>
</svg>
);
};

41
packages/app/src/components/contact-modal/index.tsx
View File

@@ -1,12 +1,16 @@
import { createPortal } from 'react-dom';
import Fade from '@mui/material/Fade';
import GitHubIcon from '@mui/icons-material/GitHub';
import RedditIcon from '@mui/icons-material/Reddit';
import TelegramIcon from '@mui/icons-material/Telegram';
import TwitterIcon from '@mui/icons-material/Twitter';
import CloseIcon from '@mui/icons-material/Close';
import { LogoIcon, DiscordIcon } from './icons';
import {
LogoIcon,
DocIcon,
TwitterIcon,
GithubIcon,
DiscordIcon,
TelegramIcon,
RedditIcon,
LinkIcon,
} from './icons';
import logo from './affine-text-logo.png';
import {
StyledModalContainer,
@@ -27,7 +31,7 @@ import {
const linkList = [
{
icon: <GitHubIcon />,
icon: <GithubIcon />,
title: 'Github',
link: 'https://github.com/toeverything/AFFiNE',
},
@@ -55,12 +59,14 @@ const linkList = [
const rightLinkList = [
{
icon: <LogoIcon />,
title: 'Official Website AFFiNE.pro',
title: 'Official Website ',
subTitle: 'AFFiNE.pro',
link: 'https://affine.pro',
},
{
icon: <GitHubIcon />,
title: 'Check Our Docs Open Source',
icon: <DocIcon />,
title: 'Check Our Docs',
subTitle: 'Open Source',
link: 'https://github.com/toeverything/AFFiNE',
},
];
@@ -80,24 +86,27 @@ export const ContactModal = ({ open, onClose }: TransitionsModalProps) => {
<StyledModalHeaderLeft>
<StyledLogo src={logo.src} alt="" />
<span>Alpha</span>
<span>live demo</span>
</StyledModalHeaderLeft>
<CloseButton
onClick={() => {
onClose();
}}
>
<CloseIcon />
<CloseIcon width={12} height={12} />
</CloseButton>
</StyledModalHeader>
<StyledContent>
<StyledLeftContainer>
{rightLinkList.map(({ icon, title, link }) => {
{rightLinkList.map(({ icon, title, subTitle, link }) => {
return (
<StyledBigLink key={title} href={link} target="_blank">
{icon}
{title}
<p>{title}</p>
<p>
{subTitle}
<LinkIcon />
</p>
</StyledBigLink>
);
})}
@@ -120,9 +129,7 @@ export const ContactModal = ({ open, onClose }: TransitionsModalProps) => {
<StyledModalFooter>
<p>
<a href="javascript:;">
What is the different from the affine 1.0?
</a>
<a href="">How is AFFiNE Alpha different？</a>
</p>
<p>Copyright &copy; 2022 Toeverything</p>
</StyledModalFooter>

100
packages/app/src/components/contact-modal/style.ts
View File

@@ -1,4 +1,4 @@
import { styled } from '@/styles';
import { absoluteCenter, displayFlex, styled } from '@/styles';
import bg from './bg.png';
export const StyledModalContainer = styled('div')(({ theme }) => {
return {
@@ -13,11 +13,10 @@ export const StyledModalContainer = styled('div')(({ theme }) => {
export const StyledModalWrapper = styled('div')(({ theme }) => {
return {
width: '1000px',
width: '860px',
height: '626px',
backgroundColor: theme.colors.popoverBackground,
backgroundImage: `url(${bg.src})`,
padding: '0 48px',
borderRadius: '20px',
position: 'absolute',
left: 0,
@@ -30,24 +29,24 @@ export const StyledModalWrapper = styled('div')(({ theme }) => {
export const StyledBigLink = styled('a')(({ theme }) => {
return {
width: '335px',
height: '110px',
marginBottom: '52px',
display: 'flex',
alignItems: 'center',
width: '320px',
height: '100px',
marginBottom: '48px',
paddingLeft: '114px',
fontSize: '24px',
lineHeight: '36px',
padding: '0 24px',
fontWeight: '600',
color: theme.colors.textColor,
borderRadius: '10px',
flexDirection: 'column',
...displayFlex('center'),
position: 'relative',
transition: 'background .15s',
':visited': {
color: theme.colors.textColor,
},
':hover': {
color: theme.colors.primaryColor,
background: theme.colors.hoverBackground,
background: 'rgba(68, 97, 242, 0.1)',
},
':last-of-type': {
marginBottom: 0,
@@ -57,10 +56,30 @@ export const StyledBigLink = styled('a')(({ theme }) => {
height: '50px',
marginRight: '40px',
color: theme.colors.primaryColor,
...absoluteCenter({ vertical: true, position: { left: '32px' } }),
},
p: {
width: '197px',
height: '73px',
width: '100%',
height: '30px',
lineHeight: '30px',
...displayFlex('flex-start', 'center'),
':not(:last-of-type)': {
marginBottom: '4px',
},
':first-of-type': {
fontSize: '22px',
},
':last-of-type': {
fontSize: '20px',
color: theme.colors.primaryColor,
},
svg: {
width: '15px',
height: '15px',
position: 'static',
transform: 'translate(0,0)',
marginLeft: '5px',
},
},
};
});
@@ -75,6 +94,8 @@ export const StyledSmallLink = styled('a')(({ theme }) => {
paddingLeft: '24px',
borderRadius: '5px',
color: theme.colors.textColor,
transition: 'background .15s, color .15s',
':visited': {
color: theme.colors.textColor,
},
@@ -100,25 +121,19 @@ export const StyledSubTitle = styled('div')(({ theme }) => {
});
export const StyledLeftContainer = styled('div')({
// height: '100%',
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
...displayFlex('space-between', 'center'),
});
export const StyledRightContainer = styled('div')({
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'flex-end',
...displayFlex('center', 'flex-end'),
});
export const StyledContent = styled('div')({
height: '276px',
width: '100%',
padding: '0 160px',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
padding: '0 145px',
...displayFlex('space-between', 'center'),
color: '#3A4C5C',
marginTop: '100px',
});
@@ -127,7 +142,7 @@ export const StyledBackdrop = styled('div')(({ theme }) => {
return { width: '100%', height: '100%', background: 'rgba(58, 76, 92, 0.2)' };
});
export const StyledLogo = styled('img')({
height: '22px',
height: '18px',
width: 'auto',
});
@@ -136,45 +151,42 @@ export const StyledModalHeader = styled('div')(({ theme }) => {
height: '30px',
marginTop: '54px',
padding: '0 48px',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
...displayFlex('space-between', 'center'),
};
});
export const StyledModalHeaderLeft = styled('div')(({ theme }) => {
return {
display: 'flex',
alignItems: 'center',
color: theme.colors.primaryColor,
'span:first-of-type': {
fontSize: '28px',
lineHeight: 1,
fontWeight: '600',
margin: '0 12px',
},
'span:last-of-type': {
height: '26px',
...displayFlex('flex-end', 'flex-end'),
span: {
height: '20px',
border: `1px solid ${theme.colors.primaryColor}`,
borderRadius: '10px',
padding: '0 10px',
padding: '0 8px',
lineHeight: '26px',
fontSize: '16px',
fontSize: '14px',
marginLeft: '12px',
...displayFlex('center', 'center'),
},
};
});
export const CloseButton = styled('div')(({ theme }) => {
return {
width: '24px',
height: '24px',
borderRadius: '5px',
width: '30px',
height: '30px',
borderRadius: '6px',
color: theme.colors.iconColor,
cursor: 'pointer',
...displayFlex('center', 'center'),
':hover': {
background: theme.colors.hoverBackground,
},
svg: {
width: '20px',
height: '20px',
},
};
});

151
packages/app/src/components/edgeless-toolbar/icons.tsx Normal file
View File

@@ -0,0 +1,151 @@
export const SelectIcon = () => {
return (
<svg
width="36"
height="36"
viewBox="0 0 36 36"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_3076_4847)">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M11.6091 10.2222C11.61 8.86837 13.1871 8.12745 14.2297 8.99105L25.8121 18.5849C27.0294 19.5932 26.2062 21.4939 24.7271 21.4744C23.7186 21.4611 22.5692 21.4841 21.496 21.5947C20.4058 21.707 19.4662 21.9034 18.8355 22.1997C18.2047 22.4961 17.4537 23.0939 16.6713 23.8612C15.9009 24.6167 15.1495 25.4868 14.5159 26.2714C13.5867 27.4223 11.5982 26.8425 11.5992 25.2619L11.6091 10.2222ZM13.2091 10.2232L13.1992 25.263C13.1992 25.2637 13.1992 25.2644 13.1992 25.2651C13.2029 25.2676 13.2091 25.2712 13.2183 25.2743C13.237 25.2806 13.2518 25.2793 13.2576 25.2779C13.2597 25.2773 13.2604 25.2769 13.2607 25.2767L13.2607 25.2767C13.2608 25.2766 13.2645 25.2744 13.2711 25.2663C13.9256 24.4557 14.72 23.5339 15.551 22.7189C16.3698 21.9159 17.2757 21.1647 18.1551 20.7516C19.0346 20.3384 20.1911 20.1207 21.3319 20.0031C22.4897 19.8838 23.7064 19.8608 24.7481 19.8745C24.7586 19.8747 24.7627 19.8732 24.7628 19.8732L24.7628 19.8732C24.7632 19.8731 24.7639 19.8728 24.7657 19.8715C24.7705 19.868 24.7809 19.8575 24.788 19.839C24.7915 19.8299 24.7927 19.8229 24.7931 19.8185C24.7926 19.818 24.7921 19.8176 24.7915 19.8171L13.2091 10.2232Z"
/>
</g>
<defs>
<clipPath id="clip0_3076_4847">
<rect
width="24"
height="24"
fill="white"
transform="translate(6 6)"
/>
</clipPath>
</defs>
</svg>
);
};
export const TextIcon = () => {
return (
<svg
width="36"
height="36"
viewBox="0 0 36 36"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M27 9H9V11L17 11L17 27H19L19 11L27 11V9Z"
/>
</svg>
);
};
export const ShapeIcon = () => {
return (
<svg
width="36"
height="36"
viewBox="0 0 36 36"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M25.2284 12.9441L17.822 10.9596L15.8375 18.3659L17.451 18.7982L16.7206 20.259L13.8779 19.4973L16.6907 9L27.188 11.8127L24.3752 22.31L23.1393 21.9789L22.183 20.0662L23.2438 20.3504L25.2284 12.9441ZM14.981 13.0626C14.8225 13.0489 14.6621 13.0419 14.5 13.0419C11.4624 13.0419 9 15.5043 9 18.5419C9 21.5794 11.4624 24.0419 14.5 24.0419C14.6122 24.0419 14.7236 24.0385 14.8341 24.0319L15.7277 22.2447C15.3417 22.3726 14.9289 22.4419 14.5 22.4419C12.3461 22.4419 10.6 20.6958 10.6 18.5419C10.6 16.388 12.3461 14.6419 14.5 14.6419C14.5193 14.6419 14.5385 14.642 14.5578 14.6423L14.981 13.0626ZM19.5 16.0419L14 27.0419H25L19.5 16.0419ZM19.5 19.6196L16.5889 25.4419H22.4111L19.5 19.6196Z"
/>
</svg>
);
};
export const PenIcon = () => {
return (
<svg
width="36"
height="36"
viewBox="0 0 36 36"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M12.0153 23.0152L12.3988 21.8646L23.1317 11.1317C23.6114 10.6519 24.3892 10.6519 24.869 11.1317C25.3487 11.6114 25.3487 12.3892 24.869 12.8689L14.136 23.6019L12.9854 23.9854L12.0153 23.0152ZM11.1339 20.8668L22.0003 10.0003C23.1049 8.89573 24.8958 8.89573 26.0003 10.0003C27.1049 11.1049 27.1049 12.8957 26.0003 14.0003L15.1339 24.8668C15.0461 24.9546 14.939 25.0207 14.8212 25.06L10.5182 26.4943C9.89283 26.7028 9.29784 26.1078 9.5063 25.4824L10.9406 21.1795C10.9799 21.0616 11.0461 20.9546 11.1339 20.8668Z"
/>
</svg>
);
};
export const StickerIcon = () => {
return (
<svg
width="36"
height="36"
viewBox="0 0 36 36"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M23.75 9C24.612 9 25.4386 9.34241 26.0481 9.9519C26.6576 10.5614 27 11.388 27 12.25V19.129C26.9997 19.7254 26.7627 20.2973 26.341 20.719L20.72 26.341C20.5111 26.5499 20.263 26.7157 19.99 26.8287C19.7171 26.9418 19.4245 27 19.129 27H12.25C11.388 27 10.5614 26.6576 9.9519 26.0481C9.34241 25.4386 9 24.612 9 23.75V12.25C9 11.388 9.34241 10.5614 9.9519 9.9519C10.5614 9.34241 11.388 9 12.25 9H23.75ZM23.75 10.5H12.25C11.7859 10.5 11.3408 10.6844 11.0126 11.0126C10.6844 11.3408 10.5 11.7859 10.5 12.25V23.75C10.5 24.716 11.284 25.5 12.25 25.5H19V22.25C18.9999 21.4199 19.3176 20.6212 19.8877 20.0178C20.4578 19.4144 21.2372 19.052 22.066 19.005L22.25 19H25.5V12.25C25.5 11.7859 25.3156 11.3408 24.9874 11.0126C24.6592 10.6844 24.2141 10.5 23.75 10.5ZM24.439 20.5H22.25C21.8107 20.5 21.3874 20.6653 21.0643 20.963C20.7412 21.2608 20.5419 21.6691 20.506 22.107L20.5 22.25V24.439L24.439 20.5Z" />
</svg>
);
};
export const ConnectorIcon = () => {
return (
<svg
width="36"
height="36"
viewBox="0 0 36 36"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M21.6 12.5C21.6 13.5493 22.4507 14.4 23.5 14.4C24.5493 14.4 25.4 13.5493 25.4 12.5C25.4 11.4507 24.5493 10.6 23.5 10.6C22.4507 10.6 21.6 11.4507 21.6 12.5ZM23.5 9C21.567 9 20 10.567 20 12.5C20 13.2108 20.2119 13.872 20.5759 14.4241L14.4241 20.5759C13.872 20.2119 13.2108 20 12.5 20C10.567 20 9 21.567 9 23.5C9 25.433 10.567 27 12.5 27C14.433 27 16 25.433 16 23.5C16 22.8575 15.8269 22.2555 15.5248 21.738L21.738 15.5248C22.2555 15.8269 22.8575 16 23.5 16C25.433 16 27 14.433 27 12.5C27 10.567 25.433 9 23.5 9ZM10.6 23.5C10.6 24.5493 11.4507 25.4 12.5 25.4C13.5493 25.4 14.4 24.5493 14.4 23.5C14.4 22.4507 13.5493 21.6 12.5 21.6C11.4507 21.6 10.6 22.4507 10.6 23.5Z"
/>
</svg>
);
};
export const UndoIcon = () => {
return (
<svg
width="36"
height="35"
viewBox="0 0 36 35"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M14.8277 12.2008C15.0955 12.4686 15.0955 12.9028 14.8277 13.1706L12.3412 15.6571H20.9551C21.6982 15.6571 22.2977 15.6571 22.7831 15.6968C23.2828 15.7376 23.7218 15.8239 24.128 16.0308C24.7731 16.3595 25.2976 16.884 25.6263 17.5292C25.8332 17.9353 25.9195 18.3743 25.9604 18.8741C26 19.3595 26 19.9589 26 20.7021V21.8286C26 22.2073 25.693 22.5143 25.3143 22.5143C24.9356 22.5143 24.6286 22.2073 24.6286 21.8286V20.7314C24.6286 19.952 24.628 19.4087 24.5935 18.9858C24.5596 18.5708 24.4964 18.3324 24.4044 18.1518C24.2071 17.7647 23.8924 17.45 23.5054 17.2528C23.3248 17.1608 23.0864 17.0976 22.6714 17.0637C22.2484 17.0291 21.7051 17.0286 20.9257 17.0286H12.3412L14.8277 19.5151C15.0955 19.7829 15.0955 20.2171 14.8277 20.4849C14.5599 20.7527 14.1258 20.7527 13.858 20.4849L10.2008 16.8277C9.93305 16.5599 9.93305 16.1258 10.2008 15.858L13.858 12.2008C14.1258 11.9331 14.5599 11.9331 14.8277 12.2008Z"
/>
</svg>
);
};
export const RedoIcon = () => {
return (
<svg
width="36"
height="36"
viewBox="0 0 36 36"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M21.1723 12.715C21.4401 12.4472 21.8742 12.4472 22.142 12.715L25.7992 16.3721C26.0669 16.6399 26.0669 17.0741 25.7992 17.3419L22.142 20.999C21.8742 21.2668 21.4401 21.2668 21.1723 20.999C20.9045 20.7312 20.9045 20.2971 21.1723 20.0293L23.6588 17.5427H15.0743C14.2949 17.5427 13.7516 17.5433 13.3286 17.5778C12.9136 17.6117 12.6752 17.6749 12.4946 17.7669C12.1076 17.9642 11.7929 18.2789 11.5956 18.666C11.5036 18.8465 11.4404 19.085 11.4065 19.4999C11.372 19.9229 11.3714 20.4662 11.3714 21.2456V22.3427C11.3714 22.7214 11.0644 23.0284 10.6857 23.0284C10.307 23.0284 10 22.7214 10 22.3427L10 21.2162C9.99999 20.4731 9.99999 19.8736 10.0396 19.3882C10.0805 18.8885 10.1668 18.4495 10.3737 18.0433C10.7024 17.3982 11.2269 16.8737 11.872 16.545C12.2782 16.3381 12.7172 16.2518 13.2169 16.2109C13.7023 16.1713 14.3018 16.1713 15.0449 16.1713H23.6588L21.1723 13.6847C20.9045 13.417 20.9045 12.9828 21.1723 12.715Z"
/>
</svg>
);
};

110
packages/app/src/components/edgeless-toolbar/index.tsx Normal file
View File

@@ -0,0 +1,110 @@
import {
StyledEdgelessToolbar,
StyledToolbarWrapper,
StyledToolbarItem,
} from './style';
import {
SelectIcon,
TextIcon,
ShapeIcon,
PenIcon,
StickerIcon,
ConnectorIcon,
UndoIcon,
RedoIcon,
} from './icons';
import { Tooltip } from '@/components/tooltip';
import Slide from '@mui/material/Slide';
import { useEditor } from '@/components/editor-provider';
const toolbarList1 = [
{
icon: <SelectIcon />,
toolTip: 'Select',
onClick: () => {},
disable: false,
},
{
icon: <TextIcon />,
toolTip: 'Text(coming soon)',
onClick: () => {},
disable: true,
},
{
icon: <ShapeIcon />,
toolTip: 'Shape(coming soon)',
onClick: () => {},
disable: true,
},
{
icon: <StickerIcon />,
toolTip: 'Sticker(coming soon)',
onClick: () => {},
disable: true,
},
{
icon: <PenIcon />,
toolTip: 'Pen(coming soon)',
onClick: () => {},
disable: true,
},
{
icon: <ConnectorIcon />,
toolTip: 'Connector(coming soon)',
onClick: () => {},
disable: true,
},
];
const toolbarList2 = [
{
icon: <UndoIcon />,
toolTip: 'Undo(coming soon)',
onClick: () => {},
disable: true,
},
{
icon: <RedoIcon />,
toolTip: 'Redo(coming soon)',
onClick: () => {},
disable: true,
},
];
export const EdgelessToolbar = () => {
const { mode } = useEditor();
return (
<Slide
direction="right"
in={mode === 'edgeless'}
mountOnEnter
unmountOnExit
>
<StyledEdgelessToolbar>
<StyledToolbarWrapper>
{toolbarList1.map(({ icon, toolTip, onClick, disable }, index) => {
return (
<Tooltip key={index} content={toolTip} placement="right-start">
<StyledToolbarItem disable={disable} onClick={onClick}>
{icon}
</StyledToolbarItem>
</Tooltip>
);
})}
</StyledToolbarWrapper>
<StyledToolbarWrapper>
{toolbarList2.map(({ icon, toolTip, onClick, disable }, index) => {
return (
<Tooltip key={index} content={toolTip} placement="right-start">
<StyledToolbarItem disable={disable} onClick={onClick}>
{icon}
</StyledToolbarItem>
</Tooltip>
);
})}
</StyledToolbarWrapper>
</StyledEdgelessToolbar>
</Slide>
);
};
export default EdgelessToolbar;

3
packages/app/src/components/edgeless-toolbar/reply.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="36" height="35" viewBox="0 0 36 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.8277 12.2008C15.0955 12.4686 15.0955 12.9028 14.8277 13.1706L12.3412 15.6571H20.9551C21.6982 15.6571 22.2977 15.6571 22.7831 15.6968C23.2828 15.7376 23.7218 15.8239 24.128 16.0308C24.7731 16.3595 25.2976 16.884 25.6263 17.5292C25.8332 17.9353 25.9195 18.3743 25.9604 18.8741C26 19.3595 26 19.9589 26 20.7021V21.8286C26 22.2073 25.693 22.5143 25.3143 22.5143C24.9356 22.5143 24.6286 22.2073 24.6286 21.8286V20.7314C24.6286 19.952 24.628 19.4087 24.5935 18.9858C24.5596 18.5708 24.4964 18.3324 24.4044 18.1518C24.2071 17.7647 23.8924 17.45 23.5054 17.2528C23.3248 17.1608 23.0864 17.0976 22.6714 17.0637C22.2484 17.0291 21.7051 17.0286 20.9257 17.0286H12.3412L14.8277 19.5151C15.0955 19.7829 15.0955 20.2171 14.8277 20.4849C14.5599 20.7527 14.1258 20.7527 13.858 20.4849L10.2008 16.8277C9.93305 16.5599 9.93305 16.1258 10.2008 15.858L13.858 12.2008C14.1258 11.9331 14.5599 11.9331 14.8277 12.2008Z" fill="#9096A5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

41
packages/app/src/components/edgeless-toolbar/style.ts Normal file
View File

@@ -0,0 +1,41 @@
import { styled, displayFlex, fixedCenter } from '@/styles';
export const StyledEdgelessToolbar = styled.div(({ theme }) => ({
height: '320px',
position: 'fixed',
left: '12px',
top: 0,
bottom: 0,
margin: 'auto',
zIndex: theme.zIndex.modal,
}));
export const StyledToolbarWrapper = styled.div(({ theme }) => ({
width: '44px',
borderRadius: '10px',
boxShadow: theme.shadow.modal,
padding: '4px',
background: theme.colors.popoverBackground,
transition: 'background .5s',
marginBottom: '12px',
}));
export const StyledToolbarItem = styled.div<{ disable: boolean }>(
({ theme, disable }) => ({
width: '36px',
height: '36px',
...displayFlex('center', 'center'),
color: disable ? '#C0C0C0' : theme.colors.iconColor,
cursor: 'pointer',
svg: {
width: '36px',
height: '36px',
},
':hover': disable
? {}
: {
color: theme.colors.primaryColor,
background: theme.colors.hoverBackground,
},
})
);

6
packages/app/src/components/editor-mode-switch/style.ts
View File

@@ -1,4 +1,4 @@
import { keyframes, styled } from '@/styles';
import { displayFlex, keyframes, styled } from '@/styles';
// @ts-ignore
import spring, { toString } from 'css-spring';
import type { ItemStatus } from './type';
@@ -128,9 +128,7 @@ export const StyledIcon = styled('div')<{
? { width: '36px' }
: { width: isLeft ? '44px' : '34px' };
return {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
...displayFlex('center', 'center'),
flexShrink: '0',
...dynamicStyle,
};

10
packages/app/src/components/faq/style.ts
View File

@@ -1,4 +1,4 @@
import { styled } from '@/styles';
import { displayFlex, styled } from '@/styles';
export const StyledFAQ = styled('div')(({ theme }) => {
return {
@@ -23,9 +23,7 @@ export const StyledTransformIcon = styled.div<{ in: boolean }>(
bottom: '0',
top: '0',
margin: 'auto',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
...displayFlex('center', 'center'),
opacity: isIn ? 1 : 0,
backgroundColor: isIn
? theme.colors.hoverBackground
@@ -39,9 +37,7 @@ export const StyledIconWrapper = styled('div')<{ isEdgelessDark: boolean }>(
? theme.colors.popoverBackground
: theme.colors.iconColor,
marginBottom: '24px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
...displayFlex('center', 'center'),
cursor: 'pointer',
backgroundColor: isEdgelessDark
? 'transparent'

19
packages/app/src/components/shortcuts-modal/style.ts
View File

@@ -1,4 +1,4 @@
import { styled } from '@/styles';
import { displayFlex, styled } from '@/styles';
export const StyledShortcutsModal = styled.div(({ theme }) => ({
width: '268px',
@@ -19,9 +19,7 @@ export const StyledTitle = styled.div(({ theme }) => ({
color: theme.colors.textColor,
fontWeight: '600',
fontSize: theme.font.sm,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
...displayFlex('center', 'center'),
svg: {
width: '20px',
marginRight: '14px',
@@ -38,9 +36,7 @@ export const StyledSubTitle = styled.div(({ theme }) => ({
padding: '0 16px',
}));
export const StyledModalHeader = styled.div(({ theme }) => ({
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
...displayFlex('space-between', 'center'),
height: '36px',
width: '100%',
padding: '8px 16px 0 16px',
@@ -54,9 +50,7 @@ export const StyledModalHeader = styled.div(({ theme }) => ({
export const StyledListItem = styled.div(({ theme }) => ({
height: '32px',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
...displayFlex('space-between', 'center'),
fontSize: theme.font.xs,
padding: '0 16px',
}));
@@ -68,6 +62,11 @@ export const CloseButton = styled('div')(({ theme }) => {
borderRadius: '5px',
color: theme.colors.iconColor,
cursor: 'pointer',
...displayFlex('center', 'center'),
svg: {
width: '15px',
height: '15px',
},
':hover': {
background: theme.colors.hoverBackground,
},

6
packages/app/src/components/theme-mode-switch/style.ts
View File

@@ -1,4 +1,4 @@
import { keyframes, styled } from '@/styles';
import { displayFlex, keyframes, styled } from '@/styles';
import { CSSProperties } from 'react';
// @ts-ignore
import spring, { toString } from 'css-spring';
@@ -56,11 +56,9 @@ export const StyledSwitchItem = styled('div')<{
return {
width: '32px',
height: '32px',
display: 'flex',
position: 'absolute',
left: '0',
justifyContent: 'center',
alignItems: 'center',
...displayFlex('center', 'center'),
cursor: 'pointer',
...activeStyle,
};

6
packages/app/src/pages/affine.tsx
View File

@@ -1,12 +1,10 @@
import { styled } from '@/styles';
import { displayFlex, styled } from '@/styles';
import { ThemeModeSwitch } from '@/components/theme-mode-switch';
export const StyledHeader = styled('div')({
height: '60px',
width: '100vw',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
...displayFlex('space-between', 'center'),
position: 'relative',
padding: '0 22px',
borderBottom: '1px solid #e5e5e5',

2
packages/app/src/pages/index.tsx
View File

@@ -3,6 +3,7 @@ import dynamic from 'next/dynamic';
import { styled } from '@/styles';
import { Header } from '@/components/Header';
import { FAQ } from '@/components/faq';
import EdgelessToolbar from '@/components/edgeless-toolbar';
import '@/components/simple-counter';
const StyledEditorContainer = styled('div')(({ theme }) => {
@@ -33,6 +34,7 @@ const Home: NextPage = () => {
<DynamicEditor />
</StyledEditorContainer>
<FAQ />
<EdgelessToolbar />
</StyledPage>
);
};

84
packages/app/src/styles/helper.ts Normal file
View File

@@ -0,0 +1,84 @@
import type { CSSProperties } from 'react';
export const displayFlex = (
justifyContent: CSSProperties['justifyContent'] = 'unset',
alignItems: CSSProperties['alignContent'] = 'unset',
alignContent: CSSProperties['alignContent'] = 'unset'
): {
display: CSSProperties['display'];
justifyContent: CSSProperties['justifyContent'];
alignItems: CSSProperties['alignContent'];
alignContent: CSSProperties['alignContent'];
} => {
return {
display: 'flex',
justifyContent,
alignItems,
alignContent,
};
};
export const absoluteCenter = ({
horizontal = false,
vertical = false,
position: { left, right, top, bottom } = {},
}: {
horizontal?: boolean;
vertical?: boolean;
position?: {
left?: CSSProperties['left'];
right?: CSSProperties['right'];
top?: CSSProperties['top'];
bottom?: CSSProperties['bottom'];
};
}): {
position: CSSProperties['position'];
left: CSSProperties['left'];
top: CSSProperties['top'];
right: CSSProperties['right'];
bottom: CSSProperties['bottom'];
transform: CSSProperties['transform'];
} => {
return {
position: 'absolute',
left: left ? left : horizontal ? '50%' : 'auto',
top: top ? top : vertical ? '50%' : 'auto',
right: right ? right : horizontal ? 'auto' : 'auto',
bottom: bottom ? bottom : vertical ? 'auto' : 'auto',
transform: `translate(${horizontal ? '-50%' : '0'}, ${
vertical ? '-50%' : '0'
})`,
};
};
export const fixedCenter = ({
horizontal = false,
vertical = false,
position: { left, right, top, bottom } = {},
}: {
horizontal?: boolean;
vertical?: boolean;
position?: {
left?: CSSProperties['left'];
right?: CSSProperties['right'];
top?: CSSProperties['top'];
bottom?: CSSProperties['bottom'];
};
}): {
position: CSSProperties['position'];
left: CSSProperties['left'];
top: CSSProperties['top'];
right: CSSProperties['right'];
bottom: CSSProperties['bottom'];
transform: CSSProperties['transform'];
} => {
return {
position: 'fixed',
left: left ? left : horizontal ? '50%' : 'auto',
top: top ? top : vertical ? '50%' : 'auto',
right: right ? right : horizontal ? 'auto' : 'auto',
bottom: bottom ? bottom : vertical ? 'auto' : 'auto',
transform: `translate(${horizontal ? '-50%' : '0'}, ${
vertical ? '-50%' : '0'
})`,
};
};

1
packages/app/src/styles/index.ts
View File

@@ -4,3 +4,4 @@ export * from './styled';
export { ThemeProvider } from './themeProvider';
export { lightTheme, darkTheme } from './theme';
export { useTheme } from './hooks';
export * from './helper';