From cd6a930939e536c3dbdbab3f0b4ffcb187d79243 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Tue, 25 Oct 2022 11:51:59 +0800 Subject: [PATCH] feat: modify styles & ui components --- packages/app/src/components/Header/index.tsx | 2 +- .../src/components/edgeless-toolbar/index.tsx | 2 +- packages/app/src/components/faq/index.tsx | 2 +- .../app/src/components/tooltip/Container.tsx | 29 --------- .../app/src/components/tooltip/Tooltip.tsx | 65 ------------------- .../app/src/components/tooltip/interface.ts | 9 --- packages/app/src/styles/theme.ts | 9 +++ packages/app/src/styles/types.ts | 12 +++- .../src/{components => ui}/popover/index.tsx | 0 .../popper/PopoverArrow.tsx | 0 .../src/{components => ui}/popper/Popper.tsx | 0 .../src/{components => ui}/popper/index.ts | 0 .../{components => ui}/popper/interface.ts | 0 packages/app/src/ui/shared/Container.tsx | 53 +++++++++++++++ packages/app/src/ui/tooltip/Tooltip.tsx | 32 +++++++++ .../src/{components => ui}/tooltip/index.tsx | 0 16 files changed, 107 insertions(+), 108 deletions(-) delete mode 100644 packages/app/src/components/tooltip/Container.tsx delete mode 100644 packages/app/src/components/tooltip/Tooltip.tsx delete mode 100644 packages/app/src/components/tooltip/interface.ts rename packages/app/src/{components => ui}/popover/index.tsx (100%) rename packages/app/src/{components => ui}/popper/PopoverArrow.tsx (100%) rename packages/app/src/{components => ui}/popper/Popper.tsx (100%) rename packages/app/src/{components => ui}/popper/index.ts (100%) rename packages/app/src/{components => ui}/popper/interface.ts (100%) create mode 100644 packages/app/src/ui/shared/Container.tsx create mode 100644 packages/app/src/ui/tooltip/Tooltip.tsx rename packages/app/src/{components => ui}/tooltip/index.tsx (100%) diff --git a/packages/app/src/components/Header/index.tsx b/packages/app/src/components/Header/index.tsx index fb4df965db..59412e54cd 100644 --- a/packages/app/src/components/Header/index.tsx +++ b/packages/app/src/components/Header/index.tsx @@ -9,7 +9,7 @@ import { StyledMoreMenuItem, IconButton, } from './styles'; -import { Popover } from '@/components/popover'; +import { Popover } from '@/ui/popover'; import { useEditor } from '@/components/editor-provider'; import EditorModeSwitch from '@/components/editor-mode-switch'; import { EdgelessIcon, PaperIcon } from '../editor-mode-switch/icons'; diff --git a/packages/app/src/components/edgeless-toolbar/index.tsx b/packages/app/src/components/edgeless-toolbar/index.tsx index 61eed107c5..cf9eb7dda5 100644 --- a/packages/app/src/components/edgeless-toolbar/index.tsx +++ b/packages/app/src/components/edgeless-toolbar/index.tsx @@ -14,7 +14,7 @@ import { UndoIcon, RedoIcon, } from './icons'; -import { Tooltip } from '@/components/tooltip'; +import { Tooltip } from '@/ui/tooltip'; import Slide from '@mui/material/Slide'; import { useEditor } from '@/components/editor-provider'; diff --git a/packages/app/src/components/faq/index.tsx b/packages/app/src/components/faq/index.tsx index 96dddc4b45..e33a35f730 100644 --- a/packages/app/src/components/faq/index.tsx +++ b/packages/app/src/components/faq/index.tsx @@ -7,7 +7,7 @@ import { } from './style'; import { CloseIcon, ContactIcon, HelpIcon, KeyboardIcon } from './icons'; import Grow from '@mui/material/Grow'; -import { Tooltip } from '../tooltip'; +import { Tooltip } from '@/ui/tooltip'; import { useEditor } from '@/components/editor-provider'; import { useModal } from '@/components/global-modal-provider'; import { useTheme } from '@/styles'; diff --git a/packages/app/src/components/tooltip/Container.tsx b/packages/app/src/components/tooltip/Container.tsx deleted file mode 100644 index 9f1f19aeed..0000000000 --- a/packages/app/src/components/tooltip/Container.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { styled } from '@/styles'; -import type { ReactNode, CSSProperties } from 'react'; -import type { PopoverDirection } from './interface'; -export interface PopoverContainerProps { - children?: ReactNode; - /** - * The pop-up window points to. The pop-up window has three rounded corners, one is a right angle, and the right angle is the direction of the pop-up window. - */ - direction: PopoverDirection; - style?: CSSProperties; -} -const border_radius_map: Record = { - none: '10px', - 'left-top': '0 10px 10px 10px', - 'left-bottom': '10px 10px 10px 0', - 'right-top': '10px 0 10px 10px', - 'right-bottom': '10px 10px 0 10px', -}; - -export const PopoverContainer = styled('div')< - Pick ->(({ direction, style }) => { - const borderRadius = - border_radius_map[direction] || border_radius_map['left-top']; - return { - borderRadius: borderRadius, - ...style, - }; -}); diff --git a/packages/app/src/components/tooltip/Tooltip.tsx b/packages/app/src/components/tooltip/Tooltip.tsx deleted file mode 100644 index 6fabed3f6d..0000000000 --- a/packages/app/src/components/tooltip/Tooltip.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import { type CSSProperties, type PropsWithChildren } from 'react'; -import { PopoverContainer } from './Container'; -import { Popper, type PopperProps } from '../popper'; -import { useTheme } from '@/styles'; -import type { PopperPlacementType, TooltipProps } from '@mui/material'; -import type { PopoverDirection } from './interface'; -export const placementToContainerDirection: Record< - PopperPlacementType, - PopoverDirection -> = { - top: 'none', - 'top-start': 'left-bottom', - 'top-end': 'right-bottom', - right: 'none', - 'right-start': 'left-top', - 'right-end': 'left-bottom', - bottom: 'none', - 'bottom-start': 'left-top', - 'bottom-end': 'right-top', - left: 'none', - 'left-start': 'right-top', - 'left-end': 'right-bottom', - auto: 'none', - 'auto-start': 'none', - 'auto-end': 'none', -}; - -const useTooltipStyle = (): CSSProperties => { - const { theme, mode } = useTheme(); - return { - boxShadow: '1px 1px 4px rgba(0, 0, 0, 0.14)', - padding: '4px 12px', - backgroundColor: - mode === 'dark' - ? theme.colors.popoverBackground - : theme.colors.primaryColor, - color: '#fff', - fontSize: theme.font.xs, - }; -}; - -export const Tooltip = ( - props: PropsWithChildren> -) => { - const { content, placement = 'top-start' } = props; - const style = useTooltipStyle(); - // If there is no content, hide forever - const visibleProp = content ? {} : { visible: false }; - return ( - - {content} - - } - /> - ); -}; diff --git a/packages/app/src/components/tooltip/interface.ts b/packages/app/src/components/tooltip/interface.ts deleted file mode 100644 index 73e08c5ade..0000000000 --- a/packages/app/src/components/tooltip/interface.ts +++ /dev/null @@ -1,9 +0,0 @@ -export type TooltipProps = { - showArrow?: boolean; -}; -export type PopoverDirection = - | 'none' - | 'left-top' - | 'left-bottom' - | 'right-top' - | 'right-bottom'; diff --git a/packages/app/src/styles/theme.ts b/packages/app/src/styles/theme.ts index 2539466320..66f1fde90a 100644 --- a/packages/app/src/styles/theme.ts +++ b/packages/app/src/styles/theme.ts @@ -5,6 +5,7 @@ const basicFontFamily = 'apple-system, BlinkMacSystemFont,Helvetica Neue, Tahoma, PingFang SC, Microsoft Yahei, Arial,Hiragino Sans GB, sans-serif, Apple Color Emoji, Segoe UI Emoji,Segoe UI Symbol, Noto Color Emoji'; export const lightTheme: AffineTheme = { + mode: 'light', colors: { primaryColor: '#6880FF', @@ -43,14 +44,19 @@ export const lightTheme: AffineTheme = { '4px 4px 7px rgba(58, 76, 92, 0.04), -4px -4px 13px rgba(58, 76, 92, 0.02), 6px 6px 36px rgba(58, 76, 92, 0.06);', modal: '4px 4px 7px rgba(58, 76, 92, 0.04), -4px -4px 13px rgba(58, 76, 92, 0.02), 6px 6px 36px rgba(58, 76, 92, 0.06);', + tooltip: '1px 1px 4px rgba(0, 0, 0, 0.14)', }, space: { paragraph: '8px', }, + radius: { + popover: '10px', + }, }; export const darkTheme: AffineTheme = { ...lightTheme, + mode: 'dark', colors: { primaryColor: '#6880FF', @@ -77,6 +83,7 @@ export const darkTheme: AffineTheme = { '0px 1px 10px -6px rgba(24, 39, 75, 0.08), 0px 3px 16px -6px rgba(24, 39, 75, 0.04)', modal: '0px 1px 10px -6px rgba(24, 39, 75, 0.08), 0px 3px 16px -6px rgba(24, 39, 75, 0.04)', + tooltip: '1px 1px 4px rgba(0, 0, 0, 0.14)', }, }; @@ -108,6 +115,7 @@ export const globalThemeVariables: ( '--affine-modal-shadow': theme.shadow.modal, '--affine-popover-shadow': theme.shadow.popover, + '--affine-tooltip-shadow': theme.shadow.tooltip, '--affine-font-xs': theme.font.xs, // tiny '--affine-font-sm': theme.font.sm, // small @@ -121,5 +129,6 @@ export const globalThemeVariables: ( '--affine-font-family2': theme.font.family2, '--affine-paragraph-space': theme.space.paragraph, + '--affine-popover-radius': theme.radius.popover, }; }; diff --git a/packages/app/src/styles/types.ts b/packages/app/src/styles/types.ts index c8f33a0fd2..c37fc5eecf 100644 --- a/packages/app/src/styles/types.ts +++ b/packages/app/src/styles/types.ts @@ -12,6 +12,7 @@ export type ThemeProviderValue = { }; export interface AffineTheme { + mode: Theme; colors: { primaryColor: string; @@ -53,10 +54,14 @@ export interface AffineTheme { shadow: { modal: string; popover: string; + tooltip: string; }; space: { paragraph: string; }; + radius: { + popover: string; + }; } export interface AffineThemeCSSVariables { @@ -80,8 +85,9 @@ export interface AffineThemeCSSVariables { '--affine-selected-color': AffineTheme['colors']['selectedColor']; '--affine-border-color': AffineTheme['colors']['borderColor']; - '--affine-modal-shadow': AffineTheme['shadow']['popover']; - '--affine-popover-shadow': AffineTheme['shadow']['modal']; + '--affine-modal-shadow': AffineTheme['shadow']['modal']; + '--affine-popover-shadow': AffineTheme['shadow']['popover']; + '--affine-tooltip-shadow': AffineTheme['shadow']['tooltip']; '--affine-font-xs': AffineTheme['font']['xs']; // tiny '--affine-font-sm': AffineTheme['font']['sm']; // small @@ -95,6 +101,8 @@ export interface AffineThemeCSSVariables { '--affine-font-family2': AffineTheme['font']['family2']; '--affine-paragraph-space': AffineTheme['space']['paragraph']; + + '--affine-popover-radius': AffineTheme['radius']['popover']; } declare module '@emotion/react' { diff --git a/packages/app/src/components/popover/index.tsx b/packages/app/src/ui/popover/index.tsx similarity index 100% rename from packages/app/src/components/popover/index.tsx rename to packages/app/src/ui/popover/index.tsx diff --git a/packages/app/src/components/popper/PopoverArrow.tsx b/packages/app/src/ui/popper/PopoverArrow.tsx similarity index 100% rename from packages/app/src/components/popper/PopoverArrow.tsx rename to packages/app/src/ui/popper/PopoverArrow.tsx diff --git a/packages/app/src/components/popper/Popper.tsx b/packages/app/src/ui/popper/Popper.tsx similarity index 100% rename from packages/app/src/components/popper/Popper.tsx rename to packages/app/src/ui/popper/Popper.tsx diff --git a/packages/app/src/components/popper/index.ts b/packages/app/src/ui/popper/index.ts similarity index 100% rename from packages/app/src/components/popper/index.ts rename to packages/app/src/ui/popper/index.ts diff --git a/packages/app/src/components/popper/interface.ts b/packages/app/src/ui/popper/interface.ts similarity index 100% rename from packages/app/src/components/popper/interface.ts rename to packages/app/src/ui/popper/interface.ts diff --git a/packages/app/src/ui/shared/Container.tsx b/packages/app/src/ui/shared/Container.tsx new file mode 100644 index 0000000000..37a4cbc804 --- /dev/null +++ b/packages/app/src/ui/shared/Container.tsx @@ -0,0 +1,53 @@ +import { styled } from '@/styles'; +import { PopperPlacementType } from '@mui/material'; + +export type PopperDirection = + | 'none' + | 'left-top' + | 'left-bottom' + | 'right-top' + | 'right-bottom'; + +const getBorderRadius = (direction: PopperDirection, radius = '0') => { + const map: Record = { + none: `${radius}`, + 'left-top': `0 ${radius} ${radius} ${radius}`, + 'left-bottom': `${radius} ${radius} ${radius} 0`, + 'right-top': `${radius} 0 ${radius} ${radius}`, + 'right-bottom': `${radius} ${radius} 0 ${radius}`, + }; + return map[direction]; +}; + +export const placementToContainerDirection: Record< + PopperPlacementType, + PopperDirection +> = { + top: 'none', + 'top-start': 'left-bottom', + 'top-end': 'right-bottom', + right: 'none', + 'right-start': 'left-top', + 'right-end': 'left-bottom', + bottom: 'none', + 'bottom-start': 'left-top', + 'bottom-end': 'right-top', + left: 'none', + 'left-start': 'right-top', + 'left-end': 'right-bottom', + auto: 'none', + 'auto-start': 'none', + 'auto-end': 'none', +}; + +export const StyledPopperContainer = styled('div')<{ + placement?: PopperPlacementType; +}>(({ theme, placement = 'top' }) => { + const direction = placementToContainerDirection[placement]; + const borderRadius = getBorderRadius(direction, theme.radius.popover); + return { + borderRadius, + }; +}); + +export default StyledPopperContainer; diff --git a/packages/app/src/ui/tooltip/Tooltip.tsx b/packages/app/src/ui/tooltip/Tooltip.tsx new file mode 100644 index 0000000000..0bf92323ef --- /dev/null +++ b/packages/app/src/ui/tooltip/Tooltip.tsx @@ -0,0 +1,32 @@ +import { type PropsWithChildren } from 'react'; +import StyledPopperContainer from '../shared/Container'; +import { Popper, type PopperProps } from '../popper'; +import { styled } from '@/styles'; +import type { TooltipProps } from '@mui/material'; + +const StyledTooltip = styled(StyledPopperContainer)(({ theme }) => { + return { + boxShadow: theme.shadow.tooltip, + padding: '4px 12px', + backgroundColor: + theme.mode === 'dark' + ? theme.colors.popoverBackground + : theme.colors.primaryColor, + color: '#fff', + fontSize: theme.font.xs, + }; +}); + +export const Tooltip = ( + props: PropsWithChildren> +) => { + const { content, placement = 'top-start' } = props; + // If there is no content, hide forever + return content ? ( + {content}} + /> + ) : null; +}; diff --git a/packages/app/src/components/tooltip/index.tsx b/packages/app/src/ui/tooltip/index.tsx similarity index 100% rename from packages/app/src/components/tooltip/index.tsx rename to packages/app/src/ui/tooltip/index.tsx