From d9205bb405446ef5577952ea7562b0047a06df2c Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Thu, 3 Nov 2022 14:13:58 +0800 Subject: [PATCH 1/3] fix: mobile modal background is error in dark mode --- packages/app/src/components/mobile-modal/styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/app/src/components/mobile-modal/styles.ts b/packages/app/src/components/mobile-modal/styles.ts index dc2a9ba79..14347f737 100644 --- a/packages/app/src/components/mobile-modal/styles.ts +++ b/packages/app/src/components/mobile-modal/styles.ts @@ -5,7 +5,7 @@ export const ModalWrapper = styled.div(({ theme }) => { return { width: '348px', height: '388px', - background: '#FFFFFF', + background: theme.colors.popoverBackground, borderRadius: '28px', position: 'relative', backgroundImage: `url(${bg.src})`, From 75f05cb3995bf720633b823998371687817bddd3 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Thu, 3 Nov 2022 18:59:54 +0800 Subject: [PATCH 2/3] feat: modify popper --- packages/app/src/ui/popover/index.tsx | 65 ------------ packages/app/src/ui/popper/Popper.tsx | 125 +++++++++++------------- packages/app/src/ui/popper/interface.ts | 11 +-- packages/app/src/ui/tooltip/Tooltip.tsx | 16 ++- 4 files changed, 70 insertions(+), 147 deletions(-) delete mode 100644 packages/app/src/ui/popover/index.tsx diff --git a/packages/app/src/ui/popover/index.tsx b/packages/app/src/ui/popover/index.tsx deleted file mode 100644 index 29100d5b3..000000000 --- a/packages/app/src/ui/popover/index.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import { useState } from 'react'; -import type { CSSProperties, PropsWithChildren, ReactNode } from 'react'; -import Grow from '@mui/material/Grow'; -import ClickAwayListener from '@mui/base/ClickAwayListener'; - -import { styled } from '@/styles'; - -type PopoverProps = { - popoverContent?: ReactNode; - style?: CSSProperties; -}; - -const StyledPopoverContainer = styled('div')({ - position: 'relative', - cursor: 'pointer', -}); - -const StyledPopoverWrapper = styled('div')({ - position: 'absolute', - bottom: '0', - right: '0', - paddingTop: '46px', - zIndex: 1000, -}); -const StyledPopover = styled('div')(({ theme }) => { - return { - width: '248px', - background: theme.colors.popoverBackground, - boxShadow: theme.shadow.popover, - color: theme.colors.popoverColor, - borderRadius: '10px 0px 10px 10px', - padding: '8px 4px', - position: 'absolute', - top: '46px', - right: '0', - }; -}); -export const Popover = ({ - children, - popoverContent, - style = {}, -}: PropsWithChildren) => { - const [show, setShow] = useState(false); - return ( - { - setShow(false); - }} - > - { - setShow(!show); - }} - style={style} - > - {children} - - - {popoverContent} - - - - - ); -}; diff --git a/packages/app/src/ui/popper/Popper.tsx b/packages/app/src/ui/popper/Popper.tsx index c889f8097..3c48577a5 100644 --- a/packages/app/src/ui/popper/Popper.tsx +++ b/packages/app/src/ui/popper/Popper.tsx @@ -4,6 +4,7 @@ import { useMemo, useRef, useState, + cloneElement, } from 'react'; import PopperUnstyled from '@mui/base/PopperUnstyled'; import ClickAwayListener from '@mui/base/ClickAwayListener'; @@ -26,7 +27,6 @@ export const Popper = ({ onVisibleChange, popoverStyle, popoverClassName, - anchorStyle, anchorClassName, zIndex, offset = [0, 5], @@ -36,12 +36,9 @@ export const Popper = ({ onClickAway, ...popperProps }: PopperProps) => { - // @ts-ignore - const [anchorEl, setAnchorEl] = useState(null); + const [anchorEl, setAnchorEl] = useState(); const [visible, setVisible] = useState(defaultVisible); - // @ts-ignore - const [arrowRef, setArrowRef] = useState(null); - const popperRef = useRef(); + const [arrowRef, setArrowRef] = useState(); const pointerLeaveTimer = useRef(); const pointerEnterTimer = useRef(); @@ -95,7 +92,6 @@ export const Popper = ({ }; }); - // @ts-ignore return ( { @@ -107,66 +103,63 @@ export const Popper = ({ }} > - {isAnchorCustom ? null : ( -
setAnchorEl(dom)} - onClick={e => { - if (!hasClickTrigger || visibleControlledByParent) { - onClick?.(e); - return; - } - setVisible(!visible); - }} - onPointerEnter={onPointerEnterHandler} - onPointerLeave={onPointerLeaveHandler} - style={anchorStyle} - className={anchorClassName} + {cloneElement(children, { + ref: (dom: HTMLDivElement) => setAnchorEl(dom), + onClick: (e: MouseEvent) => { + if (!hasClickTrigger || visibleControlledByParent) { + // @ts-ignore + onClick?.(e); + return; + } + setVisible(!visible); + }, + onPointerEnter: onPointerEnterHandler, + onPointerLeave: onPointerLeaveHandler, + className: anchorClassName, + popperVisible: visible, + })} + {content && ( + - {children} -
+ {({ TransitionProps }) => ( + +
+ {showArrow && ( + // @ts-ignore + + )} + {content} +
+ + )} + )} - - {({ TransitionProps }) => ( - -
- {showArrow && ( - // @ts-ignore - - )} - {content} -
- - )} - ); @@ -184,6 +177,6 @@ const BasicStyledPopper = styled(PopperUnstyled, { zIndex?: number; }>(({ zIndex, theme }) => { return { - zIndex: zIndex, + zIndex: zIndex ?? theme.zIndex.popover, }; }); diff --git a/packages/app/src/ui/popper/interface.ts b/packages/app/src/ui/popper/interface.ts index bbb676c4c..02c07c0af 100644 --- a/packages/app/src/ui/popper/interface.ts +++ b/packages/app/src/ui/popper/interface.ts @@ -1,4 +1,4 @@ -import type { CSSProperties, ReactNode, Ref } from 'react'; +import type { CSSProperties, ReactNode, Ref, ReactElement } from 'react'; import { type PopperPlacementType, type PopperUnstyledProps, @@ -18,10 +18,10 @@ export type PopperArrowProps = { export type PopperProps = { // Popover content - content: ReactNode; + content?: ReactNode; // Popover trigger - children?: ReactNode; + children: ReactElement; // Whether the default is implicit defaultVisible?: boolean; @@ -47,9 +47,6 @@ export type PopperProps = { // Popover container class name popoverClassName?: string; - // Anchor style - anchorStyle?: CSSProperties; - // Anchor class name anchorClassName?: string; @@ -63,4 +60,4 @@ export type PopperProps = { popperHandlerRef?: Ref; onClickAway?: () => void; -} & Omit; +} & Omit; diff --git a/packages/app/src/ui/tooltip/Tooltip.tsx b/packages/app/src/ui/tooltip/Tooltip.tsx index 7774f39d6..5182612f7 100644 --- a/packages/app/src/ui/tooltip/Tooltip.tsx +++ b/packages/app/src/ui/tooltip/Tooltip.tsx @@ -1,4 +1,3 @@ -import { type PropsWithChildren } from 'react'; import StyledPopperContainer from '../shared/Container'; import { Popper, type PopperProps } from '../popper'; import { styled } from '@/styles'; @@ -14,16 +13,15 @@ const StyledTooltip = styled(StyledPopperContainer)(({ theme }) => { }; }); -export const Tooltip = ( - props: PropsWithChildren> -) => { - const { content, placement = 'top-start' } = props; - // If there is no content, hide forever - return content ? ( +export const Tooltip = (props: PopperProps & Omit) => { + const { content, placement = 'top-start', children } = props; + return ( {content}} - /> - ) : null; + > + {children} + + ); }; From 523f3f273cc8e5c5b0fcba01fc5f3cdabc44ade7 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Thu, 3 Nov 2022 19:00:17 +0800 Subject: [PATCH 3/3] feat: add Menu component --- packages/app/src/components/Header/icons.tsx | 63 +++++++++++++++ packages/app/src/components/Header/index.tsx | 80 +++++++++++++------- packages/app/src/components/Header/styles.ts | 25 +++--- packages/app/src/ui/menu/index.ts | 2 + packages/app/src/ui/menu/menu.tsx | 20 +++++ packages/app/src/ui/menu/styles.ts | 34 +++++++++ 6 files changed, 185 insertions(+), 39 deletions(-) create mode 100644 packages/app/src/ui/menu/index.ts create mode 100644 packages/app/src/ui/menu/menu.tsx create mode 100644 packages/app/src/ui/menu/styles.ts diff --git a/packages/app/src/components/Header/icons.tsx b/packages/app/src/components/Header/icons.tsx index 6f9d5ebee..57a4134d6 100644 --- a/packages/app/src/components/Header/icons.tsx +++ b/packages/app/src/components/Header/icons.tsx @@ -2,6 +2,69 @@ import type { DOMAttributes, CSSProperties } from 'react'; type IconProps = { style?: CSSProperties; } & DOMAttributes; + +export const RightArrow = ({ style = {}, ...props }: IconProps) => { + return ( + + + + ); +}; +export const Export2Markdown = ({ style = {}, ...props }: IconProps) => { + return ( + + + + + ); +}; +export const Export2HTML = ({ style = {}, ...props }: IconProps) => { + return ( + + + + + + + + ); +}; export const LogoIcon = ({ style = {}, ...props }: IconProps) => { return ( { const { editor, mode, setMode } = useEditor(); return ( <> - { setMode(mode === 'page' ? 'edgeless' : 'page'); }} > - {mode === 'page' ? : } - Convert to {mode === 'page' ? 'Edgeless' : 'Page'} - - { - editor && editor.contentParser.onExportHtml(); - }} + + {mode === 'page' ? : } + Convert to {mode === 'page' ? 'Edgeless' : 'Page'} + + + + { + editor && editor.contentParser.onExportHtml(); + }} + > + + + Export to HTML + + + { + editor && editor.contentParser.onExportMarkdown(); + }} + > + + + Export to Markdown + + + + } > - - Export to HTML - - { - editor && editor.contentParser.onExportMarkdown(); - }} - > - - Export to Markdown - + + + + Export + + + + ); }; @@ -115,14 +144,11 @@ export const Header = () => { - } - style={{ marginLeft: '20px' }} - > + } placement="bottom-end"> - + diff --git a/packages/app/src/components/Header/styles.ts b/packages/app/src/components/Header/styles.ts index afb25abfd..3e3978ca3 100644 --- a/packages/app/src/components/Header/styles.ts +++ b/packages/app/src/components/Header/styles.ts @@ -1,4 +1,5 @@ -import { absoluteCenter, displayFlex, styled } from '@/styles'; +import { displayFlex, styled } from '@/styles'; +import { MenuItem } from '@/ui/menu'; export const StyledHeaderContainer = styled.div<{ hasWarning: boolean }>( ({ hasWarning }) => { @@ -20,7 +21,7 @@ export const StyledHeader = styled.div<{ hasWarning: boolean }>( left: '0', top: hasWarning ? '36px' : '0', padding: '0 22px', - zIndex: theme.zIndex.modal, + zIndex: 99, }; } ); @@ -61,23 +62,23 @@ export const StyledHeaderRightSide = styled('div')({ alignItems: 'center', }); -export const StyledMoreMenuItem = styled('div')(({ theme }) => { +export const StyledMenuItemWrapper = styled.div(({ theme }) => { return { height: '32px', - display: 'flex', - alignItems: 'center', - borderRadius: '5px', - fontSize: '14px', - color: theme.colors.popoverColor, - padding: '0 14px', + position: 'relative', + cursor: 'pointer', + ...displayFlex('flex-start', 'center'), svg: { width: '16px', height: '16px', marginRight: '14px', }, - ':hover': { - color: theme.colors.primaryColor, - background: theme.colors.hoverBackground, + 'svg:nth-child(2)': { + position: 'absolute', + right: 0, + top: 0, + bottom: 0, + margin: 'auto', }, }; }); diff --git a/packages/app/src/ui/menu/index.ts b/packages/app/src/ui/menu/index.ts new file mode 100644 index 000000000..8dde85f11 --- /dev/null +++ b/packages/app/src/ui/menu/index.ts @@ -0,0 +1,2 @@ +export * from './menu'; +export { StyledMenuItem as MenuItem } from './styles'; diff --git a/packages/app/src/ui/menu/menu.tsx b/packages/app/src/ui/menu/menu.tsx new file mode 100644 index 000000000..13d7b178e --- /dev/null +++ b/packages/app/src/ui/menu/menu.tsx @@ -0,0 +1,20 @@ +import { Popper, type PopperProps } from '../popper'; +import { TooltipProps } from '@mui/material'; +import { StyledMenuWrapper } from '@/ui/menu/styles'; + +export const Menu = (props: PopperProps & Omit) => { + const { content, placement = 'bottom-start', children } = props; + return content ? ( + {content} + } + > + {children} + + ) : null; +}; + +export default Menu; diff --git a/packages/app/src/ui/menu/styles.ts b/packages/app/src/ui/menu/styles.ts new file mode 100644 index 000000000..1b426217d --- /dev/null +++ b/packages/app/src/ui/menu/styles.ts @@ -0,0 +1,34 @@ +import { styled } from '@/styles'; +import StyledPopperContainer from '../shared/Container'; + +export const StyledMenuWrapper = styled(StyledPopperContainer)(({ theme }) => { + return { + background: theme.colors.popoverBackground, + padding: '8px 4px', + fontSize: '14px', + backgroundColor: theme.colors.popoverBackground, + boxShadow: theme.shadow.popover, + color: theme.colors.popoverColor, + }; +}); + +export const StyledMenuItem = styled('div')<{ popperVisible?: boolean }>( + ({ theme, popperVisible }) => { + return { + borderRadius: '5px', + padding: '0 14px', + + color: popperVisible + ? theme.colors.primaryColor + : theme.colors.popoverColor, + backgroundColor: popperVisible + ? theme.colors.hoverBackground + : 'transparent', + + ':hover': { + color: theme.colors.primaryColor, + backgroundColor: theme.colors.hoverBackground, + }, + }; + } +);