self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-21 09:38:01 +02:00
Code Issues Releases Activity

Mobile: Add padding around beta text editor

Browse Source
This commit is contained in:
Laurent Cozic 2021-10-30 11:51:40 +01:00
parent 6393996694
commit 365e152758
4 changed files with 20 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.eslintignore
View File

@ -969,6 +969,9 @@ packages/lib/commands/synchronize.js.map
packages/lib/components/EncryptionConfigScreen/utils.d.ts packages/lib/components/EncryptionConfigScreen/utils.d.ts
packages/lib/components/EncryptionConfigScreen/utils.js packages/lib/components/EncryptionConfigScreen/utils.js
packages/lib/components/EncryptionConfigScreen/utils.js.map packages/lib/components/EncryptionConfigScreen/utils.js.map
packages/lib/database-driver-better-sqlite.d.ts
packages/lib/database-driver-better-sqlite.js
packages/lib/database-driver-better-sqlite.js.map
packages/lib/database.d.ts packages/lib/database.d.ts
packages/lib/database.js packages/lib/database.js
packages/lib/database.js.map packages/lib/database.js.map

3
.gitignore vendored
View File

@ -952,6 +952,9 @@ packages/lib/commands/synchronize.js.map
packages/lib/components/EncryptionConfigScreen/utils.d.ts packages/lib/components/EncryptionConfigScreen/utils.d.ts
packages/lib/components/EncryptionConfigScreen/utils.js packages/lib/components/EncryptionConfigScreen/utils.js
packages/lib/components/EncryptionConfigScreen/utils.js.map packages/lib/components/EncryptionConfigScreen/utils.js.map
packages/lib/database-driver-better-sqlite.d.ts
packages/lib/database-driver-better-sqlite.js
packages/lib/database-driver-better-sqlite.js.map
packages/lib/database.d.ts packages/lib/database.d.ts
packages/lib/database.js packages/lib/database.js
packages/lib/database.js.map packages/lib/database.js.map

12
packages/app-mobile/components/NoteEditor/CodeMirror.ts
View File

@ -32,6 +32,14 @@ function logMessage(...msg: any[]) {
postMessage('onLog', { value: msg }); postMessage('onLog', { value: msg });
} }
// For an example on how to customize the theme, see:
//
// https://github.com/codemirror/theme-one-dark/blob/main/src/one-dark.ts
//
// Use Safari developer tools to view the content of the CodeMirror iframe while
// the app is running. It seems that what appears as ".ͼ1" in the CSS is the
// equivalent of "&" in the theme object. So to target ".ͼ1.cm-focused", you'd
// use '&.cm-focused' in the theme.
const createTheme = (theme: any): Extension => { const createTheme = (theme: any): Extension => {
const baseTheme = EditorView.baseTheme({ const baseTheme = EditorView.baseTheme({
'&': { '&': {
@ -40,6 +48,10 @@ const createTheme = (theme: any): Extension => {
fontFamily: theme.fontFamily, fontFamily: theme.fontFamily,
fontSize: `${theme.fontSize}px`, fontSize: `${theme.fontSize}px`,
}, },
'&.cm-focused': {
outline: 'none',
},
}); });
const appearanceTheme = EditorView.theme({}, { dark: theme.appearance === 'dark' }); const appearanceTheme = EditorView.theme({}, { dark: theme.appearance === 'dark' });

4
packages/app-mobile/components/NoteEditor/NoteEditor.tsx
View File

@ -188,8 +188,8 @@ function useHtml(css: string): string {
${css} ${css}
</style> </style>
</head> </head>
<body style="margin:0; height:100vh; width:100vh; width:100vw; min-width:100vw;"> <body style="margin:0; height:100vh; width:100vh; width:100vw; min-width:100vw; box-sizing: border-box; padding: 10px;">
<div class="CodeMirror" style="height:100%;"></div> <div class="CodeMirror" style="height:100%;" autocapitalize="on"></div>
</body> </body>
</html> </html>
` `