feat: add shortcuts modal

2026-02-14 05:14:54 +00:00 · 2022-10-19 15:35:59 +08:00
parent 0a4c262b50
commit 25dc407781
13 changed files with 334 additions and 87 deletions
--- a/packages/app/src/components/contact-modal/style.ts
+++ b/packages/app/src/components/contact-modal/style.ts
@@ -15,7 +15,7 @@ export const StyledModalWrapper = styled('div')(({ theme }) => {
  return {
    width: '1000px',
    height: '626px',
-    background: ' #FFFFFF',
+    background: theme.colors.popoverBackground,
    padding: '0 48px',
    borderRadius: '20px',
    position: 'absolute',
@@ -111,12 +111,14 @@ export const StyledSmallLink = styled('a')(({ theme }) => {
    },
  };
 });
-export const StyledSubTitle = styled('div')({
-  width: '189px',
-  fontSize: '18px',
-  fontWeight: '600',
-  color: '#3A4C5C',
-  marginBottom: '24px',
+export const StyledSubTitle = styled('div')(({theme}) => {
+  return ({
+    width: '189px',
+    fontSize: '18px',
+    fontWeight: '600',
+    color: theme.colors.textColor,
+    marginBottom: '24px',
+  })
 });

 export const StyledLeftContainer = styled('div')({
--- a/packages/app/src/components/faq/icons.tsx
+++ b/packages/app/src/components/faq/icons.tsx
@@ -43,3 +43,17 @@ export const KeyboardIcon = () => {
    </svg>
  );
 };
+
+export const CloseIcon = () => {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M6.88173 5.9864L11.8557 1.0257C11.954 0.911231 12.0054 0.76398 11.9996 0.613378C11.9937 0.462776 11.9311 0.319916 11.8243 0.213345C11.7174 0.106774 11.5742 0.0443419 11.4232 0.0385248C11.2722 0.0327077 11.1245 0.0839342 11.0097 0.181967L6.03573 5.14266L1.06173 0.175983C0.948744 0.063303 0.795507 0 0.635726 0C0.475945 0 0.322708 0.063303 0.209726 0.175983C0.0967439 0.288663 0.0332711 0.44149 0.0332711 0.600844C0.0332711 0.760197 0.0967439 0.913024 0.209726 1.0257L5.18973 5.9864L0.209726 10.9471C0.146917 11.0007 0.0959048 11.0668 0.0598909 11.141C0.0238769 11.2152 0.00363881 11.2961 0.000447115 11.3785C-0.00274458 11.4609 0.0111787 11.5431 0.0413434 11.6199C0.0715082 11.6967 0.117263 11.7664 0.175736 11.8247C0.234209 11.8831 0.304137 11.9287 0.381132 11.9588C0.458127 11.9889 0.540527 12.0027 0.623158 11.9996C0.70579 11.9964 0.786869 11.9762 0.861308 11.9403C0.935747 11.9044 1.00194 11.8535 1.05573 11.7908L6.03573 6.83014L11.0097 11.7908C11.1245 11.8889 11.2722 11.9401 11.4232 11.9343C11.5742 11.9285 11.7174 11.866 11.8243 11.7595C11.9311 11.6529 11.9937 11.51 11.9996 11.3594C12.0054 11.2088 11.954 11.0616 11.8557 10.9471L6.88173 5.9864Z" />
+    </svg>
+  );
+};
--- a/packages/app/src/components/faq/index.tsx
+++ b/packages/app/src/components/faq/index.tsx
@@ -1,9 +1,15 @@
 import { useState } from 'react';
-import { StyledFAQ, StyledIconWrapper, StyledFAQWrapper } from './style';
-import { ContactIcon, HelpIcon, KeyboardIcon } from './icons';
+import {
+  StyledFAQ,
+  StyledIconWrapper,
+  StyledFAQWrapper,
+  StyledTransformIcon,
+} from './style';
+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 (
@@ -21,9 +27,32 @@ const Contact = () => {
    </>
  );
 };
+
+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);
-
  return (
    <>
      <StyledFAQ
@@ -38,17 +67,18 @@ export const FAQ = () => {
        <Grow in={showContent}>
          <StyledFAQWrapper>
            <Contact />
-            <Tooltip content="Keyboard shorts" placement="left-end">
-              <StyledIconWrapper>
-                <KeyboardIcon />
-              </StyledIconWrapper>
-            </Tooltip>
+            <Shortcuts />
          </StyledFAQWrapper>
        </Grow>

-        <StyledIconWrapper style={{ margin: '0', cursor: 'inherit' }}>
-          <HelpIcon />
-        </StyledIconWrapper>
+        <div style={{ position: 'relative' }}>
+          <StyledIconWrapper>
+            <HelpIcon />
+          </StyledIconWrapper>
+          <StyledTransformIcon in={showContent}>
+            <CloseIcon />
+          </StyledTransformIcon>
+        </div>
      </StyledFAQ>
    </>
  );
--- a/packages/app/src/components/faq/style.ts
+++ b/packages/app/src/components/faq/style.ts
@@ -4,20 +4,38 @@ export const StyledFAQ = styled('div')(({ theme }) => {
  return {
    width: '32px',
    height: '32px',
-    backgroundColor: '#fff',
    color: theme.colors.iconColor,
    position: 'fixed',
    right: '30px',
    bottom: '30px',
    borderRadius: '50%',
-    zIndex: 1000,
+    zIndex: theme.zIndex.popover,
    ':hover': {
      backgroundColor: theme.colors.popoverBackground,
      color: theme.colors.primaryColor,
    },
  };
 });
-
+export const StyledTransformIcon = styled.div<{ in: boolean }>(
+  ({ in: isIn, theme }) => ({
+    height: '32px',
+    width: '32px',
+    borderRadius: '50%',
+    position: 'absolute',
+    left: '0',
+    right: '0',
+    bottom: '0',
+    top: '0',
+    margin: 'auto',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    opacity: isIn ? 1 : 0,
+    backgroundColor: isIn
+      ? theme.colors.hoverBackground
+      : theme.colors.pageBackground,
+  })
+);
 export const StyledIconWrapper = styled('div')(({ theme }) => {
  return {
    color: theme.colors.iconColor,
@@ -26,10 +44,12 @@ export const StyledIconWrapper = styled('div')(({ theme }) => {
    justifyContent: 'center',
    alignItems: 'center',
    cursor: 'pointer',
-    backgroundColor: 'transparent',
+    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,
--- a/packages/app/src/components/modal/index.tsx
+++ b/packages/app/src/components/modal/index.tsx
@@ -1,41 +0,0 @@
-import ModalUnstyled from '@mui/base/ModalUnstyled';
-import { styled } from '@/styles';
-import Fade from '@mui/material/Fade';
-
-import { ClickAwayListener } from '@mui/material';
-
-const StyledModal = styled(ModalUnstyled)`
-  position: fixed;
-  z-index: 1300;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-type TransitionsModalProps = {
-  open: boolean;
-  onClose: () => void;
-  children: JSX.Element;
-};
-
-export const Modal = (props: TransitionsModalProps) => {
-  return (
-    <StyledModal
-      aria-labelledby="transition-modal-title"
-      aria-describedby="transition-modal-description"
-      open={props.open}
-      onClose={props.onClose}
-      closeAfterTransition
-    >
-      <ClickAwayListener onClickAway={props.onClose}>
-        <Fade in={props.open} timeout={300}>
-          {props.children}
-        </Fade>
-      </ClickAwayListener>
-    </StyledModal>
-  );
-};
--- a/packages/app/src/components/popover/index.tsx
+++ b/packages/app/src/components/popover/index.tsx
@@ -25,7 +25,7 @@ const StyledPopover = styled('div')(({ theme }) => {
  return {
    width: '248px',
    background: theme.colors.popoverBackground,
-    boxShadow: theme.colors.boxShadow,
+    boxShadow: theme.shadow.popover,
    color: theme.colors.popoverColor,
    borderRadius: '10px 0px 10px 10px',
    padding: '8px 4px',
--- a/packages/app/src/components/shortcuts-modal/config.ts
+++ b/packages/app/src/components/shortcuts-modal/config.ts
@@ -0,0 +1,66 @@
+export const macKeyboardShortcuts = {
+  Undo: 'cmd + Z',
+  Redo: 'cmd + shift + Z',
+  Bold: 'cmd + B',
+  Italic: 'cmd + I',
+  Underline: 'cmd + U',
+  Strikethrough: 'cmd + Shit + S',
+  'Inline code': ' cmd + E',
+  Link: 'cmd + K',
+  'Body text': 'cmd + Option + 0',
+  'Heading 1': 'cmd + Option + 1',
+  'Heading 2': 'cmd + Option + 2',
+  'Heading 3': 'cmd + Option + 3',
+  'Heading 4': 'cmd + Option + 4',
+  'Heading 5': 'cmd + Option + 5',
+  'Heading 6': 'cmd + Option + 6',
+  'Increase indent': 'Tab',
+  'Reduce indent': 'Shift + Tab',
+};
+
+export const macMarkdownShortcuts = {
+  Bold: '**Text**',
+  Italic: '*Text*',
+  Underline: '~Text~',
+  Strikethrough: '~~Text~~',
+  'Inline code': '`Code`',
+  'Heading 1': '# + Space',
+  'Heading 2': '## + Space',
+  'Heading 3': '### + Space',
+  'Heading 4': '#### + Space',
+  'Heading 5': '##### + Space',
+  'Heading 6': '###### + Space',
+};
+
+export const windowsKeyboardShortcuts = {
+  Undo: 'Ctrl + Z',
+  Redo: 'Ctrl + Y',
+  Bold: 'Ctrl + B',
+  Italic: 'Ctrl + I',
+  Underline: 'Ctrl + U',
+  Strikethrough: 'Ctrl + Shit + S',
+  'Inline code': ' Ctrl + E',
+  Link: 'Ctrl + K',
+  'Body text': 'Ctrl + Shift + 0',
+  'Heading 1': 'Ctrl + Shift + 1',
+  'Heading 2': 'Ctrl + Shift + 2',
+  'Heading 3': 'Ctrl + Shift + 3',
+  'Heading 4': 'Ctrl + Shift + 4',
+  'Heading 5': 'Ctrl + Shift + 5',
+  'Heading 6': 'Ctrl + Shift + 6',
+  'Increase indent': 'Tab',
+  'Reduce indent': 'Shift + Tab',
+};
+export const winMarkdownShortcuts = {
+  Bold: '**Text** + Space',
+  Italic: '*Text* + Space',
+  Underline: '~Text~ + Space',
+  Strikethrough: '~~Text~~ + Space',
+  'Inline code': '`Code` + Space',
+  'Heading 1': '# + Space',
+  'Heading 2': '## + Space',
+  'Heading 3': '### + Space',
+  'Heading 4': '#### + Space',
+  'Heading 5': '##### + Space',
+  'Heading 6': '###### + Space',
+};
--- a/packages/app/src/components/shortcuts-modal/icons.tsx
+++ b/packages/app/src/components/shortcuts-modal/icons.tsx
@@ -11,3 +11,17 @@ export const CloseIcon = () => {
    </svg>
  );
 };
+
+export const KeyboardIcon = () => {
+  return (
+    <svg
+      width="20"
+      height="15"
+      viewBox="0 0 20 15"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M17.745 0C18.3417 0 18.914 0.237053 19.336 0.65901C19.7579 1.08097 19.995 1.65326 19.995 2.25V11.755C19.995 12.3517 19.7579 12.924 19.336 13.346C18.914 13.7679 18.3417 14.005 17.745 14.005H2.25C1.95453 14.005 1.66194 13.9468 1.38896 13.8337C1.11598 13.7207 0.867941 13.5549 0.65901 13.346C0.450078 13.1371 0.284344 12.889 0.171271 12.616C0.058198 12.3431 0 12.0505 0 11.755V2.25C0 1.65326 0.237053 1.08097 0.65901 0.65901C1.08097 0.237053 1.65326 0 2.25 0H17.745ZM17.745 1.5H2.25C2.05109 1.5 1.86032 1.57902 1.71967 1.71967C1.57902 1.86032 1.5 2.05109 1.5 2.25V11.755C1.5 12.169 1.836 12.505 2.25 12.505H17.745C17.9439 12.505 18.1347 12.426 18.2753 12.2853C18.416 12.1447 18.495 11.9539 18.495 11.755V2.25C18.495 2.05109 18.416 1.86032 18.2753 1.71967C18.1347 1.57902 17.9439 1.5 17.745 1.5ZM4.75 9.5H15.25C15.44 9.50006 15.6229 9.57224 15.7618 9.70197C15.9006 9.8317 15.9851 10.0093 15.998 10.1989C16.011 10.3885 15.9515 10.5759 15.8316 10.7233C15.7117 10.8707 15.5402 10.9671 15.352 10.993L15.25 11H4.75C4.55998 10.9999 4.37706 10.9278 4.23821 10.798C4.09936 10.6683 4.01493 10.4907 4.00197 10.3011C3.98902 10.1115 4.04852 9.92411 4.16843 9.7767C4.28835 9.62929 4.45975 9.5329 4.648 9.507L4.75 9.5H15.25H4.75ZM14.5 6C14.7652 6 15.0196 6.10536 15.2071 6.29289C15.3946 6.48043 15.5 6.73478 15.5 7C15.5 7.26522 15.3946 7.51957 15.2071 7.70711C15.0196 7.89464 14.7652 8 14.5 8C14.2348 8 13.9804 7.89464 13.7929 7.70711C13.6054 7.51957 13.5 7.26522 13.5 7C13.5 6.73478 13.6054 6.48043 13.7929 6.29289C13.9804 6.10536 14.2348 6 14.5 6ZM8.505 6C8.77022 6 9.02457 6.10536 9.21211 6.29289C9.39964 6.48043 9.505 6.73478 9.505 7C9.505 7.26522 9.39964 7.51957 9.21211 7.70711C9.02457 7.89464 8.77022 8 8.505 8C8.23978 8 7.98543 7.89464 7.79789 7.70711C7.61036 7.51957 7.505 7.26522 7.505 7C7.505 6.73478 7.61036 6.48043 7.79789 6.29289C7.98543 6.10536 8.23978 6 8.505 6ZM5.505 6C5.77022 6 6.02457 6.10536 6.21211 6.29289C6.39964 6.48043 6.505 6.73478 6.505 7C6.505 7.26522 6.39964 7.51957 6.21211 7.70711C6.02457 7.89464 5.77022 8 5.505 8C5.23978 8 4.98543 7.89464 4.79789 7.70711C4.61036 7.51957 4.505 7.26522 4.505 7C4.505 6.73478 4.61036 6.48043 4.79789 6.29289C4.98543 6.10536 5.23978 6 5.505 6ZM11.505 6C11.7702 6 12.0246 6.10536 12.2121 6.29289C12.3996 6.48043 12.505 6.73478 12.505 7C12.505 7.26522 12.3996 7.51957 12.2121 7.70711C12.0246 7.89464 11.7702 8 11.505 8C11.2398 8 10.9854 7.89464 10.7979 7.70711C10.6104 7.51957 10.505 7.26522 10.505 7C10.505 6.73478 10.6104 6.48043 10.7979 6.29289C10.9854 6.10536 11.2398 6 11.505 6ZM4 3C4.26522 3 4.51957 3.10536 4.70711 3.29289C4.89464 3.48043 5 3.73478 5 4C5 4.26522 4.89464 4.51957 4.70711 4.70711C4.51957 4.89464 4.26522 5 4 5C3.73478 5 3.48043 4.89464 3.29289 4.70711C3.10536 4.51957 3 4.26522 3 4C3 3.73478 3.10536 3.48043 3.29289 3.29289C3.48043 3.10536 3.73478 3 4 3ZM6.995 3C7.26022 3 7.51457 3.10536 7.70211 3.29289C7.88964 3.48043 7.995 3.73478 7.995 4C7.995 4.26522 7.88964 4.51957 7.70211 4.70711C7.51457 4.89464 7.26022 5 6.995 5C6.72978 5 6.47543 4.89464 6.28789 4.70711C6.10036 4.51957 5.995 4.26522 5.995 4C5.995 3.73478 6.10036 3.48043 6.28789 3.29289C6.47543 3.10536 6.72978 3 6.995 3ZM9.995 3C10.2602 3 10.5146 3.10536 10.7021 3.29289C10.8896 3.48043 10.995 3.73478 10.995 4C10.995 4.26522 10.8896 4.51957 10.7021 4.70711C10.5146 4.89464 10.2602 5 9.995 5C9.72978 5 9.47543 4.89464 9.28789 4.70711C9.10036 4.51957 8.995 4.26522 8.995 4C8.995 3.73478 9.10036 3.48043 9.28789 3.29289C9.47543 3.10536 9.72978 3 9.995 3ZM12.995 3C13.2602 3 13.5146 3.10536 13.7021 3.29289C13.8896 3.48043 13.995 3.73478 13.995 4C13.995 4.26522 13.8896 4.51957 13.7021 4.70711C13.5146 4.89464 13.2602 5 12.995 5C12.7298 5 12.4754 4.89464 12.2879 4.70711C12.1004 4.51957 11.995 4.26522 11.995 4C11.995 3.73478 12.1004 3.48043 12.2879 3.29289C12.4754 3.10536 12.7298 3 12.995 3ZM15.995 3C16.2602 3 16.5146 3.10536 16.7021 3.29289C16.8896 3.48043 16.995 3.73478 16.995 4C16.995 4.26522 16.8896 4.51957 16.7021 4.70711C16.5146 4.89464 16.2602 5 15.995 5C15.7298 5 15.4754 4.89464 15.2879 4.70711C15.1004 4.51957 14.995 4.26522 14.995 4C14.995 3.73478 15.1004 3.48043 15.2879 3.29289C15.4754 3.10536 15.7298 3 15.995 3Z" />
+    </svg>
+  );
+};
--- a/packages/app/src/components/shortcuts-modal/index.tsx
+++ b/packages/app/src/components/shortcuts-modal/index.tsx
@@ -1,19 +1,78 @@
-import { styled } from '@/styles';
-import Fade from '@mui/material/Fade';
-
-
-const StyledModal = styled('div')(({ theme }) => {
-  return {
-    color: theme.colors.textColor,
-  };
-});
-
-type TransitionsModalProps = {
+import { createPortal } from 'react-dom';
+import { KeyboardIcon } from './icons';
+import {
+  StyledListItem,
+  StyledModalHeader,
+  StyledShortcutsModal,
+  StyledSubTitle,
+  StyledTitle,
+  CloseButton,
+} from './style';
+import {
+  macKeyboardShortcuts,
+  macMarkdownShortcuts,
+  windowsKeyboardShortcuts,
+  winMarkdownShortcuts,
+} from '@/components/shortcuts-modal/config';
+import CloseIcon from '@mui/icons-material/Close';
+import Slide from '@mui/material/Slide';
+type ModalProps = {
  open: boolean;
  onClose: () => void;
-  children: JSX.Element;
 };

-export const ShortcutsModal = (props: TransitionsModalProps) => {
-  return <div>111</div>;
+const isMac = () => {
+  return /macintosh|mac os x/i.test(navigator.userAgent);
 };
+
+export const ShortcutsModal = ({ open, onClose }: ModalProps) => {
+  const markdownShortcuts = isMac()
+    ? macMarkdownShortcuts
+    : winMarkdownShortcuts;
+  const keyboardShortcuts = isMac()
+    ? macKeyboardShortcuts
+    : windowsKeyboardShortcuts;
+  return createPortal(
+    <Slide direction="left" in={open} mountOnEnter unmountOnExit>
+      <StyledShortcutsModal>
+        <>
+          <StyledModalHeader>
+            <StyledTitle>
+              <KeyboardIcon />
+              Shortcuts
+            </StyledTitle>
+
+            <CloseButton
+              onClick={() => {
+                onClose();
+              }}
+            >
+              <CloseIcon />
+            </CloseButton>
+          </StyledModalHeader>
+          <StyledSubTitle>Keyboard shortcuts</StyledSubTitle>
+          {Object.entries(keyboardShortcuts).map(([title, shortcuts]) => {
+            return (
+              <StyledListItem key={title}>
+                <span>{title}</span>
+                <span>{shortcuts}</span>
+              </StyledListItem>
+            );
+          })}
+          <StyledSubTitle>Markdown shortcuts</StyledSubTitle>
+          {Object.entries(markdownShortcuts).map(([title, shortcuts]) => {
+            return (
+              <StyledListItem key={title}>
+                <span>{title}</span>
+                <span>{shortcuts}</span>
+              </StyledListItem>
+            );
+          })}
+        </>
+      </StyledShortcutsModal>
+    </Slide>,
+    document.body
+  );
+};
+
+export default ShortcutsModal;
--- a/packages/app/src/components/shortcuts-modal/style.ts
+++ b/packages/app/src/components/shortcuts-modal/style.ts
@@ -0,0 +1,65 @@
+import { styled } from '@/styles';
+
+export const StyledShortcutsModal = styled.div(({ theme }) => ({
+  width: '268px',
+  height: '66vh',
+  backgroundColor: theme.colors.popoverBackground,
+  boxShadow: theme.shadow.popover,
+  color: theme.colors.popoverColor,
+  padding: '8px 16px',
+  overflow: 'auto',
+  boxRadius: '10px',
+  position: 'fixed',
+  right: '12px',
+  top: '0',
+  bottom: '0',
+  margin: 'auto',
+  zIndex: theme.zIndex.modal,
+}));
+export const StyledTitle = styled.div(({ theme }) => ({
+  color: theme.colors.textColor,
+  fontWeight: '600',
+  fontSize: theme.font.sm,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  svg: {
+    width: '20px',
+    marginRight: '14px',
+    color: theme.colors.primaryColor,
+  },
+}));
+export const StyledSubTitle = styled.div(({ theme }) => ({
+  color: theme.colors.textColor,
+  fontWeight: '500',
+  fontSize: '12px',
+  height: '36px',
+  lineHeight: '36px',
+}));
+export const StyledModalHeader = styled.div(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  height: '36px',
+}));
+
+export const StyledListItem = styled.div(({ theme }) => ({
+  height: '32px',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  fontSize: theme.font.xs,
+}));
+
+export const CloseButton = styled('div')(({ theme }) => {
+  return {
+    width: '24px',
+    height: '24px',
+    borderRadius: '5px',
+    color: theme.colors.iconColor,
+    cursor: 'pointer',
+    ':hover': {
+      background: theme.colors.hoverBackground,
+    },
+  };
+});