From 0d041aa5e89a09bcc6cf1d17d627a143322effa5 Mon Sep 17 00:00:00 2001 From: JimmFly Date: Thu, 8 Dec 2022 15:09:08 +0800 Subject: [PATCH 1/6] feat: init quick search --- packages/app/src/components/faq/index.tsx | 4 ++-- packages/app/src/components/quick-search/index.tsx | 12 ++++++++++++ .../src/components/workspace-slider-bar/index.tsx | 11 ++++++++++- packages/app/src/providers/global-modal-provider.tsx | 6 +++--- 4 files changed, 27 insertions(+), 6 deletions(-) create mode 100644 packages/app/src/components/quick-search/index.tsx diff --git a/packages/app/src/components/faq/index.tsx b/packages/app/src/components/faq/index.tsx index 23b474d52b..3ea0498b7a 100644 --- a/packages/app/src/components/faq/index.tsx +++ b/packages/app/src/components/faq/index.tsx @@ -16,7 +16,7 @@ export const FAQ = () => { const [showContent, setShowContent] = useState(false); const { mode } = useTheme(); const { mode: editorMode } = useEditor(); - const { shortcutsModalHandler, contactModalHandler } = useModal(); + const { shortcutsModalHandler, triggerContactModal } = useModal(); const isEdgelessDark = mode === 'dark' && editorMode === 'edgeless'; return ( @@ -38,7 +38,7 @@ export const FAQ = () => { isEdgelessDark={isEdgelessDark} onClick={() => { setShowContent(false); - contactModalHandler(true); + triggerContactModal(true); }} > diff --git a/packages/app/src/components/quick-search/index.tsx b/packages/app/src/components/quick-search/index.tsx new file mode 100644 index 0000000000..419fd03c21 --- /dev/null +++ b/packages/app/src/components/quick-search/index.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { Popper } from '@/ui/popper'; + +const QuickSearch = () => { + return ( + +
QuickSearch
+ + ); +}; + +export default QuickSearch; diff --git a/packages/app/src/components/workspace-slider-bar/index.tsx b/packages/app/src/components/workspace-slider-bar/index.tsx index 4cd6065462..3e56c81810 100644 --- a/packages/app/src/components/workspace-slider-bar/index.tsx +++ b/packages/app/src/components/workspace-slider-bar/index.tsx @@ -8,12 +8,21 @@ import { StyledSubListItem, } from './style'; import { Arrow } from './icons'; +import { useModal } from '@/providers/global-modal-provider'; + export const WorkSpaceSliderBar = () => { + const { shortcutsModalHandler } = useModal(); const [show, setShow] = useState(false); return ( <> - Quick search + { + shortcutsModalHandler(true); + }} + > + Quick search + { Router.push('/all-page'); diff --git a/packages/app/src/providers/global-modal-provider.tsx b/packages/app/src/providers/global-modal-provider.tsx index 599a3171f8..1fb610dcb0 100644 --- a/packages/app/src/providers/global-modal-provider.tsx +++ b/packages/app/src/providers/global-modal-provider.tsx @@ -5,13 +5,13 @@ import ContactModal from '@/components/contact-modal'; type ModalContextValue = { shortcutsModalHandler: (visible: boolean) => void; - contactModalHandler: (visible: boolean) => void; + triggerContactModal: (visible: boolean) => void; }; type ModalContextProps = PropsWithChildren<{}>; export const ModalContext = createContext({ shortcutsModalHandler: () => {}, - contactModalHandler: () => {}, + triggerContactModal: () => {}, }); export const useModal = () => useContext(ModalContext); @@ -28,7 +28,7 @@ export const ModalProvider = ({ shortcutsModalHandler: visible => { setOpenShortcutsModal(visible); }, - contactModalHandler: visible => { + triggerContactModal: visible => { setOpenContactModal(visible); }, }} From 11eb9b90d15d7220179d0d935d6359ab939db08f Mon Sep 17 00:00:00 2001 From: JimmFly Date: Thu, 8 Dec 2022 20:21:58 +0800 Subject: [PATCH 2/6] feat: add quick search UI --- .../components/quick-search/content/index.tsx | 14 +++ .../src/components/quick-search/footer.tsx | 39 ++++++++ .../app/src/components/quick-search/index.tsx | 42 +++++++-- .../app/src/components/quick-search/input.tsx | 34 +++++++ .../app/src/components/quick-search/style.ts | 94 +++++++++++++++++++ .../src/components/shortcuts-modal/index.tsx | 1 - .../components/workspace-slider-bar/index.tsx | 4 +- .../src/providers/global-modal-provider.tsx | 14 ++- 8 files changed, 232 insertions(+), 10 deletions(-) create mode 100644 packages/app/src/components/quick-search/content/index.tsx create mode 100644 packages/app/src/components/quick-search/footer.tsx create mode 100644 packages/app/src/components/quick-search/input.tsx create mode 100644 packages/app/src/components/quick-search/style.ts diff --git a/packages/app/src/components/quick-search/content/index.tsx b/packages/app/src/components/quick-search/content/index.tsx new file mode 100644 index 0000000000..9fca452050 --- /dev/null +++ b/packages/app/src/components/quick-search/content/index.tsx @@ -0,0 +1,14 @@ +import React from 'react'; + +const Result = () => { + return ( +
+
Jump to
+
All pages
+
Favorites
+
Trash
+
+ ); +}; + +export default Result; diff --git a/packages/app/src/components/quick-search/footer.tsx b/packages/app/src/components/quick-search/footer.tsx new file mode 100644 index 0000000000..3ed233d29c --- /dev/null +++ b/packages/app/src/components/quick-search/footer.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import { StyledModalFooterContent } from './style'; + +const addIcon = ( + + + + + + + + +); + +const QuickSearchFooter = () => { + return ( + + {addIcon} New page + + ); +}; + +export default QuickSearchFooter; diff --git a/packages/app/src/components/quick-search/index.tsx b/packages/app/src/components/quick-search/index.tsx index 419fd03c21..c0c191d4eb 100644 --- a/packages/app/src/components/quick-search/index.tsx +++ b/packages/app/src/components/quick-search/index.tsx @@ -1,11 +1,41 @@ -import React from 'react'; -import { Popper } from '@/ui/popper'; +import { Modal } from '@/ui/modal'; -const QuickSearch = () => { +import { + StyledModalWrapper, + StyledContent, + StyledModalHeader, + StyledModalFooter, + StyledModalDivider, + StyledShortcut, +} from './style'; +import Input from './input'; +import Result from './content'; +import QuickSearchFooter from './footer'; +type TransitionsModalProps = { + open: boolean; + onClose: () => void; +}; +const isMac = () => { + return /macintosh|mac os x/i.test(navigator.userAgent); +}; +export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => { return ( - -
QuickSearch
- + + + + + {isMac() ? '⌘+K' : 'Ctrl+K'} + + + + + + + + + + + ); }; diff --git a/packages/app/src/components/quick-search/input.tsx b/packages/app/src/components/quick-search/input.tsx new file mode 100644 index 0000000000..a452db9e7d --- /dev/null +++ b/packages/app/src/components/quick-search/input.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import { StyledInput, StyledInputContent, StyledLabel } from './style'; + +const searchIcon = ( + + + +); + +const Input = () => { + return ( + + {searchIcon} + + + ); +}; + +export default Input; diff --git a/packages/app/src/components/quick-search/style.ts b/packages/app/src/components/quick-search/style.ts new file mode 100644 index 0000000000..f201e797c1 --- /dev/null +++ b/packages/app/src/components/quick-search/style.ts @@ -0,0 +1,94 @@ +import { displayFlex, styled } from '@/styles'; +import { relative } from 'path'; + +export const StyledModalWrapper = styled('div')(({ theme }) => { + return { + width: '620px', + height: 'auto', + maxHeight: '720px', + minHeight: '350px', + backgroundColor: theme.colors.popoverBackground, + borderRadius: '20px', + position: 'absolute', + top: '138px', + margin: 'auto', + }; +}); + +export const StyledContent = styled('div')(({ theme }) => { + return { + minHeight: '215px', + maxHeight: '585px', + width: '100%', + padding: '5px 24px', + overflow: 'auto', + color: theme.colors.textColor, + marginTop: '16px', + letterSpacing: '0.06em', + }; +}); +export const StyledInputContent = styled('div')({ + margin: '13px 0', + ...displayFlex('space-between', 'center'), +}); +export const StyledShortcut = styled('div')(({ theme }) => { + return { color: theme.colors.placeHolderColor, fontSize: theme.font.sm }; +}); +export const StyledInput = styled('input')(({ theme }) => { + return { + width: '492px', + height: '22px', + padding: '0 12px', + fontSize: theme.font.sm, + ...displayFlex('space-between', 'center'), + letterSpacing: '0.06em', + color: theme.colors.textColor, + '::placeholder': { + color: theme.colors.placeHolderColor, + }, + }; +}); +export const StyledLabel = styled('label')(({ theme }) => { + return { width: '24px', height: '24px' }; +}); + +export const StyledModalHeader = styled('div')(({ theme }) => { + return { + height: '48px', + margin: '12px 24px 0px 24px', + ...displayFlex('space-between', 'center'), + color: theme.colors.textColor, + }; +}); +export const StyledModalDivider = styled('div')(({ theme }) => { + return { + width: 'auto', + height: '0', + margin: '6px 12px 6.5px 12px', + position: 'relative', + borderTop: `0.5px solid ${theme.colors.placeHolderColor}`, + }; +}); + +export const StyledModalFooter = styled('div')(({ theme }) => { + return { + fontSize: theme.font.sm, + lineHeight: '20px', + textAlign: 'center', + color: theme.colors.textColor, + margin: '16px 0', + }; +}); +export const StyledModalFooterContent = styled('div')(({ theme }) => { + return { + fontSize: theme.font.sm, + lineHeight: '20px', + textAlign: 'center', + ...displayFlex('center', 'center'), + color: theme.colors.textColor, + margin: '16px 0', + span: { + marginLeft: '12px', + }, + }; +}); diff --git a/packages/app/src/components/shortcuts-modal/index.tsx b/packages/app/src/components/shortcuts-modal/index.tsx index e665053ca4..2da577921e 100644 --- a/packages/app/src/components/shortcuts-modal/index.tsx +++ b/packages/app/src/components/shortcuts-modal/index.tsx @@ -13,7 +13,6 @@ import { windowsKeyboardShortcuts, winMarkdownShortcuts, } from '@/components/shortcuts-modal/config'; -import CloseIcon from '@mui/icons-material/Close'; import Slide from '@mui/material/Slide'; import { ModalCloseButton } from '@/ui/modal'; type ModalProps = { diff --git a/packages/app/src/components/workspace-slider-bar/index.tsx b/packages/app/src/components/workspace-slider-bar/index.tsx index 3e56c81810..cdbc1ecd99 100644 --- a/packages/app/src/components/workspace-slider-bar/index.tsx +++ b/packages/app/src/components/workspace-slider-bar/index.tsx @@ -11,14 +11,14 @@ import { Arrow } from './icons'; import { useModal } from '@/providers/global-modal-provider'; export const WorkSpaceSliderBar = () => { - const { shortcutsModalHandler } = useModal(); + const { triggerQuickSearchModal } = useModal(); const [show, setShow] = useState(false); return ( <> { - shortcutsModalHandler(true); + triggerQuickSearchModal(true); }} > Quick search diff --git a/packages/app/src/providers/global-modal-provider.tsx b/packages/app/src/providers/global-modal-provider.tsx index 1fb610dcb0..3cb8944c00 100644 --- a/packages/app/src/providers/global-modal-provider.tsx +++ b/packages/app/src/providers/global-modal-provider.tsx @@ -2,16 +2,18 @@ import { createContext, useContext, useState } from 'react'; import type { PropsWithChildren } from 'react'; import ShortcutsModal from '@/components/shortcuts-modal'; import ContactModal from '@/components/contact-modal'; - +import QuickSearch from '@/components/quick-search'; type ModalContextValue = { shortcutsModalHandler: (visible: boolean) => void; triggerContactModal: (visible: boolean) => void; + triggerQuickSearchModal: (visible: boolean) => void; }; type ModalContextProps = PropsWithChildren<{}>; export const ModalContext = createContext({ shortcutsModalHandler: () => {}, triggerContactModal: () => {}, + triggerQuickSearchModal: () => {}, }); export const useModal = () => useContext(ModalContext); @@ -21,6 +23,7 @@ export const ModalProvider = ({ }: PropsWithChildren) => { const [openContactModal, setOpenContactModal] = useState(false); const [openShortcutsModal, setOpenShortcutsModal] = useState(false); + const [openQuickSearchModal, setOpenQuickSearchModal] = useState(false); return ( { setOpenContactModal(visible); }, + triggerQuickSearchModal: visible => { + setOpenQuickSearchModal(visible); + }, }} > + { + setOpenQuickSearchModal(false); + }} + > {children} ); From 31528babe8b50b0e7050e6333ca9c3f6e60d6313 Mon Sep 17 00:00:00 2001 From: JimmFly Date: Thu, 8 Dec 2022 21:13:49 +0800 Subject: [PATCH 3/6] chore: update icons --- .../app/src/components/header/page-header.tsx | 17 ++++++++-- .../src/components/quick-search/footer.tsx | 31 ++----------------- .../app/src/components/quick-search/input.tsx | 22 +++---------- .../app/src/components/quick-search/style.ts | 2 +- 4 files changed, 23 insertions(+), 49 deletions(-) diff --git a/packages/app/src/components/header/page-header.tsx b/packages/app/src/components/header/page-header.tsx index 65dfa8e04a..4521dd122e 100644 --- a/packages/app/src/components/header/page-header.tsx +++ b/packages/app/src/components/header/page-header.tsx @@ -2,7 +2,9 @@ import React, { useEffect, useState } from 'react'; import { StyledTitle, StyledTitleWrapper } from './styles'; import { useEditor } from '@/providers/editor-provider'; import EditorModeSwitch from '@/components/editor-mode-switch'; - +import { MiddleIconArrowDownSmallIcon } from '@blocksuite/icons'; +import { useModal } from '@/providers/global-modal-provider'; +import IconButton from '@/ui/button/icon-button'; import Header from './header'; export const PageHeader = () => { @@ -10,7 +12,7 @@ export const PageHeader = () => { const [isHover, setIsHover] = useState(false); const { editor } = useEditor(); - + const { triggerQuickSearchModal } = useModal(); useEffect(() => { if (editor?.model) { setTitle(editor.model.title ?? ''); @@ -38,6 +40,17 @@ export const PageHeader = () => { }} /> {title} + + { + triggerQuickSearchModal(true); + }} + /> + ) : null} diff --git a/packages/app/src/components/quick-search/footer.tsx b/packages/app/src/components/quick-search/footer.tsx index 3ed233d29c..c4c4b13582 100644 --- a/packages/app/src/components/quick-search/footer.tsx +++ b/packages/app/src/components/quick-search/footer.tsx @@ -1,37 +1,12 @@ import React from 'react'; +import { MiddleAddIcon } from '@blocksuite/icons'; import { StyledModalFooterContent } from './style'; -const addIcon = ( - - - - - - - - -); - const QuickSearchFooter = () => { return ( - {addIcon} New page + + New page ); }; diff --git a/packages/app/src/components/quick-search/input.tsx b/packages/app/src/components/quick-search/input.tsx index a452db9e7d..bede221bbe 100644 --- a/packages/app/src/components/quick-search/input.tsx +++ b/packages/app/src/components/quick-search/input.tsx @@ -1,27 +1,13 @@ import React from 'react'; +import { MiddleSearchIcon } from '@blocksuite/icons'; import { StyledInput, StyledInputContent, StyledLabel } from './style'; -const searchIcon = ( - - - -); - const Input = () => { return ( - {searchIcon} + + + { - return { color: theme.colors.placeHolderColor, fontSize: theme.font.sm }; + return { color: theme.colors.placeHolderColor, fontSize: theme.font.xs }; }); export const StyledInput = styled('input')(({ theme }) => { return { From 9247b15999b22bd030558124727813459ebe2bb0 Mon Sep 17 00:00:00 2001 From: JimmFly Date: Fri, 9 Dec 2022 13:46:52 +0800 Subject: [PATCH 4/6] feat: init quick search content --- .../src/components/quick-search/content/index.tsx | 10 ++++++---- .../src/components/quick-search/content/jumpTo.tsx | 14 ++++++++++++++ .../quick-search/content/searchResult.tsx | 7 +++++++ 3 files changed, 27 insertions(+), 4 deletions(-) create mode 100644 packages/app/src/components/quick-search/content/jumpTo.tsx create mode 100644 packages/app/src/components/quick-search/content/searchResult.tsx diff --git a/packages/app/src/components/quick-search/content/index.tsx b/packages/app/src/components/quick-search/content/index.tsx index 9fca452050..36f960910f 100644 --- a/packages/app/src/components/quick-search/content/index.tsx +++ b/packages/app/src/components/quick-search/content/index.tsx @@ -1,12 +1,14 @@ import React from 'react'; +import { useEditor } from '@/providers/editor-provider'; +import JumpTo from './jumpTo'; const Result = () => { + const { editor, mode, setMode } = useEditor(); + console.log(editor?.page); + return (
-
Jump to
-
All pages
-
Favorites
-
Trash
+
); }; diff --git a/packages/app/src/components/quick-search/content/jumpTo.tsx b/packages/app/src/components/quick-search/content/jumpTo.tsx new file mode 100644 index 0000000000..18ef05c528 --- /dev/null +++ b/packages/app/src/components/quick-search/content/jumpTo.tsx @@ -0,0 +1,14 @@ +import React from 'react'; + +const JumpTo = () => { + return ( +
+
Jump to
+
All pages
+
Favorites
+
Trash
+
+ ); +}; + +export default JumpTo; diff --git a/packages/app/src/components/quick-search/content/searchResult.tsx b/packages/app/src/components/quick-search/content/searchResult.tsx new file mode 100644 index 0000000000..bd65f324c7 --- /dev/null +++ b/packages/app/src/components/quick-search/content/searchResult.tsx @@ -0,0 +1,7 @@ +import React from 'react'; + +const SearchResult = () => { + return
searchResult
; +}; + +export default SearchResult; From 9ba01e3a5adb5f5301155237ce95ea2dc6bee54f Mon Sep 17 00:00:00 2001 From: JimmFly Date: Fri, 9 Dec 2022 14:45:24 +0800 Subject: [PATCH 5/6] feat: import cmdk --- packages/app/package.json | 1 + pnpm-lock.yaml | 322 +++++++++++++++++++++++++++++++++++++- 2 files changed, 321 insertions(+), 2 deletions(-) diff --git a/packages/app/package.json b/packages/app/package.json index a8c7dc3388..35bdd7d1a7 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -23,6 +23,7 @@ "@mui/icons-material": "^5.10.9", "@mui/material": "^5.8.6", "@toeverything/pathfinder-logger": "workspace:@pathfinder/logger@*", + "cmdk": "^0.1.20", "css-spring": "^4.1.0", "lit": "^2.3.1", "next": "13.0.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 00d0ab795f..b822c6637e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -39,6 +39,7 @@ importers: '@types/node': 18.7.18 '@types/react': 18.0.20 '@types/react-dom': 18.0.6 + cmdk: ^0.1.20 css-spring: ^4.1.0 eslint: 8.22.0 eslint-config-next: 12.3.1 @@ -67,6 +68,7 @@ importers: '@mui/icons-material': 5.10.9_5fncb4nagb4cvvcnwamw2rozfa '@mui/material': 5.10.9_af5ln35zuaotaffazii6n6bke4 '@toeverything/pathfinder-logger': link:../logger + cmdk: 0.1.20_7ey2zzynotv32rpkwno45fsx4e css-spring: 4.1.0 lit: 2.4.0 next: 13.0.1_biqbaboplfbrettd7655fr4n2y @@ -890,6 +892,191 @@ packages: resolution: {integrity: sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==} dev: false + /@radix-ui/primitive/1.0.0: + resolution: {integrity: sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==} + dependencies: + '@babel/runtime': 7.19.0 + dev: false + + /@radix-ui/react-compose-refs/1.0.0_react@18.2.0: + resolution: {integrity: sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==} + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + dependencies: + '@babel/runtime': 7.19.0 + react: 18.2.0 + dev: false + + /@radix-ui/react-context/1.0.0_react@18.2.0: + resolution: {integrity: sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==} + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + dependencies: + '@babel/runtime': 7.19.0 + react: 18.2.0 + dev: false + + /@radix-ui/react-dialog/1.0.0_7ey2zzynotv32rpkwno45fsx4e: + resolution: {integrity: sha512-Yn9YU+QlHYLWwV1XfKiqnGVpWYWk6MeBVM6x/bcoyPvxgjQGoeT35482viLPctTMWoMw0PoHgqfSox7Ig+957Q==} + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + dependencies: + '@babel/runtime': 7.19.0 + '@radix-ui/primitive': 1.0.0 + '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0 + '@radix-ui/react-context': 1.0.0_react@18.2.0 + '@radix-ui/react-dismissable-layer': 1.0.0_biqbaboplfbrettd7655fr4n2y + '@radix-ui/react-focus-guards': 1.0.0_react@18.2.0 + '@radix-ui/react-focus-scope': 1.0.0_biqbaboplfbrettd7655fr4n2y + '@radix-ui/react-id': 1.0.0_react@18.2.0 + '@radix-ui/react-portal': 1.0.0_biqbaboplfbrettd7655fr4n2y + '@radix-ui/react-presence': 1.0.0_biqbaboplfbrettd7655fr4n2y + '@radix-ui/react-primitive': 1.0.0_biqbaboplfbrettd7655fr4n2y + '@radix-ui/react-slot': 1.0.0_react@18.2.0 + '@radix-ui/react-use-controllable-state': 1.0.0_react@18.2.0 + aria-hidden: 1.2.2_w5j4k42lgipnm43s3brx6h3c34 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + react-remove-scroll: 2.5.4_w5j4k42lgipnm43s3brx6h3c34 + transitivePeerDependencies: + - '@types/react' + dev: false + + /@radix-ui/react-dismissable-layer/1.0.0_biqbaboplfbrettd7655fr4n2y: + resolution: {integrity: sha512-n7kDRfx+LB1zLueRDvZ1Pd0bxdJWDUZNQ/GWoxDn2prnuJKRdxsjulejX/ePkOsLi2tTm6P24mDqlMSgQpsT6g==} + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + dependencies: + '@babel/runtime': 7.19.0 + '@radix-ui/primitive': 1.0.0 + '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0 + '@radix-ui/react-primitive': 1.0.0_biqbaboplfbrettd7655fr4n2y + '@radix-ui/react-use-callback-ref': 1.0.0_react@18.2.0 + '@radix-ui/react-use-escape-keydown': 1.0.0_react@18.2.0 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + dev: false + + /@radix-ui/react-focus-guards/1.0.0_react@18.2.0: + resolution: {integrity: sha512-UagjDk4ijOAnGu4WMUPj9ahi7/zJJqNZ9ZAiGPp7waUWJO0O1aWXi/udPphI0IUjvrhBsZJGSN66dR2dsueLWQ==} + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + dependencies: + '@babel/runtime': 7.19.0 + react: 18.2.0 + dev: false + + /@radix-ui/react-focus-scope/1.0.0_biqbaboplfbrettd7655fr4n2y: + resolution: {integrity: sha512-C4SWtsULLGf/2L4oGeIHlvWQx7Rf+7cX/vKOAD2dXW0A1b5QXwi3wWeaEgW+wn+SEVrraMUk05vLU9fZZz5HbQ==} + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + dependencies: + '@babel/runtime': 7.19.0 + '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0 + '@radix-ui/react-primitive': 1.0.0_biqbaboplfbrettd7655fr4n2y + '@radix-ui/react-use-callback-ref': 1.0.0_react@18.2.0 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + dev: false + + /@radix-ui/react-id/1.0.0_react@18.2.0: + resolution: {integrity: sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw==} + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + dependencies: + '@babel/runtime': 7.19.0 + '@radix-ui/react-use-layout-effect': 1.0.0_react@18.2.0 + react: 18.2.0 + dev: false + + /@radix-ui/react-portal/1.0.0_biqbaboplfbrettd7655fr4n2y: + resolution: {integrity: sha512-a8qyFO/Xb99d8wQdu4o7qnigNjTPG123uADNecz0eX4usnQEj7o+cG4ZX4zkqq98NYekT7UoEQIjxBNWIFuqTA==} + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + dependencies: + '@babel/runtime': 7.19.0 + '@radix-ui/react-primitive': 1.0.0_biqbaboplfbrettd7655fr4n2y + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + dev: false + + /@radix-ui/react-presence/1.0.0_biqbaboplfbrettd7655fr4n2y: + resolution: {integrity: sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==} + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + dependencies: + '@babel/runtime': 7.19.0 + '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0 + '@radix-ui/react-use-layout-effect': 1.0.0_react@18.2.0 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + dev: false + + /@radix-ui/react-primitive/1.0.0_biqbaboplfbrettd7655fr4n2y: + resolution: {integrity: sha512-EyXe6mnRlHZ8b6f4ilTDrXmkLShICIuOTTj0GX4w1rp+wSxf3+TD05u1UOITC8VsJ2a9nwHvdXtOXEOl0Cw/zQ==} + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + dependencies: + '@babel/runtime': 7.19.0 + '@radix-ui/react-slot': 1.0.0_react@18.2.0 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + dev: false + + /@radix-ui/react-slot/1.0.0_react@18.2.0: + resolution: {integrity: sha512-3mrKauI/tWXo1Ll+gN5dHcxDPdm/Df1ufcDLCecn+pnCIVcdWE7CujXo8QaXOWRJyZyQWWbpB8eFwHzWXlv5mQ==} + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + dependencies: + '@babel/runtime': 7.19.0 + '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0 + react: 18.2.0 + dev: false + + /@radix-ui/react-use-callback-ref/1.0.0_react@18.2.0: + resolution: {integrity: sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==} + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + dependencies: + '@babel/runtime': 7.19.0 + react: 18.2.0 + dev: false + + /@radix-ui/react-use-controllable-state/1.0.0_react@18.2.0: + resolution: {integrity: sha512-FohDoZvk3mEXh9AWAVyRTYR4Sq7/gavuofglmiXB2g1aKyboUD4YtgWxKj8O5n+Uak52gXQ4wKz5IFST4vtJHg==} + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + dependencies: + '@babel/runtime': 7.19.0 + '@radix-ui/react-use-callback-ref': 1.0.0_react@18.2.0 + react: 18.2.0 + dev: false + + /@radix-ui/react-use-escape-keydown/1.0.0_react@18.2.0: + resolution: {integrity: sha512-JwfBCUIfhXRxKExgIqGa4CQsiMemo1Xt0W/B4ei3fpzpvPENKpMKQ8mZSB6Acj3ebrAEgi2xiQvcI1PAAodvyg==} + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + dependencies: + '@babel/runtime': 7.19.0 + '@radix-ui/react-use-callback-ref': 1.0.0_react@18.2.0 + react: 18.2.0 + dev: false + + /@radix-ui/react-use-layout-effect/1.0.0_react@18.2.0: + resolution: {integrity: sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==} + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + dependencies: + '@babel/runtime': 7.19.0 + react: 18.2.0 + dev: false + /@rushstack/eslint-patch/1.2.0: resolution: {integrity: sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==} dev: true @@ -1125,6 +1312,21 @@ packages: resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==} dev: true + /aria-hidden/1.2.2_w5j4k42lgipnm43s3brx6h3c34: + resolution: {integrity: sha512-6y/ogyDTk/7YAe91T3E2PR1ALVKyM2QbTio5HwM+N1Q6CMlCKhvClyIjkckBswa0f2xJhjsfzIGa1yVSe1UMVA==} + engines: {node: '>=10'} + peerDependencies: + '@types/react': ^16.9.0 || ^17.0.0 || ^18.0.0 + react: ^16.9.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@types/react': 18.0.20 + react: 18.2.0 + tslib: 2.4.0 + dev: false + /aria-query/4.2.2: resolution: {integrity: sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==} engines: {node: '>=6.0'} @@ -1282,6 +1484,20 @@ packages: engines: {node: '>=6'} dev: false + /cmdk/0.1.20_7ey2zzynotv32rpkwno45fsx4e: + resolution: {integrity: sha512-b05kPE+9jmGRibOf2h34d1ybCFfYYOiwsyylDtvhI0ptDSJ/gbPDQSq6DySL4b74ZnK/JH/WVP3UPuAYXRPypg==} + peerDependencies: + react: ^18.0.0 + react-dom: ^18.0.0 + dependencies: + '@radix-ui/react-dialog': 1.0.0_7ey2zzynotv32rpkwno45fsx4e + command-score: 0.1.2 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + transitivePeerDependencies: + - '@types/react' + dev: false + /color-convert/1.9.3: resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==} dependencies: @@ -1303,6 +1519,10 @@ packages: resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==} dev: true + /command-score/0.1.2: + resolution: {integrity: sha512-VtDvQpIJBvBatnONUsPzXYFVKQQAhuf3XTNOAsdBxCNO/QCtUUd8LSgjn0GVarBkCad6aJCZfXgrjYbl/KRr7w==} + dev: false + /concat-map/0.0.1: resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=} dev: true @@ -1417,6 +1637,10 @@ packages: has-property-descriptors: 1.0.0 object-keys: 1.1.1 + /detect-node-es/1.1.0: + resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==} + dev: false + /dir-glob/3.0.1: resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==} engines: {node: '>=8'} @@ -1647,7 +1871,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 @@ -1666,7 +1890,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 @@ -1988,6 +2212,11 @@ packages: has: 1.0.3 has-symbols: 1.0.3 + /get-nonce/1.0.1: + resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==} + engines: {node: '>=6'} + dev: false + /get-symbol-description/1.0.0: resolution: {integrity: sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==} engines: {node: '>= 0.4'} @@ -2161,6 +2390,12 @@ packages: side-channel: 1.0.4 dev: true + /invariant/2.2.4: + resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==} + dependencies: + loose-envify: 1.4.0 + dev: false + /is-arguments/1.1.1: resolution: {integrity: sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==} engines: {node: '>= 0.4'} @@ -2909,6 +3144,58 @@ packages: resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==} dev: false + /react-remove-scroll-bar/2.3.4_w5j4k42lgipnm43s3brx6h3c34: + resolution: {integrity: sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==} + engines: {node: '>=10'} + peerDependencies: + '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@types/react': 18.0.20 + react: 18.2.0 + react-style-singleton: 2.2.1_w5j4k42lgipnm43s3brx6h3c34 + tslib: 2.4.0 + dev: false + + /react-remove-scroll/2.5.4_w5j4k42lgipnm43s3brx6h3c34: + resolution: {integrity: sha512-xGVKJJr0SJGQVirVFAUZ2k1QLyO6m+2fy0l8Qawbp5Jgrv3DeLalrfMNBFSlmz5kriGGzsVBtGVnf4pTKIhhWA==} + engines: {node: '>=10'} + peerDependencies: + '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@types/react': 18.0.20 + react: 18.2.0 + react-remove-scroll-bar: 2.3.4_w5j4k42lgipnm43s3brx6h3c34 + react-style-singleton: 2.2.1_w5j4k42lgipnm43s3brx6h3c34 + tslib: 2.4.0 + use-callback-ref: 1.3.0_w5j4k42lgipnm43s3brx6h3c34 + use-sidecar: 1.1.2_w5j4k42lgipnm43s3brx6h3c34 + dev: false + + /react-style-singleton/2.2.1_w5j4k42lgipnm43s3brx6h3c34: + resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==} + engines: {node: '>=10'} + peerDependencies: + '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@types/react': 18.0.20 + get-nonce: 1.0.1 + invariant: 2.2.4 + react: 18.2.0 + tslib: 2.4.0 + dev: false + /react-transition-group/4.4.5_biqbaboplfbrettd7655fr4n2y: resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==} peerDependencies: @@ -3321,6 +3608,37 @@ packages: punycode: 2.1.1 dev: true + /use-callback-ref/1.3.0_w5j4k42lgipnm43s3brx6h3c34: + resolution: {integrity: sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==} + engines: {node: '>=10'} + peerDependencies: + '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@types/react': 18.0.20 + react: 18.2.0 + tslib: 2.4.0 + dev: false + + /use-sidecar/1.1.2_w5j4k42lgipnm43s3brx6h3c34: + resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==} + engines: {node: '>=10'} + peerDependencies: + '@types/react': ^16.9.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@types/react': 18.0.20 + detect-node-es: 1.1.0 + react: 18.2.0 + tslib: 2.4.0 + dev: false + /use-sync-external-store/1.2.0_react@18.2.0: resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==} peerDependencies: From 4bcea812f0dd39d7ea4c6a87da95f6eef459e9c2 Mon Sep 17 00:00:00 2001 From: JimmFly Date: Fri, 9 Dec 2022 14:51:59 +0800 Subject: [PATCH 6/6] chore: change style --- .../quick-search/content/jumpTo.tsx | 21 +++++++++++++++---- .../src/components/quick-search/footer.tsx | 11 +++++++++- .../app/src/components/quick-search/index.tsx | 14 ++++++++++--- .../app/src/components/quick-search/style.ts | 16 ++++++++------ .../components/workspace-slider-bar/index.tsx | 1 + 5 files changed, 49 insertions(+), 14 deletions(-) diff --git a/packages/app/src/components/quick-search/content/jumpTo.tsx b/packages/app/src/components/quick-search/content/jumpTo.tsx index 18ef05c528..2d0617cc26 100644 --- a/packages/app/src/components/quick-search/content/jumpTo.tsx +++ b/packages/app/src/components/quick-search/content/jumpTo.tsx @@ -1,12 +1,25 @@ import React from 'react'; - +import { + MiddleFavouritesIcon, + MiddleTrashIcon, + MiddleAllPagesIcon, +} from '@blocksuite/icons'; const JumpTo = () => { return (
Jump to
-
All pages
-
Favorites
-
Trash
+
+ + All pages +
+
+ + Favourites +
+
+ + Trash +
); }; diff --git a/packages/app/src/components/quick-search/footer.tsx b/packages/app/src/components/quick-search/footer.tsx index c4c4b13582..982d465900 100644 --- a/packages/app/src/components/quick-search/footer.tsx +++ b/packages/app/src/components/quick-search/footer.tsx @@ -1,11 +1,20 @@ import React from 'react'; import { MiddleAddIcon } from '@blocksuite/icons'; import { StyledModalFooterContent } from './style'; +import { useEditor } from '@/providers/editor-provider'; +import { IconButton } from '@/ui/button'; const QuickSearchFooter = () => { + const { createPage } = useEditor(); return ( - + + { + createPage(); + }} + /> + New page ); diff --git a/packages/app/src/components/quick-search/index.tsx b/packages/app/src/components/quick-search/index.tsx index c0c191d4eb..834aa00ca5 100644 --- a/packages/app/src/components/quick-search/index.tsx +++ b/packages/app/src/components/quick-search/index.tsx @@ -1,4 +1,4 @@ -import { Modal } from '@/ui/modal'; +import { Modal, ModalWrapper } from '@/ui/modal'; import { StyledModalWrapper, @@ -21,7 +21,15 @@ const isMac = () => { export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => { return ( - + {isMac() ? '⌘+K' : 'Ctrl+K'} @@ -34,7 +42,7 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => { - + ); }; diff --git a/packages/app/src/components/quick-search/style.ts b/packages/app/src/components/quick-search/style.ts index 6992274873..7468625650 100644 --- a/packages/app/src/components/quick-search/style.ts +++ b/packages/app/src/components/quick-search/style.ts @@ -22,7 +22,7 @@ export const StyledContent = styled('div')(({ theme }) => { width: '100%', padding: '5px 24px', overflow: 'auto', - color: theme.colors.textColor, + color: theme.colors.popoverColor, marginTop: '16px', letterSpacing: '0.06em', }; @@ -42,14 +42,18 @@ export const StyledInput = styled('input')(({ theme }) => { fontSize: theme.font.sm, ...displayFlex('space-between', 'center'), letterSpacing: '0.06em', - color: theme.colors.textColor, + color: theme.colors.popoverColor, '::placeholder': { color: theme.colors.placeHolderColor, }, }; }); export const StyledLabel = styled('label')(({ theme }) => { - return { width: '24px', height: '24px' }; + return { + width: '24px', + height: '24px', + color: theme.colors.iconColor, + }; }); export const StyledModalHeader = styled('div')(({ theme }) => { @@ -57,7 +61,7 @@ export const StyledModalHeader = styled('div')(({ theme }) => { height: '48px', margin: '12px 24px 0px 24px', ...displayFlex('space-between', 'center'), - color: theme.colors.textColor, + color: theme.colors.popoverColor, }; }); export const StyledModalDivider = styled('div')(({ theme }) => { @@ -75,7 +79,7 @@ export const StyledModalFooter = styled('div')(({ theme }) => { fontSize: theme.font.sm, lineHeight: '20px', textAlign: 'center', - color: theme.colors.textColor, + color: theme.colors.popoverColor, margin: '16px 0', }; }); @@ -85,7 +89,7 @@ export const StyledModalFooterContent = styled('div')(({ theme }) => { lineHeight: '20px', textAlign: 'center', ...displayFlex('center', 'center'), - color: theme.colors.textColor, + color: theme.colors.popoverColor, margin: '16px 0', span: { marginLeft: '12px', diff --git a/packages/app/src/components/workspace-slider-bar/index.tsx b/packages/app/src/components/workspace-slider-bar/index.tsx index a1ff2700a0..4b266ce21c 100644 --- a/packages/app/src/components/workspace-slider-bar/index.tsx +++ b/packages/app/src/components/workspace-slider-bar/index.tsx @@ -10,6 +10,7 @@ import { import { Arrow } from './icons'; import Link from 'next/link'; import { useEditor } from '@/providers/editor-provider'; +import { useModal } from '@/providers/global-modal-provider'; export const WorkSpaceSliderBar = () => { const { triggerQuickSearchModal } = useModal(); const [show, setShow] = useState(false);