From 0a4c262b50169d5582a2a5a4ecbf548d2b26344c Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Wed, 19 Oct 2022 11:51:01 +0800 Subject: [PATCH] feat: add contact modal --- packages/app/package.json | 1 + packages/app/src/components/Header/index.tsx | 74 +++--- .../contact-modal/affine-text-logo.png | Bin 0 -> 20726 bytes .../src/components/contact-modal/icons.tsx | 55 +++++ .../src/components/contact-modal/index.tsx | 141 ++++++++++++ .../app/src/components/contact-modal/style.ts | 214 ++++++++++++++++++ packages/app/src/components/faq/index.tsx | 68 +++--- .../src/components/shortcuts-modal/icons.tsx | 13 ++ .../src/components/shortcuts-modal/index.tsx | 19 ++ .../src/components/shortcuts-modal/style.ts | 0 packages/app/src/styles/theme.ts | 4 + packages/app/src/styles/types.ts | 4 + pnpm-lock.yaml | 23 +- 13 files changed, 547 insertions(+), 69 deletions(-) create mode 100644 packages/app/src/components/contact-modal/affine-text-logo.png create mode 100644 packages/app/src/components/contact-modal/icons.tsx create mode 100644 packages/app/src/components/contact-modal/index.tsx create mode 100644 packages/app/src/components/contact-modal/style.ts create mode 100644 packages/app/src/components/shortcuts-modal/icons.tsx create mode 100644 packages/app/src/components/shortcuts-modal/index.tsx create mode 100644 packages/app/src/components/shortcuts-modal/style.ts diff --git a/packages/app/package.json b/packages/app/package.json index 514db3d1f..38304eeaf 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -19,6 +19,7 @@ "@emotion/styled": "^11.10.4", "@mui/base": "^5.0.0-alpha.87", "@mui/material": "^5.8.6", + "@mui/icons-material": "^5.10.9", "css-spring": "^4.1.0", "lit": "^2.3.1", "next": "12.3.1", diff --git a/packages/app/src/components/Header/index.tsx b/packages/app/src/components/Header/index.tsx index 504ec1c18..b6eb961fb 100644 --- a/packages/app/src/components/Header/index.tsx +++ b/packages/app/src/components/Header/index.tsx @@ -14,6 +14,7 @@ import { useEditor } from '@/components/editor-provider'; import EditorModeSwitch from '@/components/editor-mode-switch'; import { EdgelessIcon, PaperIcon } from '../editor-mode-switch/icons'; import ThemeModeSwitch from '@/components/theme-mode-switch'; +import ContactModal from '@/components/contact-modal'; const PopoverContent = () => { const { editor, mode, setMode } = useEditor(); @@ -50,6 +51,7 @@ const PopoverContent = () => { export const Header = () => { const [title, setTitle] = useState(''); const [isHover, setIsHover] = useState(false); + const [showContactModal, setShowContactModal] = useState(false); const { editor } = useEditor(); @@ -63,38 +65,48 @@ export const Header = () => { }, [editor]); return ( - - - {}} /> - - { - setIsHover(true); - }} - onMouseLeave={() => { - setIsHover(false); - }} - > - + setShowContactModal(false)} + /> + + + { + setShowContactModal(true); + }} + /> + + { + setIsHover(true); + }} + onMouseLeave={() => { + setIsHover(false); }} - /> - {title} - - - - - } - style={{ marginLeft: '20px' }} > - - - - - - + + {title} + + + + + } + style={{ marginLeft: '20px' }} + > + + + + + + + ); }; diff --git a/packages/app/src/components/contact-modal/affine-text-logo.png b/packages/app/src/components/contact-modal/affine-text-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..a136ab17fafa02007d9a8fff455bfafbf244faae GIT binary patch literal 20726 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 literal 0 HcmV?d00001 diff --git a/packages/app/src/components/contact-modal/icons.tsx b/packages/app/src/components/contact-modal/icons.tsx new file mode 100644 index 000000000..d267dbe9c --- /dev/null +++ b/packages/app/src/components/contact-modal/icons.tsx @@ -0,0 +1,55 @@ +// export const CloseIcon = () => { +// return ( +// +// +// +// ); +// }; + +export const LogoIcon = () => { + return ( + + + + ); +}; + +export const DiscordIcon = (props: any) => { + return ( + + + + + + + + + + + ); +}; diff --git a/packages/app/src/components/contact-modal/index.tsx b/packages/app/src/components/contact-modal/index.tsx new file mode 100644 index 000000000..2c2d75430 --- /dev/null +++ b/packages/app/src/components/contact-modal/index.tsx @@ -0,0 +1,141 @@ +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 logo from './affine-text-logo.png'; +import { + StyledModalContainer, + StyledModalWrapper, + StyledYellowBall, + StyledBlueBall, + StyledBigLink, + StyledSmallLink, + StyledSubTitle, + StyledLeftContainer, + StyledRightContainer, + StyledContent, + StyledBackdrop, + StyledLogo, + StyledModalHeader, + StyledModalHeaderLeft, + CloseButton, + StyledModalFooter, +} from './style'; + +const linkList = [ + { + icon: , + title: 'Github', + link: 'https://github.com/toeverything/AFFiNE', + }, + { + icon: , + title: 'Reddit', + link: 'https://www.reddit.com/r/Affine/', + }, + { + icon: , + title: 'Twitter', + link: 'https://twitter.com/AffineOfficial', + }, + { + icon: , + title: 'Telegram', + link: 'https://t.me/affineworkos', + }, + { + icon: , + title: 'Discord', + link: 'https://discord.gg/Arn7TqJBvG', + }, +]; +const rightLinkList = [ + { + icon: , + title: 'Official Website AFFiNE.pro', + link: 'https://affine.pro', + }, + { + icon: , + title: 'Check Our Docs Open Source', + link: 'https://github.com/toeverything/AFFiNE', + }, +]; + +type TransitionsModalProps = { + open: boolean; + onClose: () => void; +}; + +export const ContactModal = ({ open, onClose }: TransitionsModalProps) => { + return createPortal( + + + + + + + + + + + 2.0 + live demo + + { + onClose(); + }} + > + + + + + + + {rightLinkList.map(({ icon, title, link }) => { + return ( + + {icon} + {title} + + ); + })} + + + + Get in touch!
+ Join our community. + + {linkList.map(({ icon, title, link }) => { + return ( + + {icon} + {title} + + ); + })} + + + + +

+ + What is the different from the affine 1.0? + +

+

Copyright © 2022 Toeverything

+ + + + , + document.body + ); +}; + +export default ContactModal; diff --git a/packages/app/src/components/contact-modal/style.ts b/packages/app/src/components/contact-modal/style.ts new file mode 100644 index 000000000..a8476f70b --- /dev/null +++ b/packages/app/src/components/contact-modal/style.ts @@ -0,0 +1,214 @@ +import { styled } from '@/styles'; + +export const StyledModalContainer = styled('div')(({ theme }) => { + return { + width: '100vw', + height: '100vh', + position: 'fixed', + left: '0', + top: '0', + zIndex: theme.zIndex.modal, + }; +}); + +export const StyledModalWrapper = styled('div')(({ theme }) => { + return { + width: '1000px', + height: '626px', + background: ' #FFFFFF', + padding: '0 48px', + borderRadius: '20px', + position: 'absolute', + left: 0, + right: 0, + top: 0, + bottom: 0, + margin: 'auto', + }; +}); + +export const StyledYellowBall = styled('div')` + position: absolute; + top: 189px; + left: 186px; + display: block; + width: 122px; + height: 122px; + background-color: #dda82a; + opacity: 0.45; + filter: blur(78px); +`; +export const StyledBlueBall = styled('div')` + content: ''; + position: absolute; + top: 332px; + left: 296px; + display: block; + width: 122px; + height: 122px; + background-color: #4461f2; + filter: blur(78px); +`; + +export const StyledBigLink = styled('a')(({ theme }) => { + return { + width: '335px', + height: '110px', + marginBottom: '52px', + display: 'flex', + alignItems: 'center', + fontSize: '24px', + lineHeight: '36px', + padding: '0 24px', + fontWeight: '600', + color: theme.colors.textColor, + borderRadius: '10px', + + ':visited': { + color: theme.colors.textColor, + }, + ':hover': { + color: theme.colors.primaryColor, + background: theme.colors.hoverBackground, + }, + ':last-of-type': { + marginBottom: 0, + }, + svg: { + width: '50px', + height: '50px', + marginRight: '40px', + color: theme.colors.primaryColor, + }, + p: { + width: '197px', + height: '73px', + }, + }; +}); +export const StyledSmallLink = styled('a')(({ theme }) => { + return { + width: '214px', + height: '37px', + display: 'flex', + alignItems: 'center', + fontSize: '18px', + fontWeight: '500', + paddingLeft: '24px', + borderRadius: '5px', + color: theme.colors.textColor, + ':visited': { + color: theme.colors.textColor, + }, + ':hover': { + color: theme.colors.primaryColor, + background: theme.colors.hoverBackground, + }, + svg: { + width: '22px', + marginRight: '30px', + color: theme.colors.primaryColor, + }, + }; +}); +export const StyledSubTitle = styled('div')({ + width: '189px', + fontSize: '18px', + fontWeight: '600', + color: '#3A4C5C', + marginBottom: '24px', +}); + +export const StyledLeftContainer = styled('div')({ + // height: '100%', + display: 'flex', + flexDirection: 'column', + justifyContent: 'space-between', +}); +export const StyledRightContainer = styled('div')({ + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'flex-end', +}); + +export const StyledContent = styled('div')({ + height: '276px', + width: '100%', + padding: '0 160px', + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + color: '#3A4C5C', + marginTop: '100px', +}); + +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', + width: 'auto', +}); + +export const StyledModalHeader = styled('div')(({ theme }) => { + return { + height: '30px', + marginTop: '54px', + padding: '0 48px', + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', + }; +}); + +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', + border: `1px solid ${theme.colors.primaryColor}`, + borderRadius: '10px', + padding: '0 10px', + lineHeight: '26px', + fontSize: '16px', + }, + }; +}); + +export const CloseButton = styled('div')(({ theme }) => { + return { + width: '24px', + height: '24px', + borderRadius: '5px', + color: theme.colors.iconColor, + cursor: 'pointer', + ':hover': { + background: theme.colors.hoverBackground, + }, + }; +}); + +export const StyledModalFooter = styled('div')(({ theme }) => { + return { + fontSize: '14px', + lineHeight: '20px', + textAlign: 'center', + color: theme.colors.textColor, + + marginTop: '75px', + 'p:first-of-type': { + color: theme.colors.primaryColor, + marginBottom: '10px', + }, + }; +}); diff --git a/packages/app/src/components/faq/index.tsx b/packages/app/src/components/faq/index.tsx index 2eec3dbf3..3beab8d43 100644 --- a/packages/app/src/components/faq/index.tsx +++ b/packages/app/src/components/faq/index.tsx @@ -1,21 +1,14 @@ -import React from 'react'; +import { useState } from 'react'; import { StyledFAQ, StyledIconWrapper, StyledFAQWrapper } from './style'; import { ContactIcon, HelpIcon, KeyboardIcon } from './icons'; import Grow from '@mui/material/Grow'; import { Tooltip } from '../tooltip'; -import { Modal } from '@/components/modal'; +import ContactModal from '@/components/contact-modal'; const Contact = () => { - const [openModal, setOpenModal] = React.useState(false); + const [openModal, setOpenModal] = useState(false); return ( <> - { - setOpenModal(false); - }} - > -
modal content
- + setOpenModal(false)} /> { @@ -29,31 +22,34 @@ const Contact = () => { ); }; export const FAQ = () => { - const [showContent, setShowContent] = React.useState(false); - return ( - { - setShowContent(true); - }} - onMouseLeave={() => { - setShowContent(false); - }} - > - - - - - - - - - - + const [showContent, setShowContent] = useState(false); - - - - + return ( + <> + { + setShowContent(true); + }} + onMouseLeave={() => { + setShowContent(false); + }} + > + + + + + + + + + + + + + + + + ); }; diff --git a/packages/app/src/components/shortcuts-modal/icons.tsx b/packages/app/src/components/shortcuts-modal/icons.tsx new file mode 100644 index 000000000..a920d445e --- /dev/null +++ b/packages/app/src/components/shortcuts-modal/icons.tsx @@ -0,0 +1,13 @@ +export const CloseIcon = () => { + return ( + + + + ); +}; diff --git a/packages/app/src/components/shortcuts-modal/index.tsx b/packages/app/src/components/shortcuts-modal/index.tsx new file mode 100644 index 000000000..dd6007fa1 --- /dev/null +++ b/packages/app/src/components/shortcuts-modal/index.tsx @@ -0,0 +1,19 @@ +import { styled } from '@/styles'; +import Fade from '@mui/material/Fade'; + + +const StyledModal = styled('div')(({ theme }) => { + return { + color: theme.colors.textColor, + }; +}); + +type TransitionsModalProps = { + open: boolean; + onClose: () => void; + children: JSX.Element; +}; + +export const ShortcutsModal = (props: TransitionsModalProps) => { + return
111
; +}; diff --git a/packages/app/src/components/shortcuts-modal/style.ts b/packages/app/src/components/shortcuts-modal/style.ts new file mode 100644 index 000000000..e69de29bb diff --git a/packages/app/src/styles/theme.ts b/packages/app/src/styles/theme.ts index e38b4437b..b3d393ea4 100644 --- a/packages/app/src/styles/theme.ts +++ b/packages/app/src/styles/theme.ts @@ -34,6 +34,10 @@ export const lightTheme: AffineTheme = { family: `Avenir Next, ${basicFontFamily}`, family2: `Roboto Mono, ${basicFontFamily}`, }, + zIndex: { + modal: 1000, + popover: 100, + }, }; export const darkTheme: AffineTheme = { diff --git a/packages/app/src/styles/types.ts b/packages/app/src/styles/types.ts index 93068cf55..d4df343e9 100644 --- a/packages/app/src/styles/types.ts +++ b/packages/app/src/styles/types.ts @@ -42,6 +42,10 @@ export interface AffineTheme { family: string; family2: string; }; + zIndex: { + modal: number; + popover: number; + }; } export interface AffineThemeCSSVariables { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f9b595629..34a7bdd13 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -26,6 +26,7 @@ importers: '@emotion/server': ^11.10.0 '@emotion/styled': ^11.10.4 '@mui/base': ^5.0.0-alpha.87 + '@mui/icons-material': ^5.10.9 '@mui/material': ^5.8.6 '@types/node': 18.7.18 '@types/react': 18.0.20 @@ -52,6 +53,7 @@ importers: '@emotion/server': 11.10.0_@emotion+css@11.10.0 '@emotion/styled': 11.10.4_yiaqs725o7pcd7rteavrnhgj4y '@mui/base': 5.0.0-alpha.101_7ey2zzynotv32rpkwno45fsx4e + '@mui/icons-material': 5.10.9_5fncb4nagb4cvvcnwamw2rozfa '@mui/material': 5.10.9_af5ln35zuaotaffazii6n6bke4 css-spring: 4.1.0 lit: 2.4.0 @@ -407,6 +409,23 @@ packages: resolution: {integrity: sha512-rqoFu4qww6KJBbXYhyRd9YXjwBHa3ylnBPSWbGf1bdfG0AYMKmVzg8zxkWvxAWOp97kvx3M2kNPb0xMIDZiogQ==} dev: false + /@mui/icons-material/5.10.9_5fncb4nagb4cvvcnwamw2rozfa: + resolution: {integrity: sha512-sqClXdEM39WKQJOQ0ZCPTptaZgqwibhj2EFV9N0v7BU1PO8y4OcX/a2wIQHn4fNuDjIZktJIBrmU23h7aqlGgg==} + engines: {node: '>=12.0.0'} + peerDependencies: + '@mui/material': ^5.0.0 + '@types/react': ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.19.0 + '@mui/material': 5.10.9_af5ln35zuaotaffazii6n6bke4 + '@types/react': 18.0.20 + react: 18.2.0 + dev: false + /@mui/material/5.10.9_af5ln35zuaotaffazii6n6bke4: resolution: {integrity: sha512-sdOzlgpCmyw48je+E7o9UGGJpgBaF+60FlTRpVpcd/z+LUhnuzzuis891yPI5dPPXLBDL/bO4SsGg51lgNeLBw==} engines: {node: '>=12.0.0'} @@ -1370,7 +1389,7 @@ packages: eslint-import-resolver-webpack: optional: true dependencies: - '@typescript-eslint/parser': 5.38.0_eslint@8.22.0 + '@typescript-eslint/parser': 5.38.0_76twfck5d7crjqrmw4yltga7zm debug: 3.2.7 eslint: 8.22.0 eslint-import-resolver-node: 0.3.6 @@ -1389,7 +1408,7 @@ packages: '@typescript-eslint/parser': optional: true dependencies: - '@typescript-eslint/parser': 5.38.0_eslint@8.22.0 + '@typescript-eslint/parser': 5.38.0_76twfck5d7crjqrmw4yltga7zm array-includes: 3.1.5 array.prototype.flat: 1.3.0 debug: 2.6.9