feat: add browser detect warning

This commit is contained in:
QiShaoXuan 2022-10-31 11:52:21 +08:00
parent 3d7c075f30
commit 1bf6546144
6 changed files with 124 additions and 20 deletions

View File

@ -8,6 +8,9 @@ import {
StyledHeaderRightSide, StyledHeaderRightSide,
StyledMoreMenuItem, StyledMoreMenuItem,
IconButton, IconButton,
StyledHeaderContainer,
StyledBrowserWarning,
StyledCloseButton,
} from './styles'; } from './styles';
import { Popover } from '@/ui/popover'; import { Popover } from '@/ui/popover';
import { useEditor } from '@/components/editor-provider'; 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 { EdgelessIcon, PaperIcon } from '../editor-mode-switch/icons';
import ThemeModeSwitch from '@/components/theme-mode-switch'; import ThemeModeSwitch from '@/components/theme-mode-switch';
import { useModal } from '@/components/global-modal-provider'; import { useModal } from '@/components/global-modal-provider';
import CloseIcon from '@mui/icons-material/Close';
import { getWarningMessage, shouldShowWarning } from './utils';
const PopoverContent = () => { const PopoverContent = () => {
const { editor, mode, setMode } = useEditor(); const { editor, mode, setMode } = useEditor();
return ( return (
@ -48,12 +52,25 @@ const PopoverContent = () => {
); );
}; };
const BrowserWarning = ({ onClose }: { onClose: () => void }) => {
return (
<StyledBrowserWarning>
{getWarningMessage()}
<StyledCloseButton onClick={onClose}>
<CloseIcon />
</StyledCloseButton>
</StyledBrowserWarning>
);
};
export const Header = () => { export const Header = () => {
const [title, setTitle] = useState(''); const [title, setTitle] = useState('');
const [isHover, setIsHover] = useState(false); const [isHover, setIsHover] = useState(false);
const { contactModalHandler } = useModal(); const { contactModalHandler } = useModal();
const { editor } = useEditor(); const { editor } = useEditor();
const [showWarning, setShowWarning] = useState(shouldShowWarning());
useEffect(() => { useEffect(() => {
if (editor) { if (editor) {
setTitle(editor.model.title || ''); setTitle(editor.model.title || '');
@ -62,10 +79,14 @@ export const Header = () => {
}); });
} }
}, [editor]); }, [editor]);
return ( return (
<> <StyledHeaderContainer hasWarning={showWarning}>
<StyledHeader> <BrowserWarning
onClose={() => {
setShowWarning(false);
}}
/>
<StyledHeader hasWarning={showWarning}>
<StyledLogo <StyledLogo
onClick={() => { onClick={() => {
contactModalHandler(true); contactModalHandler(true);
@ -104,6 +125,6 @@ export const Header = () => {
</Popover> </Popover>
</StyledHeaderRightSide> </StyledHeaderRightSide>
</StyledHeader> </StyledHeader>
</> </StyledHeaderContainer>
); );
}; };

View File

@ -1,17 +1,29 @@
import { displayFlex, styled } from '@/styles'; import { absoluteCenter, displayFlex, styled } from '@/styles';
export const StyledHeader = styled('div')({ export const StyledHeaderContainer = styled.div<{ hasWarning: boolean }>(
height: '60px', ({ hasWarning }) => {
width: '100vw', return {
...displayFlex('space-between', 'center'), position: 'relative',
background: 'var(--affine-page-background)', height: hasWarning ? '96px' : '60px',
transition: 'background-color 0.5s', };
position: 'fixed', }
left: '0', );
top: '0', export const StyledHeader = styled.div<{ hasWarning: boolean }>(
padding: '0 22px', ({ hasWarning, theme }) => {
zIndex: '10', 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 }) => ({ export const StyledTitle = styled('div')(({ theme }) => ({
width: '720px', 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,
},
};
});

View File

@ -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 (
<span>
We recommend the <strong>Chrome</strong> browser for optimal experience.
</span>
);
}
if (getChromeVersion() < minimumChromeVersion) {
return (
<span>
Please upgrade to the latest version of Chrome for the best experience.
</span>
);
}
return '';
};

View File

@ -16,7 +16,6 @@ const StyledEditorContainer = styled('div')(({ theme }) => {
const StyledPage = styled('div')(({ theme }) => { const StyledPage = styled('div')(({ theme }) => {
return { return {
height: '100vh', height: '100vh',
paddingTop: '60px',
backgroundColor: theme.colors.pageBackground, backgroundColor: theme.colors.pageBackground,
transition: 'background-color .5s', transition: 'background-color .5s',
}; };

View File

@ -19,6 +19,7 @@ export const getLightTheme = (
popoverBackground: '#fff', popoverBackground: '#fff',
toolTipBackground: '#6880FF', toolTipBackground: '#6880FF',
codeBackground: '#f2f5f9', codeBackground: '#f2f5f9',
warningBackground: '#FFF9C7',
textColor: '#3A4C5C', textColor: '#3A4C5C',
edgelessTextColor: '#3A4C5C', edgelessTextColor: '#3A4C5C',
@ -33,6 +34,7 @@ export const getLightTheme = (
selectedColor: 'rgba(104, 128, 255, 0.1)', selectedColor: 'rgba(104, 128, 255, 0.1)',
borderColor: '#D0D7E3', borderColor: '#D0D7E3',
disableColor: '#C0C0C0', disableColor: '#C0C0C0',
warningColor: '#906616',
}, },
font: { font: {
xs: '12px', xs: '12px',
@ -81,6 +83,7 @@ export const getDarkTheme = (
? lightTheme.colors.codeBackground ? lightTheme.colors.codeBackground
: '#505662', : '#505662',
toolTipBackground: '#1F2021', toolTipBackground: '#1F2021',
warningBackground: '#FFF9C7',
textColor: '#fff', textColor: '#fff',
edgelessTextColor: '#3A4C5C', edgelessTextColor: '#3A4C5C',
@ -96,6 +99,7 @@ export const getDarkTheme = (
selectedColor: 'rgba(104, 128, 255, 0.1)', selectedColor: 'rgba(104, 128, 255, 0.1)',
borderColor: '#4D4C53', borderColor: '#4D4C53',
disableColor: '#4b4b4b', disableColor: '#4b4b4b',
warningColor: '#906616',
}, },
shadow: { shadow: {
popover: popover:

View File

@ -24,7 +24,7 @@ export interface AffineTheme {
hoverBackground: string; hoverBackground: string;
codeBackground: string; codeBackground: string;
toolTipBackground: string; toolTipBackground: string;
warningBackground: string;
// Use for the page`s text // Use for the page`s text
textColor: string; textColor: string;
// Use for the editor`s text, because in edgeless mode text is different form other // Use for the editor`s text, because in edgeless mode text is different form other
@ -41,6 +41,7 @@ export interface AffineTheme {
selectedColor: string; selectedColor: string;
borderColor: string; borderColor: string;
disableColor: string; disableColor: string;
warningColor: string;
}; };
font: { font: {
xs: string; // tiny xs: string; // tiny