toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-12-29 19:54:04 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: modify shortcuts modal

Browse Source
This commit is contained in:
QiShaoXuan 2022-10-24 15:29:21 +08:00
parent ded62eaee9
commit f30657f9e1
2 changed files with 33 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
packages/app/src/components/shortcuts-modal/config.ts
View File

@ -19,17 +19,17 @@ export const macKeyboardShortcuts = {
}; };
export const macMarkdownShortcuts = { export const macMarkdownShortcuts = {
Bold: '**Text** Space', Bold: '**Text** ',
Italic: '*Text* Space', Italic: '*Text* ',
Underline: '~Text~ Space', Underline: '~Text~ ',
Strikethrough: '~~Text~~ Space', Strikethrough: '~~Text~~ ',
'Inline code': '`Code` Space', 'Inline code': '`Code` ',
'Heading 1': '# Space', 'Heading 1': '# ',
'Heading 2': '## Space', 'Heading 2': '## ',
'Heading 3': '### Space', 'Heading 3': '### ',
'Heading 4': '#### Space', 'Heading 4': '#### ',
'Heading 5': '##### Space', 'Heading 5': '##### ',
'Heading 6': '###### Space', 'Heading 6': '###### ',
}; };
export const windowsKeyboardShortcuts = { export const windowsKeyboardShortcuts = {
@ -52,15 +52,15 @@ export const windowsKeyboardShortcuts = {
'Reduce indent': 'Shift + Tab', 'Reduce indent': 'Shift + Tab',
}; };
export const winMarkdownShortcuts = { export const winMarkdownShortcuts = {
Bold: '**Text** Space', Bold: '**Text** ',
Italic: '*Text* Space', Italic: '*Text* ',
Underline: '~Text~ Space', Underline: '~Text~ ',
Strikethrough: '~~Text~~ Space', Strikethrough: '~~Text~~ ',
'Inline code': '`Code` Space', 'Inline code': '`Code` ',
'Heading 1': '# Space', 'Heading 1': '# ',
'Heading 2': '## Space', 'Heading 2': '## ',
'Heading 3': '### Space', 'Heading 3': '### ',
'Heading 4': '#### Space', 'Heading 4': '#### ',
'Heading 5': '##### Space', 'Heading 5': '##### ',
'Heading 6': '###### Space', 'Heading 6': '###### ',
}; };

20
packages/app/src/components/shortcuts-modal/style.ts
View File

@ -1,8 +1,9 @@
import { displayFlex, styled } from '@/styles'; import { displayFlex, styled } from '@/styles';
export const StyledShortcutsModal = styled.div(({ theme }) => ({ export const StyledShortcutsModal = styled.div(({ theme }) => ({
width: '268px', width: '288px',
height: '66vh', height: '74vh',
paddingBottom: '28px',
backgroundColor: theme.colors.popoverBackground, backgroundColor: theme.colors.popoverBackground,
boxShadow: theme.shadow.popover, boxShadow: theme.shadow.popover,
color: theme.colors.popoverColor, color: theme.colors.popoverColor,
@ -17,8 +18,9 @@ export const StyledShortcutsModal = styled.div(({ theme }) => ({
})); }));
export const StyledTitle = styled.div(({ theme }) => ({ export const StyledTitle = styled.div(({ theme }) => ({
color: theme.colors.textColor, color: theme.colors.textColor,
fontWeight: '600', fontWeight: '500',
fontSize: theme.font.sm, fontSize: theme.font.sm,
height: '44px',
...displayFlex('center', 'center'), ...displayFlex('center', 'center'),
svg: { svg: {
width: '20px', width: '20px',
@ -27,17 +29,17 @@ export const StyledTitle = styled.div(({ theme }) => ({
}, },
})); }));
export const StyledSubTitle = styled.div(({ theme }) => ({ export const StyledSubTitle = styled.div(({ theme }) => ({
color: theme.colors.textColor, color: theme.colors.popoverColor,
fontWeight: '500', fontWeight: '500',
fontSize: '12px', fontSize: theme.font.sm,
height: '36px', height: '34px',
lineHeight: '36px', lineHeight: '36px',
marginTop: '28px', marginTop: '28px',
padding: '0 16px', padding: '0 16px',
})); }));
export const StyledModalHeader = styled.div(({ theme }) => ({ export const StyledModalHeader = styled.div(({ theme }) => ({
...displayFlex('space-between', 'center'), ...displayFlex('space-between', 'center'),
height: '36px', paddingTop: '8px 4px 0 4px',
width: '100%', width: '100%',
padding: '8px 16px 0 16px', padding: '8px 16px 0 16px',
position: 'sticky', position: 'sticky',
@ -49,9 +51,9 @@ export const StyledModalHeader = styled.div(({ theme }) => ({
})); }));
export const StyledListItem = styled.div(({ theme }) => ({ export const StyledListItem = styled.div(({ theme }) => ({
height: '32px', height: '34px',
...displayFlex('space-between', 'center'), ...displayFlex('space-between', 'center'),
fontSize: theme.font.xs, fontSize: theme.font.sm,
padding: '0 16px', padding: '0 16px',
})); }));