From 1bf65461446c4e9ffd5398c4d37ee12624e7914b Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Mon, 31 Oct 2022 11:52:21 +0800 Subject: [PATCH] feat: add browser detect warning --- packages/app/src/components/Header/index.tsx | 31 +++++++-- packages/app/src/components/Header/styles.ts | 72 ++++++++++++++++---- packages/app/src/components/Header/utils.tsx | 33 +++++++++ packages/app/src/pages/index.tsx | 1 - packages/app/src/styles/theme.ts | 4 ++ packages/app/src/styles/types.ts | 3 +- 6 files changed, 124 insertions(+), 20 deletions(-) create mode 100644 packages/app/src/components/Header/utils.tsx diff --git a/packages/app/src/components/Header/index.tsx b/packages/app/src/components/Header/index.tsx index 59412e54cd..e40f7746b2 100644 --- a/packages/app/src/components/Header/index.tsx +++ b/packages/app/src/components/Header/index.tsx @@ -8,6 +8,9 @@ import { StyledHeaderRightSide, StyledMoreMenuItem, IconButton, + StyledHeaderContainer, + StyledBrowserWarning, + StyledCloseButton, } from './styles'; import { Popover } from '@/ui/popover'; import { useEditor } from '@/components/editor-provider'; @@ -15,7 +18,8 @@ import EditorModeSwitch from '@/components/editor-mode-switch'; import { EdgelessIcon, PaperIcon } from '../editor-mode-switch/icons'; import ThemeModeSwitch from '@/components/theme-mode-switch'; import { useModal } from '@/components/global-modal-provider'; - +import CloseIcon from '@mui/icons-material/Close'; +import { getWarningMessage, shouldShowWarning } from './utils'; const PopoverContent = () => { const { editor, mode, setMode } = useEditor(); return ( @@ -48,12 +52,25 @@ const PopoverContent = () => { ); }; +const BrowserWarning = ({ onClose }: { onClose: () => void }) => { + return ( + + {getWarningMessage()} + + + + + ); +}; + export const Header = () => { const [title, setTitle] = useState(''); const [isHover, setIsHover] = useState(false); const { contactModalHandler } = useModal(); const { editor } = useEditor(); + const [showWarning, setShowWarning] = useState(shouldShowWarning()); + useEffect(() => { if (editor) { setTitle(editor.model.title || ''); @@ -62,10 +79,14 @@ export const Header = () => { }); } }, [editor]); - return ( - <> - + + { + setShowWarning(false); + }} + /> + { contactModalHandler(true); @@ -104,6 +125,6 @@ export const Header = () => { - + ); }; diff --git a/packages/app/src/components/Header/styles.ts b/packages/app/src/components/Header/styles.ts index a4e4e8ee1e..afb25abfde 100644 --- a/packages/app/src/components/Header/styles.ts +++ b/packages/app/src/components/Header/styles.ts @@ -1,17 +1,29 @@ -import { displayFlex, styled } from '@/styles'; +import { absoluteCenter, displayFlex, styled } from '@/styles'; -export const StyledHeader = styled('div')({ - height: '60px', - width: '100vw', - ...displayFlex('space-between', 'center'), - background: 'var(--affine-page-background)', - transition: 'background-color 0.5s', - position: 'fixed', - left: '0', - top: '0', - padding: '0 22px', - zIndex: '10', -}); +export const StyledHeaderContainer = styled.div<{ hasWarning: boolean }>( + ({ hasWarning }) => { + return { + position: 'relative', + height: hasWarning ? '96px' : '60px', + }; + } +); +export const StyledHeader = styled.div<{ hasWarning: boolean }>( + ({ hasWarning, theme }) => { + return { + height: '60px', + width: '100vw', + ...displayFlex('space-between', 'center'), + background: 'var(--affine-page-background)', + transition: 'background-color 0.5s', + position: 'fixed', + left: '0', + top: hasWarning ? '36px' : '0', + padding: '0 22px', + zIndex: theme.zIndex.modal, + }; + } +); export const StyledTitle = styled('div')(({ theme }) => ({ width: '720px', @@ -83,3 +95,37 @@ export const IconButton = styled('div')(({ theme }) => { }, }; }); + +export const StyledBrowserWarning = styled.div(({ theme }) => { + return { + backgroundColor: theme.colors.warningBackground, + color: theme.colors.warningColor, + height: '36px', + width: '100vw', + fontSize: theme.font.sm, + position: 'fixed', + left: '0', + top: '0', + ...displayFlex('center', 'center'), + }; +}); + +export const StyledCloseButton = styled.div(({ theme }) => { + return { + width: '36px', + height: '36px', + color: theme.colors.iconColor, + cursor: 'pointer', + ...displayFlex('center', 'center'), + position: 'absolute', + right: '15px', + top: '0', + + svg: { + width: '15px', + height: '15px', + position: 'relative', + zIndex: 1, + }, + }; +}); diff --git a/packages/app/src/components/Header/utils.tsx b/packages/app/src/components/Header/utils.tsx new file mode 100644 index 0000000000..e791946a62 --- /dev/null +++ b/packages/app/src/components/Header/utils.tsx @@ -0,0 +1,33 @@ +// Inspire by https://stackoverflow.com/a/4900484/8415727 +const getChromeVersion = () => { + const raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./); + return raw ? parseInt(raw[2], 10) : false; +}; +const getIsChrome = () => { + return ( + /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor) + ); +}; +const minimumChromeVersion = 102; + +export const shouldShowWarning = () => { + return !getIsChrome() || getChromeVersion() < minimumChromeVersion; +}; + +export const getWarningMessage = () => { + if (!getIsChrome()) { + return ( + + We recommend the Chrome browser for optimal experience. + + ); + } + if (getChromeVersion() < minimumChromeVersion) { + return ( + + Please upgrade to the latest version of Chrome for the best experience. + + ); + } + return ''; +}; diff --git a/packages/app/src/pages/index.tsx b/packages/app/src/pages/index.tsx index 741282b51a..3f792e3a0c 100644 --- a/packages/app/src/pages/index.tsx +++ b/packages/app/src/pages/index.tsx @@ -16,7 +16,6 @@ const StyledEditorContainer = styled('div')(({ theme }) => { const StyledPage = styled('div')(({ theme }) => { return { height: '100vh', - paddingTop: '60px', backgroundColor: theme.colors.pageBackground, transition: 'background-color .5s', }; diff --git a/packages/app/src/styles/theme.ts b/packages/app/src/styles/theme.ts index d9f89716c6..0ce8d02764 100644 --- a/packages/app/src/styles/theme.ts +++ b/packages/app/src/styles/theme.ts @@ -19,6 +19,7 @@ export const getLightTheme = ( popoverBackground: '#fff', toolTipBackground: '#6880FF', codeBackground: '#f2f5f9', + warningBackground: '#FFF9C7', textColor: '#3A4C5C', edgelessTextColor: '#3A4C5C', @@ -33,6 +34,7 @@ export const getLightTheme = ( selectedColor: 'rgba(104, 128, 255, 0.1)', borderColor: '#D0D7E3', disableColor: '#C0C0C0', + warningColor: '#906616', }, font: { xs: '12px', @@ -81,6 +83,7 @@ export const getDarkTheme = ( ? lightTheme.colors.codeBackground : '#505662', toolTipBackground: '#1F2021', + warningBackground: '#FFF9C7', textColor: '#fff', edgelessTextColor: '#3A4C5C', @@ -96,6 +99,7 @@ export const getDarkTheme = ( selectedColor: 'rgba(104, 128, 255, 0.1)', borderColor: '#4D4C53', disableColor: '#4b4b4b', + warningColor: '#906616', }, shadow: { popover: diff --git a/packages/app/src/styles/types.ts b/packages/app/src/styles/types.ts index 8d4990f4f0..dc14599114 100644 --- a/packages/app/src/styles/types.ts +++ b/packages/app/src/styles/types.ts @@ -24,7 +24,7 @@ export interface AffineTheme { hoverBackground: string; codeBackground: string; toolTipBackground: string; - + warningBackground: string; // Use for the page`s text textColor: string; // Use for the editor`s text, because in edgeless mode text is different form other @@ -41,6 +41,7 @@ export interface AffineTheme { selectedColor: string; borderColor: string; disableColor: string; + warningColor: string; }; font: { xs: string; // tiny