toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-11-28 09:14:57 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: reset modal

Browse Source
This commit is contained in:
QiShaoXuan 2022-10-20 14:43:14 +08:00
parent 96baeacc26
commit e13aeda5b2
14 changed files with 144 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/app/public/globals.css
View File

@ -158,6 +158,9 @@ a,
a:hover {
color: var(--affine-link-color);
}
a:visited {
color: var(--affine-link-visited-color);
}
input {
border: none;

11
packages/app/src/components/Header/index.tsx
View File

@ -14,7 +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';
import { useModal } from '@/components/global-modal-provider';
const PopoverContent = () => {
const { editor, mode, setMode } = useEditor();
@ -51,8 +51,7 @@ const PopoverContent = () => {
export const Header = () => {
const [title, setTitle] = useState('');
const [isHover, setIsHover] = useState(false);
const [showContactModal, setShowContactModal] = useState(false);
const { contactModalHandler } = useModal();
const { editor } = useEditor();
useEffect(() => {
@ -66,15 +65,11 @@ export const Header = () => {
return (
<>
<ContactModal
open={showContactModal}
onClose={() => setShowContactModal(false)}
/>
<StyledHeader>
<StyledLogo>
<LogoIcon
onClick={() => {
setShowContactModal(true);
contactModalHandler(true);
}}
/>
</StyledLogo>

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

@ -79,7 +79,7 @@ export const ContactModal = ({ open, onClose }: TransitionsModalProps) => {
<StyledModalHeader>
<StyledModalHeaderLeft>
<StyledLogo src={logo.src} alt="" />
<span>2.0</span>
<span>Alpha</span>
<span>live demo</span>
</StyledModalHeaderLeft>
<CloseButton

74
packages/app/src/components/faq/index.tsx
View File

@ -8,51 +8,17 @@ import {
import { CloseIcon, ContactIcon, HelpIcon, KeyboardIcon } from './icons';
import Grow from '@mui/material/Grow';
import { Tooltip } from '../tooltip';
import ContactModal from '@/components/contact-modal';
import ShortcutsModal from '@/components/shortcuts-modal';
const Contact = () => {
const [openModal, setOpenModal] = useState(false);
return (
<>
<ContactModal open={openModal} onClose={() => setOpenModal(false)} />
<Tooltip content="Contact with us" placement="left-end">
<StyledIconWrapper
onClick={() => {
setOpenModal(true);
}}
>
<ContactIcon />
</StyledIconWrapper>
</Tooltip>
</>
);
};
import { useEditor } from '@/components/editor-provider';
import { useModal } from '@/components/global-modal-provider';
import { useTheme } from '@/styles';
const Shortcuts = () => {
const [openModal, setOpenModal] = useState(false);
return (
<>
<ShortcutsModal
open={openModal}
onClose={() => {
setOpenModal(false);
}}
/>
<Tooltip content="Keyboard shorts" placement="left-end">
<StyledIconWrapper
onClick={() => {
setOpenModal(true);
}}
>
<KeyboardIcon />
</StyledIconWrapper>
</Tooltip>
</>
);
};
export const FAQ = () => {
const [showContent, setShowContent] = useState(false);
const { mode } = useTheme();
const { mode: editorMode } = useEditor();
const { shortcutsModalHandler, contactModalHandler } = useModal();
const isEdgelessDark = mode === 'dark' && editorMode === 'edgeless';
return (
<>
<StyledFAQ
@ -66,13 +32,31 @@ export const FAQ = () => {
>
<Grow in={showContent}>
<StyledFAQWrapper>
<Contact />
<Shortcuts />
<Tooltip content="Contact with us" placement="left-end">
<StyledIconWrapper
isEdgelessDark={isEdgelessDark}
onClick={() => {
contactModalHandler(true);
}}
>
<ContactIcon />
</StyledIconWrapper>
</Tooltip>
<Tooltip content="Keyboard shorts" placement="left-end">
<StyledIconWrapper
isEdgelessDark={isEdgelessDark}
onClick={() => {
shortcutsModalHandler(true);
}}
>
<KeyboardIcon />
</StyledIconWrapper>
</Tooltip>
</StyledFAQWrapper>
</Grow>
<div style={{ position: 'relative' }}>
<StyledIconWrapper>
<StyledIconWrapper isEdgelessDark={isEdgelessDark}>
<HelpIcon />
</StyledIconWrapper>
<StyledTransformIcon in={showContent}>

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

@ -10,10 +10,6 @@ export const StyledFAQ = styled('div')(({ theme }) => {
bottom: '30px',
borderRadius: '50%',
zIndex: theme.zIndex.popover,
':hover': {
backgroundColor: theme.colors.popoverBackground,
color: theme.colors.primaryColor,
},
};
});
export const StyledTransformIcon = styled.div<{ in: boolean }>(
@ -36,26 +32,34 @@ export const StyledTransformIcon = styled.div<{ in: boolean }>(
: theme.colors.pageBackground,
})
);
export const StyledIconWrapper = styled('div')(({ theme }) => {
return {
color: theme.colors.iconColor,
marginBottom: '24px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
cursor: 'pointer',
backgroundColor: theme.colors.pageBackground,
borderRadius: '50%',
width: '32px',
height: '32px',
transition: 'background-color 0.3s',
position: 'relative',
':hover': {
color: theme.colors.primaryColor,
backgroundColor: theme.colors.hoverBackground,
},
};
});
export const StyledIconWrapper = styled('div')<{ isEdgelessDark: boolean }>(
({ theme, isEdgelessDark }) => {
return {
color: isEdgelessDark
? theme.colors.popoverBackground
: theme.colors.iconColor,
marginBottom: '24px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
cursor: 'pointer',
backgroundColor: isEdgelessDark
? 'transparent'
: theme.colors.pageBackground,
borderRadius: '50%',
width: '32px',
height: '32px',
transition: 'background-color 0.3s',
position: 'relative',
':hover': {
color: isEdgelessDark
? theme.colors.iconColor
: theme.colors.primaryColor,
backgroundColor: theme.colors.hoverBackground,
},
};
}
);
export const StyledFAQWrapper = styled('div')(({ theme }) => {
return {

53
packages/app/src/components/global-modal-provider.tsx Normal file
View File

@ -0,0 +1,53 @@
import { createContext, useContext, useState } from 'react';
import type { PropsWithChildren } from 'react';
import ShortcutsModal from './shortcuts-modal';
import ContactModal from '@/components/contact-modal';
type ModalContextValue = {
shortcutsModalHandler: (visible: boolean) => void;
contactModalHandler: (visible: boolean) => void;
};
type ModalContextProps = PropsWithChildren<{}>;
export const ModalContext = createContext<ModalContextValue>({
shortcutsModalHandler: () => {},
contactModalHandler: () => {},
});
export const useModal = () => useContext(ModalContext);
export const ModalProvider = ({
children,
}: PropsWithChildren<ModalContextProps>) => {
const [openContactModal, setOpenContactModal] = useState(false);
const [openShortcutsModal, setOpenShortcutsModal] = useState(false);
return (
<ModalContext.Provider
value={{
shortcutsModalHandler: visible => {
setOpenShortcutsModal(visible);
},
contactModalHandler: visible => {
setOpenContactModal(visible);
},
}}
>
<ContactModal
open={openContactModal}
onClose={() => {
setOpenContactModal(false);
}}
></ContactModal>
<ShortcutsModal
open={openShortcutsModal}
onClose={() => {
setOpenShortcutsModal(false);
}}
></ShortcutsModal>
{children}
</ModalContext.Provider>
);
};
export default ModalProvider;

4
packages/app/src/components/shortcuts-modal/index.tsx
View File

@ -50,7 +50,9 @@ export const ShortcutsModal = ({ open, onClose }: ModalProps) => {
<CloseIcon />
</CloseButton>
</StyledModalHeader>
<StyledSubTitle>Keyboard shortcuts</StyledSubTitle>
<StyledSubTitle style={{ marginTop: 0 }}>
Keyboard shortcuts
</StyledSubTitle>
{Object.entries(keyboardShortcuts).map(([title, shortcuts]) => {
return (
<StyledListItem key={title}>

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

@ -35,6 +35,7 @@ export const StyledSubTitle = styled.div(({ theme }) => ({
fontSize: '12px',
height: '36px',
lineHeight: '36px',
marginTop: '28px',
}));
export const StyledModalHeader = styled.div(({ theme }) => ({
display: 'flex',

7
packages/app/src/components/tooltip/Tooltip.tsx
View File

@ -26,11 +26,14 @@ export const placementToContainerDirection: Record<
};
const useTooltipStyle = (): CSSProperties => {
const { theme } = useTheme();
const { theme, mode } = useTheme();
return {
boxShadow: '1px 1px 4px rgba(0, 0, 0, 0.14)',
padding: '4px 12px',
backgroundColor: theme.colors.primaryColor,
backgroundColor:
mode === 'dark'
? theme.colors.popoverBackground
: theme.colors.primaryColor,
color: '#fff',
fontSize: theme.font.xs,
};

9
packages/app/src/pages/_app.tsx
View File

@ -4,6 +4,7 @@ import '../../public/globals.css';
import '../../public/variable.css';
import './temporary.css';
import { EditorProvider } from '@/components/editor-provider';
import { ModalProvider } from '@/components/global-modal-provider';
const ThemeProvider = dynamic(() => import('@/styles/themeProvider'), {
ssr: false,
@ -12,9 +13,11 @@ const ThemeProvider = dynamic(() => import('@/styles/themeProvider'), {
function MyApp({ Component, pageProps }: AppProps) {
return (
<ThemeProvider>
<EditorProvider>
<Component {...pageProps} />
</EditorProvider>
<ModalProvider>
<EditorProvider>
<Component {...pageProps} />
</EditorProvider>
</ModalProvider>
</ThemeProvider>
);
}

7
packages/app/src/pages/_document.tsx
View File

@ -42,7 +42,12 @@ export default class AppDocument extends Document {
render() {
return (
<Html>
<Head />
<Head>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
</Head>
<body>
<Main />
<NextScript />

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

@ -34,30 +34,6 @@ const Home: NextPage = () => {
<StyledEditorContainer>
<DynamicEditor />
</StyledEditorContainer>
{/*<Button>A button use the theme styles</Button>*/}
{/*<simple-counter name="A counter created by web component" />*/}
{/*<p>current mode {mode}</p>*/}
{/*<button*/}
{/* onClick={() => {*/}
{/* changeMode('light');*/}
{/* }}*/}
{/*>*/}
{/* light*/}
{/*</button>*/}
{/*<button*/}
{/* onClick={() => {*/}
{/* changeMode('dark');*/}
{/* }}*/}
{/*>*/}
{/* dark*/}
{/*</button>*/}
{/*<button*/}
{/* onClick={() => {*/}
{/* changeMode('auto');*/}
{/* }}*/}
{/*>*/}
{/* auto*/}
{/*</button>*/}
<FAQ />
</StyledPage>
);

43
packages/app/src/pages/temporary.css
View File

@ -1,44 +1,7 @@
debug-menu {
display: none !important;
}
/*.affine-editor-container {*/
/* height: 100%;*/
/* padding: 0 !important;*/
/*}*/
/*.affine-default-page-block-container {*/
/* width: 720px;*/
/* height: 100%;*/
/* margin: 0 auto;*/
/*}*/
.affine-block-children-container.edgeless {
background-color: #fff;
}
/*u {*/
/* text-decoration: none;*/
/* border-bottom: 1px solid #4c6275 !important;*/
/*}*/
/*u::after {*/
/* display: none;*/
/*}*/
/*.affine-paragraph-block-container.text {*/
/* margin-top: 18px !important;*/
/*}*/
/*.affine-default-page-block-title {*/
/* width: 100%;*/
/*}*/
/*s {*/
/* text-decoration: line-through !important;*/
/*}*/
/*.affine-edgeless-page-block-container {*/
/* height: 100% !important;*/
/*}*/
/*.affine-block-children-container.edgeless {*/
/* height: 100% !important;*/
/*}*/
/*.affine-list-rich-text-wrapper > div {*/
/* box-sizing: content-box;*/
/* color: var(--affine-highlight-color);*/
/* min-width: unset !important;*/
/* max-width: 26px;*/
/*}*/

6
packages/app/src/styles/theme.ts
View File

@ -29,7 +29,7 @@ export const lightTheme: AffineTheme = {
sm: '16px',
base: '18px',
family: `Avenir Next, ${basicFontFamily}`,
family2: `Roboto Mono, ${basicFontFamily}`,
family2: `Roboto, ${basicFontFamily}`,
},
zIndex: {
modal: 1000,
@ -55,8 +55,8 @@ export const darkTheme: AffineTheme = {
textColor: '#fff',
iconColor: '#9096A5',
linkColor: '#6880FF',
linkColor2: '#7D91FF',
linkColor: '#7D91FF',
linkColor2: '#6880FF',
linkVisitedColor: '#505FAB',
popoverColor: '#A9B1C6',
codeColor: '#BDDBFD',